/* ==========================================================================
   NAUTILUS — ADCS & Ground Testing · Section 3 — Why Nautilus and contact (#contact)
   Engagement models as three boxes (same pattern as Prime / Shadow), each with
   a scope bar; then the closing CTA band (.ntl-cta). Prefix ad-.
   ========================================================================== */
/* ---- shared ADCS page base (identical in every ADCS section file: loading several is harmless) ---- */
.ad-strip, .ad-sec, .ntl-cta{
  --ad-wine: var(--theme-color, #79182d);
  --ad-pink: #FF9DB6;
  --ad-head: var(--heading-color, #000);
  --ad-text: var(--font-color, #5c5c5c);
  --ad-line: var(--border-color, #dcdcdc);
  --ad-bg: var(--bg-color, #F3F3F3);
  --ad-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --ad-hw: var(--font-weight-heading, 600);
  --ad-ease: cubic-bezier(.16, 1, .3, 1);
}
.ad-sec{ padding: 64px 0 0; scroll-margin-top: 100px; }
.ad-sec--last{ padding-bottom: 120px; }
.ad-sep{ position: relative; height: 1px; background: var(--ad-line); margin-bottom: 56px;
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ad-ease); }
.ad-sep::before{ content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--ad-wine); }
.ad-sep.is-in{ transform: none; }
.ad-title{ margin: 0; font-family: var(--ad-hfont); font-weight: var(--ad-hw); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -.01em; color: var(--ad-head); max-width: 900px; }
/* eyebrow with the dot, as above the section titles on the other pages */
.ad-eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--ad-hfont); font-weight: 400; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-color); }
.ad-eyebrow::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ad-head); box-shadow: 0 0 0 6px #E4E4E6; margin-left: 6px; }
.ad-intro{ max-width: 620px; margin: 18px 0 0; font-size: 17px; line-height: 1.65; color: var(--ad-text); }

/* title, then its intro at the same reading width as on the other pages (NEMO, services): ~700 px */
.ad-headline{ display: block; }
.ad-headline .ad-intro{ margin: 18px 0 0; max-width: 700px; text-wrap: pretty; }   /* left-aligned, no lone last word */
@media (max-width: 575px){ .ad-sec{ padding-top: 48px; } .ad-sep{ margin-bottom: 40px; } .ad-sec--last{ padding-bottom: 80px; } }
@media (prefers-reduced-motion: reduce){ .ad-sep{ transform: none; transition: none; } }

/* the demanding cases: a dark panel with four animated line icons — a visual pause in the text,
   deliberately unlike the light engagement boxes below. Icons draw in on view, then move gently. */
.ad-cases{ list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 14px; overflow: hidden; background: #111216;
  background-image: radial-gradient(90% 120% at 100% 0%, rgba(121,24,45,.55), transparent 60%); }
.ad-cases li{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 34px 30px 36px; }
.ad-cases li + li{ border-left: 1px solid rgba(255,255,255,.08); }
.ad-case-art{ width: 116px; height: 116px; overflow: visible; }
.ad-cases span{ font-family: var(--ad-hfont); font-weight: var(--ad-hw); font-size: 18px; line-height: 1.3; color: #fff; }
.ad-dr{ fill: none; stroke: var(--ad-pink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.4s var(--ad-ease); }
.ad-dr--in{ stroke: rgba(255,157,182,.45); stroke-width: 1.5; }
.ad-dot{ fill: #fff; } .ad-star{ fill: #fff; } .ad-hit{ fill: none; stroke: #fff; stroke-width: 1.5; }
.ad-cases.is-in .ad-dr{ stroke-dashoffset: 0; }
.ad-cases.is-in li:nth-child(2) .ad-dr{ transition-delay: .25s; }
.ad-cases.is-in li:nth-child(3) .ad-dr{ transition-delay: .5s; }
.ad-cases.is-in li:nth-child(4) .ad-dr{ transition-delay: .75s; }

/* hand-over to the engagement models: same section, lighter heading, less space */
.ad-engage-head{ margin: 72px 0 24px; padding-top: 40px; border-top: 1px dashed #CFCFD5; }
.ad-engage-kick{ display: block; margin-bottom: 8px; font-family: var(--ad-hfont); font-weight: var(--ad-hw);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ad-wine); }
.ad-engage-head .ad-block-title{ margin: 0; text-transform: none; font-size: clamp(22px, 2.2vw, 28px); }
.ad-block-title{ margin: 0; font-family: var(--ad-hfont); font-weight: var(--ad-hw); font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15; text-transform: uppercase; color: var(--ad-head); }
.ad-models{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ad-line); border-left: 1px solid var(--ad-line); }
.ad-model{ position: relative; display: flex; flex-direction: column; padding: 30px 30px 32px; background: var(--ad-bg);
  border-right: 1px solid var(--ad-line); border-bottom: 1px solid var(--ad-line); transition: background .35s; }
.ad-model::before{ content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--ad-wine);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ad-ease); }
.ad-model:hover{ background: #fff; } .ad-model:hover::before{ transform: scaleX(1); }
.ad-model-ico svg{ display: block; width: 38px; height: 38px; margin-bottom: 18px; fill: none; stroke: var(--ad-wine); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ad-model h4{ margin: 0 0 10px; font-family: var(--ad-hfont); font-weight: var(--ad-hw); font-size: 20px; color: var(--ad-head); text-transform: none; }
.ad-model p{ margin: 0 0 24px; font-size: 15px; line-height: 1.62; color: var(--ad-text); }
/* scope bar: which parts of the attitude chain each engagement covers */
.ad-scope{ list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ad-scope li{ display: flex; flex-direction: column; gap: 7px; }
.ad-scope li::before{ content: ""; height: 5px; border-radius: 3px; background: #DDDDE2; }
.ad-scope li.is-in::before{ background: var(--ad-wine); }
.ad-scope span{ font-size: 11.5px; line-height: 1.25; color: #9A9AA4; min-height: 2.5em; }   /* two lines everywhere, so the bars line up across the boxes */
.ad-scope li.is-in span{ color: var(--ad-head); font-weight: 600; }
.ad-model{ opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s var(--ad-ease), background .35s; }
.ad-models.is-in .ad-model{ opacity: 1; transform: none; }
.ad-models.is-in .ad-scope li::before{ animation: ad-fill .6s var(--ad-ease) both; }
.ad-models.is-in .ad-scope li:nth-child(2)::before{ animation-delay: .08s; }
.ad-models.is-in .ad-scope li:nth-child(3)::before{ animation-delay: .16s; }
.ad-models.is-in .ad-scope li:nth-child(4)::before{ animation-delay: .24s; }
@keyframes ad-fill{ from{ transform: scaleX(0); transform-origin: left; } to{ transform: scaleX(1); transform-origin: left; } }

/* closing CTA band — wine, so it stands apart from the black footer; faint orbit lines for texture.
   On wine the quote button stays white and turns ink on hover (wine on wine would vanish). */
.ntl-cta{ background: #111216; color: #fff; padding: 96px 0; }
.ntl-cta--wine{ position: relative; overflow: hidden; background: var(--ad-wine);
  background-image: radial-gradient(80% 120% at 100% 0%, #A11A3D 0%, rgba(161,26,61,0) 60%); }
.ntl-cta--wine::after{ content: ""; position: absolute; right: -120px; top: 50%; width: 620px; height: 620px; transform: translateY(-50%);
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 70px transparent, inset 0 0 0 70px transparent;
  pointer-events: none; }
.ntl-cta--wine::before{ content: ""; position: absolute; right: 20px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%);
  border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); pointer-events: none; }
.ntl-cta--wine .container{ position: relative; z-index: 1; }
.ntl-cta--wine p{ color: rgba(255,255,255,.82); }
.ntl-cta-inner{ display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.ntl-cta h2{ margin: 0; font-family: var(--ad-hfont); font-weight: var(--ad-hw); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08;
  text-transform: uppercase; color: #fff; max-width: 820px; }
.ntl-cta p{ margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.66); }
.ntl-cta-actions{ display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ntl-cta-btn{ display: inline-flex; align-items: center; text-decoration: none; font-family: var(--ad-hfont); font-weight: var(--ad-hw);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ntl-cta-btn-label{ padding: 16px 32px; border-radius: 40px; background: #fff; color: #111216; transition: background .3s, color .3s; }
.ntl-cta-btn-arrow{ width: 50px; height: 50px; border-radius: 50%; margin-left: -8px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #111216; transition: transform .35s var(--ad-ease), background .3s, color .3s; }
.ntl-cta-btn-arrow svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntl-cta-btn:hover .ntl-cta-btn-arrow{ transform: translateX(4px) rotate(45deg); }
.ntl-cta-btn:hover .ntl-cta-btn-label, .ntl-cta-btn:hover .ntl-cta-btn-arrow{ background: var(--ad-wine); color: #fff; }
.ntl-cta--wine .ntl-cta-btn:hover .ntl-cta-btn-label, .ntl-cta--wine .ntl-cta-btn:hover .ntl-cta-btn-arrow{ background: #111216; color: #fff; }
.ntl-cta-btn:focus-visible{ outline: none; } .ntl-cta-btn:focus-visible .ntl-cta-btn-label{ outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 991px){
  .ad-cases{ grid-template-columns: repeat(2, 1fr); }
  .ad-cases li:nth-child(3){ border-left: 0; } .ad-cases li:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.08); }
  .ad-models{ grid-template-columns: 1fr; }
  .ntl-cta{ padding: 72px 0; } .ntl-cta-inner{ grid-template-columns: 1fr; gap: 32px; } .ntl-cta-actions{ align-items: flex-start; }
}
@media (max-width: 575px){ .ad-model{ padding: 24px 22px 26px; } .ad-cases{ grid-template-columns: 1fr; } .ad-cases li{ flex-direction: row; align-items: center; padding: 22px 22px; } .ad-cases li + li{ border-left: 0; border-top: 1px solid rgba(255,255,255,.08); } .ad-case-art{ width: 72px; height: 72px; flex: none; } .ad-engage-head{ margin-top: 56px; padding-top: 32px; } }
@media (prefers-reduced-motion: reduce){ .ad-dr{ stroke-dashoffset: 0; transition: none; }
  .ad-model{ opacity: 1; transform: none; transition: none; } .ad-scope li::before{ animation: none !important; } }