/* ==========================================================================
   NAUTILUS — Mission Analysis & Operational Navigation · 02 Constellation design
   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: 20px; }

/* 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: 8px;
  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 */
/* accent cell: dark, spans two columns, carries the links to the next service and to NEMO */
.sv-cell--accent{ grid-column: span 2; display: flex; flex-direction: column; justify-content: center;
  background: #111216; background-image: radial-gradient(90% 90% at 100% 0%, rgba(121,24,45,.55), transparent 60%); }
.sv-cell-kick{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #FF9DB6; }
.sv-cell-kick::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-cell--accent p{ font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 620px; }
.sv-cell--accent a{ color: #fff; text-decoration: none; border-bottom: 1.5px solid #FF9DB6; transition: color .3s; }
.sv-cell--accent a:hover{ color: #FF9DB6; }

/* ---------- 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-cell--accent{ grid-column: span 2; }
  .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--accent{ grid-column: auto; }
  .sv-cell{ padding: 28px 22px 30px; }
  .sv-viz{ height: 180px; }
}

@media (max-width: 575px){ .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; }
}


/* ===================== next step card =====================
   Part of the section (same width as the cells), not a page-end band: light
   card with a wine edge, a quote button and a jump to Operational Navigation. */
.sv-next{
  margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 30px 34px; background: #fff; border: 1px solid var(--sv-line); border-left: 3px solid var(--sv-wine); border-radius: 6px;
}
.sv-next-kick{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sv-wine); }
.sv-next-kick::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-next-text p{ margin: 0; font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--sv-head); }
.sv-next-actions{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }

.sv-btn{ display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.sv-btn-label{ background: var(--sv-wine); color: #fff; padding: 16px 28px; border-radius: 50px; }
.sv-btn-arrow{ width: 50px; height: 50px; border-radius: 50%; margin-left: -10px; flex: none;
  background: var(--sv-wine); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .35s var(--sv-ease); }
.sv-btn-arrow svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-btn:hover .sv-btn-arrow{ transform: translateX(5px) rotate(45deg); }      /* movement only, colours never change */
.sv-btn:focus-visible{ outline: none; } .sv-btn:focus-visible .sv-btn-label{ outline: 2px solid var(--sv-wine); outline-offset: 3px; }

.sv-jump{ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none;
  font-family: var(--sv-hfont); font-weight: var(--sv-hw); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sv-head); border-bottom: 1.5px solid var(--sv-line); padding-bottom: 4px; transition: border-color .3s, color .3s; }
.sv-jump svg{ width: 14px; height: 14px; fill: none; stroke: var(--sv-wine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--sv-ease); }
.sv-jump:hover{ border-bottom-color: var(--sv-wine); color: var(--sv-wine); }
.sv-jump:hover svg{ transform: translateY(3px); }

@media (max-width: 991px){
  .sv-next{ grid-template-columns: 1fr; gap: 22px; }
  .sv-next-actions{ justify-content: flex-start; }
}
@media (max-width: 575px){
  .sv-next{ padding: 24px 22px; }
  .sv-next-actions{ flex-direction: column; align-items: flex-start; gap: 18px; }
}