/* ===========================================================================
   Automated Engineering Solutions

   The audience is a factory owner or works manager whose line has stopped.
   Nothing decorative: heavy condensed headings, a lot of contrast, and their
   own photographs of real machines doing the arguing. Deliberately unlike the
   security and training sites built before it — this one is industrial, not
   corporate.

   Mobile first. Media queries only ever step UP with min-width.
   =========================================================================== */

:root {
  --ink: #0b0b0d;
  --ink-2: #16181c;
  --ink-3: #1f2c3d;
  --line-dark: #2a3849;

  --body: #4a5768;
  --muted: #6b7a8d;
  --heading: #0b0b0d;

  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --surface: #ffffff;
  --field: #ffffff;
  --callout-bg: #fffbeb;
  --callout-ink: #6b5300;
  --line: #dfe4ec;

  /* Safety yellow, off the machines in their own photographs. Used sparingly:
     as an accent it reads as industrial, everywhere it reads as a warning. */
  --amber: #5fbf2e;        /* AES brand green (token name kept so every reference still resolves) */
  --amber-dark: #46991f;
  --on-dark: #eef2f7;
  --on-dark-dim: #9fb0c4;

  --ok: #1f9d61;
  --alert: #d0483a;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Barlow Condensed', 'Inter', sans-serif;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 6rem;

  --radius: 6px;
  --radius-lg: 12px;
  --container: 1180px;
  --header-h: 76px;

  --shadow-sm: 0 2px 8px rgba(13, 21, 32, .07);
  --shadow: 0 16px 40px -18px rgba(13, 21, 32, .35);

  color-scheme: light;
}


/* ---- Dark theme -----------------------------------------------------------
   Applied by a small script in <head> before the first paint, so the page
   never flashes light. Only colour tokens change: no layout, no sizes, nothing
   structural, so the two themes cannot drift apart as the site is edited.

   --ink stays as it is. It is the header, the footer and the dark sections,
   and it has to remain DARKER than the page or those bands stop reading as
   bands at all. In light mode --ink is the contrast; here it is the depth. */

:root[data-theme="dark"] {
  --heading: #eef2f7;
  --body: #aebccd;
  --muted: #8496aa;

  --bg: #0a0a0b;
  --bg-alt: #111114;
  --surface: #141419;
  --line: #27354a;

  --field: #0d1620;
  --callout-bg: #241d05;
  --callout-ink: #f0d071;

  /* The amber is a safety colour off their own machines and reads correctly on
     dark already, so it is left alone. Only the "dark" variant is lifted,
     because a darkened amber on a dark ground is unreadable. */
  --amber-dark: #6fd23a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .75);

  color-scheme: dark;
}

/* Cards and the sidebar sit on --surface, which is now barely lighter than the
   page, so the border does the separating instead of the shadow. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .aside,
:root[data-theme="dark"] .form-wrap { border-color: var(--line); }

/* Theme toggle. Both icons ship in the markup and CSS shows whichever matches
   the active theme, so it stays correct with JavaScript blocked. */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 4px;
  color: var(--on-dark-dim); cursor: pointer;
  transition: color .16s, border-color .16s;
}
.theme-toggle:hover { color: var(--amber); border-color: var(--amber); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--header-h);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--heading);
  line-height: 1.04;
  letter-spacing: .002em;
  font-weight: 700;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p + p { margin-top: var(--s4); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--amber); color: var(--ink); padding: var(--s3) var(--s5); font-weight: 700; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---- Layout ---- */

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.section { padding-block: var(--s8); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: var(--on-dark-dim); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark .section__lead { color: var(--on-dark-dim); }

.section__head { max-width: 62ch; margin-bottom: var(--s6); }
.section__title { margin-bottom: var(--s3); }
.section__lead { color: var(--muted); font-size: 1.06rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--display);
  font-size: .95rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-dark); margin-bottom: var(--s2);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--amber); }
.eyebrow--light { color: var(--amber); }

/* ---- Buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: .95rem 1.7rem; border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s, transform .16s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { background: var(--amber-dark); }
.btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn--sm { padding: .6rem 1.1rem; font-size: .95rem; }
.btn--block { width: 100%; }

/* ---- Header ---- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: var(--ink);
  border-bottom: 3px solid var(--amber);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

.nav__brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.nav__mark {
  display: grid; place-items: center;
  padding: .3rem .55rem;
  background: var(--amber); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: .04em;
  border-radius: 3px;
}
.nav__logo { height: 46px; width: auto; display: block; }
.nav__name {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .82rem; line-height: 1.15; color: var(--on-dark); font-weight: 600;
}

.nav__links { display: none; list-style: none; padding: 0; align-items: center; gap: var(--s5); }
.nav__link {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .07em;
  font-size: 1.02rem; font-weight: 600; color: var(--on-dark-dim); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav__link:hover, .nav__link.is-current { color: var(--amber); }
.nav__caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }

.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: -var(--s4); min-width: 260px;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  list-style: none; padding: var(--s2); margin-top: var(--s3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  box-shadow: var(--shadow);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a {
  display: block; padding: .55rem var(--s3); color: var(--on-dark-dim);
  text-decoration: none; font-size: .94rem; border-radius: 4px;
}
.nav__menu a:hover { background: var(--ink-3); color: var(--amber); }

.nav__actions { display: flex; align-items: center; gap: var(--s3); }

.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px; background: none; border: 0; cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform .22s, opacity .18s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__drawer {
  position: fixed; inset: var(--header-h) 0 auto 0;
  background: var(--ink-2); border-bottom: 1px solid var(--line-dark);
  padding: var(--s4) var(--s5) var(--s6); display: grid; gap: 2px;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drawer a { padding: var(--s3) 0; color: var(--on-dark); text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.nav__drawer a.is-sub { padding-left: var(--s4); color: var(--on-dark-dim); font-size: .95rem; }
.nav__drawer .btn { margin-top: var(--s4); }
.nav__drawer-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: var(--s3); }

@media (min-width: 1040px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none; }
}

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

.hero { position: relative; padding-block: var(--s9) var(--s8); color: var(--on-dark); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Two layers: a flat wash for guaranteed contrast, and a gradient so the
   machine in the photograph is still readable behind the text. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(13,21,32,.94) 0%, rgba(13,21,32,.86) 46%, rgba(13,21,32,.55) 100%),
    rgba(13,21,32,.35);
}
.hero__inner { position: relative; z-index: 2; }
.hero__title { color: #fff; margin-bottom: var(--s4); }
.hero__title em { font-style: normal; color: var(--amber); }
.hero__kw { display: flex; margin-bottom: var(--s3); }
.hero__lead { font-size: 1.12rem; max-width: 56ch; color: var(--on-dark-dim); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.hero--page { padding-block: var(--s8) var(--s7); }
.hero--short { background: var(--ink); padding-block: var(--s7); }
.hero--short::after { display: none; }

.hero__brands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s7); }
.hero__brands-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--on-dark-dim); }
.chip {
  display: inline-block; padding: .3rem .8rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  font-size: .86rem; color: var(--on-dark);
}

.crumbs { font-size: .85rem; color: var(--on-dark-dim); margin-bottom: var(--s4); }
.crumbs a { color: var(--amber); text-decoration: none; }
.crumbs span { margin-inline: .35rem; }

/* ---- Cards ---- */

.cards { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--amber); }
.card__media { background: var(--ink-2); }
/* The box sets the height, not the photo. These came off a phone in a mix of
   portrait and landscape, and without this the row heights fight each other. */
.card__media img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.card__title { color: var(--heading); }
.card__text { color: var(--muted); font-size: .95rem; }
.card__more { margin-top: auto; padding-top: var(--s2); font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; color: var(--amber-dark); font-weight: 700; }

/* ---- Photo and video grid ---- */

.shots { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.shot { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-dark); }
.shot img, .shot video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- Split ---- */

.split { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--wide { grid-template-columns: 1.6fr 1fr; gap: var(--s8); }
}

.prose h2 { margin-top: var(--s6); margin-bottom: var(--s3); }
.prose h2:first-child { margin-top: 0; }

.ticks { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: var(--s6); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 8px; border-left: 3px solid var(--amber); border-bottom: 3px solid var(--amber);
  transform: rotate(-45deg);
}

.aside { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.aside__shot { margin: 0 0 var(--s5); border-radius: var(--radius); overflow: hidden; }
.aside__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aside__title { font-size: 1.05rem; margin-bottom: var(--s3); }
.aside__list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.aside__list a { color: var(--body); text-decoration: none; font-size: .95rem; }
.aside__list a:hover { color: var(--amber-dark); }

.callout {
  margin-top: var(--s6); padding: var(--s5);
  background: var(--callout-bg); border-left: 4px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--callout-ink);
}

/* ---- FAQ ---- */

.faq { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; color: var(--heading); list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-dark); font-size: 1.5rem; line-height: 1; }
.faq[open] summary::after { content: "\2212"; }
.faq p { margin-top: var(--s3); color: var(--muted); }

/* ---- Contact ---- */

.contact-list { list-style: none; padding: 0; margin-top: var(--s5); display: grid; gap: var(--s3); }
.contact-list li { display: flex; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.contact-list strong { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; min-width: 110px; color: var(--heading); }

.form-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow-sm); }
.form { display: grid; gap: var(--s4); }
.form label { display: grid; gap: var(--s2); font-size: .88rem; font-weight: 600; color: var(--heading); }
.form input, .form select, .form textarea {
  font: inherit; font-weight: 400; color: var(--body);
  padding: .72rem .85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.form textarea { resize: vertical; }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .9rem; }
.form__note--ok { color: var(--ok); }
.form__note--bad { color: var(--alert); }

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

.site-footer { background: var(--ink); color: var(--on-dark-dim); padding-block: var(--s8) var(--s5); }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__logo { height: 88px; width: auto; display: block; }
.footer__about { margin-top: var(--s4); font-size: .93rem; max-width: 42ch; }
.footer__title { font-size: 1rem; color: var(--on-dark); margin-bottom: var(--s4); }
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.footer__list a, .footer__list span { color: var(--on-dark-dim); text-decoration: none; font-size: .93rem; }
.footer__list a:hover { color: var(--amber); }
.footer__legal {
  margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  font-size: .85rem;
}
/* Says plainly that this is not the finished article, so nobody forwards a
   draft to a customer thinking it is live. */
.footer__draft { color: var(--amber); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; }

@media print {
  .site-header, .nav__drawer { display: none !important; }
  body { color: #000; padding-top: 0; }
  .hero::after { display: none; }
}