/* =========================================================
   MCS ROBOTICS — DESIGN TOKENS
   Deployed-site track: buttons/cards use Corner-Cast.
========================================================= */

/* =========================================================
   SELF-HOSTED FONTS

   Field Gothic ships here as the foundry's "TEST" trial files
   (68 glyphs: A-Z, a-z, 0-9, space, comma, period, hyphen — no
   other punctuation). Only the two normal-width weights
   (Regular/400, Medium/500) are registered below; the Demi Wide
   and XLight XWide files are NOT wired in as this family's
   600/200 weights because they're a different width axis, not
   just a different weight — using them there would render
   noticeably wider/expanded than the rest of the body text
   wherever font-weight:600 is requested (labels, buttons,
   badges). Any weight above 500 falls back to the browser's
   nearest defined face plus synthetic bold. Swap in the full
   licensed family later by replacing these files and, if it
   includes a proper Demi/SemiBold at normal width, adding a
   600 @font-face here.
========================================================= */

@font-face {
  font-family: "Syncopate";
  src: url("/assets/fonts/syncopate-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Syncopate";
  src: url("/assets/fonts/syncopate-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Field Gothic";
  src: url("/assets/fonts/field-gothic-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Field Gothic";
  src: url("/assets/fonts/field-gothic-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --mcs-orange: #f15a24;
  --mcs-black:  #0b0b0b;
  --mcs-white:  #f3f3f1;
  --mcs-surface: #171716;
  --mcs-steel: #9aa1a6;

  /* Greyscale, expressed as opacities of white on dark backgrounds */
  --mcs-line:        rgba(255,255,255,.13);
  --mcs-line-faint:  rgba(255,255,255,.07);
  --mcs-ink-90: rgba(255,255,255,.90);
  --mcs-ink-73: rgba(255,255,255,.73);
  --mcs-ink-60: rgba(255,255,255,.60);
  --mcs-ink-42: rgba(255,255,255,.42);
  --mcs-ink-30: rgba(255,255,255,.30);
  --mcs-ink-24: rgba(255,255,255,.24);

  /* Frosted-glass surface: the site header, and anything that should
     match it (e.g. the Box Cleaner hero readout cards) */
  --mcs-glass-bg:     rgba(11,11,11,.32);
  --mcs-glass-border: rgba(255,255,255,.15);
  --mcs-glass-blur:   blur(18px);

  /* Greyscale for light-surface sections, opacities of black on light */
  --mcs-line-onlight:       rgba(11,11,11,.12);
  --mcs-line-onlight-faint: rgba(11,11,11,.07);
  --mcs-onlight-90: rgba(11,11,11,.90);
  --mcs-onlight-73: rgba(11,11,11,.73);
  --mcs-onlight-60: rgba(11,11,11,.60);
  --mcs-onlight-42: rgba(11,11,11,.42);
  --mcs-onlight-30: rgba(11,11,11,.30);
  --mcs-onlight-24: rgba(11,11,11,.24);

  /* Type */
  --mcs-font-heading: "Syncopate", "Helvetica Neue", Arial, sans-serif;
  --mcs-font-body: "Field Gothic", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — responsive (clamp), named by role not HTML tag.
     Four families: Headings, Numerals, Body, Utility. */

  /* ---- Headings (Syncopate) ---- */
  /* Every heading step is multiplied by --mcs-type-scale, which is 1 unless
     the <html> element carries a language class (.mcs-locale--de etc.,
     below): German, Spanish and Italian words are longer than English, so
     those languages run the heading steps a little smaller. */
  --mcs-text-display:  calc(clamp(68px, 7.6vw, 144px) * var(--mcs-type-scale, 1) * var(--mcs-display-scale, 1));
  --mcs-text-display-md: calc(clamp(54px, 6.1vw, 115px) * var(--mcs-type-scale, 1) * var(--mcs-display-scale, 1));
  --mcs-text-display-sm: calc(clamp(48px, 5.3vw, 100px) * var(--mcs-type-scale, 1) * var(--mcs-display-scale, 1));
  --mcs-text-section:  calc(clamp(44px, 4.8vw, 80px) * var(--mcs-type-scale, 1));
  --mcs-text-headline: calc(clamp(34px, 3.6vw, 58px) * var(--mcs-type-scale, 1));
  --mcs-text-title:    calc(clamp(28px, 3vw, 48px) * var(--mcs-type-scale, 1));
  --mcs-text-subtitle: calc(clamp(20px, 2vw, 28px) * var(--mcs-type-scale, 1));

  /* ---- Numerals (Syncopate) ---- */
  --mcs-text-stat-xl:  clamp(100px, 15vw, 275px);
  --mcs-text-stat:     clamp(72px, 10vw, 120px);

  /* ---- Body (Field Gothic) ----
     The caps are high on purpose: below ~1800px these resolve to the
     usual 14-18px, and on very large screens they keep scaling with the
     viewport instead of stopping, so copy doesn't shrink against the
     display type. */
  --mcs-text-lead:     clamp(16px, 1vw, 26px);
  --mcs-text-body:     clamp(14px, .9vw, 23px);
  --mcs-text-body-sm:  clamp(12px, .8vw, 20px);

  /* ---- Utility (Field Gothic, uppercase + tracked) ---- */
  --mcs-text-caption:  clamp(12px, .8vw, 20px);
  --mcs-text-label:    clamp(11px, .78vw, 18px);
  --mcs-text-micro:    clamp(10px, .7vw, 17px);
  --mcs-text-nano:     clamp(9px, .6vw, 15px);

  /* Spacing — top and bottom padding of every content section
     (heroes and the footer keep their own). One value, so the
     rhythm between sections is the same on every page. */
  --mcs-section-pad-y: clamp(72px, 10vw, 160px);
  --mcs-section-pad-x: clamp(25px, 5vw, 90px);

  /* Fixed header height, and the frame the pinned accordions fill: one
     screen minus the header and a little air. Used by every pinned
     section so they all line up (the header is 58px on phones). */
  --mcs-header-h:     72px;
  --mcs-pin-frame:    min(90svh, calc(100svh - var(--mcs-header-h) - 24px));
  /* air between the header and the first thing in a pinned frame */
  --mcs-pin-pad:      clamp(16px, 3svh, 32px);

  /* Heroes: every page's hero is one screen tall (taller only if its copy
     needs it) and spaces its elements with these, which scale with the
     screen height, so the copy neither clumps together on a tall portrait
     screen nor floats apart on a very large one. */
  --mcs-hero-min:        100svh;
  --mcs-hero-gap-sm:     clamp(12px, 2svh, 30px);     /* eyebrow to title */
  --mcs-hero-gap-md:     clamp(22px, 4.2svh, 68px);   /* title to paragraph */
  --mcs-hero-gap-lg:     clamp(20px, 3.6svh, 56px);   /* paragraph to buttons */
  --mcs-hero-pad-top:    clamp(20px, 4svh, 64px);     /* below the header */
  --mcs-hero-pad-bottom: clamp(28px, 6svh, 88px);

  /* Motion */
  --mcs-ease: cubic-bezier(.16,1,.3,1);
}

@media (max-width: 767px) {
  :root {
    --mcs-header-h: 58px;
  }
}

body {
  margin: 0;
  background: var(--mcs-black);
  color: var(--mcs-white);
  font-family: var(--mcs-font-body);
}

/* Headings and paragraphs are styled only by the shared text classes
   (SHARED TEXT STYLES, below) — never by a bare h1 / h2 / p rule. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

a {
  color: inherit;
}

* {
  box-sizing: border-box;
}



/* =========================================================
   SHARED ATOM: LABEL
   Replaces the old separate eyebrow/status atoms.
========================================================= */

.mcs-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--mcs-ink-73);
  font-family: var(--mcs-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mcs-label__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mcs-orange);
  box-shadow: 0 0 10px rgba(241,90,36,.6);
}

.mcs-label strong {
  color: var(--mcs-ink-90);
  font-size: inherit;
  font-weight: 600;
}

.mcs-label__rule {
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--mcs-line);
}

.mcs-label__secondary {
  color: var(--mcs-ink-30);
  font-size: inherit;
  font-weight: 600;
}

.mcs-label--onlight {
  color: var(--mcs-onlight-42);
}

.mcs-label--onlight strong {
  color: var(--mcs-onlight-90);
}

.mcs-label--onlight .mcs-label__rule {
  background: var(--mcs-line-onlight);
}

.mcs-label--onlight .mcs-label__secondary {
  color: var(--mcs-onlight-30);
}

/* Numbered section eyebrow: text + rule + index (e.g. "THE PROBLEM — 00").
   Never use on a hero eyebrow — heroes stay unnumbered, base color. */
.mcs-label--kicker {
  color: var(--mcs-orange);
}

.mcs-label--kicker .mcs-label__rule {
  width: 45px;
  background: var(--mcs-orange);
}



/* =========================================================
   SHARED ATOM: BADGE
========================================================= */

.mcs-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--mcs-line);
  color: var(--mcs-ink-73);
  font-family: var(--mcs-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mcs-badge__dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mcs-orange);
}

.mcs-badge--filled {
  border-color: var(--mcs-orange);
  background: var(--mcs-orange);
  color: #111;
}

.mcs-badge--filled .mcs-badge__dot {
  background: #111;
}

.mcs-badge--onmedia {
  border: 0;
  background: rgba(11,11,11,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.85);
}

.mcs-badge--onlight {
  border-color: var(--mcs-line-onlight);
  color: var(--mcs-onlight-60);
}

.mcs-badge strong {
  color: var(--mcs-orange);
  font-weight: 700;
}



/* =========================================================
   SHARED ATOM: GRID TEXTURE
========================================================= */

.mcs-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 84px 84px;
}

.mcs-grid-bg--full {
  -webkit-mask-image: none;
  mask-image: none;
}



/* =========================================================
   SHARED TEXT STYLE: STRONG LABEL
========================================================= */

.mcs-text-label-strong {
  font-family: var(--mcs-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}



/* =========================================================
   SHARED TEXT STYLES
   Every heading and paragraph on the site carries exactly one
   of these classes, next to a local class for its layout
   (margin, max-width, color). They own typography only: size,
   line-height, tracking, case. Each class carries its own
   tablet (<=1000px) and phone (<=767px) sizes, so retuning a
   step here retunes it everywhere.

   Phone sizes are derived from the widest word in the heading
   font (Syncopate, ~8.5-10.5em) so the longest word on the site
   still fits a 320px screen with 20px gutters:
   font-size <= (320 - 40) / 8.82em = 31px, hence 9.8vw / 8.6vw steps.
========================================================= */

/* ---- Headings (Syncopate) ---- */

.mcs-text-display,
.mcs-text-section,
.mcs-text-headline,
.mcs-text-title,
.mcs-text-subtitle,
.mcs-text-card-title {
  font-family: var(--mcs-font-heading);
  font-weight: 800;
  text-transform: uppercase;
}

.mcs-text-display {
  font-size: var(--mcs-text-display);
  line-height: calc(.85 + var(--mcs-leading-add, 0));
  letter-spacing: -.05em;
}

/* Smaller hero steps for pages whose h1 is a longer sentence. */
.mcs-text-display--md {
  font-size: var(--mcs-text-display-md);
}

.mcs-text-display--sm {
  font-size: var(--mcs-text-display-sm);
}

.mcs-text-section {
  font-size: var(--mcs-text-section);
  line-height: calc(.88 + var(--mcs-leading-add, 0));
  letter-spacing: -.048em;
}

.mcs-text-headline {
  font-size: var(--mcs-text-headline);
  line-height: calc(.92 + var(--mcs-leading-add, 0));
  letter-spacing: -.043em;
}

.mcs-text-title {
  font-size: var(--mcs-text-title);
  line-height: calc(.92 + var(--mcs-leading-add, 0));
  letter-spacing: -.03em;
}

.mcs-text-subtitle {
  font-size: var(--mcs-text-subtitle);
  line-height: calc(.93 + var(--mcs-leading-add, 0));
  letter-spacing: -.03em;
}

/* Article / card titles: heading face at body size, sentence case. */
.mcs-text-card-title {
  font-size: var(--mcs-text-body);
  line-height: 1.3;
  letter-spacing: -.03em;
  text-transform: none;
}

/* ---- Body (Field Gothic) ---- */

.mcs-text-lead {
  font-size: var(--mcs-text-lead);
  line-height: 1.6;
}

.mcs-text-body {
  font-size: var(--mcs-text-body);
  line-height: 1.6;
}

.mcs-text-body-sm {
  font-size: var(--mcs-text-body-sm);
  line-height: 1.6;
}

/* ---- Tablet ---- */

@media (max-width: 1000px) {
  .mcs-text-display {
    font-size: calc(clamp(60px, 7.6vw, 76px) * var(--mcs-type-scale, 1) * var(--mcs-display-scale, 1));
  }

  .mcs-text-section {
    font-size: calc(clamp(40px, 5.2vw, 48px) * var(--mcs-type-scale, 1));
  }

  .mcs-text-body-sm {
    font-size: 13px;
  }
}

/* ---- Phone ---- */

@media (max-width: 767px) {
  .mcs-text-display,
  .mcs-text-display--md,
  .mcs-text-display--sm {
    font-size: calc(clamp(30px, 9.8vw, 60px) * var(--mcs-type-scale, 1) * var(--mcs-display-scale, 1));
    line-height: calc(.88 + var(--mcs-leading-add, 0));
  }

  .mcs-text-section {
    font-size: calc(clamp(26px, 8.6vw, 40px) * var(--mcs-type-scale, 1));
  }

  .mcs-text-headline {
    font-size: calc(clamp(26px, 7.6vw, 34px) * var(--mcs-type-scale, 1));
  }

  .mcs-text-title {
    font-size: calc(clamp(22px, 6.8vw, 28px) * var(--mcs-type-scale, 1));
  }

  .mcs-text-subtitle {
    font-size: calc(clamp(18px, 5.4vw, 20px) * var(--mcs-type-scale, 1));
  }

  .mcs-text-card-title {
    font-size: 13px;
  }

  .mcs-text-display,
  .mcs-text-display--md,
  .mcs-text-display--sm,
  .mcs-text-section,
  .mcs-text-headline,
  .mcs-text-title,
  .mcs-text-subtitle {
    overflow-wrap: break-word;
  }

  .mcs-text-lead {
    font-size: 15px;
  }

  .mcs-text-body {
    font-size: 14px;
  }

  .mcs-text-body-sm {
    font-size: 13px;
  }
}

/* Container-relative variant of .mcs-text-title. Declared last so it
   wins over the tablet / phone steps above — it already scales with
   its container on every screen. */
.mcs-text-title--fit {
  font-size: calc(clamp(24px, 9cqw, 46px) * var(--mcs-type-scale, 1));
  overflow-wrap: break-word;
}

/* ---- Language type scale ----
   Set as a class on <html> by BaseLayout. English keeps the full size.
   --mcs-leading-add opens up the heading line-height a little: the dots and
   accents on capitals (Ü, Ä, Ó, À) otherwise collide with the line above. */

.mcs-locale--de {
  --mcs-type-scale: .78;
  --mcs-leading-add: .14;
}

/* --mcs-display-scale is an extra step for the big h1 display type only
   (the display steps use both multipliers). */

.mcs-locale--es {
  --mcs-type-scale: .86;
  --mcs-display-scale: .9;
  --mcs-leading-add: .1;
}

.mcs-locale--it {
  --mcs-type-scale: .88;
  --mcs-display-scale: .82;
  --mcs-leading-add: .1;
}



/* =========================================================
   SHARED ATOM: BUTTON
========================================================= */

.mcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 1.7vw, 40px);
  min-width: clamp(225px, 15.6vw, 340px);
  padding: clamp(15px, 1.05vw, 24px) clamp(16px, 1.1vw, 26px);
  border: 1px solid var(--mcs-line);
  background: transparent;
  color: #fff !important;
  font-family: var(--mcs-font-body);
  font-size: clamp(12px, .72vw, 17px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    padding .35s var(--mcs-ease);
}

.mcs-btn strong {
  color: var(--mcs-orange);
  font-size: clamp(16px, 1.1vw, 24px);
  font-weight: 400;
  transition: color .3s ease, transform .3s var(--mcs-ease);
}

.mcs-btn--primary {
  border-color: rgba(255,255,255,.32);
  background: rgba(7,7,7,.12);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.mcs-btn--primary:hover {
  padding-left: 22px;
  border-color: #fff;
  background: #fff;
  color: #111 !important;
}

.mcs-btn--primary:hover strong {
  color: var(--mcs-orange);
}

.mcs-btn--secondary {
  border-color: rgba(255,255,255,.30);
  background: transparent;
}

.mcs-btn--secondary:hover {
  padding-left: 22px;
  border-color: var(--mcs-orange);
  color: var(--mcs-orange) !important;
}

.mcs-btn--secondary:hover strong {
  transform: translate(3px,-3px);
}

.mcs-btn--ghost {
  min-width: 0;
  border: 0;
  padding: 0;
  gap: 8px;
}

.mcs-btn--ghost:hover {
  color: var(--mcs-orange) !important;
}

.mcs-btn--ghost:hover strong {
  color: var(--mcs-orange);
}




/* =========================================================
   SHARED ATOM: CARD — Corner-Cast Panel
========================================================= */

.mcs-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--mcs-line);
  background: var(--mcs-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease;
}

.mcs-card::before,
.mcs-card::after,
.mcs-card > .mcs-card__corner-a,
.mcs-card > .mcs-card__corner-b {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--mcs-steel);
  background: var(--mcs-black);
  transition: border-color .25s ease;
}

.mcs-card::before { top: -5px; left: -5px; }
.mcs-card::after { bottom: -5px; right: -5px; }
.mcs-card > .mcs-card__corner-a { top: -5px; right: -5px; }
.mcs-card > .mcs-card__corner-b { bottom: -5px; left: -5px; }

.mcs-card:hover { border-color: rgba(255,255,255,.4); }
.mcs-card:hover::before,
.mcs-card:hover::after,
.mcs-card:hover > .mcs-card__corner-a,
.mcs-card:hover > .mcs-card__corner-b {
  border-color: var(--mcs-orange);
}

.mcs-card__index {
  display: block;
  margin-bottom: 16px;
  color: var(--mcs-ink-30);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

.mcs-card__media {
  width: 100%;
  height: 140px;
  margin-bottom: 16px;
  background: var(--mcs-surface);
  border: 1px solid var(--mcs-line-faint);
}

.mcs-card__title {
  margin: 0 0 4px;
  font-family: var(--mcs-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mcs-card__meta {
  margin: 0;
  color: var(--mcs-orange);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}