/* =========================================================================
   VMAX Machine Ltd
   Light, glass and yellow.

   The ground is white. Black is ink: type, icons, hairlines, chart marks -
   never a surface. Colour arrives as soft yellow: a few tinted panels, the
   highlighter behind a headline, the accent on a control. Depth comes from
   frosted glass over a faint yellow aurora rather than from dark plates, and
   every surface is rounded.
   ========================================================================= */

:root {
  /* Ink ---------------------------------------------------------------- */
  --ink:        #121212;
  --ink-2:      #2c2c2c;
  --muted:      #5f5f5c;
  --muted-2:    #8d8d88;
  --hair:       rgba(18, 18, 18, 0.1);
  --hair-2:     rgba(18, 18, 18, 0.16);

  /* Ground ------------------------------------------------------------- */
  --white:      #ffffff;
  --paper:      #fbfaf7;
  --paper-2:    #f3f1ea;

  /* Yellow --------------------------------------------------------------
     One hue, four steps. `soft` and `wash` are surfaces, `yellow` is the
     accent, `deep` is the only step dark enough to carry small type. */
  --yellow:      #ffc400;
  --yellow-2:    #ffd84d;
  --yellow-soft: #fff1c2;
  --yellow-wash: #fff9e6;
  --yellow-deep: #b88600;

  /* Glass ---------------------------------------------------------------
     A surface is a translucent white pane, a bright top edge, a faint ink
     edge and a long soft shadow. Kept as tokens so every pane in the site
     is the same pane. */
  --glass:        rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-thin:   rgba(255, 255, 255, 0.38);
  --glass-edge:   rgba(255, 255, 255, 0.9);
  --glass-line:   rgba(18, 18, 18, 0.07);
  --blur:         saturate(1.6) blur(18px);
  --blur-strong:  saturate(1.7) blur(28px);
  --shadow-sm:  0 2px 8px -4px rgba(18, 18, 18, 0.2);
  --shadow:     0 18px 40px -28px rgba(18, 18, 18, 0.55), 0 2px 10px -6px rgba(18, 18, 18, 0.18);
  --shadow-lg:  0 40px 80px -46px rgba(18, 18, 18, 0.6), 0 6px 20px -12px rgba(18, 18, 18, 0.16);
  --shadow-yellow: 0 30px 60px -34px rgba(184, 134, 0, 0.6);

  /* Form --------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-2xl: 44px;
  --pill: 999px;

  --font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1380px;
  --gutter: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* The staff desk at /admin carries its own stylesheet and asks for these
     names. Pointed at this palette so it follows the site without a second
     set of decisions. */
  --bg:        var(--paper);
  --bg-2:      var(--white);
  --panel:     var(--white);
  --panel-2:   var(--paper-2);
  --faint:     var(--muted-2);
  --line:      var(--hair);
  --line-2:    rgba(18, 18, 18, 0.06);
  --accent:    var(--yellow);
  --accent-2:  var(--yellow-deep);
  --accent-ink: var(--ink);
  --on-dark:   var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; display: block; }
::selection { background: var(--yellow); color: var(--ink); }

/* The aurora ------------------------------------------------------------
   Frosted glass needs something behind it or it is just a grey box. Three
   wide yellow washes and a hairline grid sit fixed behind the whole site,
   far too faint to read as colour, but enough for a pane to refract. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--white); }
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.aurora .a1 { width: 52vw; height: 52vw; top: -14vw; right: -10vw; background: radial-gradient(circle, rgba(255,196,0,.42), transparent 68%); }
.aurora .a2 { width: 44vw; height: 44vw; top: 46%; left: -14vw; background: radial-gradient(circle, rgba(255,216,77,.34), transparent 68%); }
.aurora .a3 { width: 40vw; height: 40vw; bottom: -12vw; right: 6vw; background: radial-gradient(circle, rgba(255,241,194,.6), transparent 70%); }
.aurora .grid {
  position: absolute; inset: 0; border-radius: 0; filter: none; opacity: 1;
  background-image: linear-gradient(rgba(18,18,18,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(18,18,18,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 20%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 10%, transparent 72%);
}

/* Scroll progress ------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--yellow-2), var(--yellow));
  border-radius: 0 var(--pill) var(--pill) 0;
  z-index: 200;
}

/* Layout ---------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }

.band { padding: clamp(56px, 8vw, 132px) 0; position: relative; }
.band-tint { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--yellow-wash) 22%, var(--yellow-wash) 78%, rgba(255,255,255,0) 100%); }
.band-paper { background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 18%, var(--paper) 82%, rgba(255,255,255,0)); }
.section-pad { padding: clamp(48px, 7vw, 112px) 0; }
.section-pad.alt { background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 14%, var(--paper) 86%, rgba(255,255,255,0)); }

/* Glass ----------------------------------------------------------------- */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
}
/* Where the browser cannot frost, the pane goes opaque rather than muddy. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav, .mcard-face, .kpi, .svc, .chat-panel, .chip, .search-bar, form { background: rgba(255, 255, 255, 0.96) !important; }
  .btn { background: linear-gradient(135deg, var(--yellow-2), var(--yellow)) !important; }
  .btn.ghost { background: rgba(255, 255, 255, 0.96) !important; }
}

/* Type ------------------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(44px, 6.6vw, 96px); font-weight: 800; line-height: 0.98; }
h2 { font-size: clamp(32px, 4.4vw, 62px); }
h3 { font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -0.025em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* The highlighter. Yellow as emphasis inside a line of black type. */
.mark {
  background: linear-gradient(transparent 54%, rgba(255, 216, 77, .85) 54%, var(--yellow) 94%, transparent 94%);
  border-radius: 4px;
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--pill);
  padding: 8px 16px 8px 12px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,196,0,.28); }

.section-head { max-width: 880px; margin-bottom: clamp(32px, 4vw, 60px); }
.section-head h2 { margin: 0 0 16px; }
.section-head p { color: var(--muted); font-size: clamp(17px, 1.3vw, 21px); max-width: 60ch; margin: 0; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centred p { margin-inline: auto; }
.section-head.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.section-head.with-action > div { max-width: 760px; }

/* Buttons ---------------------------------------------------------------
   A frosted pill. The yellow is laid on at partial strength over a blurred
   backdrop rather than painted flat, so the button picks up whatever is
   behind it - the aurora, a photograph, a tinted band - and a bright top
   edge sits on it like light on glass. A sheen sweeps across once on hover. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--pill);
  background:
    linear-gradient(135deg, rgba(255,216,77,.86), rgba(255,196,0,.92)),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 58%);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(184,134,0,.18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transition: left .6s var(--ease);
}
.btn:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(135deg, rgba(255,216,77,.96), rgba(255,196,0,1)),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 58%);
  box-shadow: 0 34px 60px -30px rgba(184,134,0,.85), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(184,134,0,.2);
}
.btn:hover::after { left: 120%; }
.btn:active { transform: translateY(-1px); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn .arw { font-size: 20px; line-height: 0; transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn.ghost {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44));
  backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border-color: rgba(255,255,255,.7);
  color: var(--ink);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
}
.btn.ghost:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}

.btn.sm { padding: 11px 20px; font-size: 14.5px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover { gap: 14px; border-bottom-color: var(--ink); }

/* Icons: two drawings, one shown ---------------------------------------- */
.ico { flex: none; }
.ico-desk { display: none; }
.ico-mob { display: block; }
@media (min-width: 820px) { .ico-desk { display: block; } .ico-mob { display: none; } }

/* Brand ----------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 36px; width: auto; }
.brand-type {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em;
  line-height: .86; font-size: 30px; color: var(--ink);
}
.brand-v {
  background: linear-gradient(140deg, var(--yellow-2), var(--yellow));
  color: var(--ink); padding: 5px 9px 6px; margin-right: 5px;
  border-radius: 10px 10px 12px 12px;
  box-shadow: var(--shadow-sm);
}
.brand-sub {
  grid-column: 1 / -1; font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.3em; color: var(--muted); margin-top: 5px;
}
.brand-type.is-small { font-size: 22px; }
.brand-type.is-small .brand-sub { display: none; }

/* Nav -------------------------------------------------------------------
   A floating glass pill rather than a bar welded to the top of the page. */
.nav {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: min(calc(100% - 2 * var(--gutter)), var(--maxw));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 11px 11px 11px 22px;
  border-radius: var(--pill);
  background: var(--glass);
  backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  transition: top .35s var(--ease), padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled { top: 8px; background: var(--glass-strong); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
  padding: 10px 16px; border-radius: var(--pill);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.7); }
.nav-links a.is-active { background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); box-shadow: var(--shadow-sm); }
.nav-sheet-cta { display: none; }
.nav-cta { padding: 12px 22px; font-size: 15px; }

.nav-toggle {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--glass-line); border-radius: 50%;
  background: var(--glass-strong); cursor: pointer;
  padding: 14px 13px; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.nav.open-sheet .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open-sheet .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open-sheet .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------
   The photograph is the page. It runs edge to edge behind the whole section
   and drifts slowly as you scroll; a white veil is laid over it, heaviest
   under the type and thinnest over the machine, so the headline reads as
   black on white while the picture stays a picture. */
.hero {
  position: relative; isolation: isolate;
  min-height: min(92svh, 920px);
  display: grid; align-items: center;
  padding: clamp(124px, 14vw, 180px) 0 clamp(56px, 7vw, 96px);
}
.hero-bg { position: absolute; inset: -9% 0; z-index: -2; overflow: hidden; }
/* The veil. A diagonal wash that clears the right-hand side, a soft top so
   the nav pill stays legible, and a hard bottom so the section melts into
   the white page rather than stopping at an edge. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(103deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 26%, rgba(255,255,255,.66) 46%, rgba(255,255,255,.26) 64%, rgba(255,255,255,.14) 100%),
    radial-gradient(74% 86% at 80% 26%, rgba(255,196,0,.20), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 58%, rgba(255,255,255,.85) 88%, #fff 100%);
}
/* The slider loses its pane treatment here: no radius, no shadow, no ratio. */
.hero-bg .slider { border-radius: 0; border: 0; box-shadow: none; height: 100%; background: var(--paper); }
.hero-bg .slider-track { aspect-ratio: auto; height: 100%; }
.hero-bg .slide .media, .hero-bg .slide .media img { height: 100%; object-fit: cover; }
.hero-bg .slider-ui { z-index: 4; justify-content: flex-end; padding: clamp(16px, 3vw, 34px); }

.hero-inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero-copy { max-width: min(680px, 62%); }
.hero h1 { margin-bottom: 24px; }
.hero-sub { font-size: clamp(18px, 1.4vw, 23px); color: var(--ink-2); max-width: 44ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

/* Three small facts under the fold of the copy, each its own pane. */
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero-fact { padding: 16px 18px; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge); }
.hero-fact .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; }
.hero-fact .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* Slider ----------------------------------------------------------------
   One component, used by the hero and the yard gallery. Slides are stacked
   and crossfade; the controls are glass over the picture. */
.slider { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-line); background: var(--paper); }
.slider-track { position: relative; aspect-ratio: 4 / 3; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease);
}
.slide.is-active { opacity: 1; transform: scale(1); }
.slide .media, .slide .media img { width: 100%; height: 100%; aspect-ratio: auto; }
.slider-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px; }
.slider-dots { display: flex; gap: 7px; align-items: center; padding: 8px 12px; border-radius: var(--pill); background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); }
.slider-dots .dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(18,18,18,.22); cursor: pointer; transition: width .35s var(--ease), background .35s var(--ease); }
.slider-dots .dot.is-active { width: 26px; border-radius: var(--pill); background: var(--yellow); }
.slider-arrows { display: flex; gap: 8px; }
.slider-arrows button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-size: 20px; line-height: 1;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.slider-arrows button:hover { background: var(--yellow); transform: translateY(-2px); }
.slider-count { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; padding: 7px 13px; border-radius: var(--pill); background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); }

/* The pane that sits at the foot of the hero, over the clear half of it. */
.hero-chip {
  display: flex; align-items: center; gap: 14px; flex: none; margin-bottom: 96px;
  padding: 16px 22px 16px 16px; border-radius: var(--r-lg);
  background: var(--glass-strong); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}
.hero-chip .ring { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, var(--yellow-2), var(--yellow)); box-shadow: var(--shadow-sm); }
.hero-chip .v { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.hero-chip .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Marquee ---------------------------------------------------------------
   A slow horizontal drift under the hero: movement on the page that is not
   tied to the scrollbar. */
.marquee { overflow: hidden; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 0; width: max-content; animation: drift 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.marquee-track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Media and the plate that stands in for it ------------------------------ */
.media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: var(--media-ratio, 16 / 10); border-radius: inherit; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.media-fill { height: 100%; aspect-ratio: auto; }
.media.is-empty {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,196,0,.16), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(18,18,18,.035) 0 12px, transparent 12px 24px),
    var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.media-plate { text-align: center; padding: 16px; }
.media-file {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .06em; color: var(--ink);
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 8px 15px; border-radius: var(--pill); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm);
}
.media-hint { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); }
.media-machine { background: transparent; }
.media-machine img { object-fit: contain; padding: 12px; }

/* Category chips --------------------------------------------------------- */
.cat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cat {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 14px; border-radius: var(--pill);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
  text-decoration: none; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.cat:hover { transform: translateY(-3px); background: var(--glass-strong); box-shadow: var(--shadow); }
.cat-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: linear-gradient(140deg, var(--yellow-soft), var(--yellow)); color: var(--ink); }
.cat-ico svg { width: 20px; height: 20px; }
.cat-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.cat-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }

/* Analytics tiles --------------------------------------------------------
   Stat first, plot second: the number is the headline and the little chart
   is context under it. One series each, so no legend; marks are ink, the
   latest value is the yellow one, and the value is always written out. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi {
  padding: 24px; border-radius: var(--r-lg);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); }
.kpi.is-tinted { background: linear-gradient(150deg, rgba(255,241,194,.9), rgba(255,255,255,.6)); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kpi-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kpi-delta svg { width: 13px; height: 13px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 5px 10px; border-radius: var(--pill); background: var(--yellow-soft); color: var(--yellow-deep); border: 1px solid rgba(184,134,0,.2); }
.kpi-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -0.04em; line-height: 1; }
.kpi-foot { font-size: 14.5px; color: var(--muted); margin-top: 8px; }

/* 12 bars, 2px apart, rounded at the top, sitting on a hairline baseline. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 62px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--hair); }
.spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(18,18,18,.16); height: 12%; transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); }
.spark i.is-last { background: linear-gradient(180deg, var(--yellow-2), var(--yellow)); }
.in .spark i, .kpi.in .spark i { transform: scaleY(1); }

/* A meter is a track, a fill and its value written beside the label. */
.meters { display: grid; gap: 18px; }
.meter-row .meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 9px; }
.meter-row .m-k { font-size: 15.5px; color: var(--ink); }
.meter-row .m-v { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.meter { height: 10px; border-radius: var(--pill); background: rgba(18,18,18,.08); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: var(--pill); background: linear-gradient(90deg, var(--yellow-2), var(--yellow)); transition: width 1.2s var(--ease); }

.kpi-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); margin-top: 18px; }

.service-detail .machine-hero h1 { font-size: clamp(38px, 4.4vw, 66px); }

/* Machine cards ----------------------------------------------------------
   Two faces on one card. The front is the photograph and the four numbers a
   buyer compares; hovering turns the card over to the sentence behind them
   and the commercial detail. The link is the whole card either way, so the
   turn is decoration - nothing is only reachable on the back, and on a
   touchscreen, where there is no hover, the back is never built. */
.mcard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mcard {
  display: grid; perspective: 1600px;
  text-decoration: none; color: var(--ink);
  border-radius: var(--r-xl);
}
.mcard-inner {
  position: relative; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.22,.72,.2,1);
}
.mcard-face {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: box-shadow .45s var(--ease);
}
/* The front is in normal flow, so it is what gives the card its height. */
.mcard-front { position: relative; display: flex; flex-direction: column; height: 100%; }
.mcard-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: none; flex-direction: column; padding: 24px 24px 22px;
  background: linear-gradient(165deg, rgba(255,249,230,.92), rgba(255,255,255,.86) 58%, rgba(255,241,194,.9));
}
.mcard-back-code { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow-deep); }
.mcard-back h3 { font-size: clamp(24px, 2vw, 31px); margin: 8px 0 12px; }
.mcard-blurb { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-facts { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; }
.b-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 13px; background: rgba(255,255,255,.72); }
.b-fact .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.b-fact .v { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; text-align: right; }

/* The turn itself, only where there is a pointer that can hover. */
@media (hover: hover) and (pointer: fine) {
  .mcard-back { display: flex; }
  .mcard:hover .mcard-inner, .mcard:focus-visible .mcard-inner { transform: rotateY(180deg); }
  .mcard:hover .mcard-face, .mcard:focus-visible .mcard-face { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); }
}

.mcard-media { position: relative; margin: 10px 10px 0; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg, var(--yellow-wash), var(--paper-2)); }
.mcard-media .media { aspect-ratio: 4 / 3; background: transparent; }
.mcard:hover .mcard-media img { transform: scale(1.06); }
.mcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mcard-flags { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flag { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 6px 13px; border-radius: var(--pill); background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); color: var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap; }
.flag.is-used { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); }
.flag-stock { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--glass-line); }
.mcard h3 { font-size: clamp(24px, 2vw, 31px); }
.mcard-type { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 7px 0 18px; }

.specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.spec { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.25; }
.spec-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-xs); background: var(--yellow-wash); color: var(--yellow-deep); border: 1px solid rgba(184,134,0,.14); }
.spec-ico svg { width: 19px; height: 19px; }
.spec-val { font-weight: 500; }
.spec-k { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); }
.mcard-go {
  margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
}
.mcard-go .go-pill svg { width: 17px; height: 17px; }
.mcard-go .go-pill { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease); }
.mcard:hover .go-pill { transform: translateX(4px) rotate(-8deg); }

/* Tabs and chips --------------------------------------------------------- */
.filters { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 7px; border-radius: var(--pill); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge); margin-bottom: clamp(26px, 3vw, 44px); }
.chip {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 10px 18px; border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .28s var(--ease), box-shadow .28s var(--ease);
}
.filters::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; flex: none; }
.chip:hover { background: rgba(255,255,255,.66); }
.chip.is-active { background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); box-shadow: var(--shadow-sm); }
.chip-n { font-family: var(--font-mono); font-size: 10.5px; opacity: .65; }
.filter-empty { margin-top: 28px; font-size: 18px; color: var(--muted); }

/* Filter bar -------------------------------------------------------------
   Two rows, each a scrolling segmented control: class on top, brand beneath.
   They combine, so a filtered list is one link. */
/* The listing opens on the search rather than on a picture. */
.listing-top { padding-top: clamp(126px, 14vw, 180px); }
.listing-head { margin-bottom: clamp(26px, 3vw, 40px); }
.listing-head h1 { margin-bottom: 18px; }
.listing-head p { color: var(--muted); font-size: clamp(17px, 1.35vw, 22px); max-width: 56ch; margin: 0; }

.search-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 10px 10px 8px; margin-bottom: 18px;
  border-radius: var(--pill);
  background: var(--glass); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.search-bar:focus-within { border-color: rgba(184,134,0,.4); box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255,196,0,.22), inset 0 1px 0 var(--glass-edge); }
.search-field { position: relative; display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; padding-left: 14px; }
.search-ico { display: grid; place-items: center; color: var(--muted); flex: none; }
.search-ico svg { width: 22px; height: 22px; }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -0.01em;
  color: var(--ink); padding: 12px 0;
}
.search-field input::placeholder { color: var(--muted-2); font-weight: 500; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(18,18,18,.07); color: var(--ink); font-size: 18px; line-height: 1;
  transition: background .25s var(--ease);
}
.search-clear:hover { background: var(--yellow); }
.search-side { display: flex; align-items: center; gap: 16px; flex: none; padding-right: 6px; }
.search-sort { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.search-sort > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.search-sort select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink);
  padding: 10px 34px 10px 16px; border-radius: var(--pill);
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.72);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 17px top 50%, right 12px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.search-sort select:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 2px; }
.search-side .filter-count { margin: 0; white-space: nowrap; }

.filter-bar { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.filter-bar .filters { margin-bottom: 0; }
.filter-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.filter-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); width: 52px; flex: none; }
.filter-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.more-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }

/* Breadcrumbs ------------------------------------------------------------- */
.crumbs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 6px; color: var(--muted-2); }

/* Services --------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 30px; border-radius: var(--r-xl);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  text-decoration: none; color: var(--ink); overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc::before { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 70%; background: radial-gradient(circle, rgba(255,196,0,.4), transparent 68%); opacity: 0; transition: opacity .5s var(--ease); }
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); }
.svc:hover::before { opacity: 1; }
.svc > * { position: relative; }
.svc-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r); background: linear-gradient(140deg, var(--yellow-soft), var(--yellow)); color: var(--ink); box-shadow: var(--shadow-sm); margin-bottom: 8px; transition: transform .45s var(--ease); }
.svc:hover .svc-ico { transform: rotate(-6deg) scale(1.06); }
.svc-ico svg { width: 27px; height: 27px; }
.svc-code { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--muted); }
.svc h3 { font-size: clamp(19px, 1.5vw, 23px); }
.svc p { font-size: 15.5px; color: var(--muted); margin: 0; }
.svc-go { margin-top: auto; padding-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: gap .3s var(--ease); }
.svc:hover .svc-go { gap: 14px; }

/* Services index --------------------------------------------------------- */
.service-index { display: grid; gap: 16px; }
.service-row {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: 18px; border-radius: var(--r-xl);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  text-decoration: none; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); }
.service-row-media { border-radius: var(--r-lg); overflow: hidden; }
.service-row-media .media { aspect-ratio: 16 / 10; }
.service-row-body .code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.service-row-body h2 { font-size: clamp(24px, 2.2vw, 34px); margin: 7px 0 10px; }
.service-row-body p { color: var(--muted); font-size: 16.5px; max-width: 68ch; }
.service-row-body ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; }
.service-row-body li { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: var(--pill); padding: 5px 12px; background: rgba(255,255,255,.5); }
.service-row-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); font-family: var(--font-display); font-size: 22px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease); }
.service-row:hover .service-row-go { transform: translateX(5px); }

/* Page headers ----------------------------------------------------------- */
.page-header { padding: clamp(120px, 14vw, 180px) 0 clamp(30px, 4vw, 56px); }
.page-header-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
.page-header h1 { margin-bottom: 20px; }
.page-header p { color: var(--muted); font-size: clamp(17px, 1.35vw, 22px); max-width: 52ch; }
.page-header-media { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-line); }
.page-header-media .media { aspect-ratio: 16 / 11; }

/* Machine detail --------------------------------------------------------- */
.page-loading { padding: 180px var(--gutter); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.machine-hero { padding: clamp(118px, 14vw, 178px) 0 clamp(30px, 4vw, 52px); }
.machine-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
.machine-hero h1 { font-size: clamp(42px, 6vw, 88px); margin-bottom: 18px; }
.machine-hero .lede { color: var(--muted); font-size: clamp(17px, 1.4vw, 22px); margin-bottom: 30px; max-width: 48ch; }
.machine-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; position: static; }
.machine-hero-media { border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg); background: linear-gradient(160deg, var(--yellow-wash), var(--paper-2)); }
.machine-hero-media .media { aspect-ratio: 4 / 3; background: transparent; }

.spec-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.spec-table .cell {
  display: flex; gap: 14px; align-items: center; padding: 22px;
  border-radius: var(--r-lg); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  transition: transform .4s var(--ease);
}
.spec-table .cell:hover { transform: translateY(-4px); }
.spec-table .cell .ico { color: var(--yellow-deep); }
.spec-table .cell .k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.spec-table .cell .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -0.025em; }

.detail-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.detail-cols .overview p { font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-2); }
.feature-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; }
.feature-list .ico { color: var(--yellow-deep); margin-top: 2px; }
/* The enquiry panel rides down the page with the reader. */
.detail-aside { position: sticky; top: 100px; }
.fact-block { border-radius: var(--r-xl); overflow: hidden; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--hair); }
.fact:last-child { border-bottom: 0; }
.fact .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fact .v { font-family: var(--font-display); font-weight: 700; text-align: right; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tag-row span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: var(--pill); padding: 6px 13px; background: rgba(255,255,255,.55); }

.next-nav a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: var(--r-xl); text-decoration: none; color: var(--ink); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.next-nav a:hover { transform: translateY(-4px); }
.next-nav .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.next-nav .nm { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -0.03em; }
.next-nav .arw { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); font-family: var(--font-display); font-size: 24px; box-shadow: var(--shadow-sm); }

/* CTA -------------------------------------------------------------------- */
.cta-band { padding: clamp(40px, 5vw, 80px) 0; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: clamp(30px, 4vw, 60px); border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--yellow-2), var(--yellow) 55%, var(--yellow-soft));
  box-shadow: var(--shadow-yellow);
  position: relative; overflow: hidden;
}
.cta-inner::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 46%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 62%); }
.cta-inner > * { position: relative; }
.cta-inner h2 { font-size: clamp(28px, 3.4vw, 50px); }
.cta-inner p { font-size: clamp(16px, 1.3vw, 20px); margin: 10px 0 0; max-width: 50ch; color: var(--ink-2); }
.cta-inner .btn { background: var(--white); box-shadow: var(--shadow); }
.cta-inner .btn:hover { background: var(--white); box-shadow: var(--shadow-lg); }

/* Careers ----------------------------------------------------------------- */
.careers-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.careers-intro p { font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }
.roles { display: grid; gap: 14px; }
.role {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 140px; gap: 24px; align-items: center;
  padding: 24px 28px; border-radius: var(--r-xl);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.role:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.role .team { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow-deep); }
.role h3 { font-size: clamp(20px, 1.8vw, 27px); margin: 7px 0 8px; }
.role .role-sum { color: var(--muted); font-size: 16px; margin: 0; max-width: 66ch; }
.role-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.role .apply { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); padding: 12px 22px; border-radius: var(--pill); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.role .apply:hover { transform: translateY(-2px); }
.roles-cta { margin-top: 32px; }

/* Contact and forms -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact-info h2 { margin-bottom: 18px; }
.contact-lede { font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); max-width: 48ch; }
.contact-detail { margin-top: 30px; display: grid; gap: 10px; }
.contact-detail .row {
  display: grid; grid-template-columns: 42px 120px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 18px; border-radius: var(--r); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
}
.contact-detail .row-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-xs); background: var(--yellow-wash); color: var(--yellow-deep); }
.contact-detail .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-detail .val { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); overflow-wrap: anywhere; }
.contact-detail .val a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--yellow); }
.contact-detail .val a:hover { border-bottom-color: var(--ink); }
.contact-note { margin-top: 22px; padding: 20px 22px; border-radius: var(--r); background: var(--yellow-wash); border: 1px solid rgba(184,134,0,.16); font-size: 16px; color: var(--ink-2); }

form {
  padding: clamp(22px, 3vw, 38px); border-radius: var(--r-xl);
  background: var(--glass-strong); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}
.field { display: block; margin-bottom: 18px; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
label { display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
label .opt { text-transform: none; letter-spacing: 0; color: var(--muted-2); }
input, select, textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink); font-family: var(--font-body); font-size: 16.5px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--white); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.24); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c0261b; }
.err { color: #c0261b; font-size: 13.5px; margin-top: 5px; min-height: 1em; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--font-mono); font-size: 13px; margin-bottom: 14px; min-height: 1.2em; }
.form-status.ok { color: #146b33; }
.form-status.bad { color: #c0261b; }

/* Footer -------------------------------------------------------------------- */
.footer { padding: clamp(40px, 5vw, 76px) 0 28px; border-top: 1px solid var(--hair); background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper)); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 56px); padding-bottom: clamp(28px, 4vw, 48px); }
.footer-brand p { color: var(--muted); max-width: 38ch; margin-top: 18px; font-size: 16px; }
.footer .col h5 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--yellow-deep); margin-bottom: 14px; text-transform: uppercase; }
.footer .col a, .footer .col span { display: block; color: var(--muted); text-decoration: none; font-size: 15.5px; margin-bottom: 9px; overflow-wrap: break-word; transition: color .25s var(--ease); }
.footer .col a:hover { color: var(--ink); }
.footer-hours { font-size: 14.5px !important; }
.footer-bottom { display: flex; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--hair); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.footer-strip { flex: 1; height: 4px; border-radius: var(--pill); background: linear-gradient(90deg, var(--yellow), var(--yellow-soft), transparent); }

/* 404 ----------------------------------------------------------------------- */
.notfound { padding: clamp(150px, 18vw, 250px) 0 clamp(70px, 9vw, 140px); }
.notfound p { color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); margin-bottom: 32px; max-width: 50ch; }
.notfound .hero-actions { margin-bottom: 0; }

/* Chat ---------------------------------------------------------------------- */
.chat { position: fixed; right: clamp(14px, 2.2vw, 26px); bottom: clamp(14px, 2.2vw, 26px); z-index: 160; }
.chat-toggle {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.6); color: var(--ink);
  background: linear-gradient(140deg, var(--yellow-2), var(--yellow));
  box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat-toggle:hover { transform: translateY(-3px) scale(1.03); }
.chat-toggle .i-close { display: none; }
.chat.open .chat-toggle .i-open { display: none; }
.chat.open .chat-toggle .i-close { display: block; }
.chat-panel {
  position: absolute; right: 0; bottom: 76px;
  width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100svh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--glass-strong); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
  animation: chat-in .28s var(--ease);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: linear-gradient(135deg, var(--yellow-soft), rgba(255,255,255,.4)); border-bottom: 1px solid var(--hair); }
.chat-head-id { display: flex; align-items: center; gap: 11px; }
.chat-head-id .dot { width: 9px; height: 9px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 4px rgba(31,157,85,.18); }
.chat-head-id strong { font-family: var(--font-display); font-size: 16px; display: block; letter-spacing: -0.02em; }
.chat-head-id small { color: var(--muted); font-size: 11.5px; }
.chat-min { background: none; border: 0; color: var(--muted); font-size: 24px; cursor: pointer; line-height: 1; }
.chat-min:hover { color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.chat-msg { max-width: 84%; padding: 11px 15px; font-size: 15.5px; line-height: 1.45; border-radius: var(--r); border: 1px solid var(--glass-line); }
.chat-msg.agent { align-self: flex-start; background: rgba(255,255,255,.86); border-bottom-left-radius: 6px; }
.chat-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); border-bottom-right-radius: 6px; }
.chat-msg.typing { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hair); }
.chat-form input { flex: 1; border-radius: var(--pill); padding: 12px 16px; font-size: 15.5px; }
.chat-form button { width: 48px; flex: none; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.chat-form button:hover { transform: scale(1.06); }

/* Motion -------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }

/* Tilt ---------------------------------------------------------------------
   Cards lean towards the pointer, with a soft highlight where it sits. The
   rules come after the cards' own hover so the lean wins while it is active;
   main.js only ever sets the class on a fine pointer, with motion allowed. */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.5), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease); z-index: 1;
}
[data-tilt].is-tilting.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px) scale(1.012);
  transition: transform .14s var(--ease-soft), box-shadow .3s var(--ease);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}
[data-tilt].is-tilting::after { opacity: 1; }
.mcard.is-tilting .mcard-body, .svc.is-tilting h3 { transform: translateZ(22px); }
.mcard-body, .svc h3 { transition: transform .25s var(--ease); }

/* Parallax: the value is set by main.js, the transform lives here. */
[data-para] { transform: translate3d(0, var(--para, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-tilt], [data-tilt]::after { transform: none !important; opacity: 0 !important; }
  [data-para] { transform: none; }
  .slide { transition: opacity .2s linear; transform: none; }
  .btn, .mcard, .cat, .svc, .kpi, .role, .service-row { transition: none !important; }
  .mcard-inner { transition: none !important; transform: none !important; }
  .mcard-back { display: none !important; }
  .spark i { transition: none; transform: scaleY(1); }
  .meter span { transition: none; }
}

/* =========================================================================
   Tablet
   ========================================================================= */
@media (max-width: 1240px) {
  .mcard-grid, .svc-grid, .kpi-grid, .spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .nav-cta { display: none; }
  .mcard-grid, .svc-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .contact-grid, .careers-intro, .detail-cols, .machine-hero-grid, .page-header-grid, .kpi-wide { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .service-row { grid-template-columns: 210px minmax(0, 1fr) auto; }
  .role { grid-template-columns: minmax(0, 1fr) 150px; }
  .role .apply { grid-column: 2; }
  .hero-chip { left: 16px; bottom: 16px; }
}

/* =========================================================================
   Phone
   The sheet, the stacked card, and the heavier icon set.
   ========================================================================= */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .nav { top: 10px; padding: 9px 9px 9px 16px; width: calc(100% - 24px); }
  .nav-toggle { display: flex; }
  .brand-type { font-size: 25px; }

  /* The pill becomes the menu.
     An earlier version floated a fixed sheet inside the nav; nested inside an
     element that carries backdrop-filter, that sheet is composited into the
     nav's own backdrop layer and renders translucent however opaque its
     background is. Growing the bar itself avoids the nesting altogether, and
     the morph from pill to card is the better motion anyway. */
  .nav { flex-wrap: wrap; row-gap: 0; transition: border-radius .35s var(--ease), background .35s var(--ease); }
  .nav.open-sheet { border-radius: var(--r-2xl); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links {
    order: 3; width: 100%;
    display: grid; gap: 3px;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 2px;
    transition: max-height .42s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
  }
  .nav-links.open { max-height: 68svh; opacity: 1; padding: 12px 2px 6px; overflow-y: auto; }
  .nav-links a { font-size: 22px; padding: 14px 18px; border-radius: var(--r); }
  .nav-sheet-cta {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px; padding: 16px 22px !important; font-size: 17px !important;
    background: linear-gradient(135deg, var(--yellow-2), var(--yellow)) !important;
    box-shadow: var(--shadow-sm);
  }

  /* The copy fills the width, so the veil has to cover the whole frame. */
  .hero { padding: 132px 0 64px; min-height: 0; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 46%, rgba(255,255,255,.8) 72%, #fff 100%),
      radial-gradient(90% 60% at 70% 12%, rgba(255,196,0,.2), transparent 70%);
  }
  .hero-inner { display: block; }
  .hero-copy { max-width: none; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-chip { margin: 16px 0 0; width: 100%; }
  .hero-bg .slider-ui { display: none; }
  .slider { border-radius: var(--r-xl); }
  .slider-track { aspect-ratio: 4 / 3; }

  .listing-top { padding-top: 116px; }
  .search-bar { border-radius: var(--r-lg); padding: 8px; }
  .search-field { flex: 1 1 100%; padding-left: 10px; }
  .search-side { width: 100%; justify-content: space-between; padding: 0 8px 4px; }

  .section-head.with-action { display: block; }
  .section-head.with-action .btn { margin-top: 22px; }

  .kpi-grid, .svc-grid, .spec-table { grid-template-columns: 1fr; }
  .kpi-value { font-size: 38px; }

  /* The machine card lies down: picture left, model and specs right. */
  .mcard-grid { grid-template-columns: 1fr; gap: 16px; }
  .mcard, .mcard-face { border-radius: var(--r-lg); }
  .mcard-front { flex-direction: row; align-items: stretch; }
  .mcard-media { width: 38%; max-width: 180px; flex: none; margin: 10px 0 10px 10px; }
  .mcard-media .media { height: 100%; aspect-ratio: auto; min-height: 150px; }
  .mcard-flags { position: static; padding: 0 0 12px; }
  .mcard-body { padding: 16px 18px; }
  .mcard h3 { font-size: 26px; }
  .mcard-type { margin: 5px 0 14px; }
  .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .spec { font-size: 14px; align-items: flex-start; gap: 9px; }
  .spec-ico { width: 28px; height: 28px; }
  .spec-ico svg { width: 17px; height: 17px; }
  .mcard-go { padding-top: 14px; font-size: 13.5px; }
  .mcard-go .go-pill { width: 32px; height: 32px; }

  .service-row { grid-template-columns: 1fr; gap: 16px; }
  .service-row-go { display: none; }
  .role { grid-template-columns: 1fr; gap: 14px; }
  .role .apply { grid-column: 1; justify-self: start; }
  .field.two { grid-template-columns: 1fr; gap: 0; }
  .contact-detail .row { grid-template-columns: 38px 1fr; row-gap: 3px; }
  .contact-detail .val { grid-column: 2; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cta-inner { border-radius: var(--r-xl); }
  .cta-inner .btn { width: 100%; justify-content: center; }
  .chat-toggle { width: 56px; height: 56px; }
  .chat-panel { height: min(72svh, 520px); }
  .filters { width: 100%; border-radius: var(--r-lg); }
  .filter-row { display: block; }
  .filter-label { width: auto; display: block; margin-bottom: 8px; }
}

@media (max-width: 470px) {
  .mcard-front { flex-direction: column; }
  .mcard-media { width: auto; max-width: none; margin: 10px 10px 0; }
  .mcard-media .media { aspect-ratio: 16 / 10; min-height: 0; }
  .mcard-flags { position: absolute; top: 18px; left: 18px; right: 18px; padding: 0; }
  .footer-top { grid-template-columns: 1fr; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}