/* ==========================================================================
   NAUTILUS — NEMO page · Section 2: What NEMO does
   Theme variables with fallbacks. Prefix nm-.
   ========================================================================== */

.nm-what{
  --nm-wine: var(--theme-color, #79182d);
  --nm-head: var(--heading-color, #000);
  --nm-text: var(--font-color, #5c5c5c);
  --nm-line: var(--border-color, #dcdcdc);
  --nm-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --nm-bfont: var(--body-font, 'Exo 2', sans-serif);
  --nm-hw: var(--font-weight-heading, 600);
  --nm-ease: cubic-bezier(.16, 1, .3, 1);
}

.nm-what-intro{ max-width: 640px; margin: 18px 0 0; color: var(--nm-text); }

/* ===================== six capabilities =====================
   Cells separated by hairlines (same pattern as the EON hardware grid).
   On hover the cell turns white and a wine line draws along its top edge. */
.nm-feats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--nm-line);                 /* shows through the 1px gaps as hairlines */
  border: 1px solid var(--nm-line);
  margin-bottom: 110px;
}
.nm-feat{
  position: relative;
  padding: 34px 30px 38px;
  background: var(--bg-color, #F3F3F3);       /* page background at rest */
  transition: background .35s ease;
}
.nm-feat:hover{ background: #fff; }
.nm-feat::before{
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--nm-wine); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--nm-ease);
}
.nm-feat:hover::before{ transform: scaleX(1); }

.nm-feat-ico{ display: block; width: 34px; height: 34px; margin-bottom: 20px; }
.nm-feat-ico svg{
  width: 100%; height: 100%; display: block;
  fill: none; stroke: var(--nm-wine); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.nm-feat h3{
  margin: 0 0 12px;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 19px; line-height: 1.3; color: var(--nm-head);
  text-transform: none;
}
.nm-feat p{ margin: 0; font-size: 15px; line-height: 1.62; color: var(--nm-text); }

@media (max-width: 991px){ .nm-feats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px){ .nm-feats{ grid-template-columns: 1fr; margin-bottom: 80px; } .nm-feat{ padding: 28px 22px 30px; } }

/* entrance: cells fade in; the background transition stays separate so hover is instant */
.nm-feat{ opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s var(--nm-ease), background .35s ease; }
.nm-feats.is-in .nm-feat{ opacity: 1; transform: none; }

/* ===================== residuals band ===================== */
.nm-res{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 991px){ .nm-res{ grid-template-columns: 1fr; gap: 36px; } }

.nm-res-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  /*font-family: var(--nm-hfont); */ font-weight: var(--nm-hw);
  font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--nm-wine);
}
.nm-res-eyebrow::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nm-res-text h3{
  margin: 14px 0 16px;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; color: var(--nm-head);
}
.nm-res-text > p{ margin: 0 0 26px; color: var(--nm-text); }

/* segmented toggle */
.nm-res-toggle{
  display: inline-flex; padding: 4px; border-radius: 40px;
  background: #fff; border: 1px solid var(--nm-line); margin-bottom: 26px;
}
.nm-res-btn{
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 22px; border-radius: 40px;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nm-text);
  transition: background .3s, color .3s;
}
.nm-res-btn.is-active{ background: var(--nm-wine); color: #fff; }
.nm-res-btn:focus-visible{ outline: 2px solid var(--nm-wine); outline-offset: 2px; }

/* RMS table — active column highlighted */
.nm-res-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.nm-res-table th, .nm-res-table td{
  text-align: left; padding: 10px 12px 10px 0; border-top: 1px solid var(--nm-line);
}
.nm-res-table th{
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--nm-text);
  border-top: 0;
}
.nm-res-table td:first-child{ color: var(--nm-text); }
.nm-res-table [data-col]{ color: #9a9aa4; transition: color .4s; font-variant-numeric: tabular-nums; }
.nm-res[data-state="pre"]  .nm-res-table [data-col="pre"],
.nm-res[data-state="post"] .nm-res-table [data-col="post"]{
  color: var(--nm-head); font-weight: var(--nm-hw);
}
.nm-res[data-state="pre"]  .nm-res-table th[data-col="pre"],
.nm-res[data-state="post"] .nm-res-table th[data-col="post"]{ color: var(--nm-wine); }

.nm-res-note{ margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #9a9aa4; }
.nm-res-tbc{ font-weight: 600; letter-spacing: .06em; color: var(--nm-wine); }

/* plots: two stacked images, crossfaded */
.nm-res-fig{ margin: 0; }
.nm-res-plots{
  position: relative; aspect-ratio: 731 / 347;
  background: #fff; border: 1px solid var(--nm-line); border-radius: 6px;
  padding: 14px; box-sizing: content-box;
}
.nm-res-img{
  position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: contain; display: block;
  transition: opacity .8s ease;
}
.nm-res-post{ opacity: 0; }
.nm-res[data-state="post"] .nm-res-post{ opacity: 1; }
.nm-res[data-state="post"] .nm-res-pre{ opacity: 0; }

.nm-res-fig figcaption{
  margin-bottom: 12px; text-align: center;       /* above the plot, centred */
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9a9aa4;
}
.nm-res-state{ color: var(--nm-wine); font-weight: 600; }

@media (prefers-reduced-motion: reduce){
  .nm-what *{ transition: none !important; }
  .nm-feat{ opacity: 1; transform: none; }
}