/* ==========================================================================
   ARNOBOT — style.css

   The site's component stylesheet. Every value comes from the design tokens
   in theme.css (loaded before this file by SiteChrome.tsx); change tokens
   there, component rules here. Sections, in order:

     1. Base & layout        6. Home page sections
     2. Typography           7. Footer
     3. Buttons & controls   8. Modals
     4. Forms                9. Product page
     5. Header & navigation 10. Legal pages
                            11. Status pages, alerts, motion preferences

   Page-specific CSS modules (about, technology, careers, contact, insights)
   consume the same tokens and reuse the global button, eyebrow, form and
   card classes declared here.

   Load order: the CSS modules are bundled by Next and can land BEFORE this
   file. A module rule that overrides a global class therefore needs one
   more step of specificity (e.g. `.back:global(.link-arrow)`), never source
   order alone.
   ========================================================================== */

/* ==========================================================================
   1. BASE & LAYOUT
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  /* Inter ships 400–700 upright only and Space Grotesk ships 700 only: never
     let the browser fake a weight or a slant that is not loaded. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Emphasis inside running text is semibold, site-wide (the display face
   stays at --fw-display). */
strong,
b {
  font-weight: var(--fw-semibold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-display);
}

/* `clip`, not `hidden`: hidden would turn these into scroll containers and
   break every `position: sticky` descendant (the legal table of contents). */
html,
body,
.site,
main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.site {
  background: var(--white);
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

/* A fieldset is a layout box here, not a UA-bordered group; the intrinsic
   min-content size would let a long chip label widen its form. */
fieldset {
  border: 0;
  min-inline-size: 0;
}

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

/* One container, one gutter, every width. */
.container {
  width: min(100% - (2 * var(--gutter)), var(--measure));
  margin: 0 auto;
}

/* Keyboard focus ring. `:focus-visible` never fires on mouse clicks, so the
   resting design is untouched. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Headings and paragraphs balance: every line of a run ends at about the
   same place instead of a long first line over a short last one. Browsers
   only balance a block of a few lines (six in Chromium), so long-form copy —
   an article, a legal section — falls back to ordinary wrapping on its own.
   List items and captions keep the lighter orphan control. */
:where(h1, h2, h3, h4, p) {
  text-wrap: balance;
}

:where(li, figcaption) {
  text-wrap: pretty;
}

:root {
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

/* `.russo` keeps the name it had when the display face was Russo One. */
.russo,
.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* The one eyebrow: small, bold, tracked caps in the body face. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Dark ground (video heroes, dark bands, modals): white type, and the
   eyebrow lifts to the light accent so it still reads as the brand blue. */
.on-dark {
  color: var(--white);
}

.on-dark .eyebrow {
  color: var(--accent-light);
}

/* Meta line: category · date · read time. */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.meta-line > * + *::before {
  content: "•";
  margin-right: 12px;
  color: rgba(var(--ink-rgb), 0.35);
}

.on-dark .meta-line {
  color: rgba(var(--white-rgb), 0.6);
}

.on-dark .meta-line > * + *::before {
  color: rgba(var(--white-rgb), 0.35);
}

.section-title {
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.section-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: var(--measure-text);
}

.section-head {
  max-width: var(--measure-narrow);
  margin-bottom: var(--head-gap);
}

.section-head .section-lead {
  margin-top: 20px;
}

.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

.section-head.is-centered .section-lead {
  margin-inline: auto;
}

/* Micro-label: stat labels, role tags, meta captions, column headings. */
.micro-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}

.on-dark .micro-label {
  color: rgba(var(--white-rgb), 0.55);
}

/* Big figures in stat bands. */
.stat-value {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

/* Scroll reveal: children of a `.reveal` section marked `.fade-up` rise
   into place once revealOnScroll adds `.visible`. Stagger with .d1/.d2/.d3. */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slowest) var(--ease-lift),
    transform var(--t-slowest) var(--ease-lift);
}

.visible .fade-up {
  opacity: 1;
  transform: none;
}

.fade-up.d1 {
  transition-delay: 0.08s;
}

.fade-up.d2 {
  transition-delay: 0.16s;
}

.fade-up.d3 {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Editorial voice — the long-form pages set the same display face in
   sentence case. Same scale, same colour; only the case and tracking differ. */
.section-title.is-editorial,
.russo.is-editorial {
  text-transform: none;
  letter-spacing: var(--ls-display);
}

/* Hero titles. `--fs-display` aliases `--fs-h2`, so a hero H1 and a section
   H2 are the same size everywhere; only the colour and shadow differ. */
.hero-title {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-shadow: var(--shadow-hero-text);
}

.hero-title.is-compact {
  line-height: var(--lh-heading);
}

/* Editorial hero titles wrap to two balanced lines, the way the home hero
   does, rather than running the full column when they happen to fit. The
   compact (centred) variant on the Insights pages is left free. */
.hero-title:not(.is-compact) {
  max-width: 22ch;
}

.hero-lead {
  margin-top: 28px;
  max-width: var(--measure-text);
  color: rgba(var(--white-rgb), 0.8);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* Full-screen editorial section: clears the fixed header, centres its
   content, and sizes to content below 900px. */
.section-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--section-pad-top) var(--gutter) var(--section-pad-bottom);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.section-screen.is-wash {
  background: var(--wash);
}

.section-screen.is-auto {
  min-height: 0;
  padding-block: var(--section-pad);
}

@media (max-width: 900px) {
  .section-screen {
    min-height: 0;
    padding-block: clamp(56px, 9vh, 88px);
  }
}

/* Hairline card grid: cells separated by 1px of the line colour, no
   shadows, a wash on hover. */
.card-grid {
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line);
}

/* Each cell draws its own hairline into the 1px gap (neighbours overlap to a
   single line, and the outer ring lands on the grid border). Drawn per cell
   rather than as the grid ground so that a row the item count does not fill
   leaves a blank cell, not a slab of line colour. */
.card-grid > * {
  outline: 1px solid var(--line);
}

.card-cell {
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--white);
  transition: background-color var(--t-base) var(--ease-menu);
}

.card-cell:hover,
.card-cell:focus-within {
  background: var(--wash);
}

.card-cell h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
}

.card-cell p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* The 44px icon frame at the top of a card cell. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--accent);
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   3. BUTTONS & CONTROLS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-min-h);
  padding: var(--btn-py) var(--btn-px);
  border: 2px solid var(--btn-bg);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease),
    border-color var(--ix-dur) var(--ix-ease),
    box-shadow var(--ix-dur) var(--ix-ease),
    transform var(--ix-dur) var(--ix-ease);
}

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

.btn:active {
  transform: scale(0.98);
  transition-duration: var(--ix-dur-fast);
}

/* Accent fill — the primary call to action. */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* White fill — primary on dark grounds. */
.btn-light {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* Outline — secondary. Draws in the current text colour, so it works on
   dark and light grounds alike. */
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn-outline.on-dark,
.on-dark .btn-outline {
  color: var(--white);
  border-color: rgba(var(--white-rgb), 0.55);
}

.btn-outline.on-dark:hover,
.btn-outline.on-dark:focus-visible,
.on-dark .btn-outline:hover,
.on-dark .btn-outline:focus-visible {
  background: rgba(var(--white-rgb), 0.12);
  border-color: var(--white);
  color: var(--white);
}

/* Glass — over video. */
.btn-ghost {
  background: rgba(var(--white-rgb), 0.08);
  border-color: rgba(var(--white-rgb), 0.5);
  color: var(--white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(var(--white-rgb), 0.18);
  border-color: var(--white);
  color: var(--white);
}

.btn-ghost:active {
  background: rgba(var(--white-rgb), 0.24);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform var(--ix-dur) var(--ix-ease);
}

.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow {
  transform: translateX(4px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

/* Text link with an arrow — "Read article →", "Apply →". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  transition: color var(--ix-dur) var(--ix-ease);
}

.link-arrow .btn-arrow {
  font-size: 1em;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--accent-deep);
}

.link-arrow:hover .btn-arrow,
.link-arrow:focus-visible .btn-arrow,
:is(a, button):hover .link-arrow .btn-arrow,
:is(a, button):focus-visible .link-arrow .btn-arrow {
  transform: translateX(4px);
}

/* A whole card that is one anchor colours its inner link on hover too. */
:is(a, button):hover .link-arrow,
:is(a, button):focus-visible .link-arrow {
  color: var(--accent-deep);
}

/* A de-emphasised trailing count inside a button ("Load more  13 left"). */
.btn-count {
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.7;
}

/* Icon button — close buttons, slider arrows. 44px target, always. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease),
    border-color var(--ix-dur) var(--ix-ease),
    box-shadow var(--ix-dur) var(--ix-ease),
    transform var(--ix-dur) var(--ix-ease);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.icon-btn:active {
  transform: scale(0.96);
  transition-duration: var(--ix-dur-fast);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.icon-btn svg {
  display: block;
}

/* On dark grounds (modals, drawers over video). */
.icon-btn.on-dark,
.on-dark .icon-btn {
  border-color: rgba(var(--white-rgb), 0.18);
  color: var(--white);
}

.icon-btn.on-dark:hover,
.icon-btn.on-dark:focus-visible,
.on-dark .icon-btn:hover,
.on-dark .icon-btn:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* Solid white — sits over imagery (slider arrows). */
.icon-btn-solid {
  background: var(--white);
  box-shadow: var(--shadow-card);
}

/* Tags / chips — role tags, categories, spec chips. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--white);
}

.tag-accent {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(var(--accent-rgb), 0.18);
}

/* ==========================================================================
   4. FORMS
   Shared by the contact form, the careers form and the demo modal. The
   `.career-*` / `.demo-*` names are the same components under their page's
   markup; keep them on the same rules.
   ========================================================================== */

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

.form-row,
.career-field-row,
.demo-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-field,
.career-field,
.demo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.form-label,
.career-field label,
.demo-field label,
.form-legend {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

/* A legend is not a flex item, so the field gap skips it. */
.form-legend {
  margin-bottom: 8px;
}

.required {
  color: var(--accent);
}

.optional {
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
}

.form-input,
.career-field input,
.career-field select,
.career-field textarea,
.demo-field input,
.demo-field select,
.demo-field textarea {
  width: 100%;
  padding: var(--control-py) var(--control-px);
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--control-fs);
  line-height: 1.4;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--ix-dur) var(--ix-ease),
    box-shadow var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease);
}

.form-input::placeholder,
.career-field input::placeholder,
.career-field textarea::placeholder,
.demo-field input::placeholder,
.demo-field textarea::placeholder {
  color: var(--gray-soft);
}

.form-input:focus,
.career-field input:focus,
.career-field select:focus,
.career-field textarea:focus,
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.form-input:focus-visible,
.career-field :is(input, select, textarea):focus-visible,
.demo-field :is(input, select, textarea):focus-visible {
  outline: none;
}

.form-input[aria-invalid='true'],
.form-input:user-invalid {
  border-color: var(--danger);
}

.form-input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.16);
}

textarea.form-input,
.career-field textarea,
.demo-field textarea {
  resize: vertical;
  min-height: 110px;
}

select.form-input,
.career-field select,
.demo-field select {
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235f626d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Choice chips (radio group rendered as buttons). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease),
    border-color var(--ix-dur) var(--ix-ease);
}

.chip-label:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.chip input:checked + .chip-label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  font-weight: var(--fw-semibold);
}

.chip input:focus-visible + .chip-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.form-note,
.career-form-note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}

.form-actions .form-note {
  flex: 1 1 14rem;
}

.field-error {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--danger);
}

.field-error:empty {
  display: none;
}

/* The careers form card. */
.career-apply-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 3.2vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

/* Resume drop zone. */
.career-upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: var(--radius-control);
  background: var(--wash);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease);
}

.career-upload-zone:hover,
.career-upload-zone.drag-over,
.career-upload-zone:focus-within {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.career-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.career-upload-content {
  padding: 24px 20px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.career-upload-icon {
  color: var(--accent);
  margin-bottom: 12px;
}

.career-upload-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: 4px;
}

.career-upload-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.career-upload-browse {
  color: var(--accent);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.career-upload-types {
  font-size: var(--fs-2xs);
  color: var(--muted);
  margin-top: 6px;
}

.career-upload-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  color: var(--accent);
  z-index: 1;
}

.career-upload-preview svg {
  flex-shrink: 0;
}

.career-upload-preview span {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.career-upload-remove {
  position: relative;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--white);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease),
    border-color var(--ix-dur) var(--ix-ease);
}

.career-upload-remove:hover,
.career-upload-remove:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-surface);
}

@media (max-width: 768px) {
  .form-row,
  .career-field-row,
  .demo-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* iOS zooms into any control under 16px; hold the line on phones. */
@media (max-width: 768px) {
  .form-input,
  .career-field :is(input, select, textarea),
  .demo-field :is(input, select, textarea) {
    font-size: 16px;
  }
}

/* Alerts (server responses above a form). */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 24px;
  border: 1px solid;
  border-radius: var(--radius-control);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form-alert > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--radius-round);
  font-weight: var(--fw-bold);
  color: var(--white);
}

.form-alert strong {
  display: block;
  font-size: var(--fs-body-sm);
  margin-bottom: 3px;
}

.form-alert p {
  margin: 0;
  font-size: var(--fs-xs);
}

.form-alert-error {
  background: var(--danger-surface);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}

.form-alert-error > span {
  background: var(--danger);
}

.form-alert-success {
  background: var(--success-surface);
  border-color: var(--success-border);
  color: var(--success-ink);
}

.form-alert-success > span {
  background: var(--success);
}

/* ==========================================================================
   5. HEADER & NAVIGATION

   One fully transparent bar over every route, at every scroll depth: no
   fill, no blur, no scrim, no halo. It reads the section beneath it
   (Header.tsx sets `.header-on-light` when a light section is under the bar)
   and paints the nav ink or white accordingly — a soft text shadow carries
   the white type over bright footage; the ink type over light content takes
   nothing behind it at all. Scrolling down tucks it away (`.header-tucked`);
   scrolling up brings it back.
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  color: var(--white);
  background: transparent;
  /* Chrome and nav are not copy: a stray drag mid-scroll must not paint the
     accent selection over the logo and links. */
  user-select: none;
  -webkit-user-select: none;
  transition:
    opacity var(--t-med) ease-in-out,
    color var(--t-med) ease-in-out,
    transform var(--t-med) ease-in-out;
}

.header.header-on-light {
  color: var(--ink);
}

.header.header-tucked {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-height);
  padding: 0 var(--gutter);
}

/* Logo — an inline SVG in currentColor. Hover paints a badge behind it and
   flips the mark to the opposite colour. */
.logo-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: var(--radius-sm);
  color: inherit;
  transition:
    color var(--ix-dur-slow) ease-in-out,
    background-color var(--ix-dur-slow) ease-in-out;
}

.logo-wrap .logo-mark {
  display: block;
  width: auto;
  height: 34px;
}

.logo-wrap:hover,
.logo-wrap:focus-visible {
  background: var(--white);
  color: var(--ink);
}

.header-on-light .logo-wrap:hover,
.header-on-light .logo-wrap:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* Primary nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin-left: auto;
}

.main-nav > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.25px;
  text-underline-offset: var(--ix-underline-offset);
  text-shadow: 0 1px 8px rgba(var(--ink-rgb), 0.35);
  transition:
    color var(--ix-dur-slow) ease-in-out,
    text-decoration-color var(--ix-dur-slow) ease-in-out,
    text-shadow var(--ix-dur-slow) ease-in-out;
}

/* Ink type over light content: the shadow goes entirely. A white halo here
   read as a cloud over whatever the bar was passing — copy, photographs —
   whenever it came back on an upward scroll. */
.header-on-light .main-nav > a,
.header-on-light .nav-dropdown-toggle {
  text-shadow: none;
}

.header:not(.header-on-light) .logo-wrap,
.header:not(.header-on-light) .nav-toggle {
  filter: drop-shadow(0 1px 6px rgba(var(--ink-rgb), 0.35));
}

.main-nav > a:hover,
.main-nav > a:focus-visible,
.main-nav > a[aria-current='page'],
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle[aria-current='true'],
.nav-dropdown.open .nav-dropdown-toggle {
  text-decoration-color: currentColor;
}

.nav-dropdown-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-dropdown {
  position: static;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.dropdown-caret {
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-menu);
}

.nav-dropdown.open .dropdown-caret {
  transform: rotate(180deg);
}

/* The product menu card. Positioned by Header.tsx (fixed) so nothing clips it. */
.dropdown-menu {
  position: fixed;
  min-width: 240px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dropdown);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top center;
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) var(--ease-menu),
    visibility 0s linear var(--t-fast);
  z-index: var(--z-menu);
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--arrow-left, 50%);
  width: 13px;
  height: 13px;
  background: var(--white);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 2px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) var(--ease-menu),
    visibility 0s linear 0s;
}

.dropdown-menu li + li {
  border-top: 1px solid rgba(var(--ink-rgb), 0.06);
}

.dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: none;
  white-space: nowrap;
  transition:
    color var(--ix-dur-fast) ease,
    background-color var(--ix-dur-fast) ease,
    gap var(--ix-dur-fast) ease;
}

.dropdown-menu li a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--ix-dur-fast) ease;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible,
.dropdown-menu li a.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  gap: 14px;
}

.dropdown-menu li a:hover::before,
.dropdown-menu li a:focus-visible::before,
.dropdown-menu li a.active::before {
  opacity: 1;
}

/* Hamburger — bars in the bar's own colour. */
.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ix-dur) var(--ix-ease);
}

.nav-toggle:hover {
  background: rgba(var(--white-rgb), 0.12);
}

.header-on-light .nav-toggle:hover {
  background: rgba(var(--ink-rgb), 0.06);
}

.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease-menu), opacity var(--t-med) ease, width var(--t-med) ease;
}

.hamburger-bar:nth-child(2) {
  width: 16px;
  margin-right: 6px;
}

.nav-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 768px) {
  .logo-wrap .logo-mark {
    height: 30px;
  }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-med) ease, visibility 0s linear var(--t-med);
}

.mobile-menu.active {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-med) ease, visibility 0s linear 0s;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  box-shadow: -10px 0 40px rgba(var(--ink-rgb), 0.25);
  transform: translateX(100%);
  transition: transform var(--t-slower) var(--ease-drawer);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.active .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-logo {
  display: block;
  color: var(--ink);
  transition: opacity var(--ix-dur) var(--ix-ease);
}

.mobile-menu-logo .logo-mark {
  display: block;
  width: auto;
  height: 32px;
}

.mobile-menu-logo:hover {
  opacity: 0.7;
}

.mobile-menu-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-links > a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease);
}

.mobile-nav-links > a:hover,
.mobile-dropdown-toggle:hover,
.mobile-dropdown-toggle[aria-expanded='true'] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.mobile-nav-links > a[aria-current='page'],
.mobile-dropdown-toggle[aria-current='true'] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}

.mobile-dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-dropdown-toggle .dropdown-caret {
  transition: transform var(--t-base) var(--ease-menu);
}

.mobile-dropdown.open .dropdown-caret,
.mobile-dropdown-toggle[aria-expanded='true'] .dropdown-caret {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  margin: 2px 0 4px 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition:
    max-height var(--t-slow) var(--ease-menu),
    opacity var(--t-med) ease,
    visibility 0s linear var(--t-slow);
}

.mobile-dropdown.open .mobile-submenu,
.mobile-submenu.open {
  max-height: 360px;
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;
  visibility: visible;
  transition:
    max-height var(--t-slow) var(--ease-menu),
    opacity var(--t-med) ease,
    visibility 0s linear 0s;
}

.mobile-submenu a {
  display: block;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--slate-600);
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease),
    transform var(--ix-dur) var(--ix-ease);
}

.mobile-submenu a:hover,
.mobile-submenu a:focus-visible {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateX(4px);
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   6. HOME PAGE SECTIONS
   ========================================================================== */

/* ── Base hero (shared by the product page) ─────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero-video,
.hero-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-video {
  z-index: 1;
}

.hero-bg {
  z-index: 2;
  opacity: 0.45;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.9) 0%, rgba(var(--bg-rgb), 0.75) 43%, rgba(var(--bg-rgb), 0.48) 100%),
    radial-gradient(circle at 52% 60%, rgba(var(--accent-rgb), 0.16), transparent 26%);
}

.hero-content {
  position: relative;
  z-index: 4;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero h1 {
  max-width: 20ch;
  color: var(--ink);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

/* ── Home hero: cinematic video, copy bottom-left, action bottom-right ──── */
.hero.hero-cinematic {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  min-height: 100vh;
  height: 100svh;
  min-height: 100svh;
  background: var(--footer);
}

.hero.hero-cinematic .hero-bg {
  z-index: 0;
  opacity: 1;
}

.hero.hero-cinematic::after {
  background:
    linear-gradient(to top, rgba(var(--ink-rgb), 0.88) 0%, rgba(var(--ink-rgb), 0.52) 22%, rgba(var(--ink-rgb), 0.16) 48%, rgba(var(--ink-rgb), 0) 78%),
    linear-gradient(to right, rgba(var(--ink-rgb), 0.55) 0%, rgba(var(--ink-rgb), 0.16) 40%, rgba(var(--ink-rgb), 0) 72%);
  z-index: 2;
}

.hero.hero-cinematic .hero-content {
  width: 100%;
  max-width: min(100%, 720px);
  padding: 0 var(--gutter) 9vh;
}

.hero.hero-cinematic .eyebrow {
  color: var(--accent-light);
  text-shadow: var(--shadow-hero-text-soft);
}

.hero.hero-cinematic h1 {
  max-width: 100%;
  color: var(--white);
  text-shadow: var(--shadow-hero-text);
}

@media (max-width: 1023px) {
  .hero.hero-cinematic .hero-content {
    max-width: min(100%, 640px);
  }
}

/* ── Home hero: the four-platform montage ───────────────────────────────
   The hero clip cycles four locations, so its top band can no longer be vetted
   per-clip the way a single fixed clip's could. The site header is transparent
   by design and has no scrim of its own, and `.hero-cinematic::after` fades to
   nothing above 78% — exactly where the white nav sits. Two of the four shots
   are a sunlit road and a pale ship hull; without the third gradient below the
   nav is unreadable over both. Scoped to the home hero, because the product
   pages reuse `.hero.hero-cinematic`. */
.hero.hero-cinematic#home::after {
  background:
    linear-gradient(to top, rgba(var(--ink-rgb), 0.88) 0%, rgba(var(--ink-rgb), 0.52) 22%, rgba(var(--ink-rgb), 0.16) 48%, rgba(var(--ink-rgb), 0) 78%),
    linear-gradient(to right, rgba(var(--ink-rgb), 0.55) 0%, rgba(var(--ink-rgb), 0.16) 40%, rgba(var(--ink-rgb), 0) 72%),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.52) 0%, rgba(var(--ink-rgb), 0.16) calc(var(--nav-height) + 34px), rgba(var(--ink-rgb), 0) calc(var(--nav-height) + 96px));
}

/* ── Full-screen band rhythm shared by About, Products, Industries ─────── */
.about,
.products,
.industries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: var(--section-pad-top) 0 var(--section-pad-bottom);
  background: var(--white);
}

@media (max-width: 900px) {
  .about,
  .products,
  .industries {
    min-height: 0;
  }
}

/* ── About ─────────────────────────────────────────────────────────────── */
.about {
  align-items: stretch;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
  width: 100%;
  padding: 0 var(--gutter);
}

.about-images {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 599 / 524;
}

.about-animated-circles {
  position: absolute;
  top: 48%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125%;
  height: 125%;
  max-width: 720px;
  max-height: 720px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.radar-aura {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: var(--radius-round);
  background: radial-gradient(circle, rgba(var(--accent-deep-rgb), 0.08) 0%, rgba(var(--accent-deep-rgb), 0.02) 50%, rgba(var(--white-rgb), 0) 70%);
  animation: auraBreathe 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auraBreathe {
  0% {
    transform: scale(0.92);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.06);
    opacity: 0.9;
  }
}

.radar-sweep-beam {
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: var(--radius-round);
  background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg, rgba(var(--accent-deep-rgb), 0.09) 360deg);
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 69%);
  mask-image: radial-gradient(circle, black 30%, transparent 69%);
  animation: sweepRotate 14s linear infinite;
  pointer-events: none;
}

@keyframes sweepRotate {
  to {
    transform: rotate(360deg);
  }
}

.tech-radar-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.radar-spin-slow,
.radar-spin-reverse,
.radar-spin-mid,
.radar-spin-inner {
  transform-origin: 350px 350px;
}

.radar-spin-slow {
  animation: spinClockwise 48s linear infinite;
}

.radar-spin-reverse {
  animation: spinCounterClockwise 38s linear infinite;
}

.radar-spin-mid {
  animation: spinClockwise 30s linear infinite;
}

.radar-spin-inner {
  animation: spinCounterClockwise 22s linear infinite;
}

.about-images:hover .radar-spin-slow {
  animation-duration: 25s;
}

.about-images:hover .radar-spin-reverse {
  animation-duration: 20s;
}

.about-images:hover .radar-spin-mid {
  animation-duration: 16s;
}

.about-images:hover .radar-spin-inner {
  animation-duration: 12s;
}

.about-images:hover .radar-sweep-beam {
  animation-duration: 8s;
}

@keyframes spinClockwise {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinCounterClockwise {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.about-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(var(--ink-rgb), 0.08));
  transition: transform var(--t-slower) var(--ease-lift), filter var(--t-slower) ease;
}

.about-images:hover .about-img {
  transform: translateY(-4px);
  filter: drop-shadow(0 20px 45px rgba(var(--ink-rgb), 0.12));
}

.about-copy {
  min-width: 0;
  max-width: var(--measure-text);
}

/* The same 20px every section keeps between its title and the copy under it. */
.about-copy .section-title {
  margin-bottom: 20px;
}

.about-copy p {
  margin: 0 0 28px;
  color: var(--slate-700);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  /* Justified. Long words break at the soft hyphens written into the markup,
     which keeps the word spacing even. Not `hyphens: auto`: that needs a
     language dictionary Chrome fetches lazily, so on a fresh install it does
     nothing and the lines fill with gaps. `text-wrap: wrap` overrides the
     global `balance` on paragraphs: balance shortens lines on purpose, and
     justify then has to stretch the spaces to fill what it left. */
  text-align: justify;
  text-wrap: wrap;
  hyphens: manual;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .about-images {
    max-width: 520px;
    margin: 0 auto;
  }

  .about-copy {
    max-width: none;
  }
}

/* ── Products ──────────────────────────────────────────────────────────── */
.products {
  text-align: center;
}

.product-head {
  width: min(100%, var(--measure-narrow));
  margin: 0 auto var(--head-gap);
  padding: 0 var(--gutter);
}

.product-head p,
.industries-head p {
  margin: 20px auto 0;
  max-width: var(--measure-text);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
  width: 100%;
  max-width: 1432px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-card);
}

.product-card {
  position: relative;
  height: clamp(250px, 54vh, 560px);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid rgba(var(--accent-deep-rgb), 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--t-slow) var(--ease-lift),
    box-shadow var(--t-slow) ease,
    border-color var(--t-slow) ease;
}

.product-card-link:hover .product-card,
.product-card-link:focus-visible .product-card {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-deep-rgb), 0.35);
  box-shadow: var(--shadow-card-hover);
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(105%);
  transition: filter var(--t-slower) ease, transform var(--t-slowest) var(--ease-lift);
}

.product-card-link:hover .product-card img,
.product-card-link:focus-visible .product-card img {
  filter: grayscale(0%) contrast(110%);
  transform: scale(1.06);
}

.product-hud-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(var(--accent-deep-rgb), 0.4);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity var(--t-med) ease, border-color var(--t-med) ease, transform var(--t-med) ease;
}

.product-hud-corner.tl {
  top: 8px;
  left: 8px;
  border-width: 1.5px 0 0 1.5px;
}

.product-hud-corner.tr {
  top: 8px;
  right: 8px;
  border-width: 1.5px 1.5px 0 0;
}

.product-hud-corner.bl {
  bottom: 8px;
  left: 8px;
  border-width: 0 0 1.5px 1.5px;
}

.product-hud-corner.br {
  bottom: 8px;
  right: 8px;
  border-width: 0 1.5px 1.5px 0;
}

.product-card-link:hover .product-hud-corner {
  opacity: 1;
  border-color: var(--accent-deep);
  transform: scale(1.15);
}

.product-scan-beam {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-deep-rgb), 0.08) 50%, rgba(var(--accent-rgb), 0.18) 51%, transparent 52%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.product-card-link:hover .product-scan-beam {
  opacity: 1;
  animation: cardScanBeam 1.8s ease-in-out infinite;
}

@keyframes cardScanBeam {
  to {
    transform: translateY(200%);
  }
}

.product-card h3 {
  position: absolute;
  top: clamp(14px, 2vh, 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 20px;
  border: 1px solid rgba(var(--accent-deep-rgb), 0.15);
  border-radius: 999px;
  background: rgba(var(--white-rgb), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.06);
  color: var(--ink);
  font-size: var(--fs-h3);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition:
    color var(--t-med) ease,
    background-color var(--t-med) ease,
    border-color var(--t-med) ease,
    box-shadow var(--t-med) ease;
}

.product-card-link:hover .product-card h3 {
  background: var(--ink);
  color: var(--white);
  border-color: var(--accent-deep);
  box-shadow: 0 6px 16px rgba(var(--accent-deep-rgb), 0.25);
}

@media (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card {
    height: clamp(220px, 32vh, 320px);
  }
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card {
    height: clamp(200px, 30vh, 260px);
  }
}

/* ── Environment band ──────────────────────────────────────────────────── */
.environment {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 3156 / 1120;
  min-height: 420px;
  max-height: 100svh;
  overflow: hidden;
}

/* One full screen on desktop, like the bands either side of it; the aspect
   ratio only sets the height once the viewport is released below 900px. */
@media (min-width: 901px) {
  .environment {
    min-height: 100vh;
    min-height: 100svh;
  }
}

.environment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.78) 38%, rgba(var(--bg-rgb), 0.15) 75%);
}

.environment-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* The still is 16:9 with the crawler high in the right third. A viewport
   taller than 16:9 crops the sides, so anchor right to keep the machine; the
   2.82:1 band between tablet and desktop crops top and bottom instead, so
   anchor high there to keep the crawler and its spray. */
@media (min-width: 901px) {
  .environment-bg {
    object-position: 85% center;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .environment-bg {
    object-position: 70% 20%;
  }
}

.environment-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  padding: 0 var(--gutter);
}

.environment h2 {
  max-width: 20ch;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-align: left;
}

@media (max-width: 768px) {
  .environment {
    aspect-ratio: auto;
    min-height: 340px;
    padding: var(--section-pad-sm) 0;
  }

  .environment h2 {
    max-width: 100%;
  }

  /* On a phone the three-line heading runs across the robot; carry the wash
     further right so the last words stay legible over the dark body. */
  .environment::after {
    background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.84) 55%, rgba(var(--bg-rgb), 0.4) 100%);
  }
}

/* ── Industries carousel ───────────────────────────────────────────────── */
.industries {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.industries-head {
  width: min(100%, var(--measure-narrow));
  margin: 0 auto var(--head-gap);
  padding: 0 var(--gutter);
}

.industry-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--gutter);
}

.industry-slider-track-container {
  width: 100%;
  padding: 12px 0 24px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.industry-slider-track-container:active {
  cursor: grabbing;
}

.industry-slider-track {
  display: flex;
  gap: var(--gap-card);
  transition: transform var(--t-slowest) var(--ease-lift);
  will-change: transform;
}

.industry {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - (3 * var(--gap-card))) / 4);
  flex-direction: column;
  min-width: 0;
  height: 315px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    transform var(--t-slow) var(--ease-lift),
    border-color var(--t-slow) ease,
    box-shadow var(--t-slow) ease;
}

.industry:hover,
.industry:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-deep-rgb), 0.5);
  box-shadow: var(--shadow-card-hover);
}

.industry-img-wrap {
  position: relative;
  width: 100%;
  /* 190px cropped the machine out of the taller frames — `cover` was taking the
     middle band and losing the wheels. 20% more height gives the subject room. */
  height: 228px;
  overflow: hidden;
  background: var(--surface-2);
}

.industry-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A resting zoom, so the machine reads at card size rather than sitting small
     in the middle of its terrain. The taller box above is what pays for it. */
  transform: scale(1.08);
  filter: grayscale(80%) contrast(105%);
  transition: filter var(--t-slower) ease, transform var(--t-slowest) var(--ease-lift);
}

.industry:hover .industry-img-wrap img,
.industry:focus-visible .industry-img-wrap img {
  filter: grayscale(0%) contrast(110%);
  transform: scale(1.16);
}

.industry-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 16px 14px 22px;
  background: var(--white);
  text-align: center;
}

.industry-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--t-med) ease;
}

.industry:hover .industry-title {
  color: var(--accent-deep);
}

.industry-slider-arrow {
  position: absolute;
  top: calc(50% - 6px);
  transform: translateY(-50%);
  z-index: 10;
}

.industry-slider-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.industry-slider-arrow.prev {
  left: calc(var(--gutter) - 22px);
}

.industry-slider-arrow.next {
  right: calc(var(--gutter) - 22px);
}

.industry-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

/* The dot is 10px of paint inside a 24px target. A 10x10 button is under the
   24x24 minimum in WCAG 2.5.8 and is genuinely hard to hit on a phone, but
   growing the dot itself would wreck the rhythm of the row — so the button
   carries the target and `::before` carries the mark. `background-clip` keeps
   the painted dot off the padding. */
.industry-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 7px;
  border: 0;
  border-radius: var(--radius-round);
  background: rgba(var(--accent-deep-rgb), 0.2);
  background-clip: content-box;
  box-sizing: content-box;
  cursor: pointer;
  transition:
    width var(--t-med) var(--ease-menu),
    background-color var(--t-med) ease,
    border-radius var(--t-med) ease;
}

/* Both of these set `background` as a shorthand, which resets background-clip
   to border-box — and would paint the dot across the whole 24px target instead
   of the 10px mark. Restate the clip rather than switching to
   background-color, so the pair reads the same as the base rule. */
.industry-dot:hover {
  background: rgba(var(--accent-deep-rgb), 0.45);
  background-clip: content-box;
}

.industry-dot.active {
  width: 28px;
  border-radius: 5px;
  background: var(--accent-deep);
  background-clip: content-box;
}

@media (max-width: 1023px) {
  .industry {
    flex: 0 0 calc((100% - var(--gap-card)) / 2);
    height: 300px;
  }

  .industry-slider-wrapper {
    padding: 0 calc(var(--gutter) + 24px);
  }

  .industry-slider-arrow.prev {
    left: var(--gutter);
  }

  .industry-slider-arrow.next {
    right: var(--gutter);
  }
}

@media (max-width: 600px) {
  .industry {
    flex: 0 0 100%;
    height: 300px;
  }

  .industry-slider-track {
    gap: 16px;
  }

  .industry-slider-wrapper {
    padding: 0 var(--gutter);
  }

  .industry-slider-arrow {
    top: 100px;
    width: 40px;
    height: 40px;
  }

  .industry-slider-arrow.prev {
    left: calc(var(--gutter) + 8px);
  }

  .industry-slider-arrow.next {
    right: calc(var(--gutter) + 8px);
  }
}

/* ── Closing CTA band ──────────────────────────────────────────────────── */
.cta {
  position: relative;
  z-index: 5;
  padding: var(--section-pad) var(--gutter);
  background:
    linear-gradient(rgba(var(--bg-rgb), 0.88), rgba(var(--bg-rgb), 0.88)),
    url("../images/problem-bg.png") center/cover no-repeat;
  overflow: hidden;
}

.cta-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

.cta-content {
  flex: 1;
  min-width: 0;
}

.cta h2 {
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.cta h2 .highlight {
  color: var(--accent);
}

.cta-sub {
  margin-top: 20px;
  max-width: var(--measure-text);
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.cta-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

/* The CTA and the footer share the last screen on every page: the band grows
   to whatever the footer leaves of the viewport (`--footer-height` is
   published by closingViewport), so the closing view is one screen at any
   desktop height rather than a fixed padding that runs over on short ones. */
.cta {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--footer-height, 361px));
  padding-top: calc(clamp(16px, 3.5vh, 80px) + var(--nav-height));
  padding-bottom: clamp(16px, 3.5vh, 80px);
}

@media (max-width: 1023px) {
  .cta-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .cta {
    min-height: 0;
    display: block;
  }

  .cta-container {
    align-items: stretch;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  padding-top: clamp(56px, 10vh, 112px);
  padding-bottom: clamp(24px, 5vh, 48px);
  color: var(--white);
  background: linear-gradient(180deg, var(--footer-top) 0%, var(--footer-bottom) 100%);
  border-top: 1px solid rgba(var(--accent-deep-rgb), 0.4);
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 5%, var(--accent-deep) 30%, var(--sky) 50%, var(--accent-deep) 70%, transparent 95%);
  box-shadow: 0 0 14px rgba(var(--sky-rgb), 0.6);
}

.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(200px, max-content) repeat(4, max-content);
  align-items: start;
  justify-content: space-between;
  column-gap: var(--gap-card);
  row-gap: 40px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  width: 178px;
  margin-bottom: 14px;
}

.footer-tagline {
  margin: 0;
  color: var(--slate-400);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
}

.footer h4 {
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-nav);
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact {
  gap: 12px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.footer-contact svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--accent-light);
}

.footer p,
.footer a,
.footer li,
.footer-address {
  color: var(--footer-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

.footer-address {
  display: block;
  text-wrap: nowrap;
}

/* Every footer link: colour shift and an underline that draws in. */
.footer a {
  display: inline-block;
  padding: 2px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--ix-underline-offset);
  transition:
    color var(--ix-dur) var(--ix-ease),
    text-decoration-color var(--ix-dur) var(--ix-ease);
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--sky);
  text-decoration-color: currentColor;
}

.footer-links a[aria-current='page'] {
  color: var(--white);
  text-decoration-color: currentColor;
}

.socials {
  display: flex;
  gap: 16px;
}

.socials a {
  display: inline-flex;
  padding: 0;
  border-radius: var(--radius-round);
  text-decoration: none;
}

.socials img {
  width: 37px;
  height: 37px;
  object-fit: contain;
  transition: transform var(--ix-dur-slow) var(--ease-lift), filter var(--ix-dur-slow) ease;
}

.socials a:hover img,
.socials a:focus-visible img {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 4px 10px rgba(var(--sky-rgb), 0.4));
}

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: clamp(32px, 5vh, 48px);
  padding: 20px var(--gutter) 0;
  border-top: 1px solid rgba(var(--white-rgb), 0.1);
}

.footer-bottom p {
  margin: 0;
  color: var(--slate-400);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* Columns are equal-width here, not content-sized, so the address must be
     allowed to wrap or it runs into the Quick Links column on phones. */
  .footer-address {
    min-width: 0;
    text-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   8. MODALS
   Closed dialogs are `visibility: hidden` so their controls leave the tab
   order along with the pixels.
   ========================================================================== */

.video-modal,
.industry-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-slow) ease, visibility 0s linear var(--t-slow);
}

.video-modal.active,
.industry-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-slow) ease, visibility 0s linear 0s;
}

.video-modal-overlay,
.industry-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 14, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.video-modal-overlay {
  background: rgba(6, 8, 14, 0.82);
}

/* Video lightbox */
.video-modal-container {
  position: relative;
  z-index: 2;
  width: min(92vw, 960px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  transform: scale(0.94);
  opacity: 0;
  transition: transform var(--t-slower) var(--ease-lift), opacity var(--t-slow) ease;
}

.video-modal.active .video-modal-container {
  transform: scale(1);
  opacity: 1;
}

.video-modal-close {
  position: absolute;
  top: -56px;
  right: 0;
  z-index: 3;
}

.video-modal-content,
.video-modal-content video {
  display: block;
  width: 100%;
  height: 100%;
}

/* The frame clips the video; the close button sits above the frame. */
.video-modal-content {
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.video-modal-content video {
  object-fit: contain;
}

/* Industry / demo dialog */
.industry-modal-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1020px);
  max-height: 90vh;
  max-height: 90svh;
  background: var(--ink-deep);
  border: 1px solid rgba(var(--white-rgb), 0.08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  overflow-y: auto;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform var(--t-slower) var(--ease-lift), opacity var(--t-slow) ease;
}

.industry-modal.active .industry-modal-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.industry-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

/* The demo scheduler is a form, not a showcase: a narrower panel. */
.industry-modal-container.industry-modal-compact {
  width: min(100%, 680px);
}

.industry-modal-content {
  padding: clamp(28px, 5vw, 56px);
}

.industry-modal-single {
  max-width: 820px;
  margin: 0 auto;
}

.industry-modal .eyebrow {
  color: var(--accent-light);
}

.modal-ind-title {
  margin: 0 0 16px;
  color: var(--white);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.modal-ind-desc {
  margin-bottom: 36px;
  color: var(--gray-soft);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

.label-robots-used {
  display: inline-block;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  color: var(--white);
  font-size: var(--fs-body-lg);
  letter-spacing: 0.04em;
}

.modal-robots-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
  margin-bottom: 36px;
}

.modal-robot-card {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px;
  background: rgba(var(--white-rgb), 0.025);
  border: 1px solid rgba(var(--white-rgb), 0.06);
  border-radius: var(--radius-card);
  transition: border-color var(--t-med) ease, background-color var(--t-med) ease;
}

.modal-robot-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--white-rgb), 0.05);
}

.modal-robot-img-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 145px;
  background: rgba(var(--ink-rgb), 0.7);
  border: 1px solid rgba(var(--white-rgb), 0.07);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.modal-robot-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.modal-robot-info {
  flex: 1;
  min-width: 0;
}

.modal-robot-info h5 {
  margin-bottom: 8px;
  color: var(--white);
  font-size: var(--fs-h4);
  letter-spacing: 0.02em;
}

.modal-robot-info p {
  margin-bottom: 12px;
  color: var(--gray-soft);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.modal-robot-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-robot-specs span {
  padding: 5px 10px;
  border-radius: var(--radius-control);
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-light);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Industry sheet — the industry detail opens as a full-screen page on white
   rather than a floating dark panel, composed to fit one screen: the brief on
   the left, the robots deployed stacked on the right. Scoped by
   `.industry-modal-full` on the root so the demo scheduler, which shares the
   classes above, keeps its panel. The doubled root selector outranks the
   768px padding rule further down. */
.industry-modal.industry-modal-full {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.industry-modal-full .industry-modal-container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  transform: translateY(16px);
}

.industry-modal-full.active .industry-modal-container {
  transform: none;
}

/* A zero-height sticky strip at the top of the scroller; the close control is
   positioned inside it, so it holds the corner should the sheet ever scroll. */
.industry-modal-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
}

.industry-modal-full .industry-modal-close {
  top: clamp(16px, 2.5vw, 28px);
  right: var(--gutter);
  background: var(--white);
}

/* The page: a four/eight split on the site measure, centred in the viewport.
   The robots get the wider column so a card's copy runs to two lines and its
   tags to one row; every vertical measure is in viewport height so three
   cards fit one screen from a 657px laptop viewport up. The top clears the
   close control. */
.industry-modal-full .industry-modal-content {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-content: center;
  align-items: start;
  column-gap: var(--gap-grid);
  width: min(100%, var(--measure));
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 96px) var(--gutter) clamp(24px, 4vh, 56px);
}

.industry-modal-full .eyebrow {
  color: var(--accent);
}

.industry-modal-full .modal-ind-title {
  color: var(--ink);
}

.industry-modal-full .modal-ind-desc {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.industry-modal-full .label-robots-used {
  margin-bottom: clamp(12px, 2vh, 24px);
  color: var(--ink);
}

.industry-modal-full .modal-robots-container {
  gap: clamp(12px, 2vh, 24px);
  margin: 0;
}

/* The cards keep their landscape shape — picture left, copy right — but the
   picture is sized by the viewport and the copy is set tighter, so a card is
   a third of the column rather than a screen of its own. */
.industry-modal-full .modal-robot-card {
  gap: 24px;
  padding: 16px;
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-med) ease, box-shadow var(--t-med) ease;
}

.industry-modal-full .modal-robot-card:hover {
  background: var(--white);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: var(--shadow-card-hover);
}

.industry-modal-full .modal-robot-img-wrap {
  width: auto;
  height: clamp(96px, 15vh, 145px);
  aspect-ratio: 40 / 29;
  background: var(--surface);
  border-color: var(--line);
}

.industry-modal-full .modal-robot-info h5 {
  margin-bottom: 6px;
  color: var(--ink);
}

.industry-modal-full .modal-robot-info p {
  margin-bottom: 10px;
  color: var(--muted);
  text-wrap: pretty;
}

.industry-modal-full .modal-robot-specs {
  gap: 6px;
}

.industry-modal-full .modal-robot-specs span {
  padding: 4px 8px;
  background: var(--accent-tint);
  color: var(--accent);
}

/* Narrow screens stack everything and scroll; one view is a desktop promise. */
@media (max-width: 900px) {
  .industry-modal-full .industry-modal-content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--head-gap);
    align-content: start;
    padding-top: 84px;
  }

  .industry-modal-full .modal-robot-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .industry-modal-full .modal-robot-img-wrap {
    width: 100%;
    height: clamp(140px, 24vh, 200px);
    aspect-ratio: auto;
  }
}

/* Demo modal specifics — the form lives on a dark panel. */
.demo-modal-title {
  margin-bottom: 40px;
  text-align: center;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-field label {
  color: var(--white);
}

.demo-field input,
.demo-field select,
.demo-field textarea {
  background-color: rgba(var(--white-rgb), 0.04);
  border-color: rgba(var(--white-rgb), 0.16);
  color: var(--white);
}

.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  background-color: rgba(var(--white-rgb), 0.06);
}

.demo-field input::placeholder,
.demo-field textarea::placeholder {
  color: rgba(var(--white-rgb), 0.4);
}

.demo-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.demo-field select option {
  background-color: var(--ink-deep);
  color: var(--white);
}

.demo-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.demo-form-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.demo-form-footer .field-error {
  color: #ff8a8a;
}

.demo-success {
  padding: clamp(24px, 4vw, 40px) 0;
  text-align: center;
}

.demo-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--radius-round);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
}

.demo-success h3 {
  margin-bottom: 12px;
  color: var(--white);
  font-size: var(--fs-h3);
}

.demo-success p {
  max-width: 34rem;
  margin: 0 auto 28px;
  color: var(--gray-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .modal-robot-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .modal-robot-img-wrap {
    width: 100%;
    height: 160px;
  }

  .video-modal {
    padding: 12px;
  }

  .video-modal-container {
    width: 100%;
  }

  .video-modal-close {
    top: -52px;
    right: 0;
  }

  .industry-modal {
    padding: 12px;
  }

  .industry-modal-close {
    top: 12px;
    right: 12px;
  }
}

/* ==========================================================================
   9. PRODUCT PAGE
   ========================================================================== */

.hero.product-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
}

.hero.product-hero .hero-content {
  width: 100%;
  padding-top: var(--nav-height);
  padding-bottom: 48px;
}

.hero.product-hero .hero-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: clamp(90px, 11vw, 163px);
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-lift);
}

.hero.product-hero .hero-play img {
  width: 100%;
  height: auto;
}

.hero.product-hero .hero-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Product hero carrying a render instead of a video: one full screen, the
   machine keyed out and sitting to the right of the title. */
.hero.product-hero.product-hero-still {
  min-height: 100vh;
  min-height: 100svh;
}

.product-hero-still .hero-bg {
  left: auto;
  right: clamp(16px, 5vw, 110px);
  width: min(58%, 860px);
  opacity: 1;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 30px 42px rgba(var(--ink-rgb), 0.18));
}

.hero.product-hero.product-hero-still::after {
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.96) 0%, rgba(var(--bg-rgb), 0.88) 22%, rgba(var(--bg-rgb), 0) 44%);
}

@media (max-width: 900px) {
  .hero.product-hero.product-hero-still::after {
    background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.96) 0%, rgba(var(--bg-rgb), 0.88) 42%, rgba(var(--bg-rgb), 0.1) 78%);
  }

  .product-hero-still .hero-bg {
    left: 0;
    right: auto;
    width: 100%;
    object-position: center bottom;
  }

  .hero.product-hero .hero-content {
    padding-top: calc(var(--nav-height) + 24px);
  }
}

/* Details band */
.product-details,
.product-specs-section,
.product-showcase-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-pad-top) 0 var(--section-pad-bottom);
  background: var(--white);
}

.product-details,
.product-specs-section,
.product-showcase-section {
  min-height: 100vh;
  min-height: 100svh;
}

.product-specs-section {
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-showcase-section {
  background: var(--surface);
}

.product-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-grid);
}

.product-details-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-name {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.product-subtitle {
  margin: 8px 0 20px;
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.product-desc {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

.specs-simple-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 32px;
  padding: 4px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.specs-simple-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.specs-simple-list li:last-child {
  border-bottom: none;
}

.specs-simple-list li strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

.specs-simple-list li span {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-align: right;
}

.product-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

/* Always one row, two equal columns, whichever brochure label a product
   carries. The copy column is narrow, so the pair gives up the wide button
   padding and lets a long label wrap inside its cell rather than the pair
   wrapping onto two rows. */
.product-actions .btn {
  min-width: 0;
  padding-inline: 12px;
  white-space: normal;
  text-wrap: balance;
}

/* Gallery (products shipping stills) */
.main-product-img {
  width: 100%;
  height: 420px;
  padding: 24px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform var(--t-med) var(--ease-lift);
}

.main-product-img:hover {
  transform: scale(1.02);
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.gallery-thumb {
  width: 100%;
  height: 75px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color var(--ix-dur) var(--ix-ease),
    transform var(--ix-dur) var(--ix-ease),
    box-shadow var(--ix-dur) var(--ix-ease);
}

.gallery-thumb:hover,
.gallery-thumb.active {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.18);
}

/* 360° render viewer */
.product-details-spin,
.product-details-still {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.spin-stage {
  position: relative;
  display: grid;
  height: 100%;
  min-height: clamp(300px, 34vh, 420px);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.spin-stage:active {
  cursor: grabbing;
}

.spin-stage:not(.is-ready) {
  cursor: progress;
}

.spin-stage:not(.is-ready) .spin-cue {
  animation: spin-cue-breathe 1.4s ease-in-out infinite;
}

@keyframes spin-cue-breathe {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.42;
  }
}

.spin-frames {
  display: grid;
  place-items: center;
  min-height: 0;
}

.spin-frame {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 26px rgba(var(--slate-rgb), 0.14));
  pointer-events: none;
}

.product-details-still .spin-stage,
.product-details-still .spin-stage:active {
  cursor: default;
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

/* The one mark on the stage: the same tinted disc the feature rows use. */
.spin-cue {
  position: absolute;
  top: clamp(2px, 0.8vw, 10px);
  left: clamp(2px, 0.8vw, 10px);
  display: grid;
  place-items: center;
  width: clamp(46px, 3.8vw, 58px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-round);
  background: var(--accent-tint);
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.14);
  pointer-events: none;
  transition: opacity var(--t-slower) ease;
}

.spin-stage.is-engaged .spin-cue {
  opacity: 0.55;
}

.spin-cue svg {
  display: block;
  width: 66%;
  height: auto;
}

/* Features / applications band: two headed columns of ruled rows. */
.product-icon-band {
  background: var(--surface-2);
  background-image: none;
}

.icon-band-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
}

.icon-band-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.icon-band-caption {
  margin: 0 0 clamp(12px, 1.8vh, 24px);
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}

.icon-band-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-band-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(11px, 1.5vh, 20px) 0;
  border-bottom: 1px solid var(--line);
}

.icon-band-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(44px, 3.9vw, 56px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-round);
  background: var(--accent-tint);
  color: var(--accent);
}

.icon-band-badge svg {
  width: 54%;
  height: 54%;
}

.icon-band-label {
  color: var(--ink);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.icon-band-lead {
  margin-right: 0.4em;
  color: var(--accent);
  font-size: 1.16em;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

/* Specs cards (products without feature rows) */
.specs-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.specs-card {
  padding: clamp(28px, 3vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med) var(--ease-lift), box-shadow var(--t-med) ease;
}

.specs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.specs-card .card-title {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
}

.specs-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.specs-bullet-list li {
  position: relative;
  padding-left: 20px;
  color: var(--slate-700);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.specs-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

/* Showcase */
.showcase-header {
  margin-bottom: var(--head-gap);
  text-align: center;
}

.showcase-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 1080px;
  margin-inline: auto;
}

.showcase-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showcase-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--t-slow) var(--ease-lift), box-shadow var(--t-slow) ease;
}

.showcase-card:hover,
.showcase-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slower) var(--ease-lift);
}

.showcase-card:hover .showcase-img,
.showcase-card:focus-visible .showcase-img {
  transform: scale(1.06);
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.35);
  transition: background-color var(--t-med) ease;
}

.showcase-card:hover .showcase-overlay,
.showcase-card:focus-visible .showcase-overlay {
  background: rgba(var(--ink-rgb), 0.15);
}

.showcase-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(var(--ink-rgb), 0.4));
  pointer-events: none;
  transition: transform var(--t-base) var(--ease-lift);
}

.showcase-card:hover .showcase-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.showcase-name {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-align: center;
}

@media (max-width: 900px) {
  .product-details-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .product-details,
  .product-specs-section,
  .product-showcase-section {
    min-height: 0;
  }

  .spin-stage {
    min-height: clamp(240px, 52vw, 340px);
  }

  .icon-band-columns,
  .specs-cards-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 7vw, 44px);
  }

  .product-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .main-product-img {
    height: auto;
    max-height: 320px;
  }
}

@media (max-width: 600px) {
  .product-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-actions .btn {
    width: 100%;
  }

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

/* ==========================================================================
   10. LEGAL PAGES — Privacy Policy & Terms and Conditions
   Set in Arial as documents, on the same layout grid, buttons and colours
   as the rest of the site.
   ========================================================================== */

.legal-hero,
.legal-section {
  --legal-face: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-family: var(--legal-face);
}

.legal-hero .russo,
.legal-section .russo {
  font-family: var(--legal-face);
  letter-spacing: 0;
}

.legal-hero {
  display: block;
  padding: calc(var(--nav-height) + clamp(56px, 9vh, 120px)) var(--gutter) clamp(40px, 6vh, 72px);
  background: var(--white);
  text-align: center;
}

.legal-hero-container,
.legal-hero-content {
  max-width: var(--measure-text);
  margin: 0 auto;
}

.legal-hero-content h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.legal-section {
  padding: clamp(40px, 5vw, 64px) var(--gutter) var(--section-pad);
  background: var(--wash);
}

.legal-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 48rem);
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px);
  max-width: var(--measure);
  margin: 0 auto;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  max-height: calc(100svh - var(--nav-height) - 48px);
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.legal-toc-title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.legal-toc-link {
  position: relative;
  display: block;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition:
    color var(--ix-dur) var(--ix-ease),
    background-color var(--ix-dur) var(--ix-ease);
}

.legal-toc-link:hover,
.legal-toc-link.active {
  color: var(--accent);
  background: var(--accent-tint);
}

.legal-toc-link.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.legal-body {
  padding: clamp(24px, 4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.legal-block {
  margin-bottom: 44px;
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.legal-block:last-child {
  margin-bottom: 0;
}

.legal-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-transform: uppercase;
}

.legal-num-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.legal-text,
.legal-list li,
.legal-highlight-box p,
.legal-contact-item {
  color: var(--slate-700);
  font-size: var(--fs-body);
  line-height: 1.75;
}

.legal-text {
  margin: 0 0 1.125rem;
}

.legal-text:last-child {
  margin-bottom: 0;
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding-left: 24px;
  list-style: disc;
}

.legal-section strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.legal-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-highlight-box {
  margin: 20px 0;
  padding: 18px 22px;
  background: var(--wash);
  border-left: 3px solid var(--accent);
}

.legal-highlight-box p {
  margin: 0;
  color: var(--slate-800);
}

.legal-contact-card {
  margin-top: 20px;
  padding: 24px;
  background: var(--wash);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-card);
}

.legal-contact-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-bold);
}

.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.legal-contact-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: var(--fs-body);
}

.legal-contact-item a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--ix-dur) var(--ix-ease);
}

.legal-contact-item a:hover {
  text-decoration-color: currentColor;
}

@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 48rem;
  }

  .legal-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .legal-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-block-title {
    font-size: var(--fs-body-lg);
  }
}

/* ==========================================================================
   11. STATUS PAGES (404, error), MOTION PREFERENCES
   ========================================================================== */

.status-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  min-height: 70svh;
  padding: calc(var(--nav-height) + var(--section-pad)) var(--gutter) var(--section-pad);
  text-align: center;
}

.status-inner {
  max-width: var(--measure-text);
  margin: 0 auto;
}

.status-inner h1 {
  color: var(--ink);
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
}

.status-inner p {
  margin-top: 20px;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.status-ref {
  width: 100%;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

@media (max-width: 480px) {
  .status-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   12. MOTION TEXT — TypingAnimation.tsx and WordRotate.tsx
   ========================================================================== */

/* Typed copy: the full text sits invisibly underneath so the block holds its
   final size from the first frame; the typed prefix is painted over it. Plain
   greedy wrapping on both so the prefix breaks exactly where the full text
   does. */
.typing {
  position: relative;
  display: inline-block;
  text-wrap: wrap;
}

.typing-sizer {
  visibility: hidden;
}

.typing-text {
  position: absolute;
  inset: 0;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: typing-blink 1s steps(1) infinite;
}

.typing.is-done .typing-cursor {
  display: none;
}

@keyframes typing-blink {
  50% {
    opacity: 0;
  }
}

/* Rotating word: sized by an invisible copy of the longest word so it holds
   its width in a shrink-wrapped parent; the leaving word slides out to the
   right as the next slides in from the left. */
.word-rotate {
  position: relative;
  display: inline-block;
}

.word-rotate-sizer {
  visibility: hidden;
  white-space: nowrap;
}

.word-rotate-word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  animation: word-in-left var(--t-slower) var(--ease-lift) both;
}

.word-rotate-word.is-leaving {
  animation: word-out-right var(--t-slower) var(--ease-lift) both;
}

/* Typed rotation (`typing` on WordRotate): each word is typed over an
   invisible copy of itself, so the block holds its final width and, on a
   centred line, the letters land left to right from where the whole word
   will sit. The cursor is `.typing-cursor`, shared with `.typing` above. */
.word-rotate-typed {
  position: relative;
  display: inline-block;
}

.word-rotate-typed .typing-text {
  text-align: left;
}

/* The rotating value's line: card-title scale by default, display scale
   with `is-display`. Element-qualified so it outranks a card cell's own
   paragraph rule. */
p.value-current {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

/* The same rotation at section scale: the display line of a band of its own. */
p.value-current.is-display {
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-align: center;
}

.on-dark p.value-current {
  color: var(--white);
}

@keyframes word-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes word-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* ==========================================================================
   Touch sizing — phones and small tablets only.

   Everything here is gated at max-width: 767px, so the desktop and laptop
   layouts (1440 and 1024, both measured clean) are untouched by design. The
   rules raise controls to a 44px touch target; they do not restyle anything.

   Deliberately NOT included: links that sit inside running prose — the
   "careers" link in the founder's letter, the address and email inside a
   sentence on Contact, and `.legal-link` in the legal copy. Padding an inline
   link to 44px breaks the line box it lives in, and a reader taps those from
   the flow of a sentence rather than hunting for them in a list.
   ========================================================================== */

@media (max-width: 767px) {
  /* Footer. Every page carries it, and it was the bulk of the small targets:
     twelve stacked links at 25px each. The padding now supplies the rhythm,
     so the list gap comes down to stop the column doubling in height. */
  .footer-links,
  .footer-contact {
    gap: 2px;
  }

  .footer-links a,
  .footer-contact a,
  .footer-bottom a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }

  /* The contact rows lead with an icon that is top-aligned for multi-line
     addresses; with a 44px link beside it the icon needs to come back to the
     middle or it floats above the text. */
  .footer-contact li {
    align-items: center;
  }

  .footer-contact svg {
    margin-top: 0;
  }

  /* The social marks stay 37px; only the hit area grows around them. */
  .socials a {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* The carousel dots are drawn with `background-clip: content-box`, so the
     padding is invisible — the target grows to 44px tall while the dot itself
     stays 10px. Horizontal padding is left alone: the dots sit in a row, and
     44px-wide targets would overlap each other, which mis-taps worse than a
     small target does. */
  .industry-dot {
    padding: 17px 7px;
  }

  /* The legal page's table of contents: a real list of links, so these do get
     the full target. */
  .legal-toc-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The values rotator is display type on one nowrap line. "Client-Centric
   Innovation" is wider than a 320px screen, so below the small-phone break the
   line is allowed to wrap and the sizer that reserves its box wraps with it. */
@media (max-width: 420px) {
  p.value-current.is-display {
    font-size: var(--fs-h2);
  }

  .word-rotate-sizer,
  .word-rotate-word {
    white-space: normal;
  }
}

/* Reduced motion: colour may still fade; nothing travels. */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}