/* A service on a page of its own (/risk-and-financial-planning), in the same design as /approach. approach.css is
   loaded first and gives the ground, the type, the nav, the links, the closing call and the footer; this file adds
   what only this page has. Top to bottom: the first screen (what the service is, with its line across the bottom),
   a question, how the planning is done, the ways to start, who it is for, and what you get beside a picture that
   stays in place. Sizes follow the window's width, as on the other pages. */

/* ── the first screen: what the service is, on the right; its line below, the second row starting further in.
   Every distance on this page is a share of the window's width, so the page keeps its proportions as it grows. ── */
.sv-top { width: min(33.3vw, 480px); margin: 11vw 0 0 55.7vw; }
.sv-top__what { padding: 1.05rem 0; border-top: 1px solid var(--cv-rule); border-bottom: 1px solid var(--cv-rule); text-indent: 4rem; }
.sv-top__links { display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; margin-top: 1.5rem; }
.sv-btn {
  display: flex; justify-content: space-between; align-items: center; min-height: 4.45vw; margin-top: 1.75rem; padding: 1.2rem 1.6rem;
  background: var(--cv-nt); color: var(--cv-ink); text-decoration: none;
  font: 400 1rem/1 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase;
  transition: background-color .4s ease;
}
.sv-btn::after { content: "\2197"; content: "\2197" / ""; font-size: 1.15rem; line-height: .8; }
.sv-btn:hover { background: #00574a; }
.cv-h1.sv-say { margin: 11.1vw var(--cv-gut) 0; font-size: 15vw; line-height: 1.1; }
.sv-say .cv-h1__l--2 { margin-left: 22.8vw; text-align: left; }
/* a longer line is set smaller, so its second row still fits the window */
.cv-h1.sv-say--long { font-size: 12vw; }
.cv-h1.sv-say--long .cv-h1__l--2 { margin-left: 12vw; }

/* ── the small pictures: a notched arch above and below, cut from two drawings that follow the picture's width ── */
.sv-shape { container-type: inline-size; }
.sv-shape img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url("/img/approach/shape-top.svg") top / 100% 23.2cqw no-repeat, url("/img/approach/shape-foot.svg") bottom / 100% 23.2cqw no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 46cqw) no-repeat;
  mask: url("/img/approach/shape-top.svg") top / 100% 23.2cqw no-repeat, url("/img/approach/shape-foot.svg") bottom / 100% 23.2cqw no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 46cqw) no-repeat;
}

/* ── a question, then how the planning is done: sentences in the light text, larger than the small lines ── */
.sv-ask { padding-top: 4.4vw; }
.sv-ask__p, .sv-how__p { width: min(53.3vw, 768px); margin-left: calc(58.3vw - min(26.65vw, 384px)); font-size: 1.5rem; font-weight: 280; line-height: 1.4; letter-spacing: .5px; text-indent: 4rem; }
.sv-tiles { display: flex; gap: min(1.6vw, 23px); margin: 8.9vw 0 0 calc(58.3vw - min(26.65vw, 384px)); }
.sv-tiles .sv-shape { width: min(12.1vw, 174px); aspect-ratio: 174 / 227; }
.sv-how { padding-top: 8.9vw; }
.sv-how__pics { display: flex; align-items: flex-start; gap: min(1.7vw, 24px); margin: 8.9vw 0 0 calc(58.3vw - min(26.65vw, 384px)); }
.sv-how__big { flex: none; width: min(34.1vw, 491px); aspect-ratio: 491 / 614; }
.sv-how__little { flex: none; width: min(17.1vw, 246px); aspect-ratio: 246 / 335; }
.sv-how__note { width: min(16.7vw, 240px); margin: 8.9vw 0 0 calc(58.3vw - min(26.65vw, 384px)); }

/* ── the ways to start. Each one's title bar stays at the top of the window while its own block goes by ── */
.sv-offers { margin-top: 8.9vw; padding-top: 4.4vw; border-bottom: 1px solid var(--cv-rule); }
.cv-h1.sv-h { margin: 0; font-size: 10vw; line-height: 1.1; }
.sv-h__l { display: block; margin-left: 15vw; }
.sv-h__l--2 { margin-left: 33.4vw; }
.sv-list { margin-top: 8.9vw; }
.sv-offer__big {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; height: min(10.83vw, 156px); padding: 0 var(--cv-gut);
  border-top: 1px solid var(--cv-rule); border-bottom: 1px solid var(--cv-rule); background: var(--cv-ground);
  font-family: var(--cv-display); font-weight: 595; font-stretch: normal; font-optical-sizing: auto;
  font-size: min(4.24vw, 61px); line-height: 1; letter-spacing: 0;
}
.sv-offer__in { position: relative; display: grid; grid-template-columns: 28vw min(16.7vw, 240px); gap: 0 10.3vw; padding: 4.44vw var(--cv-gut) 9.1vw; }
.sv-offer__pic { aspect-ratio: 398 / 265; }
.sv-offer__t { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.sv-offer__name, .sv-who__h { color: var(--cv-kh); font-size: 1.2rem; line-height: 1.4; letter-spacing: 1px; }
.sv-offer__t .cv-link { margin-top: 4.7vw; }
.sv-offer__price { position: absolute; top: 4.44vw; right: var(--cv-gut); max-width: 16.7vw; text-align: right; }

/* ── who it is for: small pictures and a short list on the right, then two sentences in the display face ── */
.sv-who { padding-top: 13.5vw; }
.sv-who__tiles { display: flex; justify-content: flex-end; gap: 1.6vw; margin-right: 12.5vw; }
.sv-who__tiles .sv-shape { width: 10.6vw; aspect-ratio: 153 / 203; }
.sv-who__list { margin: 6.6vw 12.5vw 0 0; text-align: right; }
.sv-who__h { margin-bottom: 1rem; }
.sv-who__list li + li { margin-top: 1rem; }
.sv-who__say {
  width: 75vw; margin: 6.7vw 0 0 12.5vw; text-indent: 6.7vw;
  font-family: var(--cv-display); font-weight: 595; font-stretch: normal; font-optical-sizing: auto;
  font-size: 3vw; line-height: 1.4; letter-spacing: .5px;
}

/* ── what you get: the picture stays while the list goes by ── */
.sv-get { display: grid; grid-template-columns: 45vw minmax(0, 1fr); margin-top: 13.3vw; }
.sv-get__pic { position: sticky; top: 0; align-self: start; height: 100vh; }
.sv-get__list { display: flex; flex-direction: column; gap: 11.1vw; padding: 11.1vw var(--cv-gut) 26vw 13.5vw; }
.sv-get__i { max-width: 26vw; }
.sv-get__i .cv-h3 { margin-bottom: 1.2rem; font-weight: 595; font-size: 4.44vw; line-height: 1.1; letter-spacing: 0; }
.sv-get__i .cv-up { max-width: 16.7vw; }
.sv-get__i .cv-up + .cv-up { margin-top: 1rem; }
.sv-end { height: 4vw; }

/* ── narrow windows: everything on one column from the left edge ── */
@media (max-width: 991px) {
  .sv-top { width: auto; margin: 11rem var(--cv-gut) 0; }
  .sv-top__what { font-size: 1.1rem; line-height: 1.27; text-indent: 2.5rem; }
  .sv-btn { min-height: 0; }
  .cv-h1.sv-say, .cv-h1.sv-say--long { margin: 4.5rem var(--cv-gut) 0; padding: 0; font-size: 15vw; line-height: 1.1; }
  .sv-say .cv-h1__l--2, .sv-say--long .cv-h1__l--2 { margin-left: 18vw; }

  .sv-ask { padding-top: 2rem; }
  .sv-how { padding-top: 5rem; }
  .sv-ask__p, .sv-how__p { width: 74.4vw; margin: 0 0 0 22.1vw; font-size: 1rem; line-height: 1.4; letter-spacing: .5px; text-indent: 2.5rem; }
  .sv-tiles { gap: 2.1vw; margin: 3rem var(--cv-gut) 0; }
  .sv-tiles .sv-shape { width: 29.6vw; aspect-ratio: 115 / 151; }
  .sv-tiles .sv-shape:nth-child(n+4) { display: none; }
  .sv-how__pics { gap: 2.1vw; margin: 3rem 0 0 var(--cv-gut); }
  .sv-how__big { width: 55.8vw; aspect-ratio: 217 / 272; }
  .sv-how__little { width: 35.3vw; aspect-ratio: 138 / 188; }
  .sv-how__note { width: 61.5vw; margin: 3rem 0 0 var(--cv-gut); font-size: .82rem; }

  .sv-offers { margin-top: 0; padding-top: 7rem; }
  .cv-h1.sv-h { font-size: 14vw; }
  .sv-h__l { margin-left: var(--cv-gut); }
  .sv-h__l--2 { margin-left: 20vw; }
  .sv-list { margin-top: 3.5rem; }
  .sv-offer__big { height: auto; padding: 2.55rem var(--cv-gut) 2.55rem; font-size: 10.8vw; line-height: 1; }
  .sv-offer__in { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 1.5rem var(--cv-gut) 6rem; }
  .sv-offer__pic { order: -2; width: 93vw; }
  .sv-offer__price { position: static; order: -1; max-width: none; margin-top: 1rem; text-align: left; }
  .sv-offer__t { max-width: 61.5vw; margin-top: 1rem; gap: .9rem; }
  .sv-offer__t .cv-up, .sv-offer__price, .sv-who__list li { font-size: .82rem; }
  .sv-get__i .cv-up { font-size: .95rem; line-height: 1.45; }
  .sv-offer__name { font-size: 1.2rem; }
  .sv-offer__t .cv-link { margin-top: 2.4rem; }

  .sv-who { padding-top: 6rem; }
  .sv-who__tiles { justify-content: center; gap: 2vw; margin: 0; }
  .sv-who__tiles .sv-shape { width: 22vw; aspect-ratio: 86 / 114; }
  .sv-who__list { margin: 3rem 0 0; text-align: center; }
  .sv-who__h { margin-bottom: .6rem; }
  .sv-who__list li + li { margin-top: .5rem; }
  .sv-who__say { width: 80vw; margin: 3.5rem 0 0 10vw; font-size: 1.7rem; line-height: 1.21; text-indent: 2.5rem; }

  .sv-get { display: grid; grid-template-columns: 25.9vw minmax(0, 1fr); margin-top: 7rem; }
  .sv-get__pic { position: sticky; top: 0; height: 100vh; }
  .sv-get__list { gap: 10rem; padding: 10rem var(--cv-gut) 6rem 8.2vw; }
  .sv-get__i { max-width: none; }
  .sv-get__i .cv-h3 { margin-bottom: 1rem; font-size: 10.5vw; line-height: 1.1; }
  .sv-get__i .cv-up { max-width: none; }
}

@media print {
  .sv-btn { background: none; color: #004137; border: 1px solid #004137; }
  .sv-tiles, .sv-who__tiles, .sv-how__pics, .sv-offer__pic, .sv-get__pic { display: none; }
  .sv-offer__big { background: none; }
  .sv-offer__name, .sv-who__h { color: #004137; }
  .sv-get { display: block; }
}