/* 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;
}

/* ── 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; }

@media (max-width: 640px) {
  .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) ── */
.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-slot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
.media-fallback .icon { width: 64px; height: 64px; }
/* 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; }

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

@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); }
.dealer-band-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) {
  .dealer-band-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.dealer-band-left .section-eyebrow { margin-bottom: 0.75rem; }
.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;
  margin-top: 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 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sec);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.mill-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  align-items: center;
}
.mill-mark {
  position: relative;
  min-height: 30px;
  min-width: 60px;
}
.mill-mark img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: 0.55;
}
.mill-mark-fallback {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-sec);
  letter-spacing: 0.02em;
}
@media (max-width: 860px) {
  /* AM/NS block stacks first per the brief; DOM order already puts
     .dealer-band-left (containing it) before .dealer-band-right, so no
     reordering is needed here — this rule is just the mobile spacing. */
  .mill-strip { gap: 1.5rem 2rem; }
}

/* ── 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-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.contact-strip-actions a.plain { color: var(--text-sec); font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.contact-strip-actions a.plain:visited { color: var(--text-sec); }
.contact-strip-actions a.plain:hover { color: var(--red); }

/* ── 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; }

.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: 640px) {
  .nav-links.open { max-height: 480px; }
}

/* ── BRAND MARK (real logo, supplied by client mid-project) ──
   images/logo.svg is a single black shape on a transparent background.
   Originally inverted to white for both the nav and the footer, since both
   were dark. Revision 2 turned the nav white — the mark needs to stay its
   native black there now, invert:1 on a white nav is white-on-white and
   invisible. Footer is still dark, so it keeps the invert. If the client
   ever supplies a proper multi-colour logo, drop both overrides and swap
   the file. */
.brand-mark {
  flex-shrink: 0;
}
footer .brand-mark {
  filter: invert(1);
}

/* ══════════════════════════════════════════════════════════════
   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. */
.media-slot.cap-galvanised img { max-width: 825px; }
.media-slot.cap-cold-rolled img { max-width: 825px; }
.media-slot.cap-hot-rolled img { max-width: 676px; }
.media-slot.cap-perforated img { max-width: 651px; }
.media-slot.cap-factory img { max-width: 823px; }

/* gi-skin-pass-coils-1.jpg is only 278px wide natively — far smaller than
   its product-page slot. Rather than stretch it to fill (soft, obviously
   upscaled), it's shown at a capped, smaller size within the same grid
   cell, centred, with the slot's own light-grey background showing
   through as a frame rather than a solid fill. */
.media-slot.cap-small {
  background: var(--grey-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-slot.cap-small img {
  position: static;
  width: auto;
  height: auto;
  max-width: 278px;
  max-height: 298px;
  border-radius: var(--radius-md);
}
.media-slot.cap-small .media-fallback { position: static; }

/* Warehouse banner (about.html) — wide and short, shown as a strip rather
   than forced into a 4:3 or hero-shaped box. */
.media-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1387 / 359;
  max-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grey-bg);
  border: 1px solid var(--grey-line);
  margin: 2rem 0;
}
.media-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.media-banner .media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}
.media-banner .media-fallback .icon { width: 48px; height: 48px; }