/* ModulEdge concepts: shared base.
   Brand as it is on moduledge.com today: #02271f green, #c9d72c lime, #f4f7d5 cream, sage section greys,
   Inter. Buttons are pills and cards have 8px corners, as on the live site (a concept may state its own rule). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

:root {
  --green: #02271f;
  --green-2: #023c30;
  --green-3: #0d4a3b;
  --lime: #c9d72c;
  --lime-soft: #ebf1b3;
  --cream: #f4f7d5;
  --sage-50: #f2f6f5;
  --sage-100: #e5e9e8;
  --sage-200: #d9e0db;
  --sage-300: #ccd4d2;
  --sage-400: #bdc7ae;
  --white: #fcfdfb;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 3.4vw, 50px);
  --max: 1440px;

  /* schematic line colours, set per page and per section */
  --sch-line: currentColor;
  --sch-soft: color-mix(in srgb, currentColor 45%, transparent);
  --sch-accent: var(--lime);
  /* filled faces of the modules: on light paper the roof is lightest and the end darkest */
  --face-top: color-mix(in srgb, var(--sch-line) 3%, transparent);
  --face-side: color-mix(in srgb, var(--sch-line) 8%, transparent);
  --face-end: color-mix(in srgb, var(--sch-line) 15%, transparent);
  --face-gap: color-mix(in srgb, var(--sch-line) 34%, transparent);   /* the dark gap under the floor */
  --face-in: color-mix(in srgb, var(--sch-line) 20%, transparent);    /* the inside, seen through the open roof */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--lime); color: var(--green); font-weight: 500; }
.skip:focus { top: 12px; }
/* two-tone ring: readable on white, paper, lime and the dark green */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lime); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: currentColor; }
.logo__mark { width: 44px; height: auto; aspect-ratio: 39 / 25; flex: none; }
.logo__word { width: 96px; height: auto; aspect-ratio: 113 / 15; flex: none; }
/* icons are <svg><use/></svg> without a viewBox: give them their proportions */
.btn svg, .link svg, .rowlink svg, .ico { height: auto; aspect-ratio: 20 / 13; flex: none; }

/* ---------- buttons (the live site's pill buttons with the arrow) ---------- */
.btn {
  --bg: var(--lime); --fg: var(--green);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg { width: 16px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--dark { --bg: var(--green); --fg: var(--lime); }
.btn--cream { --bg: var(--cream); --fg: var(--green); }
.btn--line { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.btn--line:hover { box-shadow: inset 0 0 0 1px currentColor; }
@media (max-width: 767px) {   /* long labels (article CTAs, the Standard Series form) wrap instead of widening the page */
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
}
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease);
  padding-bottom: 2px;
}
.link svg { width: 14px; }
.link:hover { background-size: 100% 1px; }

/* ---------- reveal on scroll ---------- */
.js [data-reveal] { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--delay, 0) * 1ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* ---------- schematics ---------- */
:where(svg[data-scheme]) { width: 100%; height: auto; overflow: visible; color: var(--sch-line); }
/* widths are in drawing units: --u is one screen pixel, measured by schemes.js */
:where(svg[data-scheme]) path { stroke: var(--sch-line); stroke-width: calc(var(--u, 1) * 1px); stroke-linecap: round; stroke-linejoin: round; }
.sl path { stroke-dasharray: 1 1.001; stroke-dashoffset: calc(var(--d, 0) * 1.0005); }
/* safety net: once a drawing is complete it is plain solid lines, whatever the dash maths did */
.is-done .sl path:not(.pulse):not(.dash):not(.dot) { stroke-dasharray: none; }
.js [data-draw="scroll"] .sl { --d: 1; }
.js [data-draw="in"] .sl path, .js [data-draw="manual"] .sl path { stroke-dashoffset: 1.0005; transition: stroke-dashoffset 1.5s var(--ease); transition-delay: calc(var(--i) * 0.16s); }
.js [data-draw="in"].is-drawn .sl path, .js [data-draw="manual"].is-drawn .sl path { stroke-dashoffset: 0; }
.sl-ribs path, .sl-drops path { stroke: var(--sch-soft); }
/* volume: faces, the brand mark on the wall, hatched ground shadow; they appear together with the lines */
.sl path.face, .sl path.logo, .sl path.logo-accent { stroke: none; fill-opacity: calc(1 - var(--d, 0)); }
.sl path.face-top { fill: var(--face-top); }
.sl path.face-side { fill: var(--face-side); }
.sl path.face-end { fill: var(--face-end); }
.sl path.logo { fill: var(--sch-line); }
.sl path.logo-accent { fill: var(--lime); }
.sl path.hatch { stroke: var(--sch-soft); stroke-opacity: 0.55; }
.sl path.face-gap { fill: var(--face-gap); }
.sl path.face-in { fill: var(--face-in); }
/* filled and outlined parts: feet, fittings, door, equipment inside */
.sl path.fill { fill-opacity: calc(1 - var(--d, 0)); }
.sl path.f-foot, .sl path.f-fit, .sl path.f-door { fill: var(--face-end); }
.sl path.f-utop { fill: color-mix(in srgb, var(--sch-line) 10%, transparent); }
.sl path.f-ufront { fill: color-mix(in srgb, var(--sch-line) 5%, transparent); }
.sl path.cutline { stroke-width: calc(var(--u, 1) * 1.7px); }
.sl path.inner, .sl-tray path { stroke: var(--sch-soft); }
.sl path.bar { stroke: var(--sch-soft); }
.sl path.faint { stroke: var(--sch-soft); }
.sl-pipes path:not(.pulse), .sl-inpipes path:not(.pulse) { stroke: var(--sch-accent); }
/* the frame view's own layers stay hidden unless a page asks for them */
.sl-floor, .sl-posts { display: none; }
/* numbered callouts on a drawing (a page shows them with data-callouts="on") */
.callouts .callout { r: calc(var(--u, 1) * 11px); fill: var(--lime); stroke: var(--green); stroke-width: calc(var(--u, 1) * 1.5px); }
.callouts .callout-n { font-family: var(--font); font-weight: 600; font-size: calc(var(--u, 1) * 12px); fill: var(--green); }
.js [data-draw="in"] .sl path:is(.face, .fill, .logo, .logo-accent), .js [data-draw="manual"] .sl path:is(.face, .fill, .logo, .logo-accent) { fill-opacity: 0; transition: fill-opacity 1.1s var(--ease); transition-delay: calc(var(--i) * 0.16s + 0.2s); }
.js [data-draw="in"].is-drawn .sl path:is(.face, .fill, .logo, .logo-accent), .js [data-draw="manual"].is-drawn .sl path:is(.face, .fill, .logo, .logo-accent) { fill-opacity: 1; }
.sl-detail path { stroke: color-mix(in srgb, var(--sch-line) 80%, transparent); }
.sl-racks path, .sl-power path, .sl-liquid path, .sl-load path { stroke: var(--sch-accent); }
.sl-racks2 path { stroke: color-mix(in srgb, var(--sch-accent) 55%, transparent); }
/* dash patterns below are fallbacks: schemes.js sets them per line in screen pixels */
.sl path.dash { stroke-dasharray: 0.012 0.01; stroke-dashoffset: 0; opacity: calc(1 - var(--d, 0)); }
.sl path.dot { stroke-dasharray: 0.004 0.02; stroke-dashoffset: 0; opacity: calc(1 - var(--d, 0)); stroke-width: calc(var(--u, 1) * 2px); }
.sl path.pulse {
  stroke: var(--sch-pulse, var(--cream)); stroke-width: calc(var(--u, 1) * 2.4px);
  stroke-dasharray: 0.035 0.965; stroke-dashoffset: 1;
  opacity: calc(1 - var(--d, 0) * 3);
  animation: me-flow 3.2s linear infinite;
}
.sl-liquid path.pulse { animation-duration: 4.6s; stroke-dasharray: 0.02 0.08; stroke-width: calc(var(--u, 1) * 2px); }
@keyframes me-flow { to { stroke-dashoffset: 0; } }
.sl-text text { font-family: var(--mono); font-size: calc(var(--fs, 7) * 1px); letter-spacing: 0.06em; fill: currentColor; }
.sl-text text.lbl { fill: var(--sch-label, currentColor); }

/* ---------- pinned scene for the MDC2000 morph: the block holds still while the module turns into its plan ---------- */
.morph-track { position: relative; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .morph-track { height: var(--track, 230vh); }
  .morph-stick { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
}

/* ---------- FAQ on <details> ---------- */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- cookie notice (as on the live site: a white card bottom left, full width at the bottom on phones) ---------- */
.cookie { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 38rem; padding: 1rem 2rem 2rem; border-radius: 0.5rem; background: #fff; color: var(--green); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; }
.cookie__title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.cookie__text { font-size: 15px; line-height: 1.5; }
.cookie__btn { padding: 0 3.15rem; border: 0; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
@media (max-width: 767px) {
  .cookie { left: 0; right: 0; bottom: 0; max-width: none; padding: 1rem var(--gutter) 1.5rem; border-radius: 0.5rem 0.5rem 0 0; }
  .cookie__title { font-size: 1.1rem; }
  .cookie__btn { width: 100%; }
}
@media (max-width: 479px) {
  .cookie { align-items: center; }
  .cookie__text { text-align: center; }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .sl path.pulse { display: none; }
}