/* ==========================================================================
   NAUTILUS — Mission Analysis & Operational Navigation · 01 Title + Mission analysis
   Prefix sv-. Cells reuse the NEMO capability-cell pattern (hairline grid,
   white on hover with a wine line along the top). The block styles are the
   same in 01 and 02: loading both files is harmless.
   ========================================================================== */
.sv-ma-blk{
  --sv-wine: var(--theme-color, #79182d);
  --sv-head: var(--heading-color, #000);
  --sv-text: var(--font-color, #5c5c5c);
  --sv-line: var(--border-color, #dcdcdc);
  --sv-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --sv-hw: var(--font-weight-heading, 600);
  --sv-ease: cubic-bezier(.16, 1, .3, 1);
  padding: 64px 0 0;
}
.sv-ma-blk--last{ padding-bottom: 120px; }

/* ---------- page title: this section opens the page (no hero) ---------- */
/* .sv-ma-blk.sv-ma-first beats the generic .sv-ma-blk rule in the 02 stylesheet, whatever the load order */
.sv-ma-blk.sv-ma-first{ padding-top: clamp(50px, 13vw, 100px); scroll-margin-top: 100px; }   /* clears the fixed header */
.sv-ma-first .section-title{ margin: 0 0 64px; }                                   /* title → separator */
.sv-lead{ margin: 22px 0 0; font-family: var(--sv-hfont); font-weight: var(--sv-hw);
  font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--sv-wine); }
.sv-intro{ max-width: 700px; margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--sv-text); }

/* separator at the top of each block: hairline with a short wine lead segment */
.sv-sep{ position: relative; height: 1px; background: var(--sv-line); margin-bottom: 56px;
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--sv-ease); }
.sv-sep::before{ content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--sv-wine); }
.sv-ma-blk.is-in .sv-sep{ transform: none; }

.sv-block-title{ display: flex; align-items: baseline; gap: 16px; margin: 0 0 16px;
  font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15;
  text-transform: uppercase; color: var(--sv-head); }
.sv-block-title span{ color: var(--sv-wine); }          /* number: same size as the title, wine */
.sv-block-intro{ margin: 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--sv-text); }

/* ---------- cells ---------- */
.sv-cells{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--sv-line); border: 1px solid var(--sv-line); }
.sv-cell{ position: relative; padding: 34px 30px 38px; background: var(--bg-color, #F3F3F3); }
.sv-cell::before{ content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--sv-wine); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--sv-ease); }
.sv-cell:not(.sv-cell--accent):hover{ background: #fff; }
.sv-cell:not(.sv-cell--accent):hover::before{ transform: scaleX(1); }
.sv-cell-ico{ display: block; width: 34px; height: 34px; margin-bottom: 20px; }
.sv-cell-ico svg{ width: 100%; height: 100%; display: block; fill: none; stroke: var(--sv-wine); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.sv-cell h3{ margin: 0 0 12px; font-family: var(--sv-hfont); font-weight: var(--sv-hw);
  font-size: 19px; line-height: 1.3; color: var(--sv-head); text-transform: none; }
.sv-cell p{ margin: 0; font-size: 15px; line-height: 1.62; color: var(--sv-text); }

/* accent cell: dark, spans two columns, carries the links to the next service and to NEMO */
/* ---------- block head: number + title + intro on the left, animation on the right ----------
   Text is aligned to the bottom so the intro always ends just above the cells,
   whatever the height of the animation. Same structure for both blocks. */
.sv-block-head{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.sv-block-text{ padding-bottom: 6px; }
.sv-viz{ margin: 0; justify-self: end; width: 100%; max-width: 500px; height: 230px; }
.sv-viz-svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.sv-viz-svg .sv-plane{ fill: none; stroke: rgba(121,24,45,.38); stroke-width: 1.2; }
.sv-viz-svg .sv-plane--dash{ stroke-dasharray: 3 4; }
.sv-viz-svg .sv-sat{ fill: var(--sv-wine); }
.sv-viz-svg .sv-sat-ring{ fill: #fff; stroke: rgba(121,24,45,.35); stroke-width: 1; }
.sv-viz-svg .sv-traj-plan{ fill: none; stroke: rgba(121,24,45,.45); stroke-width: 1.4; stroke-dasharray: 4 5; }
.sv-viz-svg .sv-traj{ fill: none; stroke: var(--sv-wine); stroke-width: 2; stroke-linecap: round; }
.sv-viz-svg .sv-burn{ fill: none; stroke: var(--sv-wine); stroke-width: 1.5; }

@media (max-width: 991px){
  .sv-cells{ grid-template-columns: repeat(2, 1fr); }
  .sv-block-head{ grid-template-columns: 1fr; gap: 20px; }
  .sv-viz{ justify-self: center; height: 210px; }
}
@media (max-width: 575px){
  .sv-cells{ grid-template-columns: 1fr; }
  .sv-cell{ padding: 28px 22px 30px; }
  .sv-viz{ height: 180px; }
}

@media (max-width: 575px){ .sv-ma-blk.sv-ma-first{ padding-top: 130px; } .sv-ma-first .section-title{ margin-bottom: 48px; } .sv-ma-blk{ padding-top: 48px; } .sv-sep{ margin-bottom: 40px; } .sv-ma-blk--last{ padding-bottom: 80px; } }

/* entrance: cells fade in; hover stays instant */
.sv-cell{ opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s var(--sv-ease), background .35s ease; }
.sv-cells.is-in .sv-cell{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .sv-cell{ opacity: 1; transform: none; transition: none; }
  .sv-sep{ transform: none; transition: none; }
}