/* Pristine Material Handling — brand tokens and the shared page chrome.
   Every page loads this file first: the homepage (with styles.css) and every inner page (with style.css).
   It holds the typeface, the palette (each colour defined once), the buttons, the call strip, the header with its
   menus, the mobile drawer, the footer and the mobile action bar. The markup is written by _tools/site_chrome.py. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
/* Arial sized to Poppins' metrics, so text holds its place while Poppins loads */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); size-adjust: 112.8%; ascent-override: 93.1%; descent-override: 31%; line-gap-override: 8.9%; }

:root {
  /* core palette */
  --charcoal: #1C1C1C;
  --ink: #121212;
  --graphite: #2A2A2A;
  --slate: #484848;
  --steel: #949494;
  --mist: #D6D9DB;
  --paper: #F5F6F7;
  --white: #FFFFFF;
  /* accent */
  --pristine-blue: #01CAF6;
  --pristine-blue-light: #66DFFA;
  --pristine-blue-deep: #007A9C;
  /* status colours: status only, never decorative */
  --ok: #4ADE80;
  --ok-on-light: #15803D;
  --warning: #FBBF24;
  --warning-on-light: #B45309;
  --fault: #F87171;
  --fault-on-light: #B91C1C;

  --font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;      /* cards */
  --radius-sm: 4px;   /* buttons and inputs */

  /* Roles. These are what the components use; they point at the palette above.
     Default = a light surface (Paper page, White cards). */
  --text: var(--charcoal);
  --text-2: var(--slate);
  --muted: var(--slate);
  --faint: var(--slate);
  --hair: var(--mist);
  --page: var(--paper);
  --soft: var(--paper);
  --surface: var(--white);
  --tint: var(--paper);
  --link: var(--pristine-blue-deep);
  --eyebrow: var(--pristine-blue-deep);
  --mark: var(--pristine-blue-deep);
  --focus: var(--pristine-blue-deep);
  --btn-line: var(--charcoal);
  --btn-hover: var(--mist);
}

/* The same roles on a dark surface (Charcoal, Ink). */
.on-dark, .topline, .site-header, .site-footer, .page-hero, .cta-band, .stats-band, .contact-card, .contact-block,
.quote-form, .bro-dialog, .m-actions {
  --text: var(--white);
  --text-2: var(--mist);
  --muted: var(--steel);
  --faint: var(--steel);
  --hair: var(--slate);
  --page: var(--charcoal);
  --soft: var(--graphite);
  --surface: var(--charcoal);
  --tint: var(--graphite);
  --link: var(--pristine-blue-light);
  --eyebrow: var(--pristine-blue);
  --mark: var(--pristine-blue-light);
  --focus: var(--pristine-blue-light);
  --btn-line: var(--mist);
  --btn-hover: var(--graphite);
  color: var(--text);
}
/* ...and back to light inside a dark page */
.on-light {
  --text: var(--charcoal);
  --text-2: var(--slate);
  --muted: var(--slate);
  --faint: var(--slate);
  --hair: var(--mist);
  --page: var(--paper);
  --soft: var(--paper);
  --surface: var(--white);
  --tint: var(--paper);
  --link: var(--pristine-blue-deep);
  --eyebrow: var(--pristine-blue-deep);
  --mark: var(--pristine-blue-deep);
  --focus: var(--pristine-blue-deep);
  --btn-line: var(--charcoal);
  --btn-hover: var(--mist);
  color: var(--text);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Buttons: 48px tall, 4px corners, Poppins 500. One blue button per screen. ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px;
  border: 1px solid var(--btn-line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font: 500 14px/1.2 var(--font); letter-spacing: .01em; text-align: center; text-decoration: none;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--btn-hover); }
.btn-accent, .btn.fill { background: var(--pristine-blue); border-color: var(--pristine-blue); color: var(--charcoal); }
.btn-accent:hover, .btn.fill:hover { background: var(--pristine-blue-light); border-color: var(--pristine-blue-light); }
.btn-sm { min-height: 40px; padding: 8px 16px; }
.btn[disabled] { opacity: .6; cursor: progress; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Call / enquiry strip ---------- */
.topline { background: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.2; }
.topline-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.topline-actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.tl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; color: var(--white); font-weight: 500; white-space: nowrap; text-decoration: none; }
.tl-k { color: var(--mist); font-weight: 400; }
.tl-btn:hover, .tl-btn:hover .tl-k { color: var(--pristine-blue-light); }
@media (max-width: 760px) {
  .tl-addr { display: none; }
  .topline-in { padding: 8px 16px; }
  .topline-actions { width: 100%; margin: 0; gap: 8px; }
  .tl-btn { flex: 1; justify-content: center; min-height: 44px; padding: 0 8px; border: 1px solid var(--slate); border-radius: var(--radius-sm); font-size: 14px; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--charcoal); border-bottom: 1px solid var(--slate); font-family: var(--font); }
.site-header .container, .site-footer .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.header-in { position: relative; display: flex; align-items: center; gap: 22px; height: 70px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; height: 46px; width: auto; max-width: none; }

.site-nav { margin-left: auto; }
.nav { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.nav > li > a { display: block; padding: 8px 0; border-bottom: 2px solid transparent; color: var(--mist); font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; text-decoration: none; transition: color .15s ease; }
.nav > li > a:hover { color: var(--white); }
.nav > li > a.active { color: var(--pristine-blue-light); }
.nav-m { display: none; }

/* drop-downs: Manual Equipment (the ranges, each with its short description) and Autonomous Solutions */
.has-drop { position: relative; }
.site-nav .has-drop { position: static; }
.site-nav .has-drop--auto { position: relative; }
.has-drop > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: translateY(-3px) rotate(45deg); }
.drop {
  position: absolute; top: 100%; left: -14px; min-width: 224px; margin: 0; padding: 8px; list-style: none;
  background: var(--charcoal); border: 1px solid var(--slate); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--mist); font-size: 14px; font-weight: 500; text-decoration: none; }
.drop a:hover { background: var(--graphite); color: var(--white); }
.drop .menu-d { display: block; margin-top: 2px; color: var(--steel); font-size: 12.5px; font-weight: 400; line-height: 1.3; }
.drop .drop-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--slate); border-radius: 0; color: var(--pristine-blue-light); }
.drop .drop-all:hover { background: none; color: var(--white); }
.drop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; } /* bridge over the gap, so the menu stays open */

/* one row of six ranges, so the whole menu fits a laptop screen */
.drop-mega { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 14px; width: min(1192px, 96vw); left: 50%; margin-left: calc(min(1192px, 96vw) / -2); padding: 16px 16px 10px; }
.drop-mega .mega-col { display: flex; flex-direction: column; padding-bottom: 8px; }
.drop-mega a { padding: 5px 8px; }
.drop-mega a.mega-cat { margin-bottom: 4px; padding: 6px 8px; border-bottom: 1px solid var(--slate); border-radius: 0; color: var(--white); font-weight: 500; }
.drop-mega a.mega-g { padding: 4px 8px; color: var(--mist); font-size: 13.5px; line-height: 1.25; }
.drop-mega a.mega-g:hover, .drop-mega a.mega-cat:hover { color: var(--white); }
.drop-mega .drop-all { grid-column: 1 / -1; }
.drop-auto { left: -14px; width: 300px; padding: 10px; }
.drop-auto a.auto-i { padding: 8px 12px; line-height: 1.25; }

.search-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--slate); border-radius: var(--radius-sm); background: transparent; color: var(--white); cursor: pointer; transition: background .2s, border-color .2s; }
.search-btn:hover, .search-btn[aria-expanded="true"] { border-color: var(--mist); background: var(--graphite); }
.header-cta { flex: none; white-space: nowrap; }
.nav-toggle { display: none; flex: none; height: 44px; min-width: 64px; padding: 0 14px; border: 1px solid var(--mist); border-radius: var(--radius-sm); background: transparent; color: var(--white); font: 500 14px/1 var(--font); cursor: pointer; }
.site-header.nav-open .nav-toggle { background: var(--graphite); }

/* desktop fit: the menu always stays on one line */
@media (min-width: 1100px) and (max-width: 1279px) { .nav { gap: 20px; } .header-in { gap: 20px; } .nav > li:first-child { display: none; } }
@media (min-width: 1100px) and (max-width: 1179px) { .nav { gap: 16px; } .header-in { gap: 16px; } .nav > li > a { font-size: 13.5px; letter-spacing: .01em; } .logo img { height: 40px; } .header-cta { padding-left: 16px; padding-right: 16px; } }

/* drawer: below 1100px the menu opens from the Menu button */
@media (max-width: 1099px) {
  .header-in { gap: 10px; }
  .header-cta { display: none; }
  .search-btn { margin-left: auto; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--charcoal); border-top: 1px solid var(--slate); border-bottom: 1px solid var(--slate); max-height: calc(100vh - var(--drawer-top, 70px)); max-height: calc(100dvh - var(--drawer-top, 70px)); overflow-y: auto; overscroll-behavior: contain; }
  .site-header.nav-open .site-nav { display: block; }
  html:has(.site-header.nav-open) { overflow: hidden; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .nav > li:first-child { display: block; }
  .nav > li > a { padding: 14px 0; border-bottom: 1px solid var(--slate); color: var(--white); font-size: 16px; white-space: normal; }
  .has-drop > a::after { display: none; }
  .site-nav .has-drop--auto { position: static; }
  .drop, .drop-mega, .drop-auto { position: static; display: block; width: auto; min-width: 0; margin: 0; padding: 4px 0 8px 16px; border: 0; opacity: 1; visibility: visible; transform: none; }
  .drop::before { display: none; }
  .drop-mega .mega-col { padding: 0; }
  .drop-mega a.mega-g, .drop .menu-d, .drop .drop-all { display: none; }
  .drop-mega a.mega-cat, .drop-auto a.auto-i { margin: 0; padding: 10px 0; border: 0; color: var(--mist); font-size: 15px; font-weight: 400; }
  .nav-m { display: block; }
  .nav-m a { color: var(--pristine-blue-light) !important; }
}
@media (max-width: 600px) {
  .site-header .container { padding: 0 16px; }
  .logo img { height: 36px; }
  .nav { padding: 8px 16px 20px; }
}

/* the homepage: the strip and header sit over the film, clear, and turn solid once the film has scrolled past */
.chrome-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); }
.chrome-fixed .topline { background: transparent; transition: background .3s; }
.chrome-fixed .site-header { position: static; background: transparent; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
.chrome-fixed.solid .topline, .chrome-fixed:has(.nav-open) .topline { background: var(--ink); }
.chrome-fixed.solid .site-header, .chrome-fixed .site-header.nav-open { background: var(--charcoal); border-bottom-color: var(--slate); }

/* ---------- Log in control (added to the strip by /portal/nav-login.js) ---------- */
.pmh-login { position: relative; font-family: var(--font); }
.pmh-login__btn { padding: 9px 0; border: 0; background: none; color: var(--mist); font: 400 13px/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.pmh-login__btn:hover, .pmh-login__btn[aria-expanded="true"] { color: var(--pristine-blue-light); }
.pmh-login__menu { display: none; position: absolute; top: 100%; right: 0; z-index: 300; min-width: 230px; padding: 6px; background: var(--charcoal); border: 1px solid var(--slate); border-radius: var(--radius); }
.pmh-login__menu.open { display: block; }
.pmh-login__menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--white); font-size: 14px; font-weight: 500; text-decoration: none; }
.pmh-login__menu a:hover { background: var(--graphite); }
.pmh-login__menu a + a { border-top: 1px solid var(--slate); border-radius: 0; }
.pmh-login__menu small { display: block; margin-top: 2px; color: var(--steel); font-size: 12px; font-weight: 400; }
@media (max-width: 760px) { .topline .pmh-login { display: none; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; background: var(--charcoal); border-top: 1px solid var(--slate); color: var(--mist); font-family: var(--font); }
.footer-in { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.1fr; gap: 40px; padding: 64px 0 48px; }
.footer-in h4, .footer-in .footer-heading { margin: 0 0 16px; color: var(--steel); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.footer-brand img { height: 42px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 300px; margin: 0; color: var(--steel); font-size: 14px; }
.footer-brand p a { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.footer-links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: block; padding: 8px 0; color: var(--mist); font-size: 14px; text-decoration: none; }
.footer-links a:hover, .footer-brand p a:hover, .footer-legal a:hover { color: var(--white); }
.footer-contact p { margin: 0 0 10px; color: var(--mist); font-size: 14px; }
.footer-contact a { display: inline-block; padding: 10px 0; color: var(--white); text-decoration: underline; text-decoration-color: var(--slate); text-underline-offset: 4px; }
.footer-contact a:hover { text-decoration-color: var(--white); }
.footer-legal { padding: 22px 0 30px; border-top: 1px solid var(--slate); color: var(--steel); font-size: 12.5px; }
.footer-legal p { margin: 0 0 4px; }
.footer-legal a { color: var(--mist); text-decoration: underline; }
@media (max-width: 1060px) { .footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-in { gap: 28px 20px; } .footer-brand, .footer-contact { grid-column: 1 / -1; } }

/* ---------- Mobile action bar ---------- */
.m-actions { display: none; }
@media (max-width: 640px) {
  .m-actions:not([hidden]) { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: var(--charcoal); border-top: 1px solid var(--slate); font-family: var(--font); }
  .m-actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; text-decoration: none; }
  .m-call { border: 1px solid var(--mist); color: var(--white); }
  .m-quote { background: var(--pristine-blue); color: var(--charcoal); }
  body.has-mbar { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .drop, .search-btn, .chrome-fixed .topline, .chrome-fixed .site-header { transition: none; }
}