/*!
Theme Name: ARTech Lubricants
Author: Invictus Star Technology
Author URI: https://invictusstartechnology.ae
Description: Premium lubricants and quality service.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: artechlubricants
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   Fonts (self-hosted copies of the Google Fonts the design uses; latin +
   latin-ext subsets, font-display: swap — the same files Google served)
   ========================================================================== */

/* DM Sans 400 normal — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 normal — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 normal — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 normal — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 normal — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 normal — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dm-sans-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display 400 italic — latin-ext */
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Serif Display 400 italic — latin */
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display 400 normal — latin-ext */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Serif Display 400 normal — latin */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 normal — latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 normal — latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 normal — latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 normal — latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 300 normal — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 300 normal — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400 normal — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 normal — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 normal — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 normal — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600 normal — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600 normal — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700 normal — latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700 normal — latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 300 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 300 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 400 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 500 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 500 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 600 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 800 normal — latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 800 normal — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-normal-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 300 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 300 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 400 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 400 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 500 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 500 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 600 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 600 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 700 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 700 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora 800 normal — latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora 800 normal — latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/sora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Base, layout and components (core theme styles)
   ========================================================================== */

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  --color-accent: #e76a28;
  --color-dark: #141414;
  --color-light: #ffffff;
  --color-muted: #7c7c7c;
  /*
   * WCAG AA (4.5:1) variants of the accent and muted colours, for small text
   * and white-on-orange buttons: same hue, only as much darker (or lighter on
   * dark backgrounds) as needed to pass.
   */
  --color-accent-aa: #c65316;       /* on white, and white text on it */
  --color-accent-aa-cream: #ba4e15; /* on the #f7f3ee cream panels */
  --color-accent-large-cream: #e66723; /* large text (3:1) on cream */
  --color-muted-aa: #767676;        /* on white */
  --color-muted-aa-cream: #6f6f6f;  /* on cream */
  --color-muted-aa-dark: #868686;   /* on the #1f1f1f footer */

  --color-bg: var(--color-light);
  --color-text: var(--color-dark);
  --color-text-muted: var(--color-muted);
  --color-border: rgba(124, 124, 124, 0.22);
  --color-border-soft: rgba(124, 124, 124, 0.14);

  --font-heading:
    "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 14px 30px -14px rgba(20, 20, 20, 0.25);
  --shadow-lg: 0 28px 60px -28px rgba(20, 20, 20, 0.45);
  --shadow-accent: 0 24px 50px -22px rgba(231, 106, 40, 0.55);

  --navbar-h: 76px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.has-fixed-navbar {
  padding-top: var(--navbar-h);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 12px;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-dark);
}

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

/*
 * Site-wide container width.
 * Raise the desktop cap to 1400px (Bootstrap tops out at 1320px). Mobile/tablet
 * steps are left to Bootstrap so smaller screens are unaffected.
 */

::selection {
  background: var(--color-accent);
  color: var(--color-light);
}

.skip-link.visually-hidden-focusable {
  background: var(--color-dark);
  color: var(--color-light);
  left: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 16px;
  z-index: 2000;
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.site-navbar {
  background: var(--color-light);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(124, 124, 124, 0.18);
  min-height: var(--navbar-h);
  padding-bottom: 8px;
  padding-top: 8px;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.site-navbar.is-scrolled {
  background: var(--color-light);
  border-bottom-color: var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

.site-navbar .custom-logo-link {
  display: inline-flex;
}

.site-navbar .custom-logo {
  display: block;
  height: auto;
  max-height: 56px;
  width: auto;
}

/* Nav links */

/* Sign In ghost pill — outlined, matches CTA dimensions */

/* Icon-only auth controls (Sign In / My Account / Logout) — button-sized */

/* Nav CTA pill — simple lift + accent shift */

/* Dropdown trigger */
.site-navbar .nav-link--has-caret {
  align-items: center;
  display: inline-flex;
  gap: 7.2px;
}

.site-navbar .nav-caret {
  color: currentColor;
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  margin-left: 2.4px;
  opacity: 0.7;
  transform-origin: 50% 55%;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    color 0.2s ease;
  width: 10px;
}

.site-navbar .nav-caret svg {
  display: block;
  height: 100%;
  width: 100%;
}

.site-navbar .nav-item.dropdown:hover>.nav-link--has-caret .nav-caret,
.site-navbar .nav-link--has-caret[aria-expanded="true"] .nav-caret,
.site-navbar .nav-link--has-caret.show .nav-caret {
  color: var(--color-accent);
  opacity: 1;
  transform: rotate(180deg);
}

.site-navbar .nav-item.dropdown:hover>.nav-link--has-caret,
.site-navbar .nav-link--has-caret[aria-expanded="true"],
.site-navbar .nav-link--has-caret.show {
  color: var(--color-accent);
}

.site-navbar .nav-item.dropdown:hover>.nav-link--has-caret::after,
.site-navbar .nav-link--has-caret[aria-expanded="true"]::after,
.site-navbar .nav-link--has-caret.show::after {
  transform: translateX(-50%) scaleX(1);
}

/* Hover-open dropdown (desktop only) */

/* Dropdown menu */
.site-navbar .primary-dropdown {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(124, 124, 124, 0.18);
  border-radius: var(--radius);
  box-shadow:
    0 30px 60px -22px rgba(20, 20, 20, 0.35),
    0 4px 12px rgba(20, 20, 20, 0.06);
  margin-top: 0;
  min-width: 260px;
  overflow: hidden;
  padding: 8px;
  position: relative;
}

.site-navbar .primary-dropdown::before {
  background: linear-gradient(90deg,
      var(--color-accent) 0%,
      rgba(231, 106, 40, 0) 100%);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* .site-navbar .primary-dropdown::after {
  border: 8px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.96);
  content: "";
  height: 0;
  left: 24px;
  position: absolute;
  top: -16px;
  width: 0;
} */

.site-navbar .primary-dropdown .dropdown-item {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  display: flex;
  font-family: var(--font-heading);
  font-size: 12.8px;
  font-weight: 600;
  gap: 11.2px;
  letter-spacing: 0.08em;
  padding: 10.4px 14.4px;
  position: relative;
  text-transform: uppercase;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    padding-left 0.18s ease;
}

.dropdown-item__bullet {
  background: var(--color-muted);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  width: 6px;
  display: none;
}

.site-navbar .primary-dropdown .dropdown-item:hover,
.site-navbar .primary-dropdown .dropdown-item:focus,
.site-navbar .primary-dropdown .dropdown-item.active {
  background: rgba(231, 106, 40, 0.1);
  color: var(--color-accent);
}

.site-navbar .primary-dropdown .dropdown-item:hover .dropdown-item__bullet,
.site-navbar .primary-dropdown .dropdown-item:focus .dropdown-item__bullet,
.site-navbar .primary-dropdown .dropdown-item.active .dropdown-item__bullet {
  background: var(--color-accent);
  transform: scale(1.15);
}

/*--------------------------------------------------------------
# Products mega menu — exact match to design
--------------------------------------------------------------*/
.site-navbar .primary-dropdown.mega-menu {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid #ece6e0;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(20, 16, 12, 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: min(620px, calc(100vw - 32px));
}

/* Drop the theme dropdown's accent bar + caret triangle for the mega menu */
.site-navbar .primary-dropdown.mega-menu::before,
.site-navbar .primary-dropdown.mega-menu::after {
  display: none;
}

/* Center the mega menu under the Products link as an overlay (desktop) */

/* Mobile toggler — hidden on lg+ via Bootstrap; explicit cap below */

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
/*
 * Unified premium button hover system.
 * Subtle, fast, predictable. No jarring color flips.
 * Lift + shadow deepen + arrow nudge + tactile press.
 */
.btn-cta {
  align-items: center;
  background: var(--color-accent-aa);
  border: 1px solid var(--color-accent-aa);
  border-radius: var(--radius-pill);
  color: var(--color-light);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-heading);
  font-size: 13.12px;
  font-weight: 700;
  gap: 10.4px;
  letter-spacing: 0.16em;
  padding: 1em 1.8em;
  position: relative;
  text-transform: uppercase;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 0.22s ease;
  will-change: transform;
}

.btn-cta__label,
.btn-cta__icon {
  position: relative;
  z-index: 1;
}

.btn-cta__icon {
  display: inline-flex;
  transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.btn-cta:hover {
  background: var(--color-accent-aa);
  border-color: var(--color-accent-aa);
  color: var(--color-light);
  transform: translateY(-2px);
}

.btn-cta:focus {
  background: var(--color-accent-aa);
  border-color: var(--color-accent-aa);
  color: var(--color-light);
  outline: 0;
}

.btn-cta:hover .btn-cta__icon {
  transform: translateX(4px);
}

.btn-cta:focus-visible {
  /* White inner + dark outer ring: visible on both the dark heroes and light sections (WCAG 2.4.7 / 1.4.11). */
  box-shadow: 0 0 0 2px #fff;
  outline: 2px solid var(--color-dark, #1f1f1f);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.btn-cta:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

.btn-cta__glow {
  display: none;
}

/*--------------------------------------------------------------
# Main / front page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  background: var(--color-dark);
  color: var(--color-light);
  overflow: hidden;
  padding: 160px 0 160px;
  position: relative;
}

.hero__scene {
  inset: 0;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
}

.hero__bg-img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  width: 100%;
}

.hero__overlay {
  background:
    linear-gradient(90deg,
      rgba(20, 20, 20, 0.82) 0%,
      rgba(20, 20, 20, 0.65) 50%,
      rgba(20, 20, 20, 0.4) 100%),
    linear-gradient(180deg,
      rgba(20, 20, 20, 0.3) 0%,
      rgba(20, 20, 20, 0.55) 100%);
  inset: 0;
  position: absolute;
}

.hero__bg {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__title {
  color: var(--color-light);
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  position: relative;
}

.hero__title::after {
  background: var(--color-accent);
  border-radius: 4px;
  content: "";
  display: block;
  height: 6px;
  margin-top: 16px;
  width: 92px;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16.8px;
  margin: 0 0 36px;
  max-width: 608px;
}

/* Hero title break: wraps naturally on tablet/mobile; forced 2-line break on desktop (see responsive.css). */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13.6px;
}

/* Hero divider */
.hero__divider {
  bottom: -1px;
  left: 0;
  line-height: 0;
  position: absolute;
  right: 0;
}

.hero__divider svg {
  display: block;
  height: 60px;
  width: 100%;
}

/* Match the homepage hero's (.ar-hero) border/design and overlay on these
 * five pages only — About Us, Contract Manufacturing, Packaging, MIL Specs
 * & Compliance, Documentation. Scoped via each page's own body template
 * class so every other page using this same shared .hero--inner markup
 * (Contact, Products, etc.) is completely unaffected. Existing hero images
 * and all text content are untouched — only the overlay gradient and the
 * bottom wave divider (a decorative element the homepage's hero doesn't
 * have) change. */
.page-template-page-templatesabout-page-php .hero__overlay,
.page-template-page-templatescontract-manufacturing-page-php .hero__overlay,
.page-template-page-templatespackaging-page-php .hero__overlay,
.page-template-page-templatesmilspec-page-php .hero__overlay,
.page-template-page-templatesoem-page-php .hero__overlay,
.page-template-page-templatesdata-sheet-page-php .hero__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.page-template-page-templatesabout-page-php .hero__divider,
.page-template-page-templatescontract-manufacturing-page-php .hero__divider,
.page-template-page-templatespackaging-page-php .hero__divider,
.page-template-page-templatesmilspec-page-php .hero__divider,
.page-template-page-templatesoem-page-php .hero__divider,
.page-template-page-templatesdata-sheet-page-php .hero__divider,
.page-template-page-templatesabout-page-php svg.hero__bg,
.page-template-page-templatescontract-manufacturing-page-php svg.hero__bg,
.page-template-page-templatespackaging-page-php svg.hero__bg,
.page-template-page-templatesmilspec-page-php svg.hero__bg,
.page-template-page-templatesoem-page-php svg.hero__bg,
.page-template-page-templatesdata-sheet-page-php svg.hero__bg {
  display: none;
}

/*--------------------------------------------------------------
# Videos
--------------------------------------------------------------*/
.videos {
  background: var(--color-light);
  color: var(--color-dark);
  overflow: hidden;
  padding: 96px 0 112px;
  position: relative;
}

/* Sign in pill — simple lift + accent shift */

/* Video cards — cinematic industrial tile */
.video-card {
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(20, 20, 20, 0.45);
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 0.4s ease;
  width: 100%;
}

.video-card:hover,
.video-card:focus-visible {
  box-shadow:
    0 40px 70px -28px rgba(231, 106, 40, 0.4),
    0 24px 48px -28px rgba(20, 20, 20, 0.6);
  outline: 0;
  transform: translateY(-6px);
}

/* Top metadata row */

/* Play button */
.video-card__play {
  align-items: center;
  background: var(--color-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 18px 36px -10px rgba(231, 106, 40, 0.7);
  color: var(--color-light);
  display: inline-flex;
  height: 76px;
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 46%;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  width: 76px;
  z-index: 2;
}

.video-card__play svg {
  margin-left: 4px;
  position: relative;
  z-index: 1;
}

.video-card__play-ring {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  inset: -10px;
  pointer-events: none;
  position: absolute;
}

.video-card__play-pulse {
  border: 2px solid rgba(231, 106, 40, 0.55);
  border-radius: 50%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  animation: pulseRing 2.4s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

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

.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Bottom caption */

/* Bottom accent bar */

/* Search clear button */

/* Empty state */

/*--------------------------------------------------------------
# Video modal
--------------------------------------------------------------*/
.video-modal .modal-content {
  background: var(--color-dark);
  border: 1px solid rgba(124, 124, 124, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  color: var(--color-light);
  overflow: hidden;
}

.video-modal__body {
  padding: 0;
}

.video-modal__title-wrap {
  padding: 24px 64px 20px 28px;
}

.video-modal__title {
  color: var(--color-light);
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 25.6px);
  font-weight: 700;
  margin: 0;
}

.video-modal__player {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  position: relative;
}

.video-modal__player video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.video-modal__close {
  align-items: center;
  background: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--color-light);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 0.22s ease;
  width: 40px;
  z-index: 5;
}

.video-modal__close:hover,
.video-modal__close:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
  transform: rotate(90deg);
}

.video-modal__close:active {
  transform: rotate(90deg) scale(0.95);
  transition-duration: 0.08s;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* Accent boundary — keeps the footer distinct when it follows a dark section */

/* Active page in the footer menu */

.site-footer__social {
  display: flex;
  gap: 12px;
}

/* Footer contact list */

/* Address link wraps both address text + map cta */

/* Social icon — gentle lift, bg fills accent */
.social-link {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--color-light);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  position: relative;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 0.22s ease;
  width: 44px;
}

.social-link__ring {
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  inset: -5px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.95);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.social-link:hover,
.social-link:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
  transform: translateY(-2px);
}

.social-link:hover .social-link__ring,
.social-link:focus .social-link__ring {
  opacity: 1;
  transform: scale(1);
}

.social-link:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.08s;
}

/*--------------------------------------------------------------
# Reveal animations
--------------------------------------------------------------*/
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*--------------------------------------------------------------
# Responsive tweaks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# WordPress required helpers
--------------------------------------------------------------*/
.alignleft {
  float: left;
  margin: 0 1.5em 1.5em 0;
}

.alignright {
  float: right;
  margin: 0 0 1.5em 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 1.5em;
}

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption .wp-caption-text {
  color: var(--color-text-muted);
  font-size: 13.6px;
  text-align: center;
}

.sticky {
  display: block;
}

.bypostauthor {
  display: block;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Page sections (shared)
--------------------------------------------------------------*/
.page-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.page-section--light {
  background: var(--color-light);
  color: var(--color-text);
}

.page-section--alt {
  background:
    radial-gradient(900px circle at 0% 0%,
      rgba(231, 106, 40, 0.08) 0%,
      rgba(231, 106, 40, 0) 55%),
    var(--color-light);
  color: var(--color-text);
}

.page-section .container {
  position: relative;
  z-index: 1;
}

.page-section__head {
  margin-bottom: 48px;
  max-width: 760px;
}

.page-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-section__eyebrow {
  color: var(--color-accent-aa);
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.page-section__title {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 45.6px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.page-section__rule {
  background: var(--color-accent);
  border-radius: 4px;
  display: block;
  height: 4px;
  margin-bottom: 24px;
  width: 56px;
}

.page-section__rule--center {
  margin-left: auto;
  margin-right: auto;
}

.page-section__lead {
  color: var(--color-muted-aa);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 60ch;
}

.page-section__lead--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}

/*--------------------------------------------------------------
# Team cards
--------------------------------------------------------------*/
.team {
  margin-top: 72px;
}

.team-card {
  background: var(--color-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  height: 100%;
  padding: 28px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.team-card:hover {
  border-color: rgba(231, 106, 40, 0.35);
  transform: translateY(-3px);
}

.team-card__head {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.team-card__initials {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-light);
  display: inline-flex;
  font-family: var(--font-heading);
  font-size: 15.2px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 52px;
}

.team-card__name {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 17.6px;
  font-weight: 700;
  margin: 0;
}

.team-card__role {
  color: var(--color-accent);
  font-size: 12.48px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin: 2.4px 0 0;
  text-transform: uppercase;
}

.team-card__bio {
  color: var(--color-muted);
  font-size: 15.2px;
  line-height: 1.65;
  margin: 0;
}

/*--------------------------------------------------------------
# Product cards — premium industrial tile
--------------------------------------------------------------*/

/* Numbered badge — top-left, premium pill */

/* ------------------------------------------------------------------
   Catalog meta — sub-category eyebrow + product type subtitle.
   Used inside product cards (flex children pick up the card's gap)
   and, wrapped in .cat-meta, on the section-level pages (gear/rail).
------------------------------------------------------------------ */

/* NLGI grade spec line inside product cards (shown only when a grade exists). */

/* Spec lists/tables */

/*--------------------------------------------------------------
# Gear oils — AGMA grid + features
--------------------------------------------------------------*/

/* R-Tech availability note. */

/* Gear oil recommendation line. */

/*--------------------------------------------------------------
# R-Tech size stack
--------------------------------------------------------------*/
.size-stack {
  display: grid;
  gap: 16px;
}

.size-stack__item {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.size-stack__item:hover {
  background: rgba(231, 106, 40, 0.1);
  border-color: rgba(231, 106, 40, 0.45);
  transform: translateX(4px);
}

.size-stack__num {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  min-width: 40px;
}

.size-stack__label {
  color: var(--color-light);
  font-family: var(--font-heading);
  font-size: 17.6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/*--------------------------------------------------------------
# Packaging icons + CTA
--------------------------------------------------------------*/
.packaging-grid {
  margin-bottom: 48px;
  margin-top: 40px;
}

.packaging-card {
  align-items: center;
  background: var(--color-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 13.6px;
  height: 100%;
  padding: 28px 16px;
  text-align: center;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.packaging-card:hover {
  border-color: rgba(231, 106, 40, 0.45);
  transform: translateY(-4px);
}

.packaging-cta {
  align-items: center;
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  color: var(--color-light);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  overflow: hidden;
  padding: 32px 40px;
  position: relative;
}

.packaging-cta::before {
  background: radial-gradient(circle at 100% 50%,
      rgba(231, 106, 40, 0.45) 0%,
      rgba(231, 106, 40, 0) 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.packaging-cta p {
  color: var(--color-light);
  font-family: var(--font-heading);
  font-size: 18.4px;
  font-weight: 600;
  margin: 0;
  position: relative;
  z-index: 1;
}

.packaging-cta .btn-cta {
  position: relative;
  z-index: 1;
}

.packaging-cta.is-visible a:hover {
  color: var(--color-accent);
}

/* Packaging inquiry form — light card matching the design reference.
   Reuses the shared .contact-form components + theme tokens (Sora/Inter,
   accent). Scoped to .pkg-inquiry; the homepage .packaging-cta CTA is untouched. */
.pkg-inquiry {
  background: #f7f3ee;
  border: 1px solid rgba(124, 124, 124, 0.16);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(20, 16, 12, 0.05);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  text-align: left;
}

.pkg-inquiry__head {
  margin-bottom: 26px;
}

.pkg-inquiry__title {
  color: var(--color-dark);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 10px;
}

.pkg-inquiry .page-section__eyebrow {
  color: var(--color-accent-aa-cream);
}
.pkg-inquiry__title .ar-accent {
  color: var(--color-accent-large-cream);
}
.pkg-inquiry__lead {
  color: var(--color-muted-aa-cream);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1458vw, 22px);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

/* Title-case labels per the design (override the theme's uppercase form labels). */
.pkg-inquiry .contact-form .form-label {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: none;
}

.pkg-inquiry .contact-form .form-control {
  background: var(--color-light);
  font-size: 15.5px;
  padding: 13px 16px;
}

/* Placeholder colour — matches the muted tone used across the theme's inputs. */
.pkg-inquiry .contact-form .form-control::placeholder {
  color: #9a938c;
  opacity: 1;
}

.pkg-inquiry__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 8px;
}

.pkg-inquiry__talk {
  color: var(--color-muted-aa-cream);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.pkg-inquiry__talk a {
  color: var(--color-accent-aa-cream);
  font-weight: 700;
}

.pkg-inquiry__talk a:hover {
  text-decoration: underline;
}

/* Shared by both inquiry notices (packaging + contract manufacturing). */
.pkg-inquiry .form-notice {
  margin-bottom: 0;
  margin-top: 22px;
}

/*--------------------------------------------------------------
# Sanitizing — chips + callout + visual
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Data Sheets section
--------------------------------------------------------------*/
.data-sheets {
  align-items: center;
  display: grid;
  gap: 32px;
  grid-template-columns: auto 1fr;
}

/*--------------------------------------------------------------
# Technical Resources section
--------------------------------------------------------------*/
.tech-resources {
  overflow: hidden;
  position: relative;
}

.tech-resources__bg {
  background:
    radial-gradient(circle at 85% 20%,
      rgba(231, 106, 40, 0.1),
      transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(20, 20, 20, 0.05), transparent 40%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.tech-resources>.container {
  position: relative;
  z-index: 1;
}

.tech-resources__visual {
  margin-left: auto;
  max-width: 540px;
  position: relative;
}

.tech-resources__media {
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 60px -25px rgba(20, 20, 20, 0.35),
    0 8px 24px -12px rgba(231, 106, 40, 0.25);
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.tech-resources__media img {
  aspect-ratio: 1;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  width: 100%;
}

.tech-resources__media:hover img {
  transform: scale(1.04);
}

.tech-resources__media-accent {
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  bottom: -18px;
  height: 60%;
  opacity: 0.18;
  position: absolute;
  right: -18px;
  width: 60%;
  z-index: 0;
}

.tech-resources__media::after {
  background: linear-gradient(135deg,
      rgba(231, 106, 40, 0.18),
      transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/*--------------------------------------------------------------
# Inner pages (About, etc.)
--------------------------------------------------------------*/
/* Page banner — reuses the front-page hero scene at inner-page scale */
.hero--inner {
  align-items: center;
  display: flex;
  /* Fluid height: floors at 320px on small phones, scales continuously with
   * viewport width, and lands on exactly 700px at a 1920px viewport (700 /
   * 1920 = 36.4583vw) — capped there so ultra-wide monitors don't keep growing. */
  min-height: clamp(320px, 36.4583vw, 700px);
  padding: clamp(64px, 8vw, 88px) 0 clamp(72px, 9vw, 104px);
}

.hero--inner .hero__inner {
  width: 100%;
}

.hero__title--inner {
  font-size: clamp(41.6px, 5.5vw, 72px);
  margin-bottom: 0;
}

/* Consistent vertical rhythm for inner-page sections */
.site-main--inner .page-section {
  padding: clamp(64px, 7vw, 64px) 0;
}

/* Page-opening paragraph — stronger than the standard muted lead */
.page-section__lead--xl {
  color: var(--color-text);
  font-size: clamp(16px, 1.1458vw, 22px);
  line-height: 1.75;
  margin-bottom: 0;
  max-width: 56ch;
}

/* Story rule — a touch bolder as the section's only anchor */
#about-story .page-section__rule {
  height: 5px;
  margin-bottom: 28px;
  width: 72px;
}

/* Bring the story image accent above the section gradient */
.site-main--inner .tech-resources__visual {
  margin-right: auto;
}

/* Team cards on inner pages — a touch more room + accent top bar */
.team-card--tall {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.team-card--tall::before {
  background: linear-gradient(90deg,
      var(--color-accent) 0%,
      rgba(231, 106, 40, 0) 100%);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.team-card--tall:hover::before {
  transform: scaleX(1);
}

/*--------------------------------------------------------------
# Contact form + info
--------------------------------------------------------------*/
.contact-form .form-label {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 12.48px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 6.4px;
  text-transform: uppercase;
}

.contact-form .form-label span {
  color: var(--color-accent);
  margin-left: 2.4px;
}

.contact-form .form-control {
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 15.2px;
  padding: 12px 16px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  resize: none;
}

.contact-form .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(231, 106, 40, 0.15);
  outline: 0;
}

.contact-info {
  align-content: center;
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  color: var(--color-light);
  display: grid;
  gap: 24px;
  height: 100%;
  overflow: hidden;
  padding: 32px;
  position: relative;
}

.contact-info::before {
  background: radial-gradient(circle at 80% 0%,
      rgba(231, 106, 40, 0.35) 0%,
      rgba(231, 106, 40, 0) 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.contact-info__row {
  position: relative;
  z-index: 1;
}

.contact-info__label {
  color: var(--color-accent);
  display: block;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 5.6px;
  text-transform: uppercase;
}

.contact-info__value {
  color: var(--color-light);
  display: block;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 16.8px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  text-decoration: none;
}

a.contact-info__value {
  transition: color 0.2s ease;
}

a.contact-info__value:hover,
a.contact-info__value:focus {
  color: var(--color-accent);
}

.contact-info .social-link {
  height: 40px;
  width: 40px;
}

/*--------------------------------------------------------------
# Lubricant family cards (combined section)
--------------------------------------------------------------*/

.lubricant-card__tagline {
  color: var(--color-accent);
  display: block;
  font-family: var(--font-heading);
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* Category hub variant — whole card is a link to a child page */

/* Arrow affordance pinned to the bottom — mirrors the .lubricant-card__cta pill */

/* Whole-card link drives the inner CTA pill on hover/focus */

/*--------------------------------------------------------------
# Lubricants landing page
--------------------------------------------------------------*/
/* Secondary hero button — outlined ghost on dark scenes */

/* Hero trust-stat strip */

/* feature-list on light sections */

/* Capability / application tiles — light icon cards */

/* Closing CTA block */

/* Standards badges on the white CTA section — readable on light */

/* Product spec identifier lines (e.g. MIL SPEC#, CAS#) */

/* Gear Oils — AGMA card on a light section */

/* Company imprint line — minimal centered footnote */

/* Auth — login / signup / account cards */

/* Grouped sections inside a single card (e.g. profile + change password) */

/* My Account — logout row */

/* Inline label note (e.g. "(read-only)") */

/* Read-only / disabled profile fields */

/* Intro helper line above a form */

/* Password field with show/hide toggle */

/* Eye sits where the valid check would — drop the check on toggled fields */

/* Icon state: default (hidden password) shows the slashed eye; revealed shows the open eye */

/* Forgot-password link under the sign-in form */

/* Sign-in: forgot-password + create-account on one row */

/* Comfortable, modern inputs inside auth cards */

/* Block submit + disabled/loading state */

.btn-cta[disabled],
.btn-cta.is-loading {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

/* Validation states */
.form-error {
  color: #d64545;
  display: block;
  font-size: 12.8px;
  line-height: 1.4;
  margin-top: 5.6px;
  min-height: 1.1em;
}

/* Error slots on optional fields take no space until they hold a message. */
.form-error[data-optional]:empty {
  display: none;
}

/* "Document link unavailable" page has no hero: clear the fixed header. */
.doc-link-error {
  padding-top: calc(var(--ar-header-h, 110px) + clamp(48px, 6vw, 96px));
}

/* 404 page (404.php): the inner-page hero, without a photo, with its content
 * centred. Fonts, hero sizes, container width and the header overlay come
 * from the shared inner-page rules, which list `.page-not-found` (the 404
 * page's body class) next to the six inner pages. */
.page-not-found .hero--inner {
  /* The orange corner glow used on the site's dark panels. */
  background:
    radial-gradient(70% 150% at 100% 0%, rgba(231, 106, 40, 0.22), rgba(0, 0, 0, 0) 55%),
    var(--color-dark);
  padding-top: calc(var(--ar-header-h, 110px) + clamp(32px, 4vw, 72px));
}

.error-404__content {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.error-404__code {
  color: var(--color-accent);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(120px, 14vw, 240px);
  line-height: 1;
  margin: 0 0 8px;
}

.page-not-found .hero__title::after,
.page-not-found .hero__lead {
  margin-left: auto;
  margin-right: auto;
}

.page-not-found .hero__lead {
  text-wrap: balance;
}

.page-not-found .hero__actions {
  justify-content: center;
}

/* Status notices receive focus programmatically (announced, not a control). */
.form-notice:focus {
  outline: none;
}

/* Contract Manufacturing "Product Category" <select>: custom dropdown arrow + pointer.
   The form now shares the packaging .pkg-inquiry styling; this only restores the
   native-select arrow. Scoped to .contact-form to win over `.form-control`. */
.pkg-inquiry .contact-form .cm-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
  padding-right: 42px;
}

/* Enhanced inquiry-form dropdown (assets/js/custom-select.js). The native
   <select> stays in the form, visually hidden; the list is anchored to the
   field so it always opens directly below it and moves with it on scroll. */
.ar-select {
  position: relative;
}

.ar-select__native {
  height: 1px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

.pkg-inquiry .contact-form .ar-select__btn {
  align-items: center;
  background-color: var(--color-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
  display: flex;
  min-height: 48px;
  padding-right: 42px;
  text-align: left;
  width: 100%;
}

.ar-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-select--placeholder .ar-select__value {
  color: var(--color-muted-aa);
}

.ar-select__native.form-control--error ~ .ar-select__btn {
  border-color: #d64545;
}

.ar-select__native.form-control--error ~ .ar-select__btn:focus {
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.15);
}

.ar-select__list {
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20, 16, 12, 0.14);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
}

.ar-select__list[hidden] {
  display: none;
}

.ar-select__option {
  border-radius: calc(var(--radius) - 2px);
  color: var(--color-dark);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.4;
  padding: 11px 12px;
}

.ar-select__option.is-active {
  background: rgba(231, 106, 40, 0.1);
}

.ar-select__option[aria-selected="true"] {
  color: var(--color-accent-aa);
  font-weight: 600;
}

.ar-select__option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   Documentation "request by email" modal (Documentation page)
   ========================================================================== */

/* Lock background scroll while the modal is open. */
body.ds-modal-open {
  overflow: hidden;
}

/* Document card is now a <button> - reset so it matches the previous <a>. */
button.ds-doc-card {
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.ds-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  /* Above the fixed site header (.ar-header z-index 1030). */
  z-index: 1100;
}

.ds-modal[hidden] {
  display: none;
}

.ds-modal__overlay {
  background: rgba(10, 8, 6, 0.72);
  inset: 0;
  position: absolute;
}

.ds-modal__dialog {
  background: #15100b;
  border: 1px solid rgba(231, 106, 40, 0.25);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  max-width: 460px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 40px);
  position: relative;
  width: 100%;
}

.ds-modal__dialog::before {
  background: radial-gradient(70% 150% at 100% 0%,
      rgba(231, 106, 40, 0.22),
      transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.ds-modal__dialog>* {
  position: relative;
  z-index: 1;
}

.ds-modal__close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 2;
}

.ds-modal__close:hover {
  color: #fff;
}

.ds-modal__eyebrow {
  color: var(--color-accent);
  display: block;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ds-modal__title {
  color: #fff;
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.ds-modal__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(16px, 1.1458vw, 22px);
  line-height: 1.6;
  margin: 0 0 20px;
}

.ds-modal__form .form-label,
.ds-modal__label {
  color: rgba(255, 255, 255, 0.85);
}

.ds-modal__notice {
  margin: 16px 0 0;
}

.ds-modal__notice.form-notice--error {
  background: rgba(224, 80, 80, 0.16);
  border-color: rgba(224, 80, 80, 0.55);
  color: #f4b3b3;
}

.ds-modal__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.ds-modal__cancel {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 12px 22px;
  text-transform: uppercase;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ds-modal__cancel:hover {
  border-color: var(--color-accent);
  color: #fff;
}

.btn-cta.ds-modal__submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Success state (shown in place of the form; modal stays open until dismissed). */
.ds-modal__request[hidden],
.ds-modal__form[hidden],
.ds-modal__success[hidden] {
  display: none;
}

.ds-modal__success {
  text-align: center;
}

.ds-modal__success-check {
  align-items: center;
  background: rgba(231, 106, 40, 0.16);
  border: 1px solid rgba(231, 106, 40, 0.55);
  border-radius: 50%;
  color: var(--color-accent);
  display: inline-flex;
  font-size: 30px;
  height: 64px;
  justify-content: center;
  line-height: 1;
  margin: 0 auto 18px;
  width: 64px;
}

.ds-modal__success .ds-modal__actions {
  justify-content: center;
}

/* ==========================================================================
   Primary Product Groups - "What We Make" homepage section
   ========================================================================== */

/* Reveal stagger (no inline styles). */

/* ==========================================================================
   MIL Specs & Compliance - intro feature strip (this page only)
   ========================================================================== */
/* MIL Specs intro - premium light feature cards (this page only). */
.page-id-161 .hero__bg-img {
  object-position: right;
}

/* .page-id-161 .hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(20, 20, 20, 0.82) 0%,
      rgba(20, 20, 20, 0.2) 50%,
      rgba(20, 20, 20, 0.1) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 20, 20, 0.1) 0%,
      rgba(20, 20, 20, 0.15) 100%
    );
} */
#mil-specs-intro {
  padding: 50px 0;
}

/*
 * Feature cards matched to the homepage's "Our Primary Product Groups"
 * cards (.ar-group, style.css): same card shell (white,
 * no border, radius, shadow, lift + fill-orange-on-hover, no accent-bar
 * reveal), same icon treatment (a circular light-gray plate, since these
 * icons - like Contract Manufacturing's Capabilities icons - don't ship
 * with a baked-in plate of their own), same left-aligned layout/typography,
 * and the same icon/text/plate colour swap on hover. The icon files
 * themselves (stroke="currentColor" inline SVGs) are untouched - only
 * their container/colour is styled, via `currentColor`.
 */
#mil-specs-intro .msi__item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 4px 4px 89.75px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  padding: 30px 24px;
  text-align: left;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mil-specs-intro .msi__item:hover {
  background: var(--color-accent);
  transform: translateY(-6px);
}

#mil-specs-intro .msi__item:hover .msi__icon {
  background: #fff;
  color: var(--color-accent);
}

#mil-specs-intro .msi__item:hover .msi__title,
#mil-specs-intro .msi__item:hover .msi__desc {
  color: #fff;
}

#mil-specs-intro .msi__icon {
  align-items: center;
  background: #f1f1f1;
  border-radius: 999px;
  color: #1f1f1f;
  display: inline-flex;
  flex: none;
  height: 100px;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: 100px;
}

#mil-specs-intro .msi__icon svg {
  height: 42px;
  width: 42px;
}

#mil-specs-intro .msi__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#mil-specs-intro .msi__title {
  color: var(--color-dark);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0;
  text-transform: none;
  transition: color 0.3s ease;
}

#mil-specs-intro .msi__desc {
  color: #252525;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
  max-width: none;
  transition: color 0.3s ease;
}

/* Reveal stagger (no inline styles). */
#mil-specs-intro .msi__grid>[data-reveal]:nth-child(2) {
  --reveal-delay: 70ms;
}

#mil-specs-intro .msi__grid>[data-reveal]:nth-child(3) {
  --reveal-delay: 140ms;
}

#mil-specs-intro .msi__grid>[data-reveal]:nth-child(4) {
  --reveal-delay: 210ms;
}

.contact-form .form-control--error,
.form-control--error {
  border-color: #d64545;
}

.contact-form .form-control--error:focus {
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.15);
}

.contact-form .form-control--valid,
.form-control--valid {
  border-color: #2e9e6a;
}

.contact-form .form-control--valid:focus {
  border-color: #2e9e6a;
  box-shadow: 0 0 0 3px rgba(46, 158, 106, 0.15);
}

/* Success notice (e.g. profile saved) */

/* Contact — submission status notice */
.form-notice {
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15.2px;
  font-weight: 600;
  margin: 0 auto 40px;
  padding: 16px 20px;
}

.form-notice--error {
  background: rgba(214, 69, 69, 0.08);
  border-color: rgba(214, 69, 69, 0.35);
  color: #b53b3b;
}

/* Inline AJAX notice rendered directly under the form */
#contactNotice {
  margin: 24px 0 0;
  max-width: none;
}

/* Contact — clickable address + embedded location map */
.contact-info__value address {
  color: inherit;
  font-style: normal;
  margin: 0;
}

.contact-map {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 400px;
  margin-top: 48px;
  overflow: hidden;
}

.contact-map iframe {
  display: block;
  height: 100%;
  width: 100%;
}

/* Sanitizing (Vira-Gel) — intro + light product cards */

/* Nested "includes" list */

/* Stand spec groups */

/* Availability block */

/* R-Tech — size stack on a light section */
.size-stack--light .size-stack__item {
  background: var(--color-light);
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.size-stack--light .size-stack__item:hover {
  background: rgba(231, 106, 40, 0.06);
  border-color: rgba(231, 106, 40, 0.45);
}

.size-stack--light .size-stack__label {
  color: var(--color-dark);
}

/* M-Tech — light product cards with Size/Detail/NSN tables */

/* Silicones — light product cards on a white section */

/* Tighter, readable title for the long fluid names */

/* Spec lines sit closer to the title as a small meta cluster */

/* Size / NSN table inside the card — clearer columns + zebra rows */

/* I-Tech availability — minimal centered closing block */

/*--------------------------------------------------------------
# Logged In - Data Sheets Portal Layout (Premium Redesign)
--------------------------------------------------------------*/
.ds-portal-wrap {
  margin: 56px auto 0;
  max-width: 980px;
}

/* Divider-separated category groups */
.ds-category-group {
  margin: 0;
}

.ds-category-group+.ds-category-group {
  border-top: 1px solid var(--color-border-soft);
  margin-top: 48px;
  padding-top: 48px;
}

/* Category heading + its accent rule (rendered as .page-section__rule in markup) */
.ds-category-title {
  color: var(--color-dark);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 16px;
}

.ds-category-group .page-section__rule {
  margin-bottom: 8px;
}

/* Sub-headings (SDS / TDS labels) */
.ds-eyebrow {
  color: var(--color-accent-aa);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 28px 0 16px;
}

/* Card grid */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}

/* Document cards */
.ds-doc-card {
  align-items: center;
  background: var(--color-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 16px;
  min-height: 76px;
  padding: 16px 18.4px;
  position: relative;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ds-doc-card:hover,
.ds-doc-card:focus-visible {
  border-color: rgba(231, 106, 40, 0.5);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.ds-doc-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* PNG PDF icon — sits in a soft tinted tile */
.ds-doc-icon {
  background: rgba(231, 106, 40, 0.08);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  height: 44px;
  object-fit: contain;
  padding: 7px;
  width: 44px;
}

/* Document title */
.ds-doc-name {
  color: var(--color-dark);
  flex: 1 1 auto;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 14.4px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
  word-break: break-word;
}

.ds-doc-card:hover .ds-doc-name,
.ds-doc-card:focus-visible .ds-doc-name {
  color: var(--color-accent);
}

/* Download affordance — CSS-only cue on the right of each card */
/* .ds-doc-card::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	flex: 0 0 auto;
	height: 18px;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: 18px;
} */

.ds-doc-card:hover::after,
.ds-doc-card:focus-visible::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e76a28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14'/%3E%3C/svg%3E");
  opacity: 1;
  transform: translateY(2px);
}

/*--------------------------------------------------------------
# Products catalogue page — exact match to design
--------------------------------------------------------------*/

/* ---- Hero ---- */

.hero__title--products {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(41.6px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  max-width: 760px;
}

.hero__title--products::after {
  background: var(--color-accent);
  border-radius: 2px;
  height: 4px;
  margin: 24px 0 22px;
  width: 60px;
}

/* ==========================================================================
   Products catalogue — #catalogue (search + category rail) and .prod-catalogue.
   Rebuilt to faithfully match the ARtech Products design reference.
   Scoped entirely to products-page classes; nothing else on the page changes.
   ========================================================================== */

/* ---- Search bar (above the sticky rail) ---- */

.prod-search {
  align-items: center;
  display: flex;
  position: relative;
}

.prod-search__icon {
  color: var(--color-accent);
  display: inline-flex;
  left: 20px;
  pointer-events: none;
  position: absolute;
}

.prod-search__input {
  background: #fff;
  border: 1.5px solid #e4ddd5;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(20, 16, 12, 0.05);
  color: #16110d;
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  font-weight: 500;
  outline: none;
  padding: 10px 58px 10px 54px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  width: 100%;
}

.prod-search__input::placeholder {
  color: #9a938c;
}

.prod-search__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 8px 26px rgba(226, 107, 28, 0.16);
}

.prod-search__input:focus-visible {
  outline: 2px solid var(--color-accent-aa);
  outline-offset: 2px;
}

.prod-search__clear {
  align-items: center;
  background: #f2ece6;
  border: 0;
  border-radius: 50%;
  color: #5c554e;
  cursor: pointer;
  display: none;
  height: 30px;
  justify-content: center;
  position: absolute;
  right: 15px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  width: 30px;
}

.prod-search__clear.is-visible {
  display: inline-flex;
}

.prod-search__clear:hover {
  background: #e6ddd4;
  color: #16110d;
}

/* ---- Sticky category rail (#catalogue) ---- */
.prod-toolbar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(251, 248, 245, 0.96);
  border-bottom: 1px solid #ece6e0;
  box-shadow: 0 10px 24px rgba(20, 16, 12, 0.05);
  position: sticky;
  top: var(--navbar-h, 76px);
  z-index: 60;
  padding: 20px 15px;
}

/* Swiper viewport for the category filter (sits between the rail arrows).
   Vertical padding gives the pill shadows room inside Swiper's clipped box. */

/* Equal-height buttons across the visible page. */

/* ---- Catalogue body ---- */

/* ---- Category overview hero ---- */

/* ---- Products toolbar row ---- */

/* ---- Group label ---- */

/* ---- Product grid + cards ---- */

/* ---- Empty state ---- */

/* ---- CTA banner ---- */

.prod-cta {
  align-items: center;
  background: #15100b;
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  overflow: hidden;
  padding: 48px;
  position: relative;
}

.prod-cta::before {
  background: radial-gradient(70% 170% at 100% 50%,
      rgba(226, 107, 28, 0.4),
      transparent 55%);
  content: "";
  inset: 0;
  position: absolute;
}

/* ---- Responsive ---- */

/*--------------------------------------------------------------
# MIL Spec & Compliance reference (milspec-page)
--------------------------------------------------------------*/
.milspec-page .hero__lead--inner {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 14px;
  max-width: 60ch;
}

.milspec-toolbar {
  position: sticky;
  /* top: 0; */
  z-index: 30;
}

.milspec-toolbar__count:empty {
  display: none;
}

/* Centered, narrower search bar */
.milspec-toolbar .prod-search {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

.milspec-toolbar__count {
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 12px auto 0;
  min-height: 1em;
  text-align: center;
}

/* ---- Tabs ------------------------------------------------------------- */
.ms-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 28px;
}

/* Tabs mirror the site .btn-cta button scheme: accent pill, uppercase label. */
.ms-tab {
  align-items: center;
  background: var(--color-light);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-heading);
  font-size: 13.12px;
  font-weight: 700;
  gap: 10.4px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  padding: 1em 1.8em;
  text-transform: uppercase;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.ms-tab:hover {
  background: rgba(231, 106, 40, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.ms-tab:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

.ms-tab:focus-visible {
  box-shadow: 0 0 0 2px #fff;
  outline: 2px solid var(--color-dark, #1f1f1f);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.ms-tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
}

.ms-tab.is-active:hover {
  background: var(--color-accent);
  color: var(--color-light);
}

.ms-tab__badge {
  background: rgba(231, 106, 40, 0.12);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 0;
  min-width: 22px;
  padding: 2px 8px;
  text-align: center;
}

.ms-tab.is-active .ms-tab__badge {
  background: rgba(255, 255, 255, 0.28);
  color: var(--color-light);
}

.ms-panel {
  animation: msPanelFade 0.28s ease;
}

.ms-panel[hidden] {
  display: none;
}

@keyframes msPanelFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.milspec-page .page-section {
  padding-bottom: 40px;
  padding-top: 40px;
}

.milspec-tabs-section .milspec-table-wrap {
  margin-top: 0;
}

.milspec-page .page-section {
  padding-bottom: 40px;
  padding-top: 40px;
}

.milspec-table-wrap {
  background: #fff;
  border: 1px solid #ece6e0;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(20, 16, 12, 0.06);
  margin-top: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.milspec-table {
  border-collapse: collapse;
  font-family: "DM Sans", sans-serif;
  font-size: 14.4px;
  min-width: 560px;
  width: 100%;
}

.milspec-table thead th {
  background: #fbf8f5;
  border-bottom: 2px solid #ece6e0;
  color: #16110d;
  font-family: var(--font-heading);
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 14px 18px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.milspec-table tbody td {
  border-bottom: 1px solid #f1ece6;
  color: #38312b;
  padding: 14px 18px;
  vertical-align: top;
}

.milspec-table tbody tr:last-child td {
  border-bottom: 0;
}

.milspec-table tbody tr:hover td {
  background: rgba(226, 107, 28, 0.04);
}

.milspec-code {
  color: #16110d;
  font-weight: 600;
}

.milspec-tag {
  /* background: rgba(226, 107, 28, 0.1); */
  border-radius: 6px;
  /* color: #C4560F; */
  display: inline-block;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 12.48px;
  font-weight: 600;
  /* padding: 3px 9px; */
  white-space: nowrap;
}

.milspec-tag--cas {
  /* background: rgba(58, 90, 130, 0.1); */
  /* color: #3A5A82; */
}

.milspec-dash {
  color: #c3bbb2;
}

/* NSN cell: one entry per line; wraps rather than overflowing. */
.milspec-nsn {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.milspec-nsn__item {
  color: #38312b;
  font-family: var(--font-heading);
  font-size: 12.48px;
  font-weight: 600;
  white-space: normal;
}

.milspec-empty {
  color: var(--color-muted);
  font-size: 14.4px;
  margin: 0;
  padding: 22px 18px;
  text-align: center;
}

/* ---- Compliance tab: standard cards ---------------------------------- */
.ms-std-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ms-std-card {
  background: #fff;
  border: 1px solid #ece6e0;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(20, 16, 12, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.ms-std-card:hover {
  border-color: #e9c9ae;
  box-shadow: 0 16px 34px rgba(226, 107, 28, 0.12);
  transform: translateY(-2px);
}

.ms-std-card[hidden] {
  display: none;
}

.ms-std-card__name {
  color: #16110d;
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 17.28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.ms-std-card__desc {
  color: #5c554e;
  font-size: 14.08px;
  line-height: 1.5;
  margin: 0;
}

.ms-std-card__applied {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.ms-std-card__applied-label {
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: 10.24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ms-chip {
  background: rgba(226, 107, 28, 0.08);
  border: 1px solid rgba(226, 107, 28, 0.18);
  border-radius: 999px;
  color: #a9490b;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

.ms-empty {
  color: var(--color-muted);
  font-size: 14.4px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  text-align: center;
}

/*--------------------------------------------------------------
# Contract Manufacturing (contract-manufacturing-page)
# Hero reuses .hero--inner; intro reuses .tech-resources; the closing
# banner reuses .prod-cta. Only the mid-page components are scoped here.
--------------------------------------------------------------*/

/*
 * Capability cards — matched to the homepage's "Our Primary Product Groups"
 * cards (.ar-group, style.css): same card shell (radius,
 * shadow, lift-on-hover, fill-orange-on-hover), same icon treatment (a
 * circular light-gray plate, since these icons - unlike the homepage's
 * own - don't ship with a baked-in plate of their own), same typography
 * scale, and the same icon/text/plate colour swap on hover. The icons
 * themselves (artech_cm_icon(), inline stroke="currentColor" SVGs) are
 * untouched - only their container/colour is styled, via `currentColor`.
 */
.cm-cap {
  background: var(--color-light);
  border-radius: 16px;
  box-shadow: 4px 4px 89.75px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  padding: 30px 24px;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-cap:hover {
  background: var(--color-accent);
  transform: translateY(-6px);
}

.cm-cap:hover .cm-cap__icon {
  background: var(--color-light);
  color: var(--color-accent);
}

.cm-cap:hover .cm-cap__title,
.cm-cap:hover .cm-cap__desc {
  color: var(--color-light);
}

.cm-cap__icon {
  align-items: center;
  background: #f1f1f1;
  border-radius: 999px;
  color: #1f1f1f;
  display: inline-flex;
  flex: 0 0 auto;
  height: 100px;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: 100px;
}

.cm-cap__icon svg {
  height: 42px;
  width: 42px;
}

.cm-cap__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-cap__title {
  color: var(--color-dark);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0;
  transition: color 0.3s ease;
}

.cm-cap__desc {
  color: #252525;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
  transition: color 0.3s ease;
}

/* Spec-to-delivery workflow (dark panel) */
.cm-flow {
  background: var(--color-dark);
  border-radius: 22px;
  overflow: hidden;
  padding: clamp(36px, 4vw, 52px);
  position: relative;
}

.cm-flow::before {
  background: radial-gradient(70% 150% at 100% 0%,
      rgba(231, 106, 40, 0.22),
      transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cm-flow__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.cm-flow__title {
  color: var(--color-light);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
  max-width: 32ch;
}

.cm-flow__lead {
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(16px, 1.1458vw, 22px);
  line-height: 1.65;
  margin: 0;
  max-width: 400px;
}

.cm-flow__grid {
  display: grid;
  gap: 16px;
  /* minmax(0, 1fr), not plain 1fr: without the 0 floor, grid tracks refuse to
   * shrink past their content's intrinsic width, so on mid-width viewports
   * the panel's `overflow: hidden` silently clips the overflowing card(s)
   * instead of the columns shrinking to fit. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.cm-step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 22.4px;
  height: 100%;
}

.cm-step__num {
  color: var(--color-accent);
  display: block;
  font-family: var(--font-heading);
  font-size: 15.2px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.cm-step__title {
  color: var(--color-light);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 16.32px;
  font-weight: 700;
  margin: 0 0 8px;
}

.cm-step__desc {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13.6px;
  line-height: 1.6;
  margin: 0;
}

/* Homepage product groups: icon row + opportunity/application blocks inside the reused cm-step card */
.cm-step__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cm-step__block {
  margin-top: 16px;
}

.cm-step__block_listing {
  min-height: 260px;
}

.cm-step__list {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.55;
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}

.cm-step__list li {
  margin-bottom: 4px;
}

.cm-step__list li:last-child {
  margin-bottom: 0;
}

/* Equalize card titles on the homepage product-groups section only (scoped so the
   Contract Manufacturing #cm-process titles are untouched). Reserves enough height
   for the longest titles' worst-case wrap ("Assembly & Maintenance Chemicals" /
   "Surface Treatment & Protective Coatings" / "Specialty Engineered Materials",
   3 lines at the 22px/28px title size) at any viewport width, so the content
   below every title starts at the same vertical position regardless of how many
   lines each card's own title actually wraps to. */
#materials .cm-step__title {
  min-height: 84px;
}

/* "Primary Opportunities" list text: white instead of its default washed-out
   gray-white, per request (secondary/subtext on this dark card). No font-size
   override here: the base .cm-step__list rule above already sets 13.6px /
   1.55 line-height, which is an exact match to Contract Packaging's card
   description (#pkg-process .pkg-process__card-desc) - this override only
   needs to touch color. */
#materials .cm-step__list {
  color: var(--color-light);
}

/* "Primary Opportunities" / "Applications" labels (.lubricant-card__tagline
   is shared with other, out-of-scope components elsewhere on the site, so
   this is scoped to #materials only). */
#materials .lubricant-card__tagline {
  font-size: 20px;
  font-weight: 400;
}

/* Match the homepage's "Our Primary Product Groups" section exactly: same icon
   box size (.ar-group__icon is already 100x100 via artech-2026.css, loaded
   site-wide) and the same title font (family/size/weight/line-height). Color
   is left as-is (var(--color-light)) since this card has a dark background,
   unlike the homepage's light card. Font-size/line-height now matched to
   Contract Packaging's "From Spec to Shelf" card title
   (#pkg-process .pkg-process__card-title: 22px/28px) so the two sections'
   card typography reads as one consistent scale, per request. */
#materials .cm-step__title {
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 28px;
}

/* Card headings: orange, per request. */
#materials .cm-step__title {
  color: var(--color-accent);
}

/* Section heading: white, per request. This is a top-level "Section H2"
   ("Our Primary Product Groups"), reusing the .cm-flow__title class name
   from the unrelated process-flow banner below - both tiers now share the
   same 36px desktop size/clamp, so this just needs the color override. */
#materials .cm-flow__title {
  color: var(--color-light);
}

/* Product-group icons: these are the same shared SVG files/classes the
   homepage's light-background cards use, where each glyph sits on a light
   circular plate (baked into 3 of the 4 files as their own <rect>; added via
   CSS for the 4th through .ar-group__icon--plated). On this page's dark
   card, drop that plate and show the bare glyph directly, colored orange
   instead of its default dark fill. Scoped to #materials only — the
   homepage's own presentation of these same files is untouched. */
/* Icon box enlarged slightly (100px -> 110px desktop/laptop; matching
   responsive bands added below for tablet/mobile) for prominence, per
   request. Scoped to #materials so the homepage's own use of this shared
   class is untouched. */
#materials .ar-group__icon {
  background: none;
  height: 110px;
  width: 110px;
}

#materials .ar-group__icon>svg,
#materials .ar-group__icon img {
  height: 110px;
  width: 110px;
}

#materials .ar-group__icon svg rect {
  display: none;
}

#materials .ar-group__icon svg path {
  fill: var(--color-accent);
}

#materials .ar-group__icon--plated {
  padding: 0;
}

/* This icon (Surface Treatment & Protective Coatings) reads slightly smaller
   than the other three without its plate. Scale it up a little — height and
   width both increased by the same ~15.6% factor from its native 43.198x
   34.535px, so its own proportions (preserveAspectRatio="none" means it
   won't self-correct) stay exactly as designed, just a bit larger. Bumped
   again in proportion with the icon box enlargement above (50/40 -> 55/44).*/
#materials .ar-group__icon--plated svg {
  height: 55px;
  width: 44px;
}

/* Cards size to their own content so expanding one card doesn't stretch its row
   siblings (overrides the grid's default align-items: stretch). Scoped to #materials. */
#materials .cm-flow__grid {
  align-items: start;
}

/* Materials accordion: Applications toggle row (label left, chevron right). */
#materials .cm-step__apps-toggle {
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

#materials .cm-step__apps-toggle .lubricant-card__tagline {
  margin-bottom: 0;
}

#materials .cm-step__chevron {
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  transition:
    transform 0.3s ease,
    color 0.2s ease;
}

#materials .cm-step__apps-toggle:hover .cm-step__chevron {
  color: var(--color-accent);
}

#materials .cm-step.is-open .cm-step__chevron {
  transform: rotate(180deg);
}

/* Applications grid: collapsed by default, smooth expand when the card is open. */
#materials .cm-step__apps {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    margin-top 0.3s ease;
}

#materials .cm-step.is-open .cm-step__apps {
  margin-top: 10px;
  max-height: 360px;
  opacity: 1;
}

/* Reserve two lines for every application label so icons/labels align neatly. */
#materials .cm-step__app-label {
  min-height: 2.6em;
}

/* Applications: left-aligned 3-column grid of icon-over-label cells, equal width */
.cm-step__apps {
  display: grid;
  gap: 14px 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.cm-step__app {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.cm-step__app-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.2px;
  line-height: 1.3;
}

/* Transparent by default → the shared homepage #materials layout is unchanged. */
.cm-step__apps-inner {
  display: contents;
}

/* ---------------------------------------------------------------------------
   Contract Manufacturing page ONLY: larger, card/chip-style Applications that
   stay readable and aligned whether a group has ~10 or 50+ items. Scoped to
   .contract-mfg-page so the homepage version is untouched. Click-to-expand
   behavior (JS + .is-open) is unchanged; the reveal uses a grid-rows height
   animation so any item count expands fully without clipping.
   --------------------------------------------------------------------------- */
.contract-mfg-page #materials .cm-step__apps {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  max-height: none;
  overflow: hidden;
  transition:
    grid-template-rows 0.35s ease,
    opacity 0.3s ease,
    margin-top 0.3s ease;
}

.contract-mfg-page #materials .cm-step.is-open .cm-step__apps {
  grid-template-rows: 1fr;
  max-height: none;
}

.contract-mfg-page #materials .cm-step__apps-inner {
  column-gap: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  row-gap: 0;
}

/* Premium, un-boxed layout: icon stacked over label with generous whitespace
   and a hairline divider — typography-led, no filled card. The label uses the
   full column width so it never clips inside the narrow group cards. Paired
   cells in each grid row share height for an even visual rhythm. */
.contract-mfg-page #materials .cm-step__app {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  flex-direction: column;
  gap: 12px;
  height: auto;
  justify-content: flex-start;
  padding: 22px 6px;
  text-align: center;
}

/* Label is the focus: larger, readable, wraps naturally onto multiple lines. */
.contract-mfg-page #materials .cm-step__app-label {
  color: var(--color-light);
  font-size: 16px;
  line-height: 1.4;
  min-height: 0;
  overflow-wrap: break-word;
  text-align: center;
}

/* Fluid label type. The group cards are narrow (about 185-390px wide depending
   on the viewport), and a fixed 16px broke long words ("Manufacturing",
   "Maintenance") mid-word in the two-column grid. The Applications panel is a
   size container, so the label size follows the width the panel actually gets:
   the widest word (about 7.4em) always fits its column, between 13px and 16px.
   When the panel is too narrow for two columns at 13px or more, it becomes a
   single column at a full 16px instead of shrinking the text further. */
.contract-mfg-page #materials .cm-step__apps {
  container-type: inline-size;
}

.contract-mfg-page #materials .cm-step__app-label {
  font-size: clamp(13px, calc((100cqw - 48px) / 14.8), 16px);
}

@container (max-width: 249.98px) {
  .contract-mfg-page #materials .cm-step__apps-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .contract-mfg-page #materials .cm-step__app-label {
    font-size: 16px;
  }
}

/* The rest of each group card's type follows the card width the same way.
   Fixed 20px / 22px / 16px overflowed the 185-310px cards ("Opportunities" and
   "Applications" ran past the card edge, "Maintenance" and long list words
   broke). At 300px+ nothing changes; below that the sizes scale down to a floor
   that stays legible, and words only break when they truly cannot fit. */
.contract-mfg-page #materials .cm-step {
  container-type: inline-size;
}

.contract-mfg-page #materials .cm-step__title,
.contract-mfg-page #materials .cm-step__list li,
.contract-mfg-page #materials .cm-step__app-label {
  overflow-wrap: break-word;
}

@container (max-width: 299.98px) {
  .contract-mfg-page #materials .lubricant-card__tagline {
    font-size: clamp(12px, calc((100cqw - 75px) / 10.3), 20px);
    letter-spacing: 0.14em;
  }

  .contract-mfg-page #materials .cm-step__title {
    font-size: clamp(18px, calc((100cqw - 52px) / 7.5), 22px);
  }

  .contract-mfg-page #materials .cm-step__list {
    font-size: clamp(14px, calc((100cqw - 70px) / 7.9), 16px);
  }
}

/* Process gallery */
.cm-figure {
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 22px rgba(20, 16, 12, 0.04);
  height: 100%;
  margin: 0;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.cm-figure:hover {
  box-shadow: 0 18px 38px rgba(20, 16, 12, 0.09);
  transform: translateY(-4px);
}

/* Media is a button (opens the video modal); reset so the design is unchanged. */
.cm-figure__media {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.cm-figure__media img {
  aspect-ratio: 3 / 2;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  width: 100%;
}

.cm-figure:hover .cm-figure__media img {
  transform: scale(1.05);
}

/* Play icon overlay reuses the Homepage .video-card__play component. */
.cm-figure__media:hover .video-card__play,
.cm-figure__media:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1);
}

.cm-figure__media:focus-visible {
  outline: 3px solid rgba(231, 106, 40, 0.5);
  outline-offset: -3px;
}

.cm-figure__caption {
  align-items: center;
  color: var(--color-dark);
  display: flex;
  font-family: var(--font-heading);
  font-size: 15.2px;
  font-weight: 600;
  gap: 10.4px;
  padding: 16px 20px;
}

.cm-figure__dot {
  background: var(--color-accent);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.cm-caps .page-section__head {
  max-width: 100%;
}

/* Contract Manufacturing - responsive */

/* ==========================================================================
   Packaging "formats" CTA banner (packaging page). All rules scoped to the
   #packaging-formats ID so nothing else is affected. Reuses the theme .btn-cta.
   ========================================================================== */
#packaging-formats {
  align-items: center;
  background: #15100b;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(20, 16, 12, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 22px 40px;
  justify-content: space-between;
  margin: 0 auto 40px;
  overflow: hidden;
  padding: clamp(26px, 3.6vw, 44px);
  position: relative;
}

#packaging-formats::before {
  background: radial-gradient(72% 160% at 100% 50%,
      rgba(226, 107, 28, 0.4),
      transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#packaging-formats>* {
  position: relative;
  z-index: 1;
}

#packaging-formats .packaging-formats__text {
  max-width: 640px;
}

#packaging-formats .packaging-formats__title {
  color: #fff;
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 10px;
}

#packaging-formats .packaging-formats__lead {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1458vw, 22px);
  line-height: 1.6;
  margin: 0;
}

#packaging-formats .packaging-formats__action {
  flex: none;
}

/* ==========================================================================
   Packaging inquiry form reveal. Hidden until "Inquire Now" is clicked, then
   slides down via a grid-rows height animation. Scoped to the Packaging
   section (#packaging). State toggled by the .is-visible class in main.js.
   ========================================================================== */
#packaging .pkg-reveal {
  display: grid;
  grid-template-rows: 0fr;
  scroll-margin-top: calc(var(--navbar-h, 76px) + 20px);
  transition: grid-template-rows 0.38s ease;
}

#packaging .pkg-reveal.is-visible {
  grid-template-rows: 1fr;
}

#packaging .pkg-reveal__inner {
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.32s ease;
}

#packaging .pkg-reveal.is-visible .pkg-reveal__inner {
  opacity: 1;
}

/* ==========================================================================
   Packaging page — "What We Package" container cards. All rules scoped to
   #packaging so no other section is affected. Premium cards mirror the
   Products/Contract Manufacturing card language (theme radius, shadow, accent).
   ========================================================================== */
#packaging .pkg-containers__head {
  margin-bottom: 40px;
  max-width: 100%;
}

/* "Right Container" highlight in the section heading — this page's own
   existing orange accent color (already used for its icons/CTA). */
#packaging .pkg-containers__title-highlight {
  color: var(--color-accent);
}

#packaging .page-section__lead {
  max-width: 100%;
}

section#packaging .box {
  margin-bottom: 50px;
}

/* Matches the homepage's "Our Primary Product Groups" (.ar-group) cards
   exactly — same border-radius, shadow, padding, and icon-to-body gap.
   Height is intentionally left at 100% (not the homepage's fixed 294px):
   these six cards' descriptions vary more in length than the homepage's,
   and a fixed height risked clipping the longer ones. */
#packaging .pkg-card {
  align-items: flex-start;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 4px 4px 89.75px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  padding: 30px 24px;
  text-align: left;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: same fill-orange + lift as the homepage's .ar-group:hover - card
   background goes orange, icon plate goes white with the glyph turning
   orange, and both text rows turn white. */
#packaging .pkg-card:hover {
  background: var(--ar-orange);
  transform: translateY(-6px);
}

#packaging .pkg-card:hover .pkg-card__icon {
  background: var(--ar-white);
  color: var(--ar-orange);
}

#packaging .pkg-card:hover .pkg-card__title,
#packaging .pkg-card:hover .pkg-card__desc {
  color: var(--ar-white);
}

/* Same circular, grayish-fill container as the homepage's .ar-group__icon
   (100x100px, #f1f1f1 background) with the glyph in the homepage's dark
   icon color instead of this page's orange accent. */
#packaging .pkg-card__icon {
  align-items: center;
  background: #f1f1f1;
  border-radius: var(--ar-radius-pill);
  color: var(--ar-dark);
  display: inline-flex;
  flex: none;
  height: 100px;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: 100px;
}

#packaging .pkg-card__icon svg {
  height: 46px;
  width: 46px;
}

/* Same font (Poppins) and sizing as the homepage's .ar-group__name / .ar-group__text. */
#packaging .pkg-card__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0;
}

#packaging .pkg-card__desc {
  color: #252525;
  font-family: var(--ar-font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

#packaging .pkg-containers__note {
  margin-top: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

#packaging .pkg-containers__note-text {
  color: var(--color-dark);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: clamp(18px, 2vw, 22px);
  margin: 0;
}

/* "What We Package" — compact (max 1040px) heading + numbered container grid:
   transparent product photos on white, thin dividers between cells, green
   number, navy bold title, light size/details line. A card left alone on the
   last row spans the full width. */
section#packaging .box {
  margin-left: auto;
  margin-right: auto;
  max-width: 1040px;
}

#packaging .pkg-heading {
  margin: 0 0 28px;
  text-align: center;
}

#packaging .pkg-heading__title {
  align-items: center;
  color: var(--color-dark);
  display: flex;
  font-family: var(--ar-font-ui);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  gap: clamp(14px, 2vw, 28px);
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

#packaging .pkg-heading__title::before,
#packaging .pkg-heading__title::after {
  background: var(--color-accent);
  content: "";
  flex: 1 1 0;
  height: 2px;
  min-width: 16px;
}

#packaging .pkg-heading__sub {
  color: var(--color-muted-aa);
  font-family: var(--ar-font-ui);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  margin: 6px 0 0;
}

#packaging .pkg-options-wrap {
  overflow: hidden;
}

#packaging .pkg-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 -1px -1px 0;
  padding: 0;
}

#packaging .pkg-option {
  align-items: center;
  border-bottom: 1px solid #e8eaef;
  border-right: 1px solid #e8eaef;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 26px;
  text-align: center;
}

#packaging .pkg-option:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

#packaging .pkg-option__media {
  align-items: center;
  display: flex;
  height: clamp(150px, 15vw, 200px);
  justify-content: center;
  width: 100%;
}

#packaging .pkg-option__img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

#packaging .pkg-option__title {
  color: var(--color-dark);
  font-family: var(--ar-font-ui);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  margin: 6px 0 0;
}

#packaging .pkg-option__meta {
  color: #252525;
  font-family: var(--ar-font-ui);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  margin: 4px 0 0;
}

@media (max-width: 991.98px) {
  #packaging .pkg-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #packaging .pkg-option:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  #packaging .pkg-option:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  #packaging .pkg-option__media {
    height: clamp(150px, 24vw, 210px);
  }

}

@media (max-width: 575.98px) {
  #packaging .pkg-options {
    grid-template-columns: minmax(0, 1fr);
  }

  #packaging .pkg-option,
  #packaging .pkg-option:last-child:nth-child(odd) {
    grid-column: auto;
  }

  #packaging .pkg-option__media {
    height: 200px;
  }
}

/* ==========================================================================
   Packaging page — "How It Works" 3-step process (Specify / Sample / Fill &
   Ship). All rules scoped to #pkg-process; ARtech tokens + Bootstrap grid.
   ========================================================================== */
/* Restyled to the Homepage #lubricants design language: dark premium panel with
   an accent glow, glass cards carrying an animated top accent bar, bordered
   accent icon chips, and a hover lift. Reuses the same values/tokens as
   .lubricant-card / .page-section--dark. Content and layout unchanged. */
#pkg-process {
  margin: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
}

/* Panel radius/padding matched to the Contract Manufacturing page's "Our
   Primary Product Groups" panel (.cm-flow). */
#pkg-process .pkg-process__panel {
  background: var(--color-dark);
  border-radius: 22px;
  color: var(--color-light);
  overflow: hidden;
  padding: clamp(36px, 4vw, 52px);
  position: relative;
}

/* Same dual radial accent glow as .page-section--dark. */
#pkg-process .pkg-process__panel::before {
  background:
    radial-gradient(900px circle at 10% 10%,
      rgba(231, 106, 40, 0.18) 0%,
      rgba(231, 106, 40, 0) 55%),
    radial-gradient(900px circle at 90% 90%,
      rgba(231, 106, 40, 0.1) 0%,
      rgba(231, 106, 40, 0) 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#pkg-process .pkg-process__panel>* {
  position: relative;
  z-index: 1;
}

#pkg-process .pkg-process__head {
  margin-bottom: 40px;
  max-width: 100%;
}

/* Invert the header type on the dark panel (mirrors the --invert modifiers). */
#pkg-process .pkg-process__head .page-section__title {
  color: var(--color-light);
}

#pkg-process .pkg-process__head .page-section__lead {
  color: rgba(255, 255, 255, 0.78);
}

#pkg-process .pkg-process__grid {
  align-items: stretch;
}

/* Card shell matched to Contract Manufacturing's "Our Primary Product
   Groups" cards (#materials .cm-step): a static, translucent-white card on
   the dark panel - same background/border/radius/padding. That reference
   section has no hover treatment on its cards at all (only its
   "Applications" toggle chevron has a tiny hover color change), so the
   previous hover lift + animated top accent bar were removed to match -
   these cards are static, like the reference. */
#pkg-process .pkg-process__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: var(--color-light);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 24px 22.4px;
  position: relative;
}

/* Middle step stays distinguishable via a stronger accent border (content-
   driven by the "featured" flag) — no longer paired with any hover/motion
   effect, matching the static reference cards. */
#pkg-process .pkg-process__card--featured {
  border-color: rgba(231, 106, 40, 0.4);
}


#pkg-process .pkg-process__badge {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 6px 14px -4px rgba(231, 106, 40, 0.6);
  color: var(--color-light);
  display: inline-flex;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 26px;
  z-index: 2;
}

#pkg-process .pkg-process__badge svg {
  height: 13px;
  width: 13px;
}

/* Icon treatment matched to Contract Manufacturing's "Our Primary Product
   Groups" icons (#materials .ar-group__icon): no plate/container, a bare
   glyph in the accent orange. Box size (64/53/46px across bands) is
   intentionally NOT the same number as #materials's 110/92/80px container:
   these Tabler-style icons are drawn edge-to-edge in their 24x24 viewBox
   (~83% fill), while the .ar-group__icon files are drawn with much more
   internal padding (~48% fill) - measured via each glyph's own rendered
   bounding box. Matching the CONTAINER size would make these look far
   bigger; this size instead matches the actual DISPLAYED glyph size, per
   request. The icon files themselves are untouched — only their container
   size/color. */
#pkg-process .pkg-process__icon {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-accent);
  display: inline-flex;
  flex: none;
  height: 64px;
  justify-content: center;
  width: 64px;
}

#pkg-process .pkg-process__icon svg {
  height: 64px;
  width: 64px;
  /* Lighter line weight (1.7 -> 1.3), matching the thinner/lighter look of
     Contract Manufacturing's "Our Primary Product Groups" icons, per request.
     Overrides the icon's own inline stroke-width="1.7" markup attribute -
     the icon glyphs themselves are untouched. */
  stroke-width: 1.3;
}

/* Title font matched in step with #materials .cm-step__title (20px/26px ->
   22px/28px), per request. Color/weight already matched exactly. */
#pkg-process .pkg-process__card-title {
  color: var(--color-accent);
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 28px;
  margin: 0;
}

/* Matched to #materials .cm-step__list exactly (the closest equivalent
   body/secondary text in the Contract Manufacturing reference section), per
   explicit direction to prioritize that exact match over the sitewide
   18px icon-card body-text rule for this element specifically. */
#pkg-process .pkg-process__card-desc {
  color: var(--color-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

#pkg-process .pkg-process__foot {
  color: rgb(231 107 41);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  margin: 40px 0 0;
  text-align: center;
}

/* Hide #pkg-milspec and #packaging-formats (kept in markup for later restore). */
#pkg-milspec,
#packaging-formats {
  display: none !important;
}

/* ==========================================================================
   Packaging page — "Military & Government-Compliant Labeling" dark panel.
   Second reference section. All rules scoped to #pkg-milspec; ARtech tokens.
   ========================================================================== */
/* Deep, elevated, premium. Stronger contrast against the light #pkg-process
   panel above: richer black, accent hairline, glow, deeper shadow, bigger type. */
#pkg-milspec {
  margin: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}

#pkg-milspec .pkg-milspec__panel {
  background: #100b07;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  padding: clamp(34px, 4.8vw, 68px);
  position: relative;
}

/* Accent hairline along the top edge — a premium signal. */
#pkg-milspec .pkg-milspec__panel::after {
  background: linear-gradient(90deg,
      var(--color-accent),
      rgba(231, 106, 40, 0));
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

#pkg-milspec .pkg-milspec__panel::before {
  background: radial-gradient(68% 150% at 100% 0%,
      rgba(231, 106, 40, 0.4),
      transparent 58%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#pkg-milspec .pkg-milspec__panel>* {
  position: relative;
  z-index: 1;
}

#pkg-milspec .pkg-milspec__head {
  align-items: flex-start;
  display: flex;
  gap: 22px;
  margin-bottom: 34px;
}

#pkg-milspec .pkg-milspec__icon {
  align-items: center;
  background: rgba(231, 106, 40, 0.18);
  border: 1px solid rgba(231, 106, 40, 0.3);
  border-radius: 14px;
  color: var(--color-accent);
  display: inline-flex;
  flex: none;
  height: 60px;
  justify-content: center;
  width: 60px;
}

#pkg-milspec .pkg-milspec__icon svg {
  height: 30px;
  width: 30px;
}

#pkg-milspec .pkg-milspec__title {
  color: #fff;
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(18px, 1.302vw, 25px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 12px;
}

#pkg-milspec .pkg-milspec__desc {
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.7;
  margin: 0;
  max-width: 740px;
}

#pkg-milspec .pkg-milspec__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

#pkg-milspec .pkg-milspec__chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  gap: 11px;
  padding: 14px 18px;
}

#pkg-milspec .pkg-milspec__chip-icon {
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  flex: none;
}

#pkg-milspec .pkg-milspec__chip-icon svg {
  height: 18px;
  width: 18px;
}

/* The accent chip is emphasised to reinforce the premium, elevated feel. */

#pkg-milspec .pkg-milspec__action {
  text-align: right;
}

/* ==========================================================================
   Packaging page — "Please Inquire" rendered as a premium inline text CTA
   (not a button). Scoped to section#packaging .box so no other .btn-cta is
   affected. Keeps the accent color, arrow icon, and smooth-scroll behavior.
   ========================================================================== */
section#packaging .box a.btn-cta {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-accent-aa);
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
  transition: color 0.2s ease;
  will-change: auto;
}

section#packaging .box a.btn-cta:hover,
section#packaging .box a.btn-cta:focus,
section#packaging .box a.btn-cta:focus-visible,
section#packaging .box a.btn-cta:active {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--color-accent-aa);
  transform: none;
}

section#packaging .box a.btn-cta .btn-cta__icon svg {
  height: 18px;
  width: 18px;
}

/* Arrow nudges a few pixels right on hover (reuses the .btn-cta__icon transition). */
section#packaging .box a.btn-cta:hover .btn-cta__icon,
section#packaging .box a.btn-cta:focus .btn-cta__icon {
  transform: translateX(4px);
}

/*--------------------------------------------------------------
# Typography parity with the homepage
# (About Us / Contact / Contract Manufacturing / Documentation /
# MIL Specs & Compliance / Packaging)
#
# These six inner pages were built against this stylesheet's own
# `--font-heading` (Sora) / `--font-body` (Inter) tokens, while the
# homepage (style.css) uses `--ar-font-display` (DM
# Serif Display) for large headings and `--ar-font-ui` (Poppins) for
# everything else. Both font families are already loaded site-wide
# (inc/enqueue.php), so this section just re-points each page's text to
# the homepage's actual tokens - no new font files, no layout/spacing/
# color/content changes. A `var(--ar-font-ui, var(--font-heading))`
# fallback is used throughout so text still renders sensibly if
# artech-2026.css is ever missing.
#
# Two tiers, matching how the homepage itself splits fonts:
#  - Display tier (hero/section-level headings): DM Serif Display,
#    weight 400, letter-spacing 0 - matching the homepage's own H1/H2
#    treatment exactly (DM Serif Display has no real bold face, so the
#    old 700/800 weights and negative tracking - tuned for Sora - are
#    reset to match what the homepage itself uses).
#  - UI tier (labels, eyebrows, small card names, form labels, body/
#    lead/description copy): Poppins, keeping each element's existing
#    size/weight/letter-spacing, since those already match the
#    homepage's own label/body conventions (e.g. `.ar-pillar__badge`,
#    `.ar-card__name`).
#
# Page-unique classes (cm-*, ds-*, milspec-*, ms-std-card__*, pkg-*
# id-scoped rules) were edited in place above. The generic/shared
# component classes below (`.hero__title`, `.page-section__title`,
# `.page-section__eyebrow`, `.contact-form .form-label`, and body
# copy generally) are also used by other, out-of-scope templates
# (product pages, account/login pages, etc.), so they are scoped here
# to only these six pages' body-template classes to avoid touching
# typography anywhere else on the site.
--------------------------------------------------------------*/

/* Body copy: redefining --font-body here (scoped to these six pages'
   <body> element) automatically re-points every element that either
   sets `font-family: var(--font-body)` explicitly or simply inherits
   the site's default body font - covers hero leads, section leads,
   card/step descriptions, etc. in one place without hunting down
   every individual selector. */
.page-template-page-templatesabout-page-php,
.page-template-page-templatescontact-page-php,
.page-template-page-templatescontract-manufacturing-page-php,
.page-template-page-templatesdata-sheet-page-php,
.page-template-page-templatesmilspec-page-php,
.page-template-page-templatespackaging-page-php,
.page-not-found {
  --font-body: var(--ar-font-ui, var(--font-body));
}

/* Display tier: hero titles + top-level section titles. */
.page-template-page-templatesabout-page-php .hero__title,
.page-template-page-templatescontact-page-php .hero__title,
.page-template-page-templatescontract-manufacturing-page-php .hero__title,
.page-template-page-templatesdata-sheet-page-php .hero__title,
.page-template-page-templatesmilspec-page-php .hero__title,
.page-template-page-templatespackaging-page-php .hero__title,
.page-template-page-templatesabout-page-php .page-section__title,
.page-template-page-templatescontact-page-php .page-section__title,
.page-template-page-templatescontract-manufacturing-page-php .page-section__title,
.page-template-page-templatesdata-sheet-page-php .page-section__title,
.page-template-page-templatesmilspec-page-php .page-section__title,
.page-template-page-templatespackaging-page-php .page-section__title,
.page-not-found .hero__title {
  font-family: var(--ar-font-display, var(--font-heading));
  font-weight: 400;
  letter-spacing: 0;
}

/* UI tier: eyebrows/labels and form labels shared across these pages. */
.page-template-page-templatesabout-page-php .page-section__eyebrow,
.page-template-page-templatescontact-page-php .page-section__eyebrow,
.page-template-page-templatescontract-manufacturing-page-php .page-section__eyebrow,
.page-template-page-templatesdata-sheet-page-php .page-section__eyebrow,
.page-template-page-templatesmilspec-page-php .page-section__eyebrow,
.page-template-page-templatespackaging-page-php .page-section__eyebrow {
  font-family: var(--ar-font-ui, var(--font-heading));
}

.page-template-page-templatescontact-page-php .contact-form .form-label,
.page-template-page-templatescontract-manufacturing-page-php .contact-form .form-label,
.page-template-page-templatesdata-sheet-page-php .contact-form .form-label,
.page-template-page-templatespackaging-page-php .contact-form .form-label {
  font-family: var(--ar-font-ui, var(--font-heading));
}

/*--------------------------------------------------------------
# Hero heading vertical alignment — unified across every inner page
# (About Us / Contact / Contract Manufacturing / Documentation /
# MIL Specs & Compliance / Packaging previously bottom-aligned here with a
# separate sub-1200px top-clearance fallback; every other inner page was
# already vertically centered via the shared `.hero--inner` rule. The
# bottom-alignment is removed so every inner-page hero shares one
# `align-items: center` behavior, from the shared rule, identically at
# every breakpoint with no special-casing.
#
# These six pages (plus the homepage) are still the ones whose `body` skips
# the normal fixed-header top offset (artech-2026.css, "Body offset") so the
# floating header overlays the hero art. Every other inner page already gets
# that normal body offset, so the shared `.hero--inner` rule's own smaller
# padding-top is plenty of clearance there. These six still need at least
# `--ar-header-h` of top padding or the now vertically-centered heading can
# render under the header (it doesn't take up flow space in this exception,
# but the hero content still needs to clear it visually).
--------------------------------------------------------------*/
.page-template-page-templatesabout-page-php .hero--inner,
.page-template-page-templatescontact-page-php .hero--inner,
.page-template-page-templatescontract-manufacturing-page-php .hero--inner,
.page-template-page-templatesdata-sheet-page-php .hero--inner,
.page-template-page-templatesmilspec-page-php .hero--inner,
.page-template-page-templatespackaging-page-php .hero--inner {
  padding-top: max(clamp(64px, 8vw, 88px), var(--ar-header-h, 110px));
}

/*--------------------------------------------------------------
# Hero typography - responsive, matched to the homepage
# (About Us / Contact / Contract Manufacturing / Documentation /
# MIL Specs & Compliance / Packaging)
#
# The previous follow-up pinned these to the homepage hero's fixed 90px
# (with a 72px / 50px step at two breakpoints). This one replaces that
# stepped approach with the homepage's own ORIGINAL fluid clamp() formulas
# (the ones the homepage itself used before its own separate "remove all
# clamp()" pass converted it to fixed sizes) - a smooth, single rule that
# scales proportionally at every width between mobile and desktop instead
# of jumping at two fixed breakpoints, while still landing on exactly the
# same 90px/22px desktop values as before. CTA text is left as a flat 14px:
# the homepage's own CTA text isn't fluid-scaled either (it steps to 13px at
# one far breakpoint via a plain media query, not a clamp), so matching it
# with a clamp would be introducing behavior the homepage doesn't actually
# have. `.hero__title`/`.hero__lead`/`.btn-cta` are shared with out-of-scope
# templates, so everything here is scoped to only these six pages' body-
# template classes, per every follow-up above.
--------------------------------------------------------------*/
.page-template-page-templatesabout-page-php .hero__title,
.page-template-page-templatescontact-page-php .hero__title,
.page-template-page-templatescontract-manufacturing-page-php .hero__title,
.page-template-page-templatesdata-sheet-page-php .hero__title,
.page-template-page-templatesmilspec-page-php .hero__title,
.page-template-page-templatespackaging-page-php .hero__title,
.page-not-found .hero__title {
  font-size: clamp(34px, 4.6875vw, 90px);
}

.page-template-page-templatesabout-page-php .hero__lead,
.page-template-page-templatescontact-page-php .hero__lead,
.page-template-page-templatescontract-manufacturing-page-php .hero__lead,
.page-template-page-templatesdata-sheet-page-php .hero__lead,
.page-template-page-templatesmilspec-page-php .hero__lead,
.page-template-page-templatespackaging-page-php .hero__lead,
.page-not-found .hero__lead {
  color: var(--color-light);
  font-size: clamp(16px, 1.1458vw, 22px);
}

/* About Us / Documentation: `.hero__title--inner` zeroes out the title's own
 * margin-bottom (see its rule above), so unlike the other four pages here
 * (whose title keeps that margin, or restores it via `.hero__title--products
 * ::after` margin) the subheading directly beneath it had no gap after the
 * divider. Matches the spacing `.milspec-page .hero__lead--inner` already
 * uses for the same `hero__title--inner` + `hero__lead--inner` pairing. */
.page-template-page-templatesabout-page-php .hero__lead--inner,
.page-template-page-templatesdata-sheet-page-php .hero__lead--inner,
.page-not-found .hero__lead--inner {
  margin-top: 14px;
}

/* MIL Specs hero eyebrow ("Built to Serve. Engineered to Perform."): white
 * instead of the shared `.page-section__eyebrow` accent-orange color.
 * Scoped to just this hero, not the shared rule above (~line 7778), since
 * `.page-section__eyebrow` is also used in this page's own light-background
 * body sections, where white text would be invisible. */
.page-template-page-templatesmilspec-page-php .hero--inner .page-section__eyebrow {
  color: var(--color-light);
}

.page-template-page-templatesabout-page-php .hero__actions .btn-cta,
.page-template-page-templatescontact-page-php .hero__actions .btn-cta,
.page-template-page-templatescontract-manufacturing-page-php .hero__actions .btn-cta,
.page-template-page-templatesdata-sheet-page-php .hero__actions .btn-cta,
.page-template-page-templatesmilspec-page-php .hero__actions .btn-cta,
.page-template-page-templatespackaging-page-php .hero__actions .btn-cta {
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 14px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Section typography - responsive, matched to the homepage
# (About Us / Contact / Contract Manufacturing / Documentation /
# MIL Specs & Compliance / Packaging)
#
# Corrects and replaces the previous follow-up's flat 65px/36px/22px
# section-heading sizes with the homepage's own fluid clamp() formulas
# (same ones as before its "remove clamp()" pass), and lowers the
# top-level "Section H2" desktop size to 36px to match the large-panel
# tier (`.ar-pillar__title`) - i.e. every section-level heading on these
# pages, not just the large-panel ones, now tops out at 36px on desktop and
# scales down smoothly on tablet/mobile. Card names (`.ar-card__name` /
# `.ar-group__name` equivalents), their paired body text (Product Groups
# tier, 16px), and all labels/eyebrows are untouched, per the request.
#
# `.page-section__title`/`.page-section__lead` are shared with out-of-scope
# templates, so they stay scoped to these six pages' body-template classes.
# The page-unique "large panel" classes (`.pkg-inquiry__title`, `.cm-flow__title`,
# `.ds-category-title`, `.ds-modal__title`, `#packaging-formats
# .packaging-formats__title`, `#pkg-milspec .pkg-milspec__title`, and their
# paired lead/description text) and `#materials .cm-flow__title` ("Our
# Primary Product Groups", a genuine Section H2 reusing that class name -
# see the previous follow-up) were edited in place at their own
# definitions instead.
--------------------------------------------------------------*/
.page-template-page-templatesabout-page-php .page-section__title,
.page-template-page-templatescontact-page-php .page-section__title,
.page-template-page-templatescontract-manufacturing-page-php .page-section__title,
.page-template-page-templatesdata-sheet-page-php .page-section__title,
.page-template-page-templatesmilspec-page-php .page-section__title,
.page-template-page-templatespackaging-page-php .page-section__title {
  font-size: clamp(24px, 1.875vw, 36px);
}

.page-template-page-templatesabout-page-php .page-section__lead,
.page-template-page-templatescontact-page-php .page-section__lead,
.page-template-page-templatescontract-manufacturing-page-php .page-section__lead,
.page-template-page-templatesdata-sheet-page-php .page-section__lead,
.page-template-page-templatesmilspec-page-php .page-section__lead,
.page-template-page-templatespackaging-page-php .page-section__lead {
  font-size: clamp(16px, 1.1458vw, 22px);
}

/*--------------------------------------------------------------
# Container width/alignment matched to the header
# (About Us / Contact / Contract Manufacturing / Documentation /
# MIL Specs & Compliance / Packaging)
#
# These six pages wrap every section's content in Bootstrap's stock
# `.container` (unmodified Bootstrap 5.3.3 from the CDN, enqueued in
# inc/enqueue.php), which steps through its own default max-widths at each
# breakpoint and tops out at 1320px (plus a 12px/side gutter) on large
# desktop.
#
# The floating header's visible bar (`.ar-header__inner`, assets/css/
# artech-2026.css) is `max-width: var(--ar-nav-container)` (1766px) with
# `var(--ar-nav-pad)` (10px) of padding on every side, so its actual visible
# width is `var(--ar-nav-container) - 2 * var(--ar-nav-pad)` = 1746px,
# centred. That's the same expression the footer's own grid already uses
# (`.ar-footer__grid`, "Matches the header's visible container") to line up
# with the header - this section applies the identical technique to these
# six pages' Bootstrap container, so their content's left/right edges match
# the header's bar exactly, at any viewport width, using the same
# established pattern rather than a new one. (The homepage's own sections
# use a separate, narrower 1620px container by original design and are
# intentionally left as-is - this change is scoped to these six pages only,
# per the request.)
#
# This keeps every page's markup using Bootstrap's `.container`/`.row`/
# `.col-*` classes exactly as before (per the request) - it only overrides
# the width Bootstrap resolves `.container` to, and its gutter variable so
# the nested `.row`/`.col-*` grid math (which is gutter-based) stays in
# sync instead of leaving a mismatched half-gutter. `.container` is used by
# essentially every template on the site, so - consistent with every
# follow-up above - this is scoped to only these six pages' body-template
# classes rather than touching Bootstrap's `.container` globally.
--------------------------------------------------------------*/
.page-template-page-templatesabout-page-php .container,
.page-template-page-templatescontact-page-php .container,
.page-template-page-templatescontract-manufacturing-page-php .container,
.page-template-page-templatesdata-sheet-page-php .container,
.page-template-page-templatesmilspec-page-php .container,
.page-template-page-templatespackaging-page-php .container,
.page-not-found .container {
  --bs-gutter-x: 48px;
  max-width: calc(var(--ar-nav-container, 1766px) - 2 * var(--ar-nav-pad, 10px));
}


/* ==========================================================================
   2026 redesign: header, footer, homepage and shared sections (formerly assets/css/artech-2026.css)
   ========================================================================== */
/**
 * ARtech 2026 redesign - Figma replica.
 *
 * Scope: site header (.ar-header), site footer (.ar-footer) and the front page
 * sections (.ar-*). Loaded after style.css / responsive.css so it wins; new
 * class names keep it isolated from the legacy .site-navbar / .site-footer CSS.
 *
 * Design source: Figma "ARTech (Copy)" - Homepage (node 0:3), 1920px frame.
 * Tokens: Orange #E66A28, Dark #1F1F1F, White #FFFFFF.
 * Type: DM Serif Display (headings), Poppins (UI + body).
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
:root {
  --ar-orange: #e66a28;
  --ar-dark: #1f1f1f;
  --ar-white: #ffffff;

  --ar-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --ar-font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Navigation frame is 1766 wide (1920 - 2*77) with 10px inner padding. */
  --ar-nav-container: 1766px;
  --ar-nav-h: 90px;
  --ar-nav-pad: 10px;
  --ar-header-h: 110px;
  /* 90 + 2*10 */

  /*
   * Section container: matches the header/nav's own visible width exactly
   * (var(--ar-nav-container) minus its padding on each side, 1746px) so
   * every page's content shares the same left/right edges as the header,
   * instead of the original Figma section width (1620px, x=150 vs. the
   * header's x=87 at the 1920 design frame).
   */
  --ar-container: calc(var(--ar-nav-container) - 2 * var(--ar-nav-pad));

  --ar-radius-pill: 100px;
  --ar-radius-card: 20px;
}

/*--------------------------------------------------------------
# Shared primitives
--------------------------------------------------------------*/
.ar-container {
  margin-inline: auto;
  max-width: var(--ar-container);
  padding-inline: 24px;
  width: 100%;
}

/* Orange rule that sits under every heading in the design (112.899 x 3.958). */
.ar-rule {
  background: var(--ar-orange);
  border-radius: 0;
  display: block;
  height: 3.958px;
  width: 112.899px;
}

/* Pill button: dark or orange, label + 40px circular icon. */
.ar-btn {
  align-items: center;
  border: 0;
  border-radius: var(--ar-radius-pill);
  color: var(--ar-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 600;
  gap: 20px;
  height: 55px;
  line-height: 21.45px;
  padding: 12px 10px 12px 24px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.ar-btn:hover,
.ar-btn:focus-visible {
  color: var(--ar-white);
}

.ar-btn__icon {
  display: block;
  flex: 0 0 auto;
  height: 40px;
  position: relative;
  width: 40px;
}

.ar-btn__icon img,
.ar-btn__icon svg {
  display: block;
  height: 40px;
  width: 40px;
}

/*
 * The Figma hover variant swaps the icon for the white plate + straight arrow.
 * Both exported files ship in the markup, stacked in the same 40px box, and
 * cross-fade so the arrow eases from the diagonal to the horizontal instead of
 * snapping.
 *
 * The rotations keep both arrows on the same visual angle throughout the fade:
 * the resting arrow points at -45deg and the hover arrow at 0deg, so turning
 * the first 0 -> +45deg while the second goes -45deg -> 0deg reads as one
 * arrow rotating. The plates are circles, so their rotation is invisible.
 */
.ar-btn__icon-rest,
.ar-btn__icon-hover {
  left: 0;
  position: absolute;
  top: 0;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ar-btn__icon .ar-btn__icon-rest {
  opacity: 1;
  transform: rotate(0deg);
}

.ar-btn__icon .ar-btn__icon-hover {
  opacity: 0;
  transform: rotate(-45deg);
}

.ar-btn:hover .ar-btn__icon .ar-btn__icon-rest,
.ar-btn:focus-visible .ar-btn__icon .ar-btn__icon-rest {
  opacity: 0;
  transform: rotate(45deg);
}

.ar-btn:hover .ar-btn__icon .ar-btn__icon-hover,
.ar-btn:focus-visible .ar-btn__icon .ar-btn__icon-hover {
  opacity: 1;
  transform: rotate(0deg);
}

.ar-btn--dark {
  background: var(--ar-dark);
}

/* Hover turns the dark pill orange (Figma hover variant). */
.ar-btn--dark:hover,
.ar-btn--dark:focus-visible {
  background: var(--ar-orange);
}

.ar-btn--orange {
  background: var(--color-accent-aa);
}

/* Already orange: only the icon changes. */
.ar-btn--orange:hover,
.ar-btn--orange:focus-visible {
  background: var(--color-accent-aa);
}

/*--------------------------------------------------------------
# Header - floating white pill navbar (Figma node 204:1155)
--------------------------------------------------------------*/
.ar-header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.ar-header__inner {
  margin-inline: auto;
  max-width: var(--ar-nav-container);
  padding: var(--ar-nav-pad);
  width: 100%;
}

.ar-nav {
  align-items: center;
  background: var(--ar-white);
  border-radius: var(--ar-radius-pill);
  display: flex;
  filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.15));
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: var(--ar-nav-h);
  padding: 0 40px;
  position: relative;
  width: 100%;
}

/* Brand ------------------------------------------------------ */
.ar-nav__brand {
  display: block;
  flex: 0 0 auto;
  height: 56px;
  line-height: 0;
  width: 186px;
}

.ar-nav__brand img {
  display: block;
  height: 56px;
  object-fit: contain;
  width: 186px;
}

/* Collapse wrapper ------------------------------------------- */
.ar-nav__collapse {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 40px;
  justify-content: flex-end;
}

/* Menu ------------------------------------------------------- */
.ar-nav .ar-nav__menu {
  align-items: center;
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ar-nav .ar-nav__menu>li {
  position: relative;
}

.ar-nav .ar-nav__menu .nav-link {
  align-items: center;
  background: none;
  border: 0;
  color: var(--ar-dark);
  display: inline-flex;
  font-family: var(--ar-font-ui);
  font-size: 16px;
  font-weight: 400;
  gap: 8px;
  line-height: 26.03px;
  padding: 0;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.ar-nav .ar-nav__menu .nav-link:hover,
.ar-nav .ar-nav__menu .nav-link:focus-visible,
.ar-nav .ar-nav__menu .nav-link.active,
.ar-nav .ar-nav__menu .nav-link[aria-current="page"],
.ar-nav .ar-nav__menu .show>.nav-link {
  color: var(--color-accent-aa);
}

.ar-nav .ar-nav__menu .nav-link.active,
.ar-nav .ar-nav__menu .nav-link[aria-current="page"] {
  font-weight: 600;
}

/* Caret: 4.628 x 8 chevron rotated to point down (Figma 77:397). */
.ar-nav .nav-caret {
  align-items: center;
  display: inline-flex;
  height: 4.628px;
  justify-content: center;
  transition: transform 0.2s ease;
  width: 8px;
}

.ar-nav .nav-caret svg {
  display: block;
  height: 4.628px;
  transition: transform 0.2s ease;
  width: 8px;
}

.ar-nav .show>.nav-link .nav-caret svg {
  transform: rotate(180deg);
}

/* Dropdowns -------------------------------------------------- */
.ar-nav .dropdown-menu {
  background: var(--ar-white);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.28);
  margin-top: 18px;
  min-width: 240px;
  padding: 12px;
}

.ar-nav .dropdown-item {
  align-items: center;
  border-radius: 10px;
  color: var(--ar-dark);
  display: flex;
  font-family: var(--ar-font-ui);
  font-size: 15px;
  gap: 10px;
  padding: 9px 12px;
  white-space: nowrap;
}

.ar-nav .dropdown-item:hover,
.ar-nav .dropdown-item:focus,
.ar-nav .dropdown-item.active {
  background: rgba(230, 106, 40, 0.08);
  color: var(--ar-orange);
}

.ar-nav .dropdown-item__bullet {
  background: var(--ar-orange);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

/*
 * Keep Bootstrap's `display: none` in charge of visibility - only lay the
 * columns out once Popper adds `.show`, otherwise the panel renders open.
 */

/* CTA -------------------------------------------------------- */
/* Figma fixes this pill at 197px with the label filling the free space. */
.ar-nav__cta {
  flex: 0 0 auto;
  width: 197px;
}

.ar-nav__cta .ar-btn__label {
  flex: 1 1 0;
  min-width: 0;
}

/* Toggler ---------------------------------------------------- */
.ar-nav__toggle {
  align-items: center;
  background: var(--ar-dark);
  border: 0;
  border-radius: 50%;
  display: none;
  flex-direction: column;
  gap: 4px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.ar-nav__toggle span {
  background: var(--ar-white);
  border-radius: 2px;
  display: block;
  height: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  width: 18px;
}

.ar-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.ar-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ar-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/*--------------------------------------------------------------
# Hero banner (Figma node 204:1154)
# 1920x920. Horizontal metrics are expressed as percentages of the 1920 frame
# and type as vw-clamps, so the section stays a proportional replica at any
# width while hitting the exact Figma values at 1920.
--------------------------------------------------------------*/
.ar-hero {
  align-items: flex-end;
  display: flex;
  min-height: clamp(620px, 47.917vw, 920px);
  overflow: hidden;
  position: relative;
}

.ar-hero__media {
  inset: 0;
  position: absolute;
}

.ar-hero__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  width: 100%;
}

.ar-hero__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  display: block;
  inset: 0;
  position: absolute;
}

.ar-hero__inner {
  align-items: flex-end;
  display: flex;
  margin-inline: auto;
  max-width: var(--ar-container);
  padding: 0 24px 4.375% 24px;
  position: relative;
  width: 100%;
}

.ar-hero__heading {
  display: flex;
  /* 937 / 1646.39 content box (1920 - 7.9% - 6.351%). */
  flex: 0 1 56.912%;
  flex-direction: column;
  gap: 20px;
  padding-block: 10px;
}

.ar-hero__title {
  color: var(--ar-white);
  font-family: var(--ar-font-display);
  font-size: 90px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1111;
  margin: 0;
}

.ar-hero__title-line {
  display: block;
}

.ar-hero__title-accent {
  color: var(--ar-orange);
}

.ar-hero__aside {
  align-items: flex-start;
  display: flex;
  /* 711.057 / 1646.39 content box. */
  flex: 0 0 43.187%;
  flex-direction: column;
  gap: 30px;
}

.ar-hero__lead {
  color: var(--ar-white);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 2;
  margin: 0;
}

/*--------------------------------------------------------------
# About Us (Figma node 204:1219)
# Frame y=1050 (130 below the hero) and 140 above Core Pillars.
--------------------------------------------------------------*/
.ar-accent {
  color: var(--ar-orange);
}

.ar-about {
  background: var(--ar-white);
  padding: 130px 0 140px;
}

.ar-about__inner {
  align-items: center;
  display: flex;
  gap: 3.984%;
  margin-inline: auto;
  max-width: var(--ar-container);
  padding-inline: 24px;
  width: 100%;
}

.ar-about__media {
  aspect-ratio: 756.089 / 667.58;
  border-radius: var(--ar-radius-card);
  flex: 0 0 48.589%;
  overflow: hidden;
}

.ar-about__media img {
  display: block;
  height: 100%;
  /* Figma crops the 1535x1024 source to its right side (left: -28.53%). */
  object-fit: cover;
  object-position: 88.2% 50%;
  width: 100%;
}

.ar-about__content {
  display: flex;
  flex: 0 0 47.427%;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  padding-block: 10px;
}

.ar-about__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Keep the pill at its intrinsic width inside the stretched column. */
.ar-about__content>.ar-btn {
  align-self: flex-start;
}

.ar-about__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-display);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0769;
  margin: 0;
  max-width: 83.643%;
}

.ar-about__text {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6364;
  margin: 0;
}

/*--------------------------------------------------------------
# Core Pillars (Figma node 204:1220)
--------------------------------------------------------------*/
.ar-pillars {
  background: var(--ar-white);
  padding-bottom: 139.574px;
}

.ar-pillars__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  margin-inline: auto;
  /* 1195.078 of the 1920 frame, capped so it stops growing past 1920. */
  max-width: min(62.243%, 1195.078px);
}

.ar-pillars__head-top {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ar-pillars__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-display);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0769;
  margin: 0;
  text-align: center;
}

.ar-pillars__lead {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6364;
  margin: 0;
  text-align: center;
}

/* Split row --------------------------------------------------- */
.ar-pillars__row {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 60px;
  width: 100%;
}

.ar-pillar {
  display: flex;
  height: 650px;
  overflow: hidden;
  position: relative;
}

/*
 * Hover interaction (Figma prototype, node 59:125): the two panels swap
 * widths. At rest the left panel is the wide one (1174) and the right is
 * narrow (736); hovering the right panel expands it to 1174 and collapses the
 * left to 736, over ~300ms with an ease-out. The hovered panel also reveals
 * its paragraph while the collapsing one hides it.
 *
 * Only the wide panel's flex-basis is animated - the narrow panel is
 * `flex: 1 1 0`, so it absorbs whatever is left and follows for free.
 *
 * The width swap and the paragraph reveal are sequenced rather than
 * simultaneous: the outgoing paragraph collapses first (150ms), then the
 * panels resize (150ms delay + 300ms), then the incoming paragraph reveals
 * (450ms delay). Running them all at once made the paragraph re-wrap while
 * partially visible/mid-fade, which read as jittery text; sequencing removes
 * the overlap so nothing visible is ever reflowing.
 */
.ar-pillar--wide {
  /* 1174 of the 1920 frame. */
  flex: 0 0 61.146%;
  transition: flex-basis 0.3s cubic-bezier(0, 0, 0.58, 1) 0.15s;
}

.ar-pillar--narrow {
  flex: 1 1 0;
  min-width: 0;
}

/* 736 of the 1920 frame. */
.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--wide {
  flex-basis: 38.333%;
}

/*
 * The paragraph's own height is animated via a 0fr/1fr grid-row (same
 * collapse technique as `.pkg-reveal` elsewhere in the theme) instead of
 * `display: none/block`, so the reveal/hide is a smooth height + opacity
 * transition rather than an instant layout snap.
 */
.ar-pillar__text {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.2s cubic-bezier(0, 0, 0.58, 1) 0.45s, opacity 0.2s cubic-bezier(0, 0, 0.58, 1) 0.45s;
}

/* The narrow panel's paragraph only exists in the expanded state. */
.ar-pillar--narrow .ar-pillar__text {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.15s cubic-bezier(0, 0, 0.58, 1), opacity 0.15s ease;
}

.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--wide .ar-pillar__text {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.15s cubic-bezier(0, 0, 0.58, 1), opacity 0.15s ease;
}

.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--narrow .ar-pillar__text {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.2s cubic-bezier(0, 0, 0.58, 1) 0.45s, opacity 0.2s cubic-bezier(0, 0, 0.58, 1) 0.45s;
}

.ar-pillar__bg {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/*
 * Each panel carries both overlays stacked over its photo; which one is opaque
 * follows the panel's STATE, not its position. In Figma the expanded panel
 * uses the bottom-up gradient (bright top, black bottom) and the collapsed one
 * a flat 50% wash - so they trade overlays as the columns swap widths. They
 * cross-fade on the same 300ms ease-out as the width change.
 *
 * Both sit after .ar-pillar__bg and before .ar-pillar__body in the DOM, so the
 * paint order stays photo -> overlay -> copy.
 */
.ar-pillar__scrim {
  display: block;
  inset: 0;
  position: absolute;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.ar-pillar__scrim--gradient {
  background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 56.673%);
}

.ar-pillar__scrim--flat {
  background: rgba(0, 0, 0, 0.5);
}

/* Rest: the wide panel is expanded, the narrow one collapsed. */
.ar-pillar--wide .ar-pillar__scrim--gradient,
.ar-pillar--narrow .ar-pillar__scrim--flat {
  opacity: 1;
}

.ar-pillar--wide .ar-pillar__scrim--flat,
.ar-pillar--narrow .ar-pillar__scrim--gradient {
  opacity: 0;
}

/* Hovering the narrow panel expands it, so the overlays swap with it. */
.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--wide .ar-pillar__scrim--flat,
.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--narrow .ar-pillar__scrim--gradient {
  opacity: 1;
}

.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--wide .ar-pillar__scrim--gradient,
.ar-pillars__row:has(.ar-pillar--narrow:hover) .ar-pillar--narrow .ar-pillar__scrim--flat {
  opacity: 0;
}

.ar-pillar__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: flex-end;
  padding: 50px 70px;
  position: relative;
  width: 100%;
}

.ar-pillar__top {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ar-pillar__badge,
.ar-card__badge {
  align-items: center;
  background: rgba(230, 106, 40, 0.4);
  border-radius: var(--ar-radius-pill);
  color: var(--ar-white);
  display: inline-flex;
  font-family: var(--ar-font-ui);
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  line-height: 20.8px;
  padding: 10px 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-pillar__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ar-pillar__title {
  color: var(--ar-white);
  font-family: var(--ar-font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.9444;
  margin: 0;
}

.ar-pillar__title--tight {
  line-height: 1.25;
}

.ar-pillar__title-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.ar-pillar__title-arrow svg {
  display: block;
  height: 18px;
  width: 11px;
}

.ar-pillar__title-trigger {
  background: none;
  border: 0;
  color: var(--ar-white);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  transition: color 0.2s ease;
}

.ar-pillar__title-trigger:hover,
.ar-pillar__title-trigger:focus-visible {
  color: var(--ar-orange);
}

.ar-pillar__title-trigger:hover .ar-pillar__title-arrow,
.ar-pillar__title-trigger:focus-visible .ar-pillar__title-arrow {
  transform: translateX(3px);
}

/*
 * Full-card link overlay (only rendered for a pillar with a Link field set,
 * e.g. "Toll Manufacturing & Contract Packaging" -> Contract Manufacturing's
 * "Our Primary Product Groups" section). Sits above the image/scrims/body
 * (all earlier in DOM order, so default stacking already puts this on top)
 * and fills .ar-pillar (already position: relative), making the entire card
 * clickable without altering its layout.
 */
.ar-pillar__card-link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/*
 * Preserves the title's existing hover/focus color change (previously only
 * reachable by hovering the title text itself) now that the overlay above
 * covers the whole card and intercepts that hover. Hovering/focusing the
 * overlay re-triggers the identical effect on the title underneath it.
 */
.ar-pillar:has(.ar-pillar__card-link:hover) .ar-pillar__title-trigger,
.ar-pillar:has(.ar-pillar__card-link:focus-visible) .ar-pillar__title-trigger {
  color: var(--ar-orange);
}

.ar-pillar:has(.ar-pillar__card-link:hover) .ar-pillar__title-arrow,
.ar-pillar:has(.ar-pillar__card-link:focus-visible) .ar-pillar__title-arrow {
  transform: translateX(3px);
}

.ar-pillar__text {
  color: var(--ar-white);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6364;
  margin: 0;
  /* 759.607 of the 1034 panel content box. */
  max-width: 73.463%;
}

/*--------------------------------------------------------------
# Precision Products (Figma node 204:1221)
--------------------------------------------------------------*/
.ar-products {
  background: var(--ar-white);
  padding-bottom: 140.041px;
}

.ar-products__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  margin-inline: auto;
  /* Caps at the Figma 1195.078 so the heading stops growing past 1920. */
  max-width: min(62.243%, 1195.078px);
}

.ar-products__head-top {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ar-products__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-display);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0769;
  margin: 0;
  text-align: center;
}

.ar-products__lead {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6364;
  margin: 0;
  text-align: center;
}

.ar-products__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  margin-top: 60px;
  max-width: var(--ar-container);
  padding-inline: 24px;
  width: 100%;
}

/* Product card ------------------------------------------------ */
.ar-card {
  background: var(--ar-white);
  border-radius: 12px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.ar-card__media {
  align-items: flex-end;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 257px;
  opacity: 0.88;
  overflow: hidden;
  padding: 10px;
  position: relative;
}

.ar-card__media img {
  border-radius: 12px;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
  width: 100%;
}

/*
 * Hover zoom (Figma hover variant). Measured off the prototype: the jar's
 * orange label band goes from 133x122 to 142x129 with its centre unchanged,
 * i.e. a centre-origin scale of ~1.06 and no pan. .ar-card__media clips it.
 */
.ar-card:hover .ar-card__media img {
  transform: scale(1.06);
}

.ar-card__badge {
  position: relative;
}

.ar-card__titles {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.ar-card__code {
  color: var(--ar-orange);
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 27.5px;
  white-space: nowrap;
}

.ar-card__name {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27.5px;
  margin: 0;
}

.ar-card__docs {
  display: flex;
  gap: 16px;
}

.ar-card__doc {
  align-items: center;
  color: var(--ar-dark);
  display: inline-flex;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 400;
  gap: 6px;
  height: 31px;
  line-height: 16.9px;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.ar-card__doc:hover,
.ar-card__doc:focus-visible {
  /* color: var(--ar-orange); */
  outline: 0;
}

.ar-card__doc img {
  display: block;
  height: 15.651px;
  width: 15.731px;
}

/*
 * Grid, not flex: the two pills must be exactly half the row each, and the
 * ghost button's 1.24px border would otherwise skew a flex-basis:0 split.
 */
.ar-card__actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  /* Keeps the pills on the card's baseline when names wrap to two lines. */
  margin-top: auto;
}

.ar-card__btn {
  align-items: center;
  border-radius: 26.03px;
  display: flex;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 500;
  height: 45px;
  justify-content: center;
  line-height: 26.03px;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
  white-space: nowrap;
}

.ar-card__btn--ghost {
  background: transparent;
  border: 1.24px solid var(--ar-dark);
  color: var(--ar-dark);
  padding-inline: 27.58px;
}

.ar-card__btn--ghost:hover,
.ar-card__btn--ghost:focus-visible {
  background: var(--ar-dark);
  color: var(--ar-white);
}

.ar-card__btn--solid {
  background: var(--color-accent-aa);
  border: 0;
  color: var(--ar-white);
  padding-inline: 26.34px;
}

.ar-card__btn--solid:hover,
.ar-card__btn--solid:focus-visible {
  background: #d85a17;
  color: var(--ar-white);
}

/*--------------------------------------------------------------
# Our Primary Product Groups (Figma node 65:439)
--------------------------------------------------------------*/
.ar-groups {
  align-items: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  gap: 60px;
  /*
   * Horizontal alignment is handled entirely by the children (`.ar-groups__head`,
   * `.ar-groups__grid`, both centred to `var(--ar-container)`/their own cap) - same
   * pattern as every other section (.ar-hero, .ar-about, .ar-pillars, .ar-products,
   * .ar-cta), none of which pad the section itself horizontally. This section
   * previously did, at a fixed 7.8125% (150px @ 1920px) that was narrower than
   * `--ar-container` and silently capped `.ar-groups__grid`'s width below the
   * header-matching value even after the grid's own CSS was corrected.
   */
  padding: 120px 0;
}

.ar-groups__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  /* 850 of the 1620 content box, capped at the Figma value. */
  max-width: min(52.469%, 850px);
  width: 100%;
}

.ar-groups__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-display);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0769;
  margin: 0;
  text-align: center;
}

.ar-groups__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--ar-container);
  width: 100%;
}

.ar-group {
  background: var(--ar-white);
  border-radius: 16px;
  box-shadow: 4px 4px 89.75px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 294px;
  padding: 30px 24px;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Hover variant: the card lifts 6px, fills orange, the icon plate goes white
 * and the copy inverts. The plate is a <rect> inside the exported SVG, which
 * is why the icons are inlined rather than used as <img>. The lift is a
 * transform, so it never shifts the neighbouring cards.
 */
.ar-group:hover {
  background: var(--ar-orange);
  transform: translateY(-6px);
}

.ar-group:hover .ar-group__name,
.ar-group:hover .ar-group__text {
  color: var(--ar-white);
}

/* Inlined icons: plate goes white, glyph goes orange to match the card. */
.ar-group:hover .ar-group__icon>svg>g>rect {
  fill: var(--ar-white);
}

.ar-group:hover .ar-group__icon>svg>g>path {
  fill: var(--ar-orange);
}

.ar-group:hover .ar-group__icon--plated {
  background: var(--ar-white);
}

/*
 * The plated icon is an <img>, so its glyph cannot be recoloured by CSS - the
 * orange variant is swapped in instead. Exactly one is ever displayed, so the
 * flex centring inside the 100px plate is unaffected.
 */
.ar-group__icon--plated .ar-group__icon-hover {
  display: none;
}

.ar-group:hover .ar-group__icon--plated .ar-group__icon-rest {
  display: none;
}

.ar-group:hover .ar-group__icon--plated .ar-group__icon-hover {
  display: block;
}

.ar-group__icon {
  display: block;
  flex: 0 0 auto;
  height: 100px;
  width: 100px;
}

.ar-group__icon img,
.ar-group__icon>svg {
  display: block;
  height: 100px;
  width: 100px;
}

.ar-group__icon--plated {
  align-items: center;
  background: #f1f1f1;
  border-radius: var(--ar-radius-pill);
  display: flex;
  justify-content: center;
  padding: 10px;
  transition: background-color 0.2s ease;
}

/* This icon ships without a plate, so it keeps its own 34.535x43.198 box. */
.ar-group__icon--plated img,
.ar-group__icon--plated>svg {
  height: 43.198px;
  width: 34.535px;
}

.ar-group__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ar-group__name {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0;
  /* Figma pads the one-line titles to two lines so all cards align. */
  min-height: 52px;
}

.ar-group__text {
  color: #252525;
  font-family: var(--ar-font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

/*--------------------------------------------------------------
# Call to Action (Figma node 204:1222)
--------------------------------------------------------------*/
.ar-cta {
  background: var(--ar-white);
  padding: 140px 0 139.99px;
}

.ar-cta__inner {
  align-items: center;
  display: flex;
  /* 66 of the 1603.98 content box. */
  gap: 4.115%;
  margin-inline: auto;
  max-width: var(--ar-container);
  padding-inline: 24px;
  width: 100%;
}

/* Collage ----------------------------------------------------- */
.ar-cta__collage {
  aspect-ratio: 800 / 698.946;
  flex: 0 0 49.876%;
  position: relative;
}

.ar-cta__shot {
  border-radius: 12px;
  overflow: hidden;
  position: absolute;
}

.ar-cta__shot img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* 547 x 630.246 at 0,0 of the 800 x 698.946 collage. */
.ar-cta__shot--tall {
  height: 90.171%;
  left: 0;
  top: 0;
  width: 68.375%;
}

/* 468 x 350.012 at 332,348.93. */
.ar-cta__shot--wide {
  height: 50.077%;
  left: 41.5%;
  top: 49.923%;
  width: 58.5%;
}

/* 125.825 white plate at 484.09,256.48 with the ARtech mark inside. */
.ar-cta__badge {
  align-items: center;
  aspect-ratio: 1;
  background: var(--ar-white);
  border-radius: 50%;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  left: 60.511%;
  position: absolute;
  top: 36.696%;
  width: 15.728%;
}

.ar-cta__badge img {
  display: block;
  height: 70.881%;
  width: 69.694%;
}

/* Content ----------------------------------------------------- */
.ar-cta__content {
  align-items: flex-start;
  display: flex;
  flex: 0 0 46.009%;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  padding-block: 10px;
}

.ar-cta__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ar-cta__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-display);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0769;
  margin: 0;
}

.ar-cta__text {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6364;
  margin: 0;
}

/*--------------------------------------------------------------
# Footer (Figma node 68:17)
--------------------------------------------------------------*/
.ar-footer {
  background: var(--ar-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

/* Orange rule pinned across the very top (Figma 68:165). */
.ar-footer__rule {
  background: var(--ar-orange);
  display: block;
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/*
 * Horizontal padding mirrors the header's --ar-nav-pad so the footer container
 * and the navbar pill share the same gutters at every width.
 */
.ar-footer__top {
  padding: 48px var(--ar-nav-pad) 86px;
}

/*
 * Now three columns (brand / Explore / Get in Touch) since Product Groups was
 * removed. No fixed/min row height any more - that 495px used to exist only
 * to fit the old Product Groups menu's 10 items; without it the row is free
 * to size to its tallest real column (Explore, 7 items), which keeps the
 * footer compact instead of leaving a block of empty vertical space.
 *
 * Text columns stretch so their headings share a baseline whatever their
 * content height; the brand block is the only one centred (per Figma).
 * The brand column gets extra trailing margin for a clearly more deliberate
 * gap before Explore, and the contact column is pushed to the right edge
 * with `margin-left: auto` so the two remaining link/contact columns don't
 * collapse together into the space Product Groups used to occupy.
 */
.ar-footer__grid {
  align-items: stretch;
  display: flex;
  gap: 40px;
  margin-inline: auto;
  /*
   * Matches the header's visible container - the navbar pill - which is
   * --ar-nav-container minus its 10px inner padding on each side (1746px),
   * centred, so both span x 87..1833 at the 1920 design width.
   */
  max-width: calc(var(--ar-nav-container) - 2 * var(--ar-nav-pad));
  width: 100%;
}

.ar-footer__col--brand {
  align-self: center;
  flex: 0 0 auto;
  margin-right: 40px;
  padding-top: 72px;
  width: 392px;
}

.ar-footer__col--links {
  flex: 0 0 auto;
  padding: 72px 36px 0;
  width: 320px;
}

/*
 * Stretched to the row height so its 72px padding-top lands the heading on
 * the same baseline as the Explore column. Without this the column is
 * shorter than the row and `align-items: center` drops it ~24px. The brand
 * column is deliberately left centred. Pushed to the right edge of the row
 * (see .ar-footer__grid above) to keep the footer balanced now that it's a
 * three-column layout.
 */
.ar-footer__col--contact {
  align-self: stretch;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 72px 36px 0;
  width: 455px;
}

/* Brand ------------------------------------------------------ */
.ar-footer__brand {
  display: block;
  line-height: 0;
}

.ar-footer__brand-img {
  display: block;
  height: 98px;
  object-fit: contain;
  width: 326px;
}

/* Column heading --------------------------------------------- */
.ar-footer__heading {
  color: var(--ar-white);
  font-family: "Sora", var(--ar-font-ui);
  font-size: 19px;
  font-weight: 700;
  height: 30px;
  letter-spacing: 4px;
  line-height: 22px;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-footer__heading-rule {
  background: #e76a28;
  border-radius: 3px;
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  top: 27px;
  width: 42px;
}

/* Link lists ------------------------------------------------- */
/*
 * Rows are spaced with a flex gap rather than a fixed li height, so a label
 * that wraps to two lines grows its own row instead of colliding with the
 * next one. Single-line rows keep a ~50px pitch, matching the original
 * rhythm.
 */
.ar-footer .ar-footer__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 36px 0 0;
}

/*
 * Explore: links flow top-to-bottom through two side-by-side columns
 * (--ar-footer-rows is set in footer.php: half the link count, rounded up).
 * `gap` from the breakpoint rules still sets the row spacing.
 */
.ar-footer .ar-footer__col--links .ar-footer__list {
  column-gap: 40px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: repeat(var(--ar-footer-rows, 4), auto);
}

.ar-footer .ar-footer__list li {
  align-items: flex-start;
  display: flex;
  height: auto;
}

.ar-footer .ar-footer__list a {
  color: var(--color-muted-aa-dark);
  font-family: var(--ar-font-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.2s ease;
  /*
   * Was nowrap, which let "High Performance Extended Life Grease" (350px)
   * run 27px into the Get in Touch column. Wrapping keeps it in its own.
   */
  white-space: normal;
}

.ar-footer .ar-footer__list a:hover,
.ar-footer .ar-footer__list a:focus-visible,
.ar-footer .ar-footer__list a.active {
  color: var(--ar-orange);
}

/* Contact details -------------------------------------------- */
.ar-footer__contact {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 36px 0 0;
  row-gap: 20px;
}

.ar-footer__contact li {
  align-items: center;
  display: flex;
  gap: 18px;
  min-height: 48px;
}

.ar-footer__contact-icon {
  align-items: center;
  background: rgba(231, 106, 40, 0.14);
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  margin-top: 3px;
  width: 48px;
}

.ar-footer__contact-icon img {
  display: block;
  height: 24px;
  width: 24px;
}

.ar-footer__contact a {
  color: var(--ar-white);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 31px;
  /* The email address is longer than a 320px column. */
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ar-footer__contact a:hover,
.ar-footer__contact a:focus-visible {
  color: var(--ar-orange);
}

.ar-footer__address-link {
  display: block;
  max-width: 352px;
}

/* Address is plain text (no map link) — same type as the contact links. */
span.ar-footer__address-link {
  color: var(--ar-white);
  font-family: var(--ar-font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 31px;
}

/* Social ----------------------------------------------------- */
.ar-footer__social {
  display: flex;
  gap: 18px;
  padding-top: 36px;
}

.ar-footer__social a {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  height: 66px;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  width: 66px;
}

.ar-footer__social a:hover,
.ar-footer__social a:focus-visible {
  background: rgba(230, 106, 40, 0.18);
  border-color: rgba(230, 106, 40, 0.45);
}

.ar-footer__social img {
  display: block;
  height: 27px;
  width: 27px;
}

/* Bottom bar ------------------------------------------------- */
.ar-footer__bottom {
  border-top: 1px solid rgba(124, 124, 124, 0.18);
  padding: 30px 24px;
  text-align: center;
}

.ar-footer__copy {
  align-items: center;
  color: var(--color-muted-aa-dark);
  display: flex;
  flex-wrap: wrap;
  font-family: "Inter", var(--ar-font-ui);
  font-size: 20px;
  font-weight: 400;
  gap: 2px;
  justify-content: center;
  line-height: 33px;
  margin: 0;
}

.ar-footer__copy-link {
  color: var(--ar-orange);
  font-weight: 600;
  text-decoration: none;
}

.ar-footer__copy-link:hover,
.ar-footer__copy-link:focus-visible {
  color: var(--ar-white);
}

/*--------------------------------------------------------------
# Body offset
# The front page hero sits underneath the floating navbar (Figma: nav y=0 over
# the 920px hero). Every other template keeps a top offset.
#
# The six inner pages with their own hero banner (About/Contact/Contract
# Manufacturing/Documentation/MIL Specs/Packaging) are added to the same
# zero-offset exception so their hero sits under the floating header exactly
# like the homepage's, instead of leaving a blank 110px strip above it. Their
# `.hero--inner` gets its own matching top clearance (see style.css) so
# nothing is hidden behind the nav.
--------------------------------------------------------------*/
body.has-fixed-navbar {
  padding-top: var(--ar-header-h);
}

body.has-fixed-navbar.home,
body.has-fixed-navbar.page-template-page-templatesabout-page-php,
body.has-fixed-navbar.page-template-page-templatescontact-page-php,
body.has-fixed-navbar.page-template-page-templatescontract-manufacturing-page-php,
body.has-fixed-navbar.page-template-page-templatesdata-sheet-page-php,
body.has-fixed-navbar.page-template-page-templatesmilspec-page-php,
body.has-fixed-navbar.page-template-page-templatespackaging-page-php,
body.has-fixed-navbar.page-template-page-templatesoem-page-php,
body.has-fixed-navbar.page-not-found {
  padding-top: 0;
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {

  .ar-btn,
  .ar-btn__icon-rest,
  .ar-btn__icon-hover,
  .ar-card__btn,
  .ar-card__media img,
  .ar-group,
  .ar-group__icon--plated,
  .ar-footer__social a {
    transition: none;
  }

  .ar-group:hover {
    transform: none;
  }

  .ar-card:hover .ar-card__media img {
    transform: none;
  }

  .ar-pillar--wide,
  .ar-pillar__scrim,
  .ar-pillar__text {
    transition: none;
  }
}


/* ==========================================================================
   Products page (formerly assets/css/products-v2.css)
   ========================================================================== */
/**
 * Products Var 2 — "Our Products" catalogue section.
 *
 * Scope: page-templates/product-page-v2.php ONLY. Every selector is scoped
 * to the page (.pv2 / .products-page-v2), so nothing here can affect any
 * other template.
 *
 * Reuses the existing product-page typography/color conventions
 * (Poppins, var(--color-accent)/var(--color-dark)) rather than the raw
 * Figma export values, so this section reads as part of the same site.
 *
 * Design source: Figma "ARTech" file, "Product Page" frame (node 124:194),
 * the catalogue section between the Hero (124:195, built separately) and
 * the CTA/footer (124:485, built separately). Hero and CTA/footer are
 * intentionally NOT included in this file/step.
 */

.pv2 {
  background: var(--color-light);
  padding-block: 64px 96px;
}

/*--------------------------------------------------------------
# Head row: "Our Products" + search
--------------------------------------------------------------*/
.pv2-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pv2-head__title {
  /* Matches Figma node 124:206 exactly: Poppins Bold 48px, #0a1d35. */
  color: #0a1d35;
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.pv2-search {
  align-items: center;
  background: var(--color-light);
  border: 1.333px solid #f2f4f7;
  border-radius: 100px;
  box-shadow: 0 2px 0 0 rgba(10, 29, 53, 0.02);
  display: flex;
  flex: 1 1 420px;
  max-width: 655px;
  overflow: hidden;
}

/* The input itself has no outline (the pill is the visual control), so the pill carries the focus ring. */
.pv2-search:focus-within {
  outline: 2px solid var(--color-accent-aa);
  outline-offset: 2px;
}

.pv2-search__field {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  padding: 12px 16px;
}

.pv2-search__icon {
  color: var(--color-muted);
  display: inline-flex;
  flex: none;
}

.pv2-search__input {
  background: transparent;
  border: 0;
  color: var(--color-dark);
  flex: 1 1 auto;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  min-width: 0;
  outline: none;
}

.pv2-search__input::placeholder {
  color: #8a8a8a;
}

.pv2-search__btn {
  background: var(--color-accent-aa);
  border: 0;
  color: var(--color-light);
  cursor: pointer;
  flex: none;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 15px 26px;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.pv2-search__btn:hover,
.pv2-search__btn:focus-visible {
  background: #a8470f;
}

/*--------------------------------------------------------------
# Filters row
--------------------------------------------------------------*/
.pv2-filters {
  align-items: center;
  background: #fff5f0;
  border-bottom: 0.667px solid #f6f8fb;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 80px;
  margin-bottom: 24px;
  padding: 20px 16px 20.667px;
}

.pv2-filters__label {
  color: var(--color-accent-aa-cream);
  flex: none;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pv2-filters__list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 16px;
}

/* One filter type: the bar itself (.pv2-filters__select) stacked above its
   own selected-pill area (.pv2-filters__chips, a sibling — see markup) so
   the pills are never inside the bar and the bar's height never changes. */
.pv2-filters__group {
  flex: 1 1 220px;
  max-width: 347px;
}

.pv2-filters__select {
  /* Wrapper around the filter input + the chevron icon drawn on top of it. */
  background: var(--color-light);
  border-radius: 12px;
  position: relative;
}

.pv2-filters__input {
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--color-dark);
  cursor: pointer;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  padding: 12px 40px 12px 16px;
  width: 100%;
}

.pv2-filters__input::placeholder {
  color: var(--color-dark);
  opacity: 1;
}

.pv2-filters__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* One filter type at a time: the other two are disabled while one is in use. */
.pv2-filters__select.is-disabled {
  opacity: 0.5;
}

.pv2-filters__input:disabled {
  cursor: not-allowed;
}

.pv2-filters__select svg {
  color: var(--color-accent);
  flex: none;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Options panel — anchored to `.pv2-filters__select` (already
   position:relative), so it always opens directly below its own trigger
   and scrolls with the page, regardless of where the user has scrolled to;
   it is never positioned above the trigger or off-screen. */
.pv2-filters__panel {
  background: var(--color-light);
  border: 1px solid #f2f4f7;
  border-radius: 12px;
  box-shadow: 0 12px 32px 0 rgba(10, 29, 53, 0.12);
  list-style: none;
  margin: 6px 0 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
}

.pv2-filters__panel[hidden] {
  display: none;
}

.pv2-filters__option {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--color-dark);
  cursor: pointer;
  display: block;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  text-align: left;
  width: 100%;
}

.pv2-filters__option:hover,
.pv2-filters__option:focus-visible {
  background: #fff5f0;
  color: var(--color-accent);
  outline: none;
}

.pv2-filters__option[hidden] {
  display: none;
}

/* Chips for multiple selected values within one filter type (OR within the
 * same filter type); only rendered when at least one value is selected. */
.pv2-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pv2-filters__chips:empty {
  display: none;
}

.pv2-filters__chip {
  align-items: center;
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 12px;
  gap: 6px;
  line-height: 1.2;
  margin: 6px 0 0;
  padding: 4px 8px 4px 12px;
}

.pv2-filters__chip-remove {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

/*--------------------------------------------------------------
# Body: sidebar + grid
--------------------------------------------------------------*/
.pv2-body {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 336px minmax(0, 1fr);
}

/* Right column: heading+search, filters row and grid stack here, next to
   (not below) the sidebar — matches Figma, where the sidebar (402:411)
   starts at the same y as the heading (124:206), not beneath the filters row. */
.pv2-content {
  min-width: 0;
}

.pv2-sidebar {
  background: #fff5f0;
  border-bottom: 0.667px solid #f6f8fb;
  border-radius: 12px;
  padding: 20px 16px 20.667px;
  position: sticky;
  top: 24px;
}

.pv2-sidebar__toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-accent-aa-cream);
  cursor: pointer;
  display: flex;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: 0.05em;
  padding: 0;
  text-transform: uppercase;
  width: 100%;
}

.pv2-sidebar__toggle svg {
  flex: none;
  transition: transform 0.2s ease;
}

.pv2-sidebar.is-collapsed .pv2-sidebar__toggle svg {
  transform: rotate(-90deg);
}

.pv2-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.pv2-sidebar.is-collapsed .pv2-sidebar__list {
  display: none;
}

.pv2-sidebar__label {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 4px;
}

.pv2-sidebar__label input {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.pv2-sidebar__box {
  align-items: center;
  background: var(--color-light);
  border: 1.24px solid #ccc;
  border-radius: 5.268px;
  color: transparent;
  display: inline-flex;
  flex: none;
  height: 22.311px;
  justify-content: center;
  width: 22.311px;
}

.pv2-sidebar__box svg {
  height: 13px;
  width: 13px;
}

.pv2-sidebar__label input:checked+.pv2-sidebar__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
}

.pv2-sidebar__label input:focus-visible+.pv2-sidebar__box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pv2-sidebar__name {
  color: var(--color-dark);
  flex: 1 1 auto;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.2;
}

.pv2-sidebar__count {
  color: var(--color-dark);
  flex: none;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Product grid + cards
--------------------------------------------------------------*/
.pv2-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pv2-card {
  /* align-items default (stretch): .pv2-card__body stretches to the grid-
	   equalized card height so margin-top:auto on .pv2-card__actions pins the
	   button to the same bottom edge on every card in a row, regardless of
	   content length. .pv2-card__media overrides this with align-self so it
	   is NOT stretched (see below). */
  background: var(--color-light);
  border-radius: 12px;
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 20px;
  padding: 20px;
}

.pv2-card__media {
  /* align-self:flex-start (overriding the card's default stretch) sizes this
	   to the image's own height instead of the (taller) text column's height.
	   Without it, the container stretches past the image, leaving blank space
	   below it whose corners are square instead of rounded — the image's own
	   bottom corners were never actually being rounded, since the visible
	   rounding was happening on the empty container edge, well below where the
	   image itself ends. flex is 0.92 (vs. the body's 1.08) so the image reads
	   slightly narrower than a plain 50/50 split, per the design's proportions. */
  align-self: flex-start;
  border-radius: 12px;
  flex: 0.92 1 0;
  min-width: 0;
  overflow: hidden;
}

.pv2-card__media img {
  /* Matches Figma node 125:898's image proportions (242.5 x 350) exactly:
	   width:100% + aspect-ratio (NOT height:100%, which would stretch the
	   image to match the text column's height instead of its own ratio). */
  aspect-ratio: 242.5 / 350;
  display: block;
  object-fit: cover;
  opacity: 0.88;
  width: 100%;
}

.pv2-card__body {
  display: flex;
  flex: 1.08 1 0;
  /* balances .pv2-card__media's 0.92 (slightly narrower image) */
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pv2-card__title {
  color: var(--color-dark);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.333;
  /* 24px per Figma 125:898 */
  margin: 0;
  /* Reserves space for the longest title across all 25 products (3 lines,
	   24px each) so "Applications" starts at the same offset on every card
	   regardless of title length. Shorter titles just leave blank space below
	   them here — nothing is clipped, min-height only ever grows to fit. */
  min-height: 72px;
}

.pv2-card__code {
  color: var(--color-dark);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.pv2-card__code span {
  color: var(--color-accent);
}

.pv2-card__desc {
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  /* Reserves space for the longest description across all 25 products
	   (4 lines, 25.6px each) — same reasoning as .pv2-card__title above. */
  min-height: 103px;
}

.pv2-card__label {
  color: var(--color-dark);
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.964;
  /* 27.5px per Figma 125:898 */
  margin-top: 0;
}

.pv2-card__pkg-cols {
  /* Two fixed columns (not auto-balanced CSS columns) — matches Figma
	   125:898, which is two independent side-by-side <ul>s. Also reserves
	   space for the longest "Available In" list across all 25 products (the
	   5-row Greases packaging list), so "Applications" starts at the same
	   offset regardless of how many package sizes a product has. */
  display: flex;
  gap: 16px;
  margin-top: 4px;
  min-height: 142px;
}

.pv2-card__pkg-list {
  color: #000;
  flex: 1 1 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  padding-left: 14px;
}

.pv2-card__pkg-list li {
  margin-bottom: 8px;
}

.pv2-card__pkg-list li:last-child {
  margin-bottom: 0;
}

.pv2-card__apps-list {
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin: 4px 0 0;
  padding-left: 18px;
}

.pv2-card__apps-list li {
  margin-bottom: 6px;
}

.pv2-card__apps-list li:last-child {
  margin-bottom: 0;
}

.pv2-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
}

.pv2-card__cta {
  /* Exact Figma 124:311 button spec: #f26a21, 45px tall, 26.03px radius. */
  align-items: center;
  background: var(--color-accent-aa);
  border-radius: 26px;
  color: var(--color-light);
  display: inline-flex;
  flex: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 45px;
  justify-content: center;
  padding: 0 26px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.pv2-card__cta:hover,
.pv2-card__cta:focus-visible {
  background: #a8470f;
  color: var(--color-light);
}

.pv2-card__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pv2-card__doc {
  align-items: center;
  color: var(--color-dark);
  display: inline-flex;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  gap: 6px;
  min-height: 24px;
  text-decoration: none;
}

.pv2-card__doc svg {
  color: var(--color-accent);
  flex: none;
}

.pv2-card__doc:hover,
.pv2-card__doc:focus-visible {
  color: var(--color-accent);
}

/* No document attached yet: same icon and label, but not interactive. */
.pv2-card__doc--empty,
.pv2-card__doc--empty:hover {
  color: var(--color-dark);
  cursor: default;
}

/*--------------------------------------------------------------
# Empty state
--------------------------------------------------------------*/
.pv2-empty {
  background: var(--color-light);
  border-radius: 12px;
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.08);
  color: var(--color-muted);
  font-family: "Poppins", sans-serif;
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
}

/*--------------------------------------------------------------
# Pagination (8 products per page)
--------------------------------------------------------------*/
.pv2-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}

.pv2-pagination__btn {
  background: var(--color-light);
  border: 1.333px solid #f2f4f7;
  border-radius: 8px;
  color: var(--color-dark);
  cursor: pointer;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 14px;
  min-width: 40px;
  padding: 8px 14px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pv2-pagination__btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--color-accent-aa);
  color: var(--color-accent-aa);
}

.pv2-pagination__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pv2-pagination__btn.is-active {
  background: var(--color-accent-aa);
  border-color: var(--color-accent-aa);
  color: var(--color-light);
}

.pv2-pagination__btn:disabled {
  cursor: default;
  opacity: 0.4;
}

/*--------------------------------------------------------------
# CTA banner — "Don't See Your Specification?" (Figma 124:486)
--------------------------------------------------------------*/
.pv2-cta {
  padding-block: 0 96px;
}

.pv2-cta__panel {
  align-items: center;
  border-radius: 30px;
  display: flex;
  isolation: isolate;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}

.pv2-cta__bg {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.pv2-cta__scrim {
  /* Uniform dark overlay across the whole banner (was a gradient fading to
	   fully transparent on the right, leaving that side washed out/bright). */
  background: rgba(11, 11, 11, 0.75);
  inset: 0;
  position: absolute;
  z-index: 1;
}

.pv2-cta__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Was capped at 660px, which pinned the copy to the left third of the banner
     and forced the heading onto three lines. The block now spans the panel;
     the lead below keeps a readable measure. */
  max-width: none;
  padding: 72px clamp(40px, 5.5vw, 96px);
  position: relative;
  width: 100%;
  z-index: 2;
}

.pv2-cta__eyebrow {
  background: rgba(230, 106, 40, 0.1);
  border-radius: 100px;
  color: var(--color-accent);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 10px 24px;
  text-transform: uppercase;
  width: fit-content;
}

.pv2-cta__title {
  color: var(--color-light);
  font-family: "Poppins", sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 0;
}

.pv2-cta__title span {
  color: var(--color-accent);
}

.pv2-cta__lead {
  color: var(--color-light);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  max-width: 640px;
}

.pv2-cta__btn {
  background: var(--color-accent-aa);
  border-radius: 26px;
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 52px;
  padding: 0 32px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  width: fit-content;
}

.pv2-cta__btn:hover,
.pv2-cta__btn:focus-visible {
  background: #a8470f;
  color: var(--color-light);
}

/*--------------------------------------------------------------
# Hero — match the unified inner-page hero treatment
#
# style.css/artech-2026.css give six pages (About, Contact, Contract
# Manufacturing, Data Sheet, MIL Specs, Packaging) a shared hero look, keyed
# to each page's own body/template class — product-page.php (which this
# hero's markup was copied from) predates that pass and was never added to
# it, so copying its markup 1:1 actually reproduced the OLD/outlier look,
# not the current shared standard.
#
# Rather than editing those shared, sitewide files (out of scope — this
# page's CSS must only ever affect this page), the same rules are
# reproduced here, scoped to this page's own auto-generated body class
# (`.page-template-page-templatesproduct-page-v2-php`, unique to this
# template) or to `.products-page-v2` (this page's own <main> class). Visual
# result is identical; nothing shared is touched.
--------------------------------------------------------------*/

/* Floating header sits over the hero (no blank 110px offset above it),
 * same as the six inner-page heroes and the homepage. */
body.page-template-page-templatesproduct-page-v2-php.has-fixed-navbar {
  padding-top: 0;
}

.products-page-v2 .hero--inner {
  padding-top: max(clamp(64px, 8vw, 88px), var(--ar-header-h, 110px));
}

/* Straight fade to black instead of the diagonal orange gradient, and no
 * wave divider / orange blob SVG — matches the six inner-page heroes.
 * Darkened further (was fully transparent at the top, where the heading
 * sits) so the title/lead text has consistent contrast against the photo. */
.products-page-v2 .hero__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.88) 100%);
}

.products-page-v2 .hero__divider,
.products-page-v2 svg.hero__bg {
  display: none;
}

.products-page-v2 .hero__title {
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(34px, 4.6875vw, 90px);
  font-weight: 400;
  letter-spacing: 0;
}

.products-page-v2 .hero__lead {
  color: var(--color-light);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: clamp(16px, 1.1458vw, 22px);
  /* Matches the gap the six-inner-page typography retrofit gives
	   `.hero__lead--inner` under its title's accent-bar divider (style.css,
	   "Typography parity with the homepage") — reproduced here with the
	   same value instead of adding this page to that shared selector list. */
  margin-top: 14px;
}

/* Bootstrap's .container (used only inside this hero on this page) matched
 * to the floating header's visible width, same as the six inner pages. */
.products-page-v2 .hero .container {
  --bs-gutter-x: 48px;
  max-width: calc(var(--ar-nav-container, 1766px) - 2 * var(--ar-nav-pad, 10px));
}

/* ==========================================================================
   OEM page — typography tokens
   The OEM block below sizes its text with the site's --fs-* scale. This
   theme build does not define those tokens globally, so they are defined
   here, scoped to the OEM page only (values as in the reference build).
   ========================================================================== */
.page-template-page-templatesoem-page-php {
  --fs-h3: clamp(22px, 1.875vw, 36px);
  --fs-card-title: clamp(18px, calc(17.26px + 0.19vw), 20px);
  --fs-body: clamp(16px, calc(15.26px + 0.19vw), 18px);
  --fs-small: clamp(14px, calc(13.63px + 0.095vw), 15px);
  --fs-eyebrow: clamp(13px, calc(12.63px + 0.095vw), 14px);
}

/* ==========================================================================
   OEM Lubrication Programs page (page-templates/oem-page.php).
   The page is built from the site's own components (hero, page-section bands,
   page-section__* headings, .ms-tab pills, .pkg-inquiry card), so this block
   only (1) puts the OEM page on the same typography/container scope as the
   other inner pages and (2) styles the few OEM-only parts with the same
   tokens (--fs-*, --color-*, --ar-font-*). Scoped to the page's body class
   or .oem, so no other page is affected.
   ========================================================================== */

/* ---- Same type + container scope as About / Contact / Contract Manufacturing / … ---- */
.page-template-page-templatesoem-page-php {
  --font-body: var(--ar-font-ui, var(--font-body));
}

.page-template-page-templatesoem-page-php .hero__title,
.page-template-page-templatesoem-page-php .page-section__title {
  font-family: var(--ar-font-display, var(--font-heading));
  font-weight: 400;
  letter-spacing: 0;
}

.page-template-page-templatesoem-page-php .page-section__eyebrow {
  font-family: var(--ar-font-ui, var(--font-heading));
}

.page-template-page-templatesoem-page-php .hero__lead {
  color: var(--color-light);
}

.page-template-page-templatesoem-page-php .hero__lead--inner {
  margin-top: 14px;
}

.page-template-page-templatesoem-page-php .hero__actions .btn-cta {
  font-family: var(--ar-font-ui, var(--font-heading));
  font-size: 14px;
  font-weight: 600;
}

.page-template-page-templatesoem-page-php .hero--inner {
  padding-top: max(clamp(64px, 8vw, 88px), var(--ar-header-h, 110px));
}

/* Content edges line up with the floating header bar, as on the other pages. */
.page-template-page-templatesoem-page-php .container {
  --bs-gutter-x: 48px;
  max-width: calc(var(--ar-nav-container, 1766px) - 2 * var(--ar-nav-pad, 10px));
}

/* ---- Hero extras ---- */
.oem .oem-hero__eyebrow {
  color: var(--color-light);
}

.oem .oem-hero__highlights {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  list-style: none;
  margin: 44px 0 0;
  max-width: 780px;
  padding: 18px 0 0;
}

.oem .oem-hero__highlights li {
  color: var(--color-light);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-small);
}

/* ---- Cards: same look as the Packaging page cards (.pkg-card) ---- */
.oem .oem-card {
  background: var(--color-light);
  border-radius: 16px;
  box-shadow: 4px 4px 89.75px rgba(0, 0, 0, 0.12);
  height: 100%;
  padding: 30px 24px;
}

/* Launch path: open columns with a hairline on top (no card box). */
.oem .oem-card--plain {
  background: transparent;
  border-top: 1px solid #e6e1db;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  padding: 38px 0 0;
}

.oem .oem-card.oem-card--plain .page-section__eyebrow {
  margin-bottom: 26px;
}

.oem .oem-card--plain .oem-card__title {
  margin-bottom: 18px;
}

.oem .oem-card--panel {
  height: auto;
  padding: clamp(24px, 3vw, 36px);
}

.oem .oem-card .page-section__eyebrow {
  margin-bottom: 16px;
}

.oem .oem-card__title {
  color: var(--ar-dark);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-card-title);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0 0 12px;
}

.oem .oem-card__text {
  color: #252525;
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-body);
  line-height: 26px;
  margin: 0;
}

.oem .oem-subtitle {
  color: var(--color-dark);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 12px;
}

.oem .oem-note {
  color: var(--color-muted-aa);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-small);
  line-height: 1.7;
  margin: 18px 0 0;
}

/* ---- Checklists / bullets ---- */
.oem .oem-checks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.oem .oem-card .oem-checks {
  margin-top: 8px;
}

.oem .oem-checks li {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23e76a28%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") no-repeat 0 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-body);
  line-height: 1.6;
  padding: 14px 0 14px 30px;
}

.oem .oem-checks li:last-child {
  border-bottom: 0;
}

.oem .oem-bullets {
  color: var(--color-muted-aa);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}

/* ---- Aftermarket: service-program row ---- */
/* Outlined panel card and a hairline divider before the
   "Connect the product to your service program" row (full content width). */
.oem .oem-market .oem-card--panel {
  border: 1px solid #f0dccf;
  border-radius: 28px;
  box-shadow: none;
}

/* Narrower panel, centred in its column. */
@media (min-width: 992px) {
  .oem .oem-market .oem-card--panel {
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }
}

.oem .oem-connect {
  border-top: 1px solid #f0dccf;
  margin-top: 36px;
  padding-top: 40px;
}

/* ---- Program image ---- */
/* Split panel: photo flush on one side, copy on the site's cream panel on the other. */
.oem .oem-split {
  background: #f7f3ee;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}

.oem .oem-split__body {
  align-self: center;
  padding: clamp(28px, 4vw, 56px);
}

.oem .oem-program__media {
  margin: 0;
  min-height: 100%;
  position: relative;
}

.oem .oem-program__media img {
  display: block;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
}

/* ---- Starting point: reuse the MIL Specs tab pills, aligned to the heading ---- */
.oem .oem-tabs {
  justify-content: flex-start;
  margin: 0 0 24px;
}

/* Panel: two columns (text | divider | "Ideal when"), as in the original design. */
.oem .oem-tabpanel {
  background: var(--color-light);
  border: 1px solid #e5e5e5;
  border-radius: 28px;
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding: clamp(26px, 3.4vw, 42px);
}

.oem .oem-tabpanel[hidden] {
  display: none;
}

.oem .oem-tabpanel__title {
  color: var(--color-dark);
  font-family: var(--ar-font-display, var(--font-heading));
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 22px;
}

.oem .oem-tabpanel__copy {
  color: var(--color-muted-aa);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}

.oem .oem-tabpanel__side {
  border-left: 1px solid #e5e5e5;
  padding-left: clamp(24px, 3vw, 36px);
}

@media (max-width: 991.98px) {
  .oem .oem-tabpanel {
    grid-template-columns: minmax(0, 1fr);
  }

  .oem .oem-tabpanel__side {
    border-left: 0;
    border-top: 1px solid #e5e5e5;
    padding-left: 0;
    padding-top: 24px;
  }
}

/* ---- Replenishment: full-bleed dark section (same dark + glow recipe as the Packaging "How it works" panel) ---- */
.oem .oem-dark {
  background: var(--color-dark);
  color: var(--color-light);
  overflow: hidden;
  position: relative;
}

.oem .oem-dark::before {
  background:
    radial-gradient(900px circle at 10% 10%,
      rgba(231, 106, 40, 0.18) 0%,
      rgba(231, 106, 40, 0) 55%),
    radial-gradient(900px circle at 90% 90%,
      rgba(231, 106, 40, 0.1) 0%,
      rgba(231, 106, 40, 0) 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.oem .oem-dark > * {
  position: relative;
  z-index: 1;
}

.oem .oem-dark .page-section__eyebrow {
  color: var(--color-accent);
}

.oem .oem-dark .page-section__title {
  color: var(--color-light);
}

.oem .oem-dark .page-section__lead {
  color: rgba(255, 255, 255, 0.78);
}

.oem .oem-dark .oem-note {
  color: rgba(255, 255, 255, 0.72);
}

.oem .oem-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oem .oem-steps__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 20px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 24px 0;
}

.oem .oem-steps__item:first-child {
  padding-top: 0;
}

.oem .oem-steps__num {
  color: var(--color-accent);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 4px;
}

.oem .oem-steps__title {
  color: var(--color-light);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-card-title);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0 0 8px;
}

.oem .oem-steps__text {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-small);
  line-height: 1.7;
  margin: 0;
}

/* ---- FAQ: its own grey band, so it reads as a separate section between the white launch path and the peach CTA ---- */
.oem #oem-faq {
  background: #f6f6f4;
}

.oem #oem-faq .oem-faq__item {
  border-color: #dcdcd8;
}

/* FAQ items */
.oem .oem-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.oem .oem-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.oem .oem-faq__q {
  align-items: center;
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-card-title);
  gap: 24px;
  justify-content: space-between;
  list-style: none;
  padding: 22px 0;
}

.oem .oem-faq__q::-webkit-details-marker {
  display: none;
}

.oem .oem-faq__q:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.oem .oem-faq__icon {
  flex: none;
  height: 14px;
  position: relative;
  width: 14px;
}

.oem .oem-faq__icon::before,
.oem .oem-faq__icon::after {
  background: var(--color-accent-aa);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 6px;
  transition: transform 0.2s ease;
  width: 14px;
}

.oem .oem-faq__icon::after {
  transform: rotate(90deg);
}

.oem .oem-faq__item[open] .oem-faq__icon::after {
  transform: rotate(0deg);
}

.oem .oem-faq__a p {
  color: var(--color-muted-aa);
  font-family: var(--ar-font-ui, var(--font-body));
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0;
  padding: 0 40px 22px 0;
}

@media (max-width: 575.98px) {
  .oem .oem-hero__highlights {
    flex-direction: column;
    gap: 10px;
  }

  .oem .oem-faq__a p {
    padding-right: 0;
  }
}

/* Responsive refinements */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Four narrow columns are cramped here: two per row until the wide-desktop layout. */
  .oem .oem-launch-row > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (max-width: 991.98px) {
  .oem .oem-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .oem .oem-program__media {
    aspect-ratio: 16 / 10;
    max-height: 380px;
    min-height: 0;
    width: 100%;
  }

  .oem .oem-program__media img {
    min-height: 0;
  }
}

/* Header: with the OEM item added, the 7-item menu needs slightly tighter spacing
   in the 1200-1339px band so the Contact button stays on the bar (it wrapped
   under the logo there). Nothing changes at other widths. */
@media (min-width: 1200px) and (max-width: 1339.98px) {
  .ar-header .ar-nav .ar-nav__menu {
    gap: 12px;
  }
}

@media (min-width: 1200px) and (max-width: 1319.98px) {
  .ar-header .ar-nav .ar-nav__menu .nav-link {
    font-size: 14px;
  }
}

@media (min-width: 1200px) and (max-width: 1239.98px) {
  .ar-header .ar-nav .ar-nav__menu {
    gap: 8px;
  }
}

/* Touch targets: at least 44px tall for the tab pills and the phone link. */
.oem .oem-tabs .ms-tab {
  min-height: 44px;
}

/* WCAG AA contrast: the brand orange (3.2:1) is too light for these small labels on white. */
.oem .oem-tabs .ms-tab {
  border-color: var(--color-accent-aa);
  color: var(--color-accent-aa);
}

.oem .oem-tabs .ms-tab.is-active,
.oem .oem-tabs .ms-tab.is-active:hover {
  background: var(--color-accent-aa);
  color: var(--color-light);
}

.oem .pkg-inquiry__talk a {
  display: inline-block;
  margin: -11px -4px;
  padding: 11px 4px;
}

/* OEM page — hero type scale, same as the other inner pages (About, Contact,
   Packaging, …). This build scopes that scale to a fixed list of page
   templates, so the OEM page is given the same values here instead of editing
   the shared lists. */
.page-template-page-templatesoem-page-php .hero__title {
  font-size: clamp(34px, 4.6875vw, 90px);
}

.page-template-page-templatesoem-page-php .hero__lead {
  color: var(--color-light);
  font-size: clamp(16px, 1.1458vw, 22px);
}


/* Reduced motion (WCAG 2.3.3 / 2.2.2): users who ask for less motion get no animated transitions, parallax-style transforms or smooth scrolling site-wide. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}