/* ==========================================================================
   midnyte-service.css — the twelve service landing pages, and only those.

   /services/<slug> on midnytemedia.com and /ydelser/<slug> on midnyte.dk.
   Generated by make-services.py; nothing else links this file.

   WHY A SHARED SHEET AND NOT AN INLINE BLOCK. build.html, fractional-cto.html
   and venture.html each carry about 69 KB of page-scoped CSS, hand-built for
   that one page. Twelve copies of that is not a design system, it is a
   maintenance bill, and a change to the look would then have to be made
   twelve times. So the components live here once.

   WHY sv- AND NOT ed-. Those pages define .ed-* inline. Nothing here may ever
   collide with them, now or after someone adds a section to one of them, so
   this file owns its own prefix and borrows only what is genuinely shared and
   already global in assets/midnyte-v2.css and midnyte-shell.css:

     --shell          the page gutter
     .rv / .rv.in     the scroll reveal, driven by midnyte-v2.js
     data-bg="..."    the scroll background system, also midnyte-v2.js
     .mn-cta          the pill button, filled
     .mn-cta-ghost    the same pill, outlined

   Every measurement below — the clamps, the letter-spacing, the greys — is
   taken from fractional-cto.html rather than invented, so these pages are of
   a piece with the landing pages that already exist.
   ========================================================================== */

/* ---------------------------------------------------------------- shell --- */
.sv-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--shell); }
.sv-sec  { position: relative; z-index: 1; padding: clamp(74px, 8.2vw, 132px) 0; }

.sv-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(var(--sv-accent, 198,182,255), 0.72); margin-bottom: clamp(26px, 3.4vw, 48px);
}

/* ----------------------------------------------------------------- hero --- */
/* Deliberately NOT full-viewport. These pages are reached from an ad or a
   search result, and a hero that fills the screen puts the first real
   sentence below the fold on a laptop. The job here is to say what this is
   and offer the two actions without a scroll. */
.sv-hero {
  position: relative; z-index: 1;
  padding: clamp(88px, 13vh, 150px) var(--shell) clamp(48px, 7vh, 86px);
}
.sv-hero-in { max-width: 1240px; margin: 0 auto; }

/* Two columns, in the proportion services.html already uses for its service
   panels. The text has to keep its measure, so the artwork takes the smaller
   share and gets out of the way entirely on a phone. */
.sv-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.sv-hero-r { display: grid; place-items: center; }
.sv-hero-art { width: min(100%, 360px); height: auto; }

/* The glow. Every other landing page gets its colour from the WebGL hero or
   from data-bg alone, and on a page with neither the first screen reads flat.
   This is one radial wash in the page's own accent, behind everything, and
   it costs no script and no image. */
.sv-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 70% at 78% 38%, rgba(var(--sv-accent, 198,182,255), 0.16), transparent 70%),
    radial-gradient(48% 56% at 8% 8%, rgba(var(--sv-accent, 198,182,255), 0.07), transparent 72%);
}
.sv-hero-in { position: relative; z-index: 1; }

.sv-kicker {
  margin: 0 0 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(var(--sv-accent, 198,182,255), 0.85);
}
.sv-h1 {
  margin: 0 0 clamp(18px, 2.6vw, 30px);
  font-size: clamp(38px, 7.4vw, 92px); font-weight: 400; line-height: 0.96;
  letter-spacing: -0.045em; text-transform: uppercase; color: #f6f5fa;
  text-wrap: balance;
}
.sv-lede {
  margin: 0 0 clamp(28px, 4vw, 40px); max-width: 46ch;
  font-size: clamp(17px, 2.1vw, 21px); font-weight: 300; line-height: 1.55;
  color: rgba(245,245,245,0.74);
}

.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sv-trust {
  margin: clamp(22px, 3vw, 32px) 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.46);
}
.sv-trust span { display: inline-flex; align-items: center; gap: 8px; }
.sv-trust span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(var(--sv-accent, 198,182,255), 0.65); flex-shrink: 0;
}

/* ------------------------------------------------------------ statement --- */
.sv-statement {
  margin: 0; max-width: 22ch;
  font-size: clamp(26px, 4.4vw, 58px); font-weight: 300; line-height: 1.16;
  letter-spacing: -0.035em; color: #f5f5f5;
}
.sv-statement-note {
  margin: clamp(24px, 3.4vw, 36px) 0 0; max-width: 54ch;
  font-size: 16px; line-height: 1.68; color: rgba(245,245,245,0.6);
}

/* -------------------------------------------------------- what it covers --- */
.sv-h2 {
  margin: 0 0 clamp(30px, 4vw, 48px);
  font-size: clamp(25px, 3.6vw, 44px); font-weight: 300; letter-spacing: -0.035em;
  line-height: 1.1; color: #f2f0fa; text-wrap: balance;
}
.sv-grid {
  display: grid; gap: 1px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sv-card { background: #09090e; padding: clamp(24px, 3vw, 34px); }
.sv-card h3 {
  margin: 0 0 10px; font-size: 17.5px; font-weight: 500; letter-spacing: -0.01em;
  color: #efedf6;
}
.sv-card p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(245,245,245,0.62); }

/* -------------------------------------------------------------- process --- */
.sv-steps { display: grid; gap: 0; }
.sv-step {
  display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 2.6vw, 32px);
  padding: clamp(22px, 2.8vw, 30px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sv-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.sv-step-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.14em; color: rgba(var(--sv-accent, 198,182,255), 0.75);
  padding-top: 4px;
}
.sv-step h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.012em;
  color: #efedf6;
}
.sv-step p { margin: 0; font-size: 15.5px; line-height: 1.64; color: rgba(245,245,245,0.62); }

/* ----------------------------------------------------------------- spec --- */
.sv-spec {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: clamp(26px, 3.2vw, 38px) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sv-spec dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,245,245,0.42); margin-bottom: 12px;
}
.sv-spec dd {
  margin: 0; font-size: clamp(19px, 2.4vw, 25px); font-weight: 400;
  letter-spacing: -0.02em; color: #f6f5fa;
}

/* ---------------------------------------------------------------- prose --- */
/* The part a search engine reads and a careful buyer actually wants. Same
   measure as the answer pages, because it is the same kind of reading. */
.sv-prose { max-width: 70ch; }
.sv-prose h2 {
  margin: clamp(38px, 5vw, 56px) 0 clamp(12px, 1.6vw, 16px);
  font-size: clamp(21px, 2.7vw, 27px); font-weight: 400; letter-spacing: -0.015em;
  color: #efedf6; text-wrap: balance;
}
.sv-prose h2:first-child { margin-top: 0; }
.sv-prose h3 {
  margin: clamp(26px, 3.4vw, 34px) 0 10px; font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em; color: #e8e5f2;
}
.sv-prose p { margin: 0 0 clamp(15px, 2vw, 20px); font-size: 16px; line-height: 1.7;
  color: rgba(245,245,245,0.72); }
.sv-prose ul { margin: 0 0 20px; padding-left: 20px; }
.sv-prose li { margin-bottom: 9px; font-size: 16px; line-height: 1.64;
  color: rgba(245,245,245,0.72); }
.sv-prose a, .sv-card a, .sv-step p a, .sv-faq a {
  color: rgba(198,182,255,0.92); text-decoration: none;
  border-bottom: 1px solid rgba(198,182,255,0.3);
}
.sv-prose a:hover, .sv-card a:hover, .sv-step p a:hover, .sv-faq a:hover {
  color: #dcd2ff; border-bottom-color: rgba(220,210,255,0.6);
}

/* ------------------------------------------------------------ accordion --- */
/* The deep copy and the questions, foldable.

   A landing page that opens with a thousand words of body text asks the
   reader to find their own way in. Collapsed, the headings become a list of
   what the page answers and the reader opens the one they came for.

   NATIVE <details>, deliberately: no script, keyboard and screen-reader
   behaviour for free, and the browser's own find-in-page opens a closed
   section in current browsers. Content inside it stays in the DOM, so it is
   crawled and indexed like any other text -- collapsing is a reading
   decision, not an SEO one.

   The first item of each group is open, so the page never shows a column of
   shut doors. */
.sv-acc { border-top: 1px solid rgba(255,255,255,0.09); max-width: 78ch; }
.sv-acc-i { border-bottom: 1px solid rgba(255,255,255,0.09); }
.sv-acc-i > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(17px, 2.3vw, 23px) 0;
  font-size: clamp(16.5px, 1.95vw, 19px); font-weight: 500; letter-spacing: -0.012em;
  color: rgba(245,245,245,0.92); transition: color 0.25s ease;
}
.sv-acc-i > summary::-webkit-details-marker { display: none; }
.sv-acc-i > summary::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-right: 4px;
  border-right: 1.5px solid rgba(var(--sv-accent, 198,182,255), 0.85);
  border-bottom: 1.5px solid rgba(var(--sv-accent, 198,182,255), 0.85);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-acc-i[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.sv-acc-i > summary:hover { color: #fff; }
.sv-acc-b { padding: 0 0 clamp(20px, 2.6vw, 30px); max-width: 70ch; }
.sv-acc-b > :last-child { margin-bottom: 0; }
.sv-acc-b h3 {
  margin: clamp(20px, 2.6vw, 26px) 0 9px; font-size: 16.5px; font-weight: 600;
  letter-spacing: -0.005em; color: #e8e5f2;
}
.sv-acc-b h3:first-child { margin-top: 0; }
.sv-acc-b p { margin: 0 0 clamp(14px, 1.8vw, 18px); font-size: 16px; line-height: 1.7;
  color: rgba(245,245,245,0.72); }
.sv-acc-b ul { margin: 0 0 18px; padding-left: 20px; }
.sv-acc-b li { margin-bottom: 9px; font-size: 16px; line-height: 1.64;
  color: rgba(245,245,245,0.72); }
.sv-acc-b a {
  color: rgba(198,182,255,0.92); text-decoration: none;
  border-bottom: 1px solid rgba(198,182,255,0.3);
}
.sv-acc-b a:hover { color: #dcd2ff; border-bottom-color: rgba(220,210,255,0.6); }
@media (prefers-reduced-motion: reduce) {
  .sv-acc-i > summary::after { transition: none; }
}

/* ------------------------------------------------------------------ faq --- */
.sv-faq { max-width: 70ch; }
.sv-faq dl { margin: 0; }
.sv-faq dt {
  margin: 0 0 8px; font-size: 17px; font-weight: 500; color: rgba(245,245,245,0.94);
}
.sv-faq dd {
  margin: 0 0 26px; font-size: 15.5px; line-height: 1.66; color: rgba(245,245,245,0.62);
}
.sv-faq dd:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- the ask --- */
/* Three chances to act: the hero, this band in the middle, and the close.
   The band is quieter than either so it reads as an offer rather than an
   interruption of the page it sits inside. */
.sv-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(24px, 3.2vw, 36px) clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(150,120,255,0.22); border-radius: 18px;
  background: linear-gradient(140deg, rgba(150,120,255,0.1), rgba(150,120,255,0.02));
}
.sv-band p {
  margin: 0; max-width: 52ch; font-size: clamp(16px, 2vw, 19px); font-weight: 300;
  line-height: 1.5; color: rgba(245,245,245,0.86);
}
.sv-band b { font-weight: 600; color: #f6f5fa; }

.sv-talk { position: relative; z-index: 1; text-align: center;
  padding: clamp(84px, 12vh, 160px) var(--shell) clamp(70px, 10vh, 130px); }
.sv-talk-h {
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  font-size: clamp(32px, 6vw, 80px); font-weight: 300; letter-spacing: -0.045em;
  line-height: 1.02; color: #f6f5fa; text-wrap: balance;
}
.sv-talk-lede {
  margin: 0 auto clamp(30px, 4.5vh, 46px); max-width: 54ch;
  font-size: clamp(16px, 2vw, 19px); font-weight: 300; line-height: 1.6;
  color: rgba(245,245,245,0.66);
}
.sv-talk .sv-actions { justify-content: center; }

/* ---------------------------------------------------------------- more --- */
.sv-more { max-width: 70ch; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.09); }
.sv-more-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,245,245,0.4); margin-bottom: 14px;
}
.sv-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sv-more li { margin: 0; font-size: 15.5px; }
.sv-more a {
  color: rgba(245,245,245,0.82); text-decoration: none;
  border-bottom: 1px solid rgba(198,182,255,0.28);
}
.sv-more a:hover { color: #fff; border-bottom-color: rgba(198,182,255,0.7); }

/* ----------------------------------------------------------------- misc --- */
@media (max-width: 720px) {
  /* The desktop rhythm leaves a hole on a phone: the hero's foot and the next
     section's head stack into most of a screen of nothing. Tightened here
     only — the wide layout is the one the rest of the site is set to. */
  .sv-hero { padding-bottom: clamp(26px, 5vh, 46px); }
  .sv-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-hero-r { margin-top: clamp(28px, 5vh, 44px); }
  .sv-hero-art { width: min(74%, 240px); }
  .sv-sec  { padding: clamp(52px, 9vw, 92px) 0; }
  .sv-step { grid-template-columns: 1fr; gap: 6px; }
  .sv-step-n { padding-top: 0; }
  .sv-band { flex-direction: column; align-items: flex-start; }
  .sv-actions .mn-cta { flex: 1 1 auto; justify-content: center; }
}