/*
Theme Name: SMT AI-Enabled Manufacturing
Theme URI: https://www.smthk.com/
Author: Surface Mount Technology Limited
Author URI: https://www.smthk.com/
Description: A dark, technology-forward corporate theme for Surface Mount Technology Limited, built around the AI-Enabled Manufacturing positioning. The front page runs Hero, Who We Are, Synergy Benefits, Industrial Specialist, Digital Factory and We Connect, with Core Values, Quality & Compliance and Sustainability as standalone pages provisioned on activation. Ships with autoplaying hero and factory video, a rotating three-image hero, trilingual English, Simplified Chinese and Japanese content, an AJAX enquiry form, an optional GA4 measurement field, and Customizer controls for every image, video and text block.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smt-ai
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready, full-width-template
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Brand — sampled from the official SMT logo */
  --smt-orange: #f05423;
  --smt-orange-bright: #ff6a3c;
  --smt-orange-deep: #c8380f;
  --smt-orange-soft: rgba(240, 84, 35, 0.14);
  --smt-orange-line: rgba(240, 84, 35, 0.32);

  /* Secondary technology accent */
  --smt-cyan: #22d3ee;
  --smt-cyan-bright: #67e8f9;
  --smt-cyan-soft: rgba(34, 211, 238, 0.12);
  --smt-cyan-line: rgba(34, 211, 238, 0.28);

  /* Surfaces — one hue scale derived from the client's #243459 base. Hue 222
     and saturation 42% are held constant while lightness steps, so every
     surface reads as the same dark blue at a different depth. */
  --smt-blue: #243459;
  --smt-blue-light: #2a3c66;
  --smt-bg: #0b101b;
  --smt-bg-alt: #0f1626;
  --smt-surface: #141d31;
  --smt-surface-2: #1a2540;
  --smt-surface-3: #213052;

  /* Text — contrast checked against every surface above. Body text clears
     11:1 everywhere; orange bottoms out at 3.7:1 on surface-3, which is why
     orange is reserved for display sizes and never small body copy. */
  --smt-text: #e9eef8;
  --smt-text-muted: #9daac4;
  --smt-text-dim: #74849f;

  /* Lines */
  --smt-border: rgba(160, 182, 222, 0.16);
  --smt-border-strong: rgba(160, 182, 222, 0.28);

  /* Type */
  --smt-font-display: "Space Grotesk", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --smt-font-body: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --smt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Small labels containing digits. JetBrains Mono's zero carries a centre dot
     which merges with the bowl at 10-12px and reads as an eight, so anything
     numeric uses Space Grotesk instead. Already loaded for display type, so
     this costs no additional request. */
  --smt-font-label: "Space Grotesk", "Noto Sans SC", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --smt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --smt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --smt-container: 1240px;
  --smt-nav-h: 76px;
  --smt-radius: 14px;
  --smt-radius-lg: 20px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--smt-nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

body.smt-lang-zh {
  --smt-font-display: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  line-height: 1.85;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--smt-font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms var(--smt-ease-out);
}

img,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Icons are emitted without width/height attributes, so they MUST be clamped
   here. Without this rule every inline SVG expands to its container width. */
svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure,
dl,
dd,
dt {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--smt-orange-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--smt-orange);
  color: #fff;
}

.smt-screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.smt-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--smt-orange);
  color: #fff;
  font-weight: 600;
  transition: top 180ms var(--smt-ease-out);
}

.smt-skip:focus {
  top: 0;
}

.smt-container {
  width: 100%;
  max-width: var(--smt-container);
  margin-inline: auto;
  padding-inline: 24px;
}

.smt-main {
  display: block;
}

.smt-section {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--smt-bg);
  scroll-margin-top: var(--smt-nav-h);
}

.smt-section--alt {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(240, 84, 35, 0.07), transparent 62%),
    var(--smt-bg-alt);
}

.smt-section--alt::before,
.smt-section--connect::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--smt-border-strong) 22%, var(--smt-border-strong) 78%, transparent);
}

.smt-section--connect {
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(240, 84, 35, 0.1), transparent 62%),
    radial-gradient(760px 460px at 90% 18%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--smt-bg);
}

/* ==========================================================================
   4. Section headings
   ========================================================================== */

.smt-sectionhead {
  max-width: 800px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.smt-sectionhead__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px 15px 6px 12px;
  border: 1px solid var(--smt-orange-line);
  border-radius: 999px;
  background: var(--smt-orange-soft);
  color: var(--smt-orange-bright);
  font-family: var(--smt-font-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.smt-sectionhead__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smt-orange);
  box-shadow: 0 0 10px var(--smt-orange);
}

.smt-sectionhead__title {
  margin-bottom: 20px;
  font-size: clamp(30px, 4.4vw, 50px);
}

.smt-sectionhead__intro {
  max-width: 68ch;
  color: var(--smt-text-muted);
  font-size: clamp(15px, 1.35vw, 18px);
}

/* ==========================================================================
   5. Reveal animation
   ========================================================================== */

.smt-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .smt-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity 620ms var(--smt-ease-out),
      transform 620ms var(--smt-ease-out);
    will-change: opacity, transform;
  }

  .smt-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.smt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--smt-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  transition:
    transform 160ms var(--smt-ease-out),
    background-color 200ms var(--smt-ease-out),
    border-color 200ms var(--smt-ease-out),
    box-shadow 200ms var(--smt-ease-out),
    color 200ms var(--smt-ease-out);
}

.smt-btn:active {
  transform: scale(0.97);
}

.smt-btn--primary {
  background: linear-gradient(135deg, var(--smt-orange) 0%, var(--smt-orange-deep) 100%);
  color: #fff;
  box-shadow: 0 12px 34px -14px rgba(240, 84, 35, 0.7);
}

.smt-btn--primary:hover {
  background: linear-gradient(135deg, var(--smt-orange-bright) 0%, var(--smt-orange) 100%);
  color: #fff;
  box-shadow: 0 16px 42px -14px rgba(240, 84, 35, 0.82);
}

.smt-btn--ghost {
  border-color: var(--smt-border-strong);
  background: rgba(232, 237, 247, 0.04);
  color: var(--smt-text);
  backdrop-filter: blur(8px);
}

.smt-btn--ghost:hover {
  border-color: var(--smt-cyan-line);
  background: var(--smt-cyan-soft);
  color: var(--smt-cyan-bright);
}

.smt-btn--lg {
  padding: 16px 30px;
  font-size: 16px;
}

.smt-btn--sm {
  padding: 10px 18px;
  font-size: 13.5px;
}

.smt-btn[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.smt-btn__icon {
  width: 17px;
  height: 17px;
  transition: transform 200ms var(--smt-ease-out);
}

.smt-btn:hover .smt-btn__icon {
  transform: translateX(3px);
}

/* ==========================================================================
   7. Chips and tick lists
   ========================================================================== */

.smt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smt-chips--tight {
  gap: 8px;
}

.smt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--smt-border);
  border-radius: 999px;
  background: var(--smt-surface-2);
  color: var(--smt-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  transition:
    border-color 180ms var(--smt-ease-out),
    background-color 180ms var(--smt-ease-out),
    color 180ms var(--smt-ease-out),
    transform 180ms var(--smt-ease-out);
}

.smt-chip:hover {
  border-color: var(--smt-orange-line);
  background: var(--smt-orange-soft);
  color: var(--smt-text);
  transform: translateY(-1px);
}

.smt-chip--cyan:hover {
  border-color: var(--smt-cyan-line);
  background: var(--smt-cyan-soft);
  color: var(--smt-cyan-bright);
}

.smt-chip__icon {
  width: 14px;
  height: 14px;
  color: var(--smt-orange);
}

.smt-chip--cyan .smt-chip__icon {
  color: var(--smt-cyan);
}

.smt-ticks {
  display: grid;
  gap: 12px;
}

.smt-ticks__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--smt-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.smt-ticks__icon {
  width: 17px;
  height: 17px;
  margin-top: 0.3em;
  color: var(--smt-cyan);
}

/* ==========================================================================
   8. Language switcher
   ========================================================================== */

.smt-langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--smt-border);
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.72);
}

.smt-langswitch__btn {
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--smt-text-dim);
  font-family: var(--smt-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  transition:
    background-color 180ms var(--smt-ease-out),
    color 180ms var(--smt-ease-out);
}

.smt-langswitch__btn:hover {
  color: var(--smt-text);
}

.smt-langswitch__btn.is-active {
  background: var(--smt-orange);
  color: #fff;
}

.smt-langswitch[data-context="drawer"],
.smt-langswitch[data-context="footer"] {
  background: var(--smt-surface-2);
}

.smt-langswitch--plugin {
  padding: 4px 12px;
}

.smt-langswitch--plugin ul {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

/* ==========================================================================
   9. Navigation
   ========================================================================== */

.smt-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid transparent;
  transition:
    background-color 260ms var(--smt-ease-out),
    border-color 260ms var(--smt-ease-out),
    box-shadow 260ms var(--smt-ease-out);
}

.smt-nav.is-stuck {
  border-bottom-color: var(--smt-border);
  background: rgba(5, 8, 15, 0.86);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.9);
}

.smt-nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--smt-container);
  height: var(--smt-nav-h);
  margin-inline: auto;
  padding-inline: 24px;
}

.smt-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.smt-nav__logo {
  width: auto;
  height: 34px;
  transition: transform 220ms var(--smt-ease-out);
}

.smt-nav__brand:hover .smt-nav__logo {
  transform: translateY(-1px);
}

.smt-nav__brandtext {
  display: none;
  flex-direction: column;
  padding-left: 14px;
  border-left: 1px solid var(--smt-border);
}

.smt-nav__brandline {
  font-family: var(--smt-font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--smt-text);
}

.smt-nav__brandsub {
  font-family: var(--smt-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-nav__links {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

.smt-nav__link {
  position: relative;
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  font-family: var(--smt-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--smt-text-muted);
  white-space: nowrap;
  transition:
    color 160ms var(--smt-ease-out),
    background-color 160ms var(--smt-ease-out);
}

.smt-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 13px;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--smt-orange), var(--smt-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--smt-ease-out);
}

.smt-nav__link:hover,
.smt-nav__link.is-active {
  color: var(--smt-text);
  background: rgba(232, 237, 247, 0.04);
}

.smt-nav__link:hover::after,
.smt-nav__link.is-active::after {
  transform: scaleX(1);
}

.smt-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
}

.smt-nav__cta {
  display: none;
}

.smt-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--smt-border);
  border-radius: 11px;
  background: rgba(11, 18, 32, 0.7);
  transition: border-color 180ms var(--smt-ease-out);
}

.smt-nav__toggle:hover {
  border-color: var(--smt-border-strong);
}

.smt-nav__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--smt-text);
  transition:
    transform 220ms var(--smt-ease-out),
    opacity 160ms var(--smt-ease-out);
}

.smt-nav__toggle.is-active .smt-nav__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.smt-nav__toggle.is-active .smt-nav__bar:nth-child(2) {
  opacity: 0;
}

.smt-nav__toggle.is-active .smt-nav__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */

.smt-drawer {
  position: fixed;
  inset-inline: 0;
  top: var(--smt-nav-h);
  z-index: 199;
  max-height: calc(100vh - var(--smt-nav-h));
  overflow-y: auto;
  padding: 20px 24px 32px;
  border-bottom: 1px solid var(--smt-border);
  background: rgba(5, 8, 15, 0.97);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity 220ms var(--smt-ease-out),
    transform 220ms var(--smt-ease-out),
    visibility 220ms linear;
}

.smt-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.smt-drawer__nav {
  display: grid;
  gap: 2px;
  margin-bottom: 22px;
}

.smt-drawer__link {
  padding: 13px 14px;
  border-radius: 10px;
  font-family: var(--smt-font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--smt-text-muted);
  transition:
    background-color 180ms var(--smt-ease-out),
    color 180ms var(--smt-ease-out);
}

.smt-drawer__link:hover {
  background: var(--smt-surface-2);
  color: var(--smt-text);
}

.smt-drawer__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--smt-border);
}

/* ==========================================================================
   10. Hero
   ========================================================================== */

.smt-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: calc(var(--smt-nav-h) + 48px);
  padding-bottom: 96px;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: var(--smt-nav-h);
}

.smt-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.smt-hero__slide,
.smt-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slides cross-fade. Slide one carries is-active server-side so the hero is
   never blank if scripts fail; the rotator simply moves the class along. */
.smt-hero__slide {
  opacity: 0;
  transition: opacity 1100ms var(--smt-ease-out);
}

.smt-hero__slide.is-active {
  opacity: 1;
}

/* A very slow drift gives the still images a sense of life without competing
   with the headline. Held behind a motion query so it can be switched off. */
@media (prefers-reduced-motion: no-preference) {
  .smt-hero__slide.is-active {
    animation: smt-hero-drift 24s ease-in-out infinite alternate;
  }
}

@keyframes smt-hero-drift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(-1.2%, -1%, 0);
  }
}

.smt-hero__video {
  opacity: 0;
  transition: opacity 700ms var(--smt-ease-out);
  pointer-events: none;
}

.smt-hero__video.is-playing {
  opacity: 1;
}

.smt-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.smt-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 16, 27, 0.86) 0%, rgba(15, 22, 38, 0.6) 44%, rgba(11, 16, 27, 0.96) 100%),
    radial-gradient(900px 620px at 12% 28%, rgba(240, 84, 35, 0.16), transparent 62%),
    radial-gradient(760px 540px at 88% 68%, rgba(36, 52, 89, 0.55), transparent 64%);
}

.smt-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(160, 182, 222, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160, 182, 222, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 78%);
}

.smt-hero__inner {
  position: relative;
  z-index: 1;
}

.smt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  padding: 7px 17px 7px 13px;
  border: 1px solid var(--smt-cyan-line);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--smt-cyan-bright);
  font-family: var(--smt-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.smt-hero__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--smt-cyan);
}

@media (prefers-reduced-motion: no-preference) {
  .smt-hero__pulse {
    animation: smt-pulse 2.4s ease-out infinite;
  }
}

@keyframes smt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
  }
  70% {
    box-shadow: 0 0 0 11px rgba(34, 211, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
}

.smt-hero__title {
  max-width: 21ch;
  margin-bottom: 26px;
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.smt-hero__titleline,
.smt-hero__titleaccent {
  display: block;
}

.smt-hero__titleaccent {
  background: linear-gradient(100deg, var(--smt-orange) 0%, var(--smt-orange-bright) 38%, var(--smt-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.smt-hero__subtitle {
  max-width: 60ch;
  margin-bottom: 40px;
  color: var(--smt-text-muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.75;
}

.smt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.smt-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  max-width: 900px;
  padding-top: 34px;
  border-top: 1px solid var(--smt-border);
}

.smt-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.smt-hero__statvalue {
  display: flex;
  align-items: baseline;
  font-family: var(--smt-font-display);
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--smt-text);
}

/* The number rolls up from zero when the hero enters view. Tabular figures keep
   every digit the same width, so the value does not jitter as it counts, and the
   minimum width reserves room for the final digit count to stop the unit and
   plus sliding sideways mid-animation. Both are set by the script from the
   target value's length. */
.smt-hero__statnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Unit letters such as the "Mpcs" in 500Mpcs+, set smaller than the figure so
   the number stays the dominant element. */
.smt-hero__statunit {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.06em;
}

/* The trailing "+" on 40+, 100+ and 500Mpcs+ carries the brand orange, at the
   client's request. Split out of the value string by smt_ai_stat_value(). */
.smt-hero__statplus {
  color: var(--smt-orange-bright);
}

.smt-hero__statlabel {
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* --- Hero controls: replay button and rotator dots ----------------------- */

.smt-hero__controls {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.smt-hero__replay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--smt-border-strong);
  border-radius: 999px;
  background: rgba(11, 16, 27, 0.72);
  color: var(--smt-text);
  font-family: var(--smt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition:
    border-color 200ms var(--smt-ease-out),
    background-color 200ms var(--smt-ease-out),
    color 200ms var(--smt-ease-out),
    transform 160ms var(--smt-ease-out);
}

.smt-hero__replay:hover {
  border-color: var(--smt-orange-line);
  background: rgba(240, 84, 35, 0.18);
  color: #fff;
}

.smt-hero__replay:active {
  transform: scale(0.97);
}

.smt-hero__replayicon {
  width: 13px;
  height: 13px;
  color: var(--smt-orange-bright);
}

.smt-hero__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smt-hero__dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border-radius: 999px;
  background: rgba(160, 182, 222, 0.3);
  transition:
    background-color 240ms var(--smt-ease-out),
    width 240ms var(--smt-ease-out);
}

.smt-hero__dot:hover {
  background: rgba(160, 182, 222, 0.55);
}

.smt-hero__dot.is-active {
  width: 40px;
  background: var(--smt-orange);
}

/* ==========================================================================
   11. Synergy Benefits
   ========================================================================== */

.smt-synergy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

.smt-synergycard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  transition:
    border-color 260ms var(--smt-ease-out),
    transform 260ms var(--smt-ease-out),
    box-shadow 260ms var(--smt-ease-out);
}

.smt-synergycard:hover {
  border-color: var(--smt-orange-line);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

.smt-synergycard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--smt-surface-2);
}

.smt-synergycard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.12) 0%, rgba(11, 18, 32, 0.92) 100%);
}

.smt-synergycard__media picture {
  display: block;
  height: 100%;
}

.smt-synergycard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--smt-ease-out);
}

.smt-synergycard:hover .smt-synergycard__img {
  transform: scale(1.05);
}

.smt-synergycard__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 5px 12px;
  border: 1px solid var(--smt-orange-line);
  border-radius: 999px;
  background: rgba(5, 8, 15, 0.7);
  color: var(--smt-orange-bright);
  font-family: var(--smt-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.smt-synergycard__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 34px);
}

.smt-synergycard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--smt-orange-line);
  border-radius: 14px;
  background: var(--smt-orange-soft);
  color: var(--smt-orange-bright);
  transition:
    background-color 260ms var(--smt-ease-out),
    transform 260ms var(--smt-ease-out);
}

.smt-synergycard__icon svg {
  width: 23px;
  height: 23px;
}

.smt-synergycard:hover .smt-synergycard__icon {
  background: rgba(240, 84, 35, 0.22);
  transform: scale(1.06);
}

.smt-synergycard__title {
  font-size: clamp(21px, 2.3vw, 27px);
}

.smt-synergycard__desc {
  color: var(--smt-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

/* Assembly capability strip */

.smt-capability {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--smt-surface);
}

.smt-capability__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.smt-capability__title {
  font-size: clamp(19px, 2vw, 24px);
}

.smt-capability__text {
  max-width: 76ch;
  color: var(--smt-text-muted);
  font-size: 15px;
}

/* ==========================================================================
   12. Core Values
   ========================================================================== */

.smt-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

.smt-valuecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  transition:
    border-color 260ms var(--smt-ease-out),
    transform 260ms var(--smt-ease-out),
    box-shadow 260ms var(--smt-ease-out);
}

.smt-valuecard::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--smt-orange), var(--smt-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--smt-ease-out);
}

.smt-valuecard:hover {
  border-color: var(--smt-border-strong);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

.smt-valuecard:hover::before {
  transform: scaleX(1);
}

.smt-valuecard__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--smt-cyan-line);
  border-radius: 16px;
  background: var(--smt-cyan-soft);
  color: var(--smt-cyan-bright);
  transition:
    background-color 260ms var(--smt-ease-out),
    transform 260ms var(--smt-ease-out);
}

.smt-valuecard__glyph svg {
  width: 25px;
  height: 25px;
}

.smt-valuecard:hover .smt-valuecard__glyph {
  background: rgba(34, 211, 238, 0.2);
  transform: scale(1.06);
}

.smt-valuecard__title {
  font-size: clamp(20px, 2.1vw, 25px);
}

.smt-valuecard__desc {
  color: var(--smt-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.smt-valuecard__index {
  position: absolute;
  top: clamp(18px, 2.4vw, 26px);
  right: clamp(20px, 2.6vw, 30px);
  font-family: var(--smt-font-label);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: rgba(148, 173, 214, 0.09);
  letter-spacing: -0.04em;
  pointer-events: none;
}

/* Supporting disciplines */

.smt-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.smt-supportcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--smt-border);
  border-left: 2px solid var(--smt-orange-line);
  border-radius: 4px var(--smt-radius) var(--smt-radius) 4px;
  background: var(--smt-bg-alt);
  transition:
    border-left-color 220ms var(--smt-ease-out),
    background-color 220ms var(--smt-ease-out);
}

.smt-supportcard:hover {
  border-left-color: var(--smt-orange);
  background: var(--smt-surface);
}

.smt-supportcard__title {
  font-size: 16.5px;
}

.smt-supportcard__desc {
  color: var(--smt-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ==========================================================================
   13. Industrial Specialist
   ========================================================================== */

.smt-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

.smt-segment {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  transition:
    border-color 260ms var(--smt-ease-out),
    transform 260ms var(--smt-ease-out),
    box-shadow 260ms var(--smt-ease-out);
}

.smt-segment:hover {
  border-color: var(--smt-cyan-line);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

.smt-segment__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--smt-surface-2);
}

.smt-segment__media picture {
  display: block;
  height: 100%;
}

.smt-segment__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--smt-ease-out);
}

.smt-segment:hover .smt-segment__img {
  transform: scale(1.06);
}

.smt-segment__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.1) 0%, rgba(11, 18, 32, 0.94) 100%);
}

.smt-segment__number {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  font-family: var(--smt-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(232, 237, 247, 0.5);
}

.smt-segment__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
}

.smt-segment__title {
  font-size: clamp(18px, 1.9vw, 22px);
  transition: color 220ms var(--smt-ease-out);
}

.smt-segment:hover .smt-segment__title {
  color: var(--smt-cyan-bright);
}

.smt-segment__desc {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.68;
}

/* ==========================================================================
   14. Digital Factory
   ========================================================================== */

.smt-videoframe {
  position: relative;
  margin-bottom: clamp(40px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.95);
}

.smt-videoframe__media {
  position: relative;
  overflow: hidden;
}

.smt-videoframe__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--smt-surface-2);
}

.smt-videoframe__label {
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid var(--smt-cyan-line);
  border-radius: 999px;
  background: rgba(5, 8, 15, 0.72);
  color: var(--smt-cyan-bright);
  font-family: var(--smt-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.smt-videoframe__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smt-cyan);
}

.smt-videoframe__toggle {
  /* Positioned inside .smt-videoframe__media, which wraps only the video, so a
     caption that wraps to several lines can never sit underneath the pill. */
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding-inline: 17px;
  border: 1px solid var(--smt-border-strong);
  border-radius: 999px;
  background: rgba(5, 8, 15, 0.86);
  color: var(--smt-text);
  font-family: var(--smt-font-display);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition:
    background-color 200ms var(--smt-ease-out),
    border-color 200ms var(--smt-ease-out),
    transform 160ms var(--smt-ease-out);
}

.smt-videoframe__toggle:hover {
  border-color: var(--smt-orange-line);
  background: rgba(240, 84, 35, 0.24);
}

.smt-videoframe__toggle:active {
  transform: scale(0.94);
}

.smt-videoframe__toggle svg {
  width: 15px;
  height: 15px;
  color: var(--smt-orange-bright);
}

.smt-videoframe__toggle > span {
  display: inline-flex;
  align-items: center;
}

.smt-videoframe__caption {
  padding: 20px clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--smt-border);
  background: var(--smt-bg-alt);
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* System cards */

.smt-systems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: clamp(16px, 1.9vw, 24px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

.smt-systemcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius);
  background: var(--smt-surface);
  transition:
    border-color 240ms var(--smt-ease-out),
    transform 240ms var(--smt-ease-out);
}

.smt-systemcard:hover {
  border-color: var(--smt-cyan-line);
  transform: translateY(-3px);
}

.smt-systemcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--smt-cyan-line);
  border-radius: 13px;
  background: var(--smt-cyan-soft);
  color: var(--smt-cyan-bright);
}

.smt-systemcard__icon svg {
  width: 21px;
  height: 21px;
}

.smt-systemcard__title {
  font-size: 17.5px;
}

.smt-systemcard__desc {
  color: var(--smt-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Automation Milestones — a horizontal rail. The client asked for the old
   stacked timeline to be redesigned, so the six steps now read left to right
   as a single progression line, with the AGV photograph sitting beside the
   heading rather than underneath the steps. */

.smt-milestones {
  padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
}

/* Heading above the four supporting-discipline cards on the Core Values page,
   which previously sat in a section with no heading of its own. */
.smt-supporthead {
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-size: clamp(20px, 2.2vw, 26px);
}

.smt-milestones__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(34px, 4vw, 52px);
}

/* The image is taller than the copy, so the copy column sits optically centred
   against it rather than stranded at the top of the row. */
.smt-milestones__intro {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 12px;
}

.smt-milestones__title {
  font-size: clamp(21px, 2.3vw, 28px);
}

.smt-milestones__lead {
  max-width: 52ch;
  color: var(--smt-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.smt-milestones__media {
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius);
}

.smt-milestones__media picture {
  display: block;
}

.smt-milestones__img {
  display: block;
  width: 100%;
  max-height: 230px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 700ms var(--smt-ease-out);
}

.smt-milestones:hover .smt-milestones__img {
  transform: scale(1.04);
}

/* The rail itself. On wide screens the six steps share the row evenly; on
   narrow screens it becomes a swipeable strip so nothing is squeezed. */
.smt-milestones__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smt-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 30px;
  padding-right: 8px;
}

/* The connector line is drawn per item so it stops cleanly at both ends of
   the rail instead of overhanging the first and last node. */
.smt-milestone__marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 11px;
}

.smt-milestone__marker::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--smt-border-strong);
}

.smt-milestone:first-child .smt-milestone__marker::before {
  left: 5px;
  width: calc(100% - 5px);
}

.smt-milestone:last-child .smt-milestone__marker::before {
  width: 6px;
}

.smt-milestone__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--smt-surface);
  border-radius: 50%;
  background: var(--smt-orange);
  box-shadow: 0 0 0 3px rgba(240, 84, 35, 0.16);
}

/* The closing step is forward-looking, currently the 2026 AI Solutions entry,
   so it carries the cyan technology accent rather than the orange used for
   delivered milestones. */
.smt-milestone:last-child .smt-milestone__node {
  background: var(--smt-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.smt-milestone__year {
  font-family: var(--smt-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--smt-orange-bright);
}

.smt-milestone:last-child .smt-milestone__year {
  color: var(--smt-cyan-bright);
}

.smt-milestone__title {
  font-size: 15.5px;
  line-height: 1.35;
}

.smt-milestone__desc {
  color: var(--smt-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .smt-milestones__head {
    grid-template-columns: 1fr;
  }

  .smt-milestones__rail {
    grid-auto-columns: minmax(212px, 1fr);
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .smt-milestone {
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .smt-milestones__rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Stacked on phones the rail reads as a conventional vertical timeline,
     with the connector running down the left edge. */
  .smt-milestone {
    padding: 0 0 24px 26px;
  }

  .smt-milestone:last-child {
    padding-bottom: 0;
  }

  .smt-milestone__marker {
    top: 6px;
    width: 11px;
    height: auto;
    bottom: 0;
  }

  .smt-milestone__marker::before {
    top: 11px;
    left: 5px;
    width: 1px;
    height: calc(100% + 13px);
  }

  .smt-milestone:first-child .smt-milestone__marker::before,
  .smt-milestone:last-child .smt-milestone__marker::before {
    left: 5px;
    width: 1px;
  }

  .smt-milestone:last-child .smt-milestone__marker::before {
    display: none;
  }
}

/* ==========================================================================
   15. Who We Are
   ========================================================================== */

.smt-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

.smt-about__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.smt-about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--smt-text-muted);
  font-size: 15.5px;
  line-height: 1.78;
}

.smt-about__body p {
  margin: 0;
}

.smt-about__highlights {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}

.smt-about__highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 13px;
}

.smt-about__tick {
  grid-row: span 2;
  width: 19px;
  height: 19px;
  margin-top: 0.28em;
  color: var(--smt-orange);
}

.smt-about__highlighttitle {
  font-family: var(--smt-font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--smt-text);
}

.smt-about__highlightdesc {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

.smt-about__media {
  display: grid;
  gap: clamp(18px, 2vw, 24px);
  align-content: start;
}

.smt-about__figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
}

.smt-about__figure picture {
  display: block;
}

.smt-about__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 800ms var(--smt-ease-out);
}

.smt-about__figure:hover .smt-about__img {
  transform: scale(1.04);
}

.smt-about__caption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  border-top: 1px solid var(--smt-border);
  background: var(--smt-bg-alt);
  color: var(--smt-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.smt-about__pin {
  width: 15px;
  height: 15px;
  color: var(--smt-orange);
}

/* Global footprint */

.smt-footprint {
  margin-bottom: clamp(48px, 6vw, 76px);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background:
    radial-gradient(780px 340px at 88% 0%, rgba(34, 211, 238, 0.07), transparent 62%),
    var(--smt-surface);
}

.smt-footprint__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-size: clamp(19px, 2vw, 24px);
}

.smt-footprint__globe {
  width: 22px;
  height: 22px;
  color: var(--smt-cyan);
}

.smt-footprint__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.smt-footprint__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  border-left: 2px solid var(--smt-orange-line);
  transition: border-left-color 220ms var(--smt-ease-out);
}

.smt-footprint__item:hover {
  border-left-color: var(--smt-orange);
}

.smt-footprint__city {
  font-family: var(--smt-font-display);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--smt-text);
}

/* Optional headline beneath the city, e.g. "Main Production Facility". Sits between
   the city name and the uppercase role label, so it takes the display face at a
   smaller size to stay clearly subordinate to the city. */
.smt-footprint__lead {
  font-family: var(--smt-font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--smt-text);
  margin-top: -2px;
}

.smt-footprint__role {
  font-family: var(--smt-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smt-orange-bright);
}

.smt-footprint__detail {
  color: var(--smt-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Corporate journey */

.smt-journey {
  display: block;
}

.smt-journey__title {
  margin-bottom: 26px;
  font-size: clamp(19px, 2vw, 24px);
}

.smt-journey__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  counter-reset: smt-journey;
}

.smt-journey__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 2px solid var(--smt-border-strong);
  transition: border-top-color 240ms var(--smt-ease-out);
}

.smt-journey__item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--smt-orange);
  box-shadow: 0 0 0 3px rgba(240, 84, 35, 0.18);
}

.smt-journey__item:hover {
  border-top-color: var(--smt-orange-line);
}

.smt-journey__year {
  font-family: var(--smt-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--smt-orange-bright);
}

.smt-journey__stage {
  font-family: var(--smt-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--smt-text);
}

.smt-journey__desc {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.68;
}

/* ==========================================================================
   16. Qualification & Laboratory
   ========================================================================== */

.smt-certs {
  display: grid;
  /* Six certifications, so three columns give two even rows rather than
     leaving a ragged gap on the second row. */
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.9vw, 24px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

@media (min-width: 620px) {
  .smt-certs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .smt-certs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.smt-cert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius);
  background: var(--smt-surface);
  transition:
    border-color 240ms var(--smt-ease-out);
}

.smt-cert:hover {
  border-color: var(--smt-orange-line);
}

.smt-cert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--smt-orange-line);
  border-radius: 12px;
  background: var(--smt-orange-soft);
  color: var(--smt-orange-bright);
}

.smt-cert__icon svg {
  width: 20px;
  height: 20px;
}

.smt-cert__code {
  font-family: var(--smt-font-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smt-cyan-bright);
}

.smt-cert__name {
  font-size: 17px;
}

.smt-cert__note {
  color: var(--smt-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Laboratory split */

.smt-lab {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}

.smt-lab__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.smt-lab__title {
  font-size: clamp(21px, 2.3vw, 27px);
}

.smt-lab__intro {
  color: var(--smt-text-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

.smt-lab__subtitle {
  margin-top: 6px;
  font-family: var(--smt-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-lab__media {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

.smt-lab__figure {
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
}

.smt-lab__figure picture {
  display: block;
}

.smt-lab__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.smt-lab__caption {
  padding: 15px 18px;
  border-top: 1px solid var(--smt-border);
  background: var(--smt-bg-alt);
  color: var(--smt-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.smt-lab__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.smt-lab__thumbs picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius);
}

.smt-lab__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--smt-ease-out);
}

.smt-lab__thumbs picture:hover .smt-lab__thumb {
  transform: scale(1.06);
}

/* ==========================================================================
   17. ESG
   ========================================================================== */

/* Measured 2024 results, drawn from the client's own ESG report. These are the
   only hard numbers on the page, so they lead it: a four-across band directly
   under the page head, with the unit set smaller and in the green accent used
   throughout the sustainability content. */

.smt-esgresults {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  padding: clamp(24px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--smt-border);
  border-bottom: 1px solid var(--smt-border);
}

.smt-esgresult {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.smt-esgresult__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--smt-font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--smt-text);
}

.smt-esgresult__unit {
  font-family: var(--smt-font-label);
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6ee7a0;
}

.smt-esgresult__label {
  max-width: 30ch;
  color: var(--smt-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.smt-esgresults__note {
  margin-top: 16px;
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.smt-esg {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 28px);
}

.smt-pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--smt-border);
  border-top: 2px solid rgba(74, 222, 128, 0.42);
  border-radius: 4px 4px var(--smt-radius-lg) var(--smt-radius-lg);
  background: var(--smt-surface);
  transition:
    border-top-color 240ms var(--smt-ease-out),
    transform 240ms var(--smt-ease-out);
}

.smt-pillar:hover {
  border-top-color: #4ade80;
  transform: translateY(-3px);
}

.smt-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.11);
  color: #6ee7a0;
}

.smt-pillar__icon svg {
  width: 22px;
  height: 22px;
}

.smt-pillar__title {
  font-size: clamp(18px, 1.9vw, 22px);
}

.smt-pillar__desc {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.68;
}

.smt-pillar .smt-ticks__icon {
  color: #6ee7a0;
}

/* Certifications. A quiet chip list rather than cards: the page already has two
   card grids and a third would fragment it. */

.smt-esgcerts {
  margin-top: clamp(48px, 6vw, 72px);
}

.smt-esgcerts__title {
  margin-bottom: clamp(18px, 2vw, 24px);
  font-size: clamp(19px, 2vw, 24px);
}

.smt-esgcerts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smt-esgcerts__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius);
  background: var(--smt-surface);
  color: var(--smt-text-muted);
  font-size: 13.5px;
}

.smt-esgcerts__icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: #6ee7a0;
}

.smt-esgsource {
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Engineering team photograph, closing the Core Values page. Full width of the
   container so the people register at a human scale, with the height capped so a
   tall replacement image cannot dominate the page. */

.smt-teamphoto {
  margin: clamp(40px, 5vw, 64px) 0 0;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
}

.smt-teamphoto picture {
  display: block;
}

.smt-teamphoto__img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

/* Green manufacturing. The journey timeline was removed at the client's
   request, so the copy beside the image is now short; the block is centred and
   the image capped so the two columns stay balanced. */

.smt-green {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: center;
}

.smt-green__media {
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
}

.smt-green__media picture {
  display: block;
}

.smt-green__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.smt-green__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smt-green__title {
  font-size: clamp(21px, 2.3vw, 27px);
}

.smt-green__intro {
  color: var(--smt-text-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ==========================================================================
   18. We Connect
   ========================================================================== */

.smt-connect {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}

.smt-connect__formwrap {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  box-shadow: 0 30px 80px -54px rgba(0, 0, 0, 0.95);
}

.smt-connect__formtitle {
  margin-bottom: 24px;
  font-size: clamp(20px, 2.1vw, 25px);
}

.smt-form {
  display: grid;
  gap: 18px;
}

.smt-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.smt-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smt-form__label {
  font-family: var(--smt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-form__input,
.smt-form__textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--smt-border);
  border-radius: 11px;
  background: var(--smt-bg-alt);
  color: var(--smt-text);
  font-size: 15px;
  line-height: 1.6;
  transition:
    border-color 180ms var(--smt-ease-out),
    background-color 180ms var(--smt-ease-out),
    box-shadow 180ms var(--smt-ease-out);
}

.smt-form__textarea {
  min-height: 148px;
  resize: vertical;
}

.smt-form__input::placeholder,
.smt-form__textarea::placeholder {
  color: var(--smt-text-dim);
}

.smt-form__input:hover,
.smt-form__textarea:hover {
  border-color: var(--smt-border-strong);
}

.smt-form__input:focus,
.smt-form__textarea:focus {
  outline: none;
  border-color: var(--smt-orange-line);
  background: var(--smt-surface-2);
  box-shadow: 0 0 0 3px rgba(240, 84, 35, 0.14);
}

.smt-form__input[aria-invalid="true"],
.smt-form__textarea[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

/* Honeypot. Kept in the DOM and in the layout tree for bots, but moved far
   off-screen and made non-interactive for humans and assistive technology.
   `display: none` is deliberately avoided because many bots skip such fields.
   The clip-rect wrapper alone was insufficient: the input escaped it, so the
   input itself is now sized and clipped too. */
.smt-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap;
  border: 0;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smt-form__honeypot label,
.smt-form__honeypot input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smt-form__submit {
  justify-self: start;
  margin-top: 4px;
}

.smt-form__note {
  color: var(--smt-text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Alerts */

.smt-alert {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
}

.smt-alert.is-visible {
  display: flex;
}

.smt-alert--success {
  border-color: rgba(74, 222, 128, 0.34);
  background: rgba(74, 222, 128, 0.1);
  color: #b6f2cd;
}

.smt-alert--error {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.1);
  color: #fcc9c9;
}

.smt-alert__icon {
  width: 18px;
  height: 18px;
  margin-top: 0.22em;
}

.smt-alert--success .smt-alert__icon {
  color: #4ade80;
}

.smt-alert--error .smt-alert__icon {
  color: #f87171;
}

.smt-alert strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--smt-font-display);
  font-weight: 600;
  color: #fff;
}

/* Contact information */

.smt-connect__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.smt-connect__infotitle {
  font-size: clamp(20px, 2.1vw, 25px);
}

.smt-contactlist {
  display: grid;
  gap: 20px;
}

.smt-contactlist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--smt-border);
}

.smt-contactlist__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.smt-contactlist__icon {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--smt-border);
  border-radius: 12px;
  background: var(--smt-surface-2);
  color: var(--smt-orange-bright);
}

.smt-contactlist__icon svg {
  width: 18px;
  height: 18px;
}

.smt-contactlist__label {
  font-family: var(--smt-font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

/* The client asked that the location lines not be highlighted. They are read as
   supporting detail beside the label, so they now match the body treatment
   rather than standing out in the display face. Links inside still receive the
   hover accent below, since those are genuinely actionable. */
.smt-contactlist__value {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.smt-contactlist__value a {
  color: var(--smt-text);
  font-weight: 500;
}

.smt-contactlist__value a:hover {
  color: var(--smt-orange-bright);
}

.smt-contactlist__detail {
  color: var(--smt-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.smt-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--smt-border);
  background: #03050a;
}

.smt-footer__glow {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--smt-orange) 30%, var(--smt-cyan) 70%, transparent);
  opacity: 0.55;
}

.smt-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 3.4vw, 48px);
  padding-block: clamp(48px, 6vw, 76px);
}

.smt-footer__brand {
  display: flex;
  flex-direction: column;
  /* Column flex stretches children to full width by default, which is what
     smeared the logo. Keep children at their intrinsic width. */
  align-items: flex-start;
  gap: 16px;
  max-width: 40ch;
}

.smt-footer__logo {
  /* The wordmark is 3.025:1. `width: auto` alone loses to the global
     `img { max-width: 100% }` + stretch, so pin the ratio explicitly. */
  width: 109px;
  height: 36px;
  max-width: 109px;
  aspect-ratio: 363 / 120;
  object-fit: contain;
  object-position: left center;
  flex: none;
}

.smt-footer__tagline {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.smt-footer__motto {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--smt-orange-line);
  border-radius: 999px;
  background: var(--smt-orange-soft);
  color: var(--smt-orange-bright);
  font-family: var(--smt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: flex-start;
}

.smt-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.smt-footer__title {
  font-family: var(--smt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-footer__list {
  display: grid;
  gap: 11px;
}

.smt-footer__list a {
  color: var(--smt-text-muted);
  font-size: 14.5px;
}

.smt-footer__list a:hover {
  color: var(--smt-orange-bright);
}

.smt-footer__label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--smt-font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-footer__list li {
  color: var(--smt-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.smt-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid var(--smt-border);
  border-radius: 999px;
  background: var(--smt-surface-2);
  color: var(--smt-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition:
    border-color 200ms var(--smt-ease-out),
    color 200ms var(--smt-ease-out),
    background-color 200ms var(--smt-ease-out);
}

.smt-footer__social:hover {
  border-color: var(--smt-cyan-line);
  background: var(--smt-cyan-soft);
  color: var(--smt-cyan-bright);
}

.smt-footer__social svg {
  width: 17px;
  height: 17px;
}

.smt-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--smt-border);
}

.smt-footer__copy {
  color: var(--smt-text-dim);
  font-size: 13px;
}

.smt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.smt-footer__legalmenu {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.smt-footer__legalmenu a {
  color: var(--smt-text-dim);
  font-size: 13px;
}

.smt-footer__legalmenu a:hover {
  color: var(--smt-text);
}

/* ==========================================================================
   20. WordPress core classes
   ========================================================================== */

.smt-page {
  padding-top: calc(var(--smt-nav-h) + clamp(48px, 6vw, 88px));
  padding-bottom: clamp(56px, 7vw, 96px);
}

.smt-page__title {
  margin-bottom: 24px;
  font-size: clamp(28px, 4vw, 44px);
}

.smt-page__content,
.entry-content {
  max-width: 78ch;
  color: var(--smt-text-muted);
  font-size: 16px;
  line-height: 1.8;
}

.smt-page__content > * + *,
.entry-content > * + * {
  margin-top: 1.15em;
}

.smt-page__content h2,
.smt-page__content h3,
.entry-content h2,
.entry-content h3 {
  margin-top: 1.8em;
  color: var(--smt-text);
}

.smt-page__content a,
.entry-content a {
  color: var(--smt-cyan-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smt-page__content a:hover,
.entry-content a:hover {
  color: var(--smt-orange-bright);
}

.smt-page__content ul,
.entry-content ul {
  padding-left: 1.3em;
  list-style: disc;
}

.smt-page__content ol,
.entry-content ol {
  padding-left: 1.3em;
  list-style: decimal;
}

.smt-page__content blockquote,
.entry-content blockquote {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--smt-orange);
  color: var(--smt-text);
  font-style: italic;
}

.smt-page__content code,
.entry-content code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--smt-surface-2);
  font-family: var(--smt-font-mono);
  font-size: 0.9em;
}

.smt-page__content img,
.entry-content img,
.wp-caption img {
  border-radius: var(--smt-radius);
}

.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}

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

.aligncenter {
  margin-inline: auto;
}

.wp-caption-text,
.wp-block-image figcaption {
  margin-top: 8px;
  color: var(--smt-text-dim);
  font-size: 13px;
}

.smt-postlist {
  display: grid;
  gap: 26px;
  max-width: 820px;
}

.smt-postlist__item {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--smt-border);
}

.smt-postlist__title {
  margin-bottom: 8px;
  font-size: 21px;
}

.smt-postlist__meta {
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.smt-searchform {
  display: flex;
  gap: 10px;
  max-width: 420px;
}

.smt-searchform input[type="search"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--smt-border);
  border-radius: 11px;
  background: var(--smt-bg-alt);
}

.smt-404 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-height: 62vh;
  justify-content: center;
}

/* ==========================================================================
   21. Responsive breakpoints
   ========================================================================== */

@media (min-width: 560px) {
  .smt-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .smt-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .smt-nav__brandtext {
    display: flex;
  }

  .smt-about__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }

  /* Five pillars, so an auto-fit grid fitted four across at desktop and left
     the fifth stranded on its own row. Explicit columns instead: 2 + 2 + 1 here,
     3 + 2 from 1120px, which keeps the rows visually deliberate and leaves the
     cards wide enough for their tick lists. */
  .smt-esg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smt-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .smt-about {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .smt-lab {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .smt-green {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .smt-connect {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* The horizontal bar needs roughly 1100px to hold the logo, seven links and the
   three-language switcher. Below that the drawer is the honest answer: at
   1024px the switcher was landing 16px past the right edge, unreachable. */
@media (min-width: 1120px) {
  .smt-nav__links {
    display: flex;
  }

  .smt-esg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .smt-nav__toggle,
  .smt-drawer {
    display: none;
  }

  .smt-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  }
}

@media (max-width: 1119px) {
  .smt-nav__links {
    display: none;
  }
}

/* The bar carries seven links plus a three-language switcher. A separate
   "We Connect" button would be the eighth control competing for the same row
   and duplicates a link that is already there, so it is dropped once the
   horizontal nav is showing and only appears in the mobile drawer. */
@media (min-width: 1120px) {
  .smt-nav__cta {
    display: none;
  }

  /* Seven links plus a three-language switcher exceed the 1240px container at
     every desktop width below ~1600px. Nothing in the row could shrink, so the
     switcher was pushed past the right edge and became unreachable — masked, not
     solved, by `overflow-x: hidden` on the body. The row is now allowed to
     distribute space: the links group absorbs the shortfall, and the brand and
     switcher stay intact because they carry the logo and the only language
     control. */
  .smt-nav__inner {
    justify-content: space-between;
  }

  .smt-nav__links {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The links group is the flexible track, so its own content must sit at the
     end of it. Centring the links inside a track that is wider than they are
     leaves the last link visually overlapping the switcher that follows. */
  .smt-nav__links {
    justify-content: flex-end;
  }

  /* `min-width: 0` lets the track shrink below the width of the links it holds,
     and because each link is `white-space: nowrap` the overflow silently slides
     left underneath the brand block instead of wrapping. Sizing the track to its
     content keeps every link inside its own bounds. */
  .smt-nav__links {
    flex: 0 1 auto;
    min-width: min-content;
    margin-inline: 0 0;
  }

  .smt-nav__link {
    padding-inline: 10px;
  }

  /* The strapline is decorative; the logo alone still identifies the company,
     so it yields first when the row is tight. */
  .smt-nav__brandsub {
    display: none;
  }
}

/* Below 1400px there is still not enough room for logo + strapline + seven
   links + a three-language switcher, so the strapline drops to the logo mark
   alone. The logo already identifies the company, and the same wording appears
   in the hero heading immediately below. */
@media (min-width: 1120px) and (max-width: 1399px) {
  .smt-nav__inner {
    gap: 12px;
  }

  .smt-nav__brandtext {
    display: none;
  }

  .smt-nav__link {
    padding-inline: 8px;
    font-size: 14px;
  }

  .smt-langswitch__btn {
    padding: 6px 9px;
  }
}

/* Restore the strapline once there is genuinely room for it. */
@media (min-width: 1600px) {
  .smt-nav__brandsub {
    display: block;
  }
}

/* Hero controls: the replay label is dropped on narrow screens so the button
   stays a compact icon target rather than crowding the rotator dots. */
@media (max-width: 719px) {
  .smt-hero__controls {
    right: 20px;
    bottom: 20px;
    gap: 12px;
  }

  .smt-hero__replaytext {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .smt-hero__replay {
    padding: 10px;
  }

  .smt-hero__dot {
    width: 20px;
  }

  .smt-hero__dot.is-active {
    width: 30px;
  }
}

/* ==========================================================================
   22. Reduced motion and print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The video is not removed outright: the visitor can still press replay.
     It simply never autoplays, and the rotator holds on the first image. */
  .smt-hero__video:not(.is-playing) {
    display: none;
  }
}

@media print {
  .smt-nav,
  .smt-drawer,
  .smt-hero__media,
  .smt-hero__canvas,
  .smt-videoframe,
  .smt-footer__glow,
  .smt-connect__formwrap {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  .smt-section {
    padding-block: 24px;
    background: #fff;
  }

  .smt-sectionhead__title,
  .smt-hero__title {
    color: #111;
  }
}

/* ==========================================================================
   23. Secondary templates (blog, page, single, search, 404)
   ========================================================================== */

.smt-container--narrow {
  max-width: 840px;
}

.smt-section--page {
  padding-top: calc(var(--smt-nav-h) + clamp(48px, 6vw, 88px));
}

.smt-section--404 {
  display: flex;
  align-items: center;
  min-height: 72vh;
}

.smt-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Page heads */

.smt-pagehead {
  margin-bottom: clamp(32px, 4vw, 52px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--smt-border);
}

.smt-pagehead__title {
  margin-bottom: 14px;
  font-size: clamp(30px, 4.4vw, 50px);
}

.smt-pagehead__intro {
  max-width: 68ch;
  color: var(--smt-text-muted);
  font-size: clamp(15px, 1.35vw, 18px);
}

/* Articles */

.smt-article__media {
  margin-bottom: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
}

.smt-article__img {
  width: 100%;
  object-fit: cover;
}

.smt-article__date {
  display: block;
  margin-bottom: 20px;
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.smt-article__content {
  max-width: 78ch;
  color: var(--smt-text-muted);
  font-size: 16.5px;
  line-height: 1.85;
}

.smt-article__content > * + * {
  margin-top: 1.15em;
}

.smt-article__content h2,
.smt-article__content h3,
.smt-article__content h4 {
  margin-top: 1.9em;
  color: var(--smt-text);
}

.smt-article__content a {
  color: var(--smt-cyan-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smt-article__content a:hover {
  color: var(--smt-orange-bright);
}

.smt-article__content ul {
  padding-left: 1.3em;
  list-style: disc;
}

.smt-article__content ol {
  padding-left: 1.3em;
  list-style: decimal;
}

.smt-article__content blockquote {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--smt-orange);
  color: var(--smt-text);
  font-style: italic;
}

.smt-article__content img {
  border-radius: var(--smt-radius);
}

.smt-article__pages {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--smt-border);
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 13px;
}

.smt-article__pages a {
  color: var(--smt-cyan-bright);
}

/* Post grid and cards */

.smt-postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.smt-postcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background: var(--smt-surface);
  transition:
    border-color 240ms var(--smt-ease-out),
    transform 240ms var(--smt-ease-out);
}

.smt-postcard:hover {
  border-color: var(--smt-orange-line);
  transform: translateY(-3px);
}

.smt-postcard__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--smt-surface-2);
}

.smt-postcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--smt-ease-out);
}

.smt-postcard:hover .smt-postcard__img {
  transform: scale(1.05);
}

.smt-postcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
}

.smt-postcard__date {
  color: var(--smt-text-dim);
  font-family: var(--smt-font-label);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.smt-postcard__title {
  font-size: 19px;
}

.smt-postcard__title a:hover {
  color: var(--smt-orange-bright);
}

.smt-postcard__excerpt {
  color: var(--smt-text-muted);
  font-size: 14.5px;
  line-height: 1.68;
}

.smt-postcard__excerpt p {
  margin: 0;
}

.smt-postcard__more {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--smt-cyan-bright);
  font-family: var(--smt-font-display);
  font-size: 14px;
  font-weight: 600;
}

.smt-postcard__more:hover {
  color: var(--smt-orange-bright);
}

/* Pagination and post navigation */

.smt-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 52px);
}

.smt-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--smt-border);
  border-radius: 11px;
  background: var(--smt-surface);
  color: var(--smt-text-muted);
  font-family: var(--smt-font-label);
  font-size: 13.5px;
  transition:
    border-color 180ms var(--smt-ease-out),
    color 180ms var(--smt-ease-out),
    background-color 180ms var(--smt-ease-out);
}

.smt-pagination .page-numbers:hover {
  border-color: var(--smt-border-strong);
  color: var(--smt-text);
}

.smt-pagination .page-numbers.current {
  border-color: transparent;
  background: var(--smt-orange);
  color: #fff;
}

.smt-postnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--smt-border);
}

.smt-postnav__prev a,
.smt-postnav__next a {
  color: var(--smt-text-muted);
  font-family: var(--smt-font-display);
  font-size: 14.5px;
  font-weight: 500;
}

.smt-postnav__prev a:hover,
.smt-postnav__next a:hover {
  color: var(--smt-orange-bright);
}

/* Search form */

.smt-search {
  max-width: 460px;
}

.smt-search__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--smt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smt-text-dim);
}

.smt-search__row {
  display: flex;
  gap: 10px;
}

.smt-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--smt-border);
  border-radius: 11px;
  background: var(--smt-bg-alt);
  color: var(--smt-text);
  font-size: 15px;
  transition:
    border-color 180ms var(--smt-ease-out),
    box-shadow 180ms var(--smt-ease-out);
}

.smt-search__input:focus {
  outline: none;
  border-color: var(--smt-orange-line);
  box-shadow: 0 0 0 3px rgba(240, 84, 35, 0.14);
}

.smt-empty {
  color: var(--smt-text-muted);
  font-size: 16px;
}

/* ==========================================================================
   Sustainability page: closing call to action and optional editor content
   ========================================================================== */

.smt-pagecta {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 40px;
  border: 1px solid var(--smt-border);
  border-radius: var(--smt-radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(240, 84, 35, 0.1), transparent 62%),
    var(--smt-surface);
  text-align: center;
}

.smt-pagecta__title {
  margin-bottom: 14px;
  font-size: clamp(26px, 3.4vw, 36px);
}

.smt-pagecta__intro {
  max-width: 56ch;
  margin: 0 auto 28px;
  color: var(--smt-text-muted);
  font-size: 16px;
}

/* Content the client writes in the WordPress editor for this page. */
.smt-prose {
  max-width: 74ch;
  margin: 64px auto 0;
  color: var(--smt-text-muted);
  font-size: 16px;
  line-height: 1.75;
}

.smt-prose > * + * {
  margin-top: 1.15em;
}

.smt-prose h2,
.smt-prose h3,
.smt-prose h4 {
  color: var(--smt-text);
}

.smt-prose h2 {
  margin-top: 1.8em;
  font-size: 26px;
}

.smt-prose h3 {
  margin-top: 1.6em;
  font-size: 20px;
}

.smt-prose a {
  color: var(--smt-orange-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smt-prose a:hover {
  color: var(--smt-orange);
}

.smt-prose ul,
.smt-prose ol {
  padding-left: 1.35em;
  list-style: revert;
}

.smt-prose li + li {
  margin-top: 0.5em;
}

.smt-prose img {
  height: auto;
  border-radius: var(--smt-radius);
}

.smt-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--smt-orange-line);
  font-style: italic;
}

@media (max-width: 640px) {
  .smt-pagecta {
    padding: 36px 22px;
  }

  .smt-prose {
    margin-top: 44px;
  }
}