/* Metzoid Industries — shared stylesheet.
   Section 1 (below) is the client-approved design, extracted verbatim from
   the original one-page mockup. Do not change colours, spacing, or type
   scale in that section without the client's sign-off — it's the visual
   bible for the whole site.
   Section 2 (further down, clearly marked) holds everything added to fix
   the mobile nav, forms, icons, fonts, and animation. */

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

    :root {
      --red:        #CC1F1F;
      --red-dark:   #A31818;
      --red-light:  #E53535;
      --charcoal:   #1C1C1C;
      --dark:       #111111;
      --mid-dark:   #252525;
      --grey-bg:    #F5F5F5;
      --grey-line:  #E0E0E0;
      --text:       #1C1C1C;
      --text-sec:   #4A4A4A;
      --white:      #FFFFFF;
      --radius-sm:  4px;
      --radius-md:  6px;
      --radius-lg:  10px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background: #fff;
      font-size: 17px;
      line-height: 1.7;
      font-weight: 500;
    }

    /* ── TOP BAR ── */
    .top-bar {
      background: var(--dark);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0.45rem 2.5rem;
      gap: 24px;
    }
    .top-bar a {
      font-size: 14px;
      color: #aaa;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.15s;
    }
    .top-bar a:hover { color: #fff; }
    .top-bar i { font-size: 14px; }

    /* ── NAV ── */
    nav {
      background: var(--charcoal);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2.5rem;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 2px solid var(--red);
    }
    .nav-logo-wrap {
      display: flex;
      flex-direction: column;
      padding: 14px 0;
    }
    .nav-logo {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.03em;
      line-height: 1;
    }
    .nav-logo span { color: var(--red); }
    .nav-tagline {
      font-size: 14px;
      color: #888;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-top: 3px;
    }
    .nav-links {
      display: flex;
      list-style: none;
      height: 100%;
    }
    .nav-links li > a {
      display: block;
      padding: 24px 18px;
      font-size: 14px;
      font-weight: 500;
      color: #ccc;
      text-decoration: none;
      transition: color 0.15s, background 0.15s;
      letter-spacing: 0.02em;
    }
    .nav-links li > a:hover { color: #fff; background: rgba(255,255,255,0.04); }
    .nav-cta {
      background: var(--red) !important;
      color: #fff !important;
      margin-left: 8px;
    }
    .nav-cta:hover { background: var(--red-dark) !important; }

    /* ── HERO ── */
    .hero {
      background: var(--dark);
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 520px;
      position: relative;
      overflow: hidden;
    }
    .hero-left {
      padding: 5rem 3rem 5rem 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--red);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--red);
    }
    .hero h1 {
      font-size: 44px;
      font-weight: 700;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.25rem;
      letter-spacing: -0.5px;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--red);
    }
    .hero-sub {
      font-size: 15px;
      color: #aaa;
      max-width: 420px;
      line-height: 1.75;
      margin-bottom: 2rem;
    }
    .hero-cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .btn-primary {
      background: var(--red);
      color: #fff;
      border: none;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.15s;
      letter-spacing: 0.02em;
    }
    .btn-primary:hover { background: var(--red-dark); }
    .btn-outline {
      background: transparent;
      color: #ccc;
      border: 1px solid rgba(255,255,255,0.2);
      padding: 12px 28px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all 0.15s;
    }
    .btn-outline:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
    .hero-dealer {
      margin-top: 2.25rem;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-left: 3px solid var(--red);
      border-radius: var(--radius-md);
      padding: 10px 16px;
      font-size: 14px;
      color: #aaa;
    }
    .hero-dealer strong { color: #fff; font-weight: 600; }
    .hero-dealer i { color: var(--red); font-size: 16px; }
    .hero-right {
      position: relative;
      overflow: hidden;
    }
    .hero-right::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--dark) 0%, transparent 30%);
      z-index: 1;
    }
    .hero-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.6);
    }
    /* fallback gradient when image can't load */
    .hero-bg-fallback {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #333 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-bg-fallback .steel-icon {
      font-size: 120px;
      color: rgba(204,31,31,0.15);
    }

    /* ── STATS BAR ── */
    .stats-bar {
      background: var(--red);
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    .stat-item {
      padding: 1.4rem 3rem;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.2);
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.5px;
      line-height: 1;
    }
    .stat-label {
      font-size: 14px;
      color: rgba(255,255,255,0.75);
      margin-top: 5px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* ── SECTIONS ── */
    section { padding: 5rem 2.5rem; }
    .container { max-width: 1080px; margin: 0 auto; }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--red);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .section-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--red);
    }
    .section-title {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 0.75rem;
      letter-spacing: -0.3px;
      line-height: 1.2;
    }
    .section-sub {
      font-size: 17px;
      color: var(--text-sec);
      max-width: 68ch;
      line-height: 1.75;
      margin-bottom: 3rem;
    }

    /* ── ABOUT ── */
    .about-section { background: var(--grey-bg); }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .about-text p {
      font-size: 17px;
      color: var(--text-sec);
      line-height: 1.8;
      margin-bottom: 1rem;
      max-width: 68ch;
    }
    .about-text p:last-child { margin-bottom: 0; }
    .about-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      background: var(--grey-line);
      border: 1px solid var(--grey-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-top: 2rem;
    }
    .pillar {
      background: #fff;
      padding: 1.5rem 1rem;
      text-align: center;
    }
    .pillar-num {
      font-size: 14px;
      font-weight: 700;
      color: var(--red);
      letter-spacing: 0.1em;
      margin-bottom: 6px;
    }
    .pillar h4 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .pillar p {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.5;
      margin: 0 !important;
    }

    /* ── PRODUCTS ── */
    .products-section { background: #fff; }
    .products-intro {
      font-size: 17px;
      color: var(--text-sec);
      line-height: 1.75;
      margin-bottom: 3rem;
      max-width: 68ch;
    }
    .product-tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--grey-line);
      margin-bottom: 2.5rem;
      overflow-x: auto;
    }
    .tab-btn {
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-sec);
      background: none;
      border: none;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .tab-btn.active {
      color: var(--red);
      border-bottom-color: var(--red);
      font-weight: 600;
    }
    .tab-btn:hover:not(.active) { color: var(--text); }
    .tab-panel { display: none; }
    .tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
    .product-spec-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .product-spec-table thead tr {
      background: var(--charcoal);
      color: #fff;
    }
    .product-spec-table thead th {
      padding: 10px 16px;
      text-align: left;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
    }
    .product-spec-table tbody tr {
      border-bottom: 1px solid var(--grey-line);
    }
    .product-spec-table tbody tr:last-child { border-bottom: none; }
    .product-spec-table tbody tr:nth-child(even) { background: var(--grey-bg); }
    .product-spec-table td {
      padding: 11px 16px;
      color: var(--text);
    }
    .product-spec-table td:first-child { color: var(--text-sec); font-size: 14px; }
    .product-spec-table td:last-child { font-weight: 500; }
    .product-visual {
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--grey-bg);
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--grey-line);
    }
    .product-visual i { font-size: 64px; color: #ccc; }
    .product-desc {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.75;
      margin-bottom: 1.25rem;
    }

    /* ── MANUFACTURING ── */
    .mfg-section { background: var(--grey-bg); }
    .mfg-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: start;
    }
    .mfg-text p {
      font-size: 17px;
      color: var(--text-sec);
      line-height: 1.8;
      margin-bottom: 1rem;
      max-width: 68ch;
    }
    .spec-box {
      background: #fff;
      border: 1px solid var(--grey-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-top: 1.5rem;
    }
    .spec-box-header {
      background: var(--charcoal);
      color: #fff;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .spec-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid var(--grey-line);
      font-size: 14px;
    }
    .spec-row:last-child { border-bottom: none; }
    .spec-label { color: var(--text-sec); }
    .spec-value { font-weight: 600; color: var(--text); }
    .mfg-visual {
      background: var(--charcoal);
      border-radius: var(--radius-lg);
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .mfg-visual i { font-size: 72px; color: rgba(204,31,31,0.3); }
    .factory-address {
      background: var(--red);
      color: #fff;
      border-radius: var(--radius-md);
      padding: 1rem 1.25rem;
      font-size: 14px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-top: 1.25rem;
    }
    .factory-address i { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .factory-address strong { display: block; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-bottom: 3px; }

    /* ── WHY ── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .why-card {
      background: var(--grey-bg);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      border-top: 3px solid var(--red);
      transition: box-shadow 0.15s;
    }
    .why-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    .why-icon {
      width: 44px;
      height: 44px;
      background: rgba(204,31,31,0.1);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 22px;
      margin-bottom: 1rem;
    }
    .why-card h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .why-card p {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.65;
    }

    /* ── CUSTOMERS ── */
    .customers-section { background: var(--charcoal); }
    .customers-section .section-title { color: #fff; }
    .customers-section .section-sub { color: #aaa; }
    .customers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }
    .customer-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-md);
      padding: 1.1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.15s;
    }
    .customer-card:hover { background: rgba(255,255,255,0.09); }
    .customer-card i { color: var(--red); font-size: 18px; flex-shrink: 0; }
    .customer-card span { font-size: 14px; color: #ddd; font-weight: 500; }

    /* ── CONTACT ── */
    .contact-section {
      background: var(--dark);
    }
    .contact-section .section-title { color: #fff; }
    .contact-section .section-sub { color: #aaa; }
    .contact-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-field label {
      font-size: 14px;
      font-weight: 500;
      color: #aaa;
      letter-spacing: 0.04em;
    }
    .form-field input,
    .form-field textarea,
    .form-field select {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-md);
      color: #fff;
      padding: 10px 14px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: border-color 0.15s;
    }
    .form-field input::placeholder,
    .form-field textarea::placeholder { color: #555; }
    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus { border-color: var(--red); }
    .form-field textarea { resize: vertical; min-height: 110px; }
    .form-field select option { background: var(--charcoal); }
    .contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
    .contact-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .contact-icon {
      width: 40px;
      height: 40px;
      background: rgba(204,31,31,0.15);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 20px;
      flex-shrink: 0;
    }
    .contact-item-text label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 3px;
    }
    .contact-item-text span {
      font-size: 14px;
      color: #ddd;
    }

    /* ── FOOTER ── */
    footer {
      background: #000;
      color: #555;
      padding: 1.25rem 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 14px;
    }
    .footer-logo {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.03em;
    }
    .footer-logo span { color: var(--red); }
    .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 860px) {
      .hero { grid-template-columns: 1fr; }
      .hero-right { display: none; }
      .about-grid,
      .mfg-grid,
      .contact-inner { grid-template-columns: 1fr; gap: 2rem; }
      .why-grid { grid-template-columns: 1fr 1fr; }
      .tab-panel.active { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      nav { padding: 0 1.25rem; }
      .nav-links { display: none; }
      .top-bar { display: none; }
      .hero-left { padding: 3rem 1.25rem; }
      .hero h1 { font-size: 30px; }
      section { padding: 3.5rem 1.25rem; }
      .stat-item { padding: 1.1rem 1.5rem; }
      .why-grid { grid-template-columns: 1fr; }
      footer { flex-direction: column; align-items: flex-start; }
      .footer-right { align-items: flex-start; }
      .form-row { grid-template-columns: 1fr; }
      .about-pillars { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ══════════════════════════════════════════════════════════════
   ADDITIONS — everything below this line was added on top of the
   original design. The rules above are the client-approved design
   extracted verbatim. Do not restyle existing selectors here;
   add new ones instead so the two blocks stay easy to diff.
   ══════════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONT ── */
/* The file itself is a full variable font (checked its fvar table: wght
   100-900) — only the declared range here was ever narrow. Widened to cover
   the 500 and 800 weights this revision adds, with no new font file needed. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

/* ── ICON SPRITE ── */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.125em;
}
i.ti,
[class^="ti-"] {
  /* legacy icon-font classes no longer exist; keep selector inert */
  font-style: normal;
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ── LINK COLOURS (:link/:visited/:hover explicit everywhere) ──
   Bug fix: several bare <a> tags across the site (product card "Read more"
   links, inline prose links like "Our Full Story →") had no colour rule at
   all, so they fell through to the browser's default blue/purple —
   including the classic purple :visited state showing through once a link
   had been clicked. This base rule gives every unstyled link an explicit
   colour in all three states; components that already have their own link
   colour (nav, footer, breadcrumb, buttons) win via higher specificity and
   get their own explicit :visited rule added alongside them below, so nothing
   site-wide is left to a UA default. */
a {
  color: var(--red);
  text-decoration: none;
}
a:visited { color: var(--red); }
/* Buttons used as <a> (Request a Quote, Go to Contact Page, etc.) already
   win on colour via class specificity regardless of visited state — this is
   belt-and-braces, matching the instruction to make every state explicit
   rather than relying on that cascade reasoning holding forever. */
.btn-primary:visited { color: #fff; }
.btn-outline:visited { color: #ccc; }
.btn-secondary:visited { color: #fff; }
.nav-cta:visited { color: #fff !important; }
a:hover { color: var(--red-dark); text-decoration: underline; }

/* ── FOCUS VISIBLE ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.contact-section a:focus-visible,
.contact-section button:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}
/* nav is now a light surface (see "NAV → LIGHT" below) — it uses the
   default red outline from the generic a/button rule above, not a white one. */
/* The verbatim design sets `.form-field input/textarea/select { outline: none; }`
   with no replacement (specificity 0,1,1). It beats the generic focus-visible
   rule above on outline-style, so form fields need a selector specific enough
   to win outright rather than just overriding outline-color. */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* perforated-sheets.html: two rows of text beside a photo (description +
   perforated photo, applications + factory photo). The short text is much
   shorter than a 4:3 photo, so at the default top alignment the left
   column ends ~200px early and looks unfinished. Photos are 3:2 (shorter)
   and the text is centred against them. Scoped by .mfg-grid-center —
   the homepage teaser's .mfg-grid keeps its top alignment. Stacks to a
   single column below 860px via the existing .mfg-grid rule. */
.mfg-grid-center { align-items: center; }
.mfg-grid-center > .media-slot { aspect-ratio: 3 / 2; }

/* Product pages have three "why buy" cards. They were forced to three
   columns by an inline style (`grid-template-columns:repeat(3,1fr)`), which
   beats the stylesheet's responsive rules, so on a phone the cards never
   collapsed: at 390px they overflowed the page by 85-114px. Now a class,
   so the same breakpoints that collapse every other grid apply. One column
   at 860px and below rather than the 2-up the base rule gives, since three
   cards in two columns would orphan the third. */
.why-grid.why-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .why-grid.why-grid-3 { grid-template-columns: 1fr; }
}

/* ── NAV LOGO SIZE (client feedback) ──
   Wordmark read too small next to the tagline and the header's own
   height. Sized up, gap to the tagline tightened. */
.nav-logo { font-size: 26px; }
.nav-tagline { margin-top: 1px; }

/* ── BRAND MARK SIZE (client feedback, round 2) ──
   The mark itself was still small next to the wordmark. Height set to
   ~match the full height of the wordmark + tagline stack (measured
   live: that stack is ~51px tall), width left auto so the SVG's own
   1080:875 aspect ratio scales it — never set both dimensions on a
   fixed-ratio asset. Now that the mark spans roughly both text lines
   instead of sitting next to just the first one, centring the pair
   (the anchor's own inline `align-items:center`) is the right call,
   not baseline alignment against a single line.
   Footer has no tagline directly under its wordmark row (there's a
   paragraph of body copy between .footer-logo and .footer-tagline, so
   matching that literal gap would be absurd) — sized instead for the
   same *proportional* jump as the header mark got, large enough to read
   as part of the lockup next to one line of "METZOID. INDUSTRIES"
   without dwarfing it. */
.nav-logo-wrap .brand-mark {
  height: 58px;
  width: auto;
}
.footer-logo .brand-mark {
  height: 40px;
  width: auto;
}

/* Client feedback: at 320-390px, the enlarged wordmark, the tagline, the
   Brochure button and the hamburger genuinely don't fit on one line
   (measured: logo-wrap + nav-right ≈ 360-460px of content against ~280px
   available at 320px — the tagline alone is ~230px of that). Client's own
   suggested fallback: drop the tagline, keep the wordmark large, and the
   Brochure button collapses to its arrow only, the same "icon-only"
   treatment the old phone button used at this breakpoint. */
@media (max-width: 640px) {
  .nav-tagline { display: none; }
  .nav-right { gap: 12px; }
  .nav-brochure-text { display: none; }
  .nav-brochure { padding: 8px 10px; }
}
/* Client feedback, round 2: the bigger mark (50px tall header / 40px
   footer) reopened the 320px overflow the tagline/brochure fix had just
   closed — measured 24px over at 316px real width even with the tagline
   and Brochure text already hidden. Client's own priority order if
   something has to give: tagline first (done above), then the wordmark
   text, never the mark. Shrinking "METZOID." back to its pre-this-round
   20px (bigger mark stays full size) recovers ~31px, comfortably clear.
   Round 3: mark grew again (58px) to better match the full text block —
   re-measured a 3px overflow at 316px, closed by trimming the gap
   between mark and wordmark rather than touching either's size. */
@media (max-width: 640px) {
  .nav-logo { font-size: 20px; }
  .nav-logo-wrap > a { gap: 10px !important; }
}

/* ── NAV RIGHT-SIDE GROUP (Revision 7, revised) ──
   Top utility bar removed (client request). .nav-right groups nav-links +
   the brochure button + the mobile toggle as the second flex child of
   <nav>, preserving the verbatim `nav { justify-content: space-between }`
   rule (logo far left, everything else far right) without editing it in
   place. The phone number originally lived here too (as a call button) but
   was removed on client request — phone numbers stay on the contact page,
   footer, and homepage contact strip. "Brochure ↓" moved out of the
   nav-links list into this same button slot. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Outlined, not solid red — the verbatim design uses one solid-red accent
   in the nav (.nav-cta, "Get a Quote"); a second solid-red pill right next
   to it competed with that hierarchy instead of sitting quietly beside it. */
.nav-brochure {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--grey-line);
  background: transparent;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.nav-brochure:visited { color: var(--charcoal); }
.nav-brochure:hover { border-color: var(--red); color: var(--red); }

/* ── NAV → LIGHT (Revision 2) ──
   DEVIATION FROM THE CLIENT-APPROVED MOCKUP: the original design has a dark
   charcoal nav. Revision 2 moved every other section from dark to light
   surfaces and asked that the nav be reconsidered so it isn't the only dark
   band left. This overrides the verbatim `nav { background: var(--charcoal);
   ... }` rule rather than editing it in place, so the original is still
   readable as a diff. Reported to the client as a judgement call, not a
   silent change — see revision notes. */
nav {
  background: #fff;
  border-bottom: 2px solid var(--red);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease;
}
nav.scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.nav-logo { color: var(--charcoal); }
.nav-tagline { color: #666; }
.nav-links li > a { color: var(--charcoal); }
.nav-links li > a:visited { color: var(--charcoal); }
.nav-links li > a:hover { color: var(--red); background: rgba(0,0,0,0.04); }
/* .nav-cta keeps its red background from the verbatim rule — already correct
   on a light nav, no override needed. */

/* ── MOBILE NAV ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--charcoal);
  padding: 10px;
  cursor: pointer;
}
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* BUG FIX: the full nav (logo + tagline + six links + CTA + Brochure)
   needs ~994px of width, but the hamburger only took over at 640px, so
   every width from 641 to 993px overflowed the page sideways — by up to
   353px at 641px, with the Brochure button running off the right edge.
   The collapsed menu now applies up to 1000px, which covers every width
   the full nav can't fit. (The verbatim design only collapsed at 640px;
   this block is an addition, so the breakpoint is changed here rather
   than in the verbatim rules.) */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    height: auto;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    border-bottom: 2px solid var(--red);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: max-height 0.25s ease;
  }
  /* visibility:hidden (not just the collapsed height) keeps the closed menu's
     links out of the Tab order — otherwise a keyboard user tabs through five
     invisible links before ever reaching the page content. */
  .nav-links.open { max-height: 420px; visibility: visible; }
  .nav-links li { width: 100%; }
  .nav-links li > a {
    padding: 16px 1.25rem;
    border-top: 1px solid var(--grey-line);
  }
  .nav-cta { margin-left: 0 !important; }
}

/* ── WHATSAPP FLOATING BUTTON ── */
.whatsapp-float {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 90;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  text-decoration: none;
}
.whatsapp-float .icon { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .whatsapp-float { display: flex; }
}

/* ── BREADCRUMB (inner pages) ── */
.breadcrumb {
  /* The verbatim bare `nav { ... }` rule (position:sticky; top:0; z-index:100)
     targets every <nav> element, breadcrumb included, since <nav> is also
     the correct semantic tag for a breadcrumb trail. Without this override
     the breadcrumb sticks to the top independently of the real site nav —
     two separate sticky bars, each with their own red border, stacking as
     you scroll. This neutralises just the positioning, not the verbatim
     rule itself. */
  position: static;
  background: var(--grey-bg);
  border-bottom: 1px solid var(--grey-line);
  padding: 0.9rem 2.5rem;
  font-size: 14px;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 1080px;
  margin: 0 auto;
}
.breadcrumb a { color: var(--text-sec); text-decoration: none; }
.breadcrumb a:visited { color: var(--text-sec); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb li[aria-current] { color: var(--text); font-weight: 500; }
.breadcrumb .icon { width: 12px; height: 12px; color: #bbb; }
@media (max-width: 640px) { .breadcrumb { padding: 0.75rem 1.25rem; } }

/* ── MEDIA SLOT (image with graceful fallback) ──
   ONE pattern, used by every image+fallback pair on the site (product
   photos, homepage/product-grid cards, the about-page banner — anything
   that used to be its own near-duplicate .media-banner is now this same
   component with a sizing modifier, see .cap-banner below).

   BUG FIX (client-reported twice — gi-skin-pass-coils, then the about
   banner): the fallback icon showed through/on top of a successfully
   loaded photo. Root cause was two-fold: (1) the img element wasn't
   always positioned at the same stacking level as the fallback (the
   about-page banner's img had no `position` at all, so the fallback —
   always position:absolute — painted above it regardless of z-index or
   load state), and (2) some images were simply missing the onload
   handler that hides the fallback, so it never got removed at all.

   Fixed by relying on DOM order instead of z-index arithmetic: the
   fallback markup comes FIRST in the HTML, the image SECOND. Both are
   position:absolute + inset:0 with no z-index set on either — among
   positioned elements at the same stacking level, the later one in DOM
   order paints on top, so the image (last child) is always visually
   above the fallback (first child), with nothing to get wrong. The
   image's onload hides its *previous* sibling — `hidden` (display:none),
   not opacity/visibility, so a loaded image's fallback leaves the layout
   entirely rather than sitting invisibly-but-still-there underneath. */
.media-slot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grey-bg);
  aspect-ratio: 4/3;
  border: 1px solid var(--grey-line);
}
.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
.media-fallback .icon { width: 64px; height: 64px; }
.media-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Revision 2: the dark fallback variant is retired — every media slot is
   now the same light grey with a muted icon, so a perforated-sheets card
   no longer reads as a different, heavier component than its neighbours.
   The "dark" class is harmless if it lingers on an element (no rule targets
   it any more) but new markup shouldn't add it — see revision notes. */

/* ── TAB PANEL: JS toggles [hidden] instead of a class now ── */
.tab-panel[hidden] { display: none; }
.tab-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .tab-panel { grid-template-columns: 1fr; } }

/* ── FORM: honeypot, validation, status ── */
/* Visually-hidden but still announced by screen readers — used for the
   footer quick-enquiry form's labels (placeholder text alone isn't an
   accessible label) and reused for the honeypot field below. Clips to a
   1px box instead of shoving the element off-screen with a large negative
   offset, which in some browsers can quietly widen the page's scrollable
   area. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.field-error {
  font-size: 14px;
  color: var(--red-light);
  min-height: 14px;
}
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
  border-color: var(--red-light);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); }
.btn-secondary .icon { width: 16px; height: 16px; }
.form-status {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}
.form-status.success { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.35); color: #9df0bb; }
.form-status.error { background: rgba(204,31,31,0.12); border: 1px solid rgba(204,31,31,0.4); color: #ffb3b3; }
.form-status[hidden] { display: none; }
.form-status a { color: inherit; font-weight: 600; }

/* ── ANIMATIONS ── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow, .hero h1, .hero-sub, .hero-cta {
  animation: rise-in 0.4s ease both;
}
.hero-eyebrow { animation-delay: 0s; }
.hero h1      { animation-delay: 0.08s; }
.hero-sub     { animation-delay: 0.16s; }
.hero-cta     { animation-delay: 0.24s; }

@keyframes hero-drift {
  0%   { transform: scale(1.06) translate(0, 0); }
  50%  { transform: scale(1.11) translate(-1.2%, 1%); }
  100% { transform: scale(1.06) translate(0, 0); }
}
/* Up to 4 hero images stack absolutely and crossfade. The first image never
   gets a fade keyframe — it stays opacity:1 permanently, so if images 2-4
   fail their onerror and get removed, image 1 is simply always visible
   and static (this falls out of the stacking naturally, no JS decision
   needed). Images 2-4 fade in over whichever is below them, each visible
   for roughly 5s of a 20s cycle (quarters, same proportions as the
   original 3-image thirds). */
.hero-right .hero-bg {
  position: absolute;
  inset: 0;
}
.hero-right .hero-bg.loaded {
  animation: hero-drift 20s ease-in-out infinite;
}
@keyframes hero-fade-2 {
  0%, 25%             { opacity: 0; }
  31.25%, 43.75%      { opacity: 1; }
  50%, 100%           { opacity: 0; }
}
@keyframes hero-fade-3 {
  0%, 50%             { opacity: 0; }
  56.25%, 68.75%      { opacity: 1; }
  75%, 100%           { opacity: 0; }
}
@keyframes hero-fade-4 {
  0%, 75%             { opacity: 0; }
  81.25%, 93.75%      { opacity: 1; }
  100%                { opacity: 0; }
}
.hero-right .hero-bg.loaded:nth-of-type(2) { animation-name: hero-drift, hero-fade-2; }
.hero-right .hero-bg.loaded:nth-of-type(3) { animation-name: hero-drift, hero-fade-3; }
.hero-right .hero-bg.loaded:nth-of-type(4) { animation-name: hero-drift, hero-fade-4; }

/* BUG FIX (client-reported): "no images on the homepage on mobile". Root
   cause was the verbatim `@media (max-width: 860px) { .hero-right {
   display: none; } }` rule — it hides the entire crossfade (all 4 images
   plus the fallback icon), not just resizes it, so nothing in the hero
   could ever show below 860px regardless of image load state, aspect
   ratio, or animation opacity. Not touching the verbatim rule in place;
   this override wins on source order at equal specificity. .hero-right
   has no intrinsic height of its own on mobile once it's a stacked grid
   row (its only children are position:absolute), so it needs an explicit
   aspect-ratio here or it would re-collapse to 0px tall. */
@media (max-width: 860px) {
  .hero-right {
    display: block;
    aspect-ratio: 16/9;
  }
}

.stat-num, .stat-label { opacity: 0; }
.stat-num.counted, .stat-label.counted { opacity: 1; transition: opacity 0.4s ease; }

/* Client feedback: the four stats stacked one-per-row on mobile (each
   item's horizontal padding left too little room for two per line at
   phone widths). 2x2 grid instead, with dividers reconstructed as
   explicit borders since the verbatim single-row version relied on
   `:last-child` for "no border on the end" — that logic doesn't hold
   once there are two ends (right column, bottom row). Smaller font so
   the longest label ("Authorised Distributor") wraps at a word boundary
   within its half-width cell instead of overflowing. */
@media (max-width: 640px) {
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .stat-item {
    padding: 1.1rem 0.75rem;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 11px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero h1, .hero-sub, .hero-cta { animation: none; opacity: 1; }
  .hero-right .hero-bg.loaded,
  .hero-right .hero-bg.loaded:nth-of-type(2),
  .hero-right .hero-bg.loaded:nth-of-type(3),
  .hero-right .hero-bg.loaded:nth-of-type(4) { animation: none; opacity: 1; }
  .stat-num, .stat-label { opacity: 1; transition: none; }
}

/* ── PRIVACY / LEGAL PAGE ── */
.legal-section h2 { font-size: 20px; margin: 2rem 0 0.75rem; }
.legal-section h2:first-child { margin-top: 0; }
.legal-section p, .legal-section li { font-size: 17px; color: var(--text-sec); line-height: 1.8; margin-bottom: 0.75rem; max-width: 68ch; }
.legal-section ul { padding-left: 1.25rem; }

/* ── CONTACT PAGE EXTRAS ── */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  aspect-ratio: 16/10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── LOGO CARD (mill logos + clientele logos) ──
   Same graceful-degrade pattern as .media-slot: an <img> that removes
   itself on error, with styled text sitting underneath as the fallback.
   Every card is the same fixed height regardless of the logo's own aspect
   ratio (a wide logo like Lloyds Metals and a square one like Haier need
   to look balanced next to each other) — object-fit:contain inside a fixed
   box does that without cropping either. No greyscale/opacity filter: real
   client logos are brand-coloured (Bajaj, Haier, Fybros), and a filter
   turns them into grey squares instead of muting them tastefully. */
.logo-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  height: 84px;
}
.logo-card img {
  /* Absolutely positioned so it paints over the fallback text once loaded
     (same trick as .media-slot) — without this, a loaded image and the
     fallback name would render side by side as flex siblings instead of
     one replacing the other. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 1.25rem 1.5rem;
  object-fit: contain;
}
/* Sterling and Wilson and Lauritz Knudsen are very wide wordmarks — under
   object-fit:contain the standard padding left them too small to read.
   Tighter padding, just for these two, uses more of the same box. */
.logo-card img[src*="sterling-and-wilson"],
.logo-card img[src*="lauritz-knudsen"] {
  padding: 0.5rem 0.75rem;
}
.logo-card .logo-fallback {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sec);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ── AUTHORISED DEALER BAND (Revision 2: rebuilt as two columns) ──
   Was one AM/NS card centred above a 5-up grid of equally-weighted cards —
   read as a mistake, and turned six empty boxes into the section's focus
   while no logo files exist yet. Rebuilt so the AM/NS claim sits with the
   text that explains it (a credential, not a tile in a grid), and the five
   other makes are visually subordinate: a plain muted row, no card chrome,
   so the section still reads as finished with zero logo files supplied. */
.dealer-band { background: var(--grey-bg); }
/* Client layout: row 1 is the claim (left) beside the makes grid (right),
   top-aligned; row 2 is the AM/NS credential, centred under both at its
   own natural size (justify-self, not stretched to the full width). DOM
   order is left, right, credential, so the single-column mobile order
   (text, makes, credential) falls out with no `order` tricks. */
.dealer-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}
.dealer-band-grid > .amns-credential {
  grid-column: 1 / -1;
  justify-self: center;
}
@media (max-width: 860px) {
  .dealer-band-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* The two column labels — "Authorised Distributor" (left, with its red
   dash) and "Makes We Supply" (right) — must read as one row of labels.
   They were 7px apart vertically: .section-eyebrow is inline-flex, so it
   sits on a line box with strut space above it, while the right label is
   a plain block; weight, tracking and bottom margin also differed. Fixed
   structurally rather than nudged: both are block-level flex rows with
   identical type metrics, no margin-top, and the same bottom margin, and
   the grid row is align-items:start, so the tops, the text baselines and
   the start of the heading / makes grid below all coincide. The dash is a
   2px flex item centred on the line, so it adds no height the right label
   lacks. Colour is the only intentional difference. */
.dealer-band-left .section-eyebrow,
.dealer-band-right .mill-secondary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0.75rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.dealer-band-left .section-sub { margin-bottom: 0; }

.amns-credential {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 2px solid var(--red);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.5rem 1.75rem;
}
.amns-credential-mark {
  /* Same stacking trick as .logo-card: the img is absolutely positioned so
     it paints over (and hides) the fallback text once it loads, instead of
     both rendering side by side. */
  position: relative;
  min-height: 36px;
  width: 100%;
}
.amns-credential-mark img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}
.amns-credential-fallback {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.2px;
}
.amns-credential-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mill-secondary-label {
  color: var(--text-sec);
}
/* Client feedback: seven makes (AM/NS India + six mills) is an odd count,
   so any fixed-column grid always strands one item alone on the last row.
   flex-wrap + justify-content:center (the same pattern already used for
   .clientele-grid, which has the identical odd-count problem) centres
   whichever row is short instead of leaving it flush left, and does so
   automatically at every width — no breakpoint-specific column math to
   maintain. Each .mill-mark is also now a fixed-size padded tile (same
   shape as .logo-card) instead of bare text-plus-icon, so the gap between
   entries reads as even regardless of how long the name is — "JSW" and
   "AM/NS India" occupy the same size tile. */
.mill-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
/* Equal-width tiles, exactly 4 per row (2 on mobile, below): the width is
   a fixed share of the strip rather than content-sized, so with seven
   makes the rows come out 4 + 3 and justify-content:center centres the
   short one. Names wrap inside the tile if a narrow column ever needs it. */
.mill-mark {
  position: relative;
  flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
  min-width: 0;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0.5rem;
  text-align: center;
}
@media (max-width: 860px) {
  .mill-mark { flex-basis: calc((100% - 0.75rem) / 2); }
}
.mill-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.75rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
}
.mill-mark-fallback {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-sec);
  letter-spacing: 0.02em;
}

/* Client feedback: centre the AM/NS credential box under itself once the
   two-column band stacks (same 860px breakpoint the grid itself stacks
   at). display:flex (not the desktop inline-flex) makes it a block-level
   box sized to its own content, so margin:auto can centre it. */
@media (max-width: 860px) {
  .amns-credential {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── CLIENTELE PAGE ── */
/* Flexbox + justify-content:center rather than CSS Grid on purpose: with a
   14-item list, a fixed column count leaves an orphaned, left-aligned pair
   on the last row at some breakpoints. Centering every row (not just
   detecting the last one) fixes that and keeps working if the vendor list
   ever grows or shrinks — no magic divisor to maintain. */
.clientele-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.clientele-grid .logo-card { flex: 1 1 150px; max-width: 200px; }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 1.5rem;
}
@media (max-width: 860px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .industries-grid { grid-template-columns: 1fr; } }

/* ── PRODUCT TEASER CARDS (homepage) ── */
/* Revision 7: 6 traded products (was 4) — perforated sheets stays in its own
   full-width feature card below (different category: manufactured in-house,
   not traded — see .product-feature-card). 3 columns on desktop, 2 on
   tablet, 1 on mobile: 6 divides evenly by 3, 2, and 1, so there's never an
   orphan on its own row at any breakpoint. */
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .product-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .product-card-grid { grid-template-columns: 1fr; } }

.product-feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-line);
  margin-top: 20px;
}
.product-feature-card .media-slot {
  /* Revision 7: client asked to reduce the card's height by ~60-70% by
     shrinking the image area, not the text column. `height:100%` alone
     doesn't do that — against an indefinite grid-row height it resolves to
     auto, and the <img>'s own intrinsic aspect ratio (portrait, ~741px tall
     at this column's width) was what actually set the row height. Giving
     the slot its own aspect-ratio makes it a definite box the grid can
     size the row from, independent of whatever image happens to load. */
  aspect-ratio: 9/8;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border: none;
}
.product-feature-card-body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-feature-card-body h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.product-feature-card-body p { font-size: 16px; color: var(--text-sec); line-height: 1.7; margin-bottom: 14px; }
@media (max-width: 860px) {
  .product-feature-card { grid-template-columns: 1fr; }
  .product-feature-card .media-slot { aspect-ratio: 25/9; min-height: 0; }
}
.product-card {
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-line);
  transition: box-shadow 0.15s;
}
.product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.product-card .media-slot { border-radius: 0; border: none; aspect-ratio: 4/3; }
.product-card-body { padding: 1.25rem; }
.product-card-body h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.product-card-body p { font-size: 14px; color: var(--text-sec); line-height: 1.6; margin-bottom: 10px; }

/* ── CONTACT STRIP (homepage teaser) ── */
.contact-strip {
  background: var(--grey-bg);
  padding: 3rem 2.5rem;
  text-align: center;
}
.contact-strip .section-eyebrow,
.contact-strip .section-title { justify-content: center; text-align: center; }
.contact-strip .section-sub { max-width: 46ch; margin: 0 auto; }
.contact-strip-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* Three equal-height buttons: one solid (primary), two outlined. All share
   the same border width — the solid one has a red border too — so the
   heights match exactly rather than by coincidence. The existing
   .btn-secondary is a dark-surface style (white on a translucent fill) and
   would disappear on this light strip, so .btn-ghost is its light-surface
   counterpart, in the site's red (not the client reference's palette). */
.contact-strip-actions > a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid var(--red);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.contact-strip-actions > .btn-primary:hover { border-color: var(--red-dark); }
.btn-ghost { background: transparent; color: var(--red); }
.btn-ghost:visited { color: var(--red); }
.btn-ghost:hover { background: var(--red); color: #fff; }
.btn-ghost .icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 640px) {
  .contact-strip-actions { flex-direction: column; gap: 12px; }
  .contact-strip-actions > a { width: 100%; min-height: 52px; }
}

/* ── FOOTER REBUILD (4-column) ── */
.footer-main {
  background: #000;
  padding: 3rem 2.5rem 2rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 2rem;
}
@media (max-width: 860px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-main { grid-template-columns: 1fr; padding: 2.5rem 1.25rem 1.5rem; } }
.footer-col h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col p { color: #888; font-size: 14px; line-height: 1.7; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { color: #999; font-size: 14px; text-decoration: none; }
.footer-col ul a:visited { color: #999; }
.footer-col ul a:hover { color: #fff; }
.footer-tagline { color: #666; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
/* Both phone numbers, in full, as tap-to-call links. The homepage contact
   strip only shows the primary number (on its Call button), so this is
   where the second number stays visible on every page. */
.footer-contact { display: flex; flex-direction: column; gap: 9px; margin-top: 1.25rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: #999; font-size: 14px; text-decoration: none; }
.footer-contact a:visited { color: #999; }
.footer-contact a:hover { color: #fff; }
.footer-contact .icon { width: 14px; height: 14px; flex-shrink: 0; }

.footer-form { display: flex; flex-direction: column; gap: 10px; }
.footer-form input, .footer-form textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: #fff;
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: #555; }
.footer-form .btn-primary { padding: 10px 20px; font-size: 14px; text-align: center; border: none; cursor: pointer; }
.footer-form .form-status { font-size: 14px; padding: 10px 12px; }

.footer-bottom {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #555;
}
.footer-bottom a { color: #888; text-decoration: none; }
.footer-bottom a:visited { color: #888; }
.footer-bottom a:hover { color: #fff; }
.footer-addresses { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 640px) { .footer-bottom { flex-direction: column; padding: 1.25rem; } }

/* The verbatim design's bare `footer { display:flex; ... }` rule (single-row
   footer) is neutralised here rather than edited in place, so the four-
   column .footer-main and the .footer-bottom bar stack instead of sitting
   side by side as flex children of <footer>. Same specificity (0,0,1) as
   the verbatim rule, so it wins on source order without touching it. */
footer {
  display: block;
  padding: 0;
}

/* Mobile menu now carries one more item (Clientele) than the original
   design accounted for — a taller cap keeps it from clipping the last row. */
@media (max-width: 1000px) {
  .nav-links.open { max-height: 480px; }
}

/* ── BRAND MARK ──
   Client supplied a proper dual-tone version (charcoal M, red square) —
   images/metzoid-logo.svg for the light nav, and a pre-coloured all-white
   images/metzoid-logo-white.svg for the dark footer. No CSS filter needed
   on either now; a filter on the dual-tone file would wreck the red. */
.brand-mark {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   REVISION 2 — PALETTE: RED-AND-WHITE, NOT RED-AND-BLACK
   White/grey-bg becomes the dominant surface; red stays disciplined to
   buttons, eyebrows, underlines, and the stats bar. Charcoal drops to a
   text/detail colour rather than a background. Only the footer stays dark
   on purpose — see revision notes for why. Every rule below overrides a
   verbatim dark-surface rule rather than editing it in place, so the
   original approved design stays diffable.
   ══════════════════════════════════════════════════════════════ */

/* Clientele section (.customers-section) — used on the homepage teaser,
   the about-page teaser, and the full clientele page. Was near-black with
   white .logo-card tiles; now grey-bg with the same cards, which already
   have a light border and were designed to sit on a light surface. */
.customers-section { background: var(--grey-bg); }
.customers-section .section-title { color: var(--text); }
.customers-section .section-sub { color: var(--text-sec); }

/* Contact strip (homepage teaser) — background and text colour were edited
   in place further up (it's this file's own rule, not verbatim, so no
   override needed here). Red is reserved for the CTA button now, not the
   whole section. */

/* ══════════════════════════════════════════════════════════════
   REVISION 3 — bug fixes and vertical rhythm
   ══════════════════════════════════════════════════════════════ */

/* Factory address, full-width variant (perforated-sheets.html). Was a
   half-width stacked block sitting alone under the spec box, reading as an
   orphaned red slab once the page was reordered. Now full container width,
   one line instead of two, less padding — a short bar, not a monument. */
.factory-address-wide {
  max-width: none;
  margin-top: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.85rem 1.5rem;
}
.factory-address-wide strong {
  display: inline;
  margin-bottom: 0;
  margin-right: 8px;
  opacity: 0.85;
}

/* Section padding, reduced roughly a third (5rem → 3.25rem) and made
   consistent — the original spacing was generous enough that scrolling
   between short sections (e.g. spec table → applications) landed on
   near-empty screens. */
section { padding: 3.25rem 2.5rem; }
@media (max-width: 640px) { section { padding: 2.25rem 1.25rem; } }

/* Where a section ends with a short trailing element (a single CTA link,
   an actions row) that carries its own top margin, that margin was
   stacking with the section's own bottom padding, doubling the gap before
   the next section starts. Zeroing the last child's bottom margin removes
   the stack without touching the section padding itself. */
.container > *:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   REVISION 4 — real (temporary, low-res) photos wired in
   These are brochure extracts, not the client's final photography — see
   TODO.md. Handled deliberately so low resolution doesn't read as sloppy:
   nothing here depends on these exact files or their dimensions, so
   swapping in real photos later needs no CSS changes.
   ══════════════════════════════════════════════════════════════ */

/* Hero: a second, dedicated dark gradient on top of the crossfading images
   (on top of the verbatim design's own left-to-right ::after fade, which
   stays for text contrast). This one goes top-to-bottom and is there
   specifically to mask compression softness in the source JPEGs, per this
   round's brief — a flat, evenly dark image reads as intentional; a flat,
   evenly light one reads as low-res. */
.hero-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
}

/* Product photos: capped so a small source file is never blown up past
   roughly 1.5x its native width, which is where upscaling softness starts
   reading as a mistake rather than a deliberate look. Sized per-image
   because each source file is a different native size (see TODO.md for
   the exact pixel dimensions) — a single blanket rule can't be correct
   for all of them at once.

   BUG FIX (client-reported, second occurrence): a capped image previously
   had its width limited via max-width on the *image* while the base
   rule's position:absolute + inset:0 + width:100% still applied — an
   over-constrained combination that left the image anchored to one
   corner instead of centred, with the fallback showing through the
   uncovered strip. Capping the *slot* instead keeps every image on the
   one standard fill pattern above (absolute, inset:0, cover) — it's
   just filling a smaller box, so nothing about how the image and
   fallback stack changes. margin:auto centres the capped slot in its
   grid cell on the rare screen wide enough for the cap to engage.
   width:100% is required, not decorative — with both the image and the
   fallback now position:absolute (removed from flow), the slot itself
   has no in-flow content to size against, and its 1fr grid column
   collapsed to near-zero width without an explicit width to stretch. */
.media-slot.cap-galvanised { width: 100%; max-width: 825px; margin-left: auto; margin-right: auto; }
.media-slot.cap-cold-rolled { width: 100%; max-width: 825px; margin-left: auto; margin-right: auto; }
.media-slot.cap-hot-rolled { width: 100%; max-width: 676px; margin-left: auto; margin-right: auto; }
.media-slot.cap-perforated { width: 100%; max-width: 651px; margin-left: auto; margin-right: auto; }
.media-slot.cap-factory { width: 100%; max-width: 823px; margin-left: auto; margin-right: auto; }

/* gi-skin-pass-coils-1.jpg is only 278x298 natively — far smaller than
   the standard 4:3 slot. Previously shown small inside a full-size
   panel, which read as broken rather than deliberate. The slot itself
   is capped to close to the photo's own size instead (aspect-ratio
   overrides the base 4:3), so object-fit:cover on the same standard
   image rule fills it almost exactly, with only trivial cropping. */
.media-slot.cap-small {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 278 / 298;
  margin-left: auto;
  margin-right: auto;
}

/* About-page warehouse strip — wide and short rather than 4:3. Used to
   be its own separate .media-banner component with a near-copy of the
   rules above that quietly diverged (no `position` on its image) and
   caused the exact fallback-stacking bug the rest of this section
   describes. Folded into .media-slot as a sizing modifier instead, so
   there's one image+fallback implementation, not two to keep in sync. */
.media-slot.cap-banner {
  aspect-ratio: 1387 / 359;
  max-height: 340px;
  margin: 2rem 0;
}
.media-slot.cap-banner .media-fallback .icon { width: 48px; height: 48px; }