/* Care after launch and How it works, the Rejouice way (2 Nov). Measured on rejouice.com at 1920: one face, one 40 px edge,
   flat black chapters, tiny labels on hairlines, pictures that carry the page, no panels and no filled buttons.
   What we build stays as it is live (Alex 2 Nov 03:21 preferred it); its Care card moves out into its own chapter here.
   Loaded last on index.html only. */
.dark-site { --rx-w: #EFECE5; --rx-k: #000; --rx-soft-n: rgba(239, 236, 229, .58);
  --rx-hair-n: rgba(239, 236, 229, .18); --rx-gap: clamp(10px, 1.05vw, 20px);
  --rx-ease: cubic-bezier(.22, .61, .36, 1); }
.rx { position: relative; margin: 0; border-radius: 0; }
.rx-w { padding-inline: var(--lw-edge, 40px); }
.rx-night { background: #000; color: var(--rx-w); }
/* the light chapters (Alex 2 Nov 03:14: "way too dark now"): pure white, as the site's other light sections, with every
   rx colour flipped to black ink so the same rules serve both grounds */
.dark-site .rx-paper { --rx-w: #000; --rx-soft-n: rgba(0, 0, 0, .55); --rx-hair-n: rgba(0, 0, 0, .14); background: #FFF; color: #000; }
.dark-site .rx-paper { --sel-bg: #000; --sel-fg: #FFF; }
.dark-site .rx-paper :focus-visible { outline-color: #000; }
.rx h2, .rx h3, .rx p, .rx ul, .rx dl, .rx dd { margin: 0; }
.rx ul { padding: 0; list-style: none; }
.rx a { color: inherit; }

/* small labels on a line, as Rejouice's "Highlights / See the work" */
.rx-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 16px; font-size: 15px; line-height: 1.3; }
.rx-bar p, .rx-bar h2 { font: 400 15px/1.3 var(--font-text) !important; letter-spacing: 0 !important; color: inherit; }
:root .dark-site .rx-bar #services-title { font: 400 15px/1.3 var(--font-text) !important; letter-spacing: 0 !important; padding: 0; }
.rx-bar a, .rx-go a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--rx-ease), opacity .3s; }
.rx-bar a:hover, .rx-go a:hover { background-size: 0 1px; background-position: 100% 100%; }
.rx-h { font: 340 clamp(40px, 3.25vw, 62px)/1 var(--font) !important; letter-spacing: -.02em !important; }

/* ---------- Care after launch, the way Rejouice sets each engagement model on its services page: no dividing lines,
   one giant word, one centred line under it, the picture, then the prices on soft filled tiles ---------- */
.rx-care { padding-block: clamp(32px, 3vw, 56px) clamp(120px, 10vw, 200px); }
.rx-giant { margin: clamp(56px, 6vw, 120px) 0 0 !important; text-align: center; font: 300 clamp(128px, 24vw, 470px)/.78 var(--font) !important; letter-spacing: -.055em !important; color: inherit; }
.rx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rx-care-say { display: grid; justify-items: center; gap: 6px; margin: clamp(28px, 2.6vw, 48px) auto clamp(64px, 5.6vw, 108px); max-width: 60rem; text-align: center; text-wrap: balance; }
.rx-care-say p { font: 340 clamp(20px, 1.5vw, 28px)/1.2 var(--font); letter-spacing: -.015em; }
.rx-care-say p + p { color: var(--rx-soft-n); }
.rx-care-card { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; background: #000; }
.rx-care-card span { position: absolute; display: block; overflow: hidden; transition: transform 1.6s var(--rx-ease); }
.rx-care-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.rx-care-d { left: 29%; top: 11%; width: 59%; aspect-ratio: 16 / 10; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.rx-care-m { left: 12%; top: 20%; width: 15.5%; aspect-ratio: 393 / 852; border-radius: 22px; box-shadow: 0 0 0 5px #0B0B0B, 0 0 0 6px #2B2E2F, 0 40px 70px -24px rgba(0, 0, 0, .7); }
/* as the card crosses the screen the phone rises a little faster than the laptop (rx.js sets --rx-p from 1 to -1), so
   the two sit at different depths; no hover jumps */
.rx-care-card span { transition: none; will-change: transform; }
.rx-care-d { transform: translate3d(0, calc(var(--rx-p, 0) * 2.5%), 0); }
.rx-care-m { transform: translate3d(0, calc(var(--rx-p, 0) * 9%), 0); }
.rx-care-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rx-gap); margin-top: var(--rx-gap) !important; }
.rx-care-tiers li { display: grid; grid-template-rows: auto auto; align-content: start; gap: 14px; padding: clamp(20px, 1.7vw, 32px) 0 0; }
/* each price set like What we build's: a big light figure, its unit small beside it */
.rx-amt { display: flex; align-items: baseline; gap: 10px; font: 340 clamp(40px, 3.25vw, 62px)/1 var(--font); letter-spacing: -.03em; }
.rx-amt small { font: 400 15px/1 var(--font-text); letter-spacing: 0; color: var(--rx-soft-n); }
.rx-amt .rx-from { order: 0; }
.rx-care-tiers span { max-width: 30ch; font-size: 15px; line-height: 1.35; color: var(--rx-soft-n); }
.rx-care-note { margin-top: clamp(32px, 2.6vw, 48px) !important; font-size: 14px; line-height: 1.4; color: var(--rx-soft-n); }

/* ---------- How it works: the four steps read top to bottom straight under the title, every step's words always
   showing (the one on screen lit, the rest dimmed), and the photograph hard-edged like every other picture on the page ---------- */
@media (min-width: 761px) {
  :root .dark-site .lw-how .hw-story .hw-field { grid-template-rows: auto minmax(0, 1fr); padding-bottom: 40px; }
  :root .dark-site .lw-how .hw-story .hw-list { align-self: stretch; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4svh, 56px); }
  :root .dark-site .lw-how .hw-story .hw-item { opacity: .36; transition: opacity .5s var(--rx-ease), border-color .5s var(--rx-ease); }
  :root .dark-site .lw-how .hw-story .hw-item:hover { opacity: .62; }
  :root .dark-site .lw-how .hw-story .hw-item.is-on { opacity: 1; border-top-color: var(--rx-w); }
  :root .dark-site .lw-how .hw-story .hw-item .hw-title, :root .dark-site .lw-how .hw-story .hw-item:not(.is-on) .hw-when { color: var(--rx-w); }
  :root .dark-site .lw-how .hw-story .hw-more { grid-template-rows: 1fr; opacity: 1; }
  :root .dark-site .lw-how .hw-story .hw-line { color: var(--rx-w); }
  :root .dark-site .lw-how .hd .hd-shot, :root .dark-site .lw-how .hd-shot { border-radius: 0; }
}
@media (max-width: 760px) {
  .rx-bar { flex-wrap: wrap; row-gap: 10px; }
  .rx-bar > * { min-width: 0; overflow-wrap: anywhere; }
  .rx-amt { font-size: 44px; }
  .rx-giant { margin-top: 48px !important; }
  .rx-care-say { margin-bottom: 40px; }
  .rx-care-card { aspect-ratio: 4 / 5; }
  .rx-care-d { left: 6%; top: 6%; width: 88%; }
  .rx-care-m { left: 58%; top: 40%; width: 32%; border-radius: 16px; box-shadow: 0 0 0 4px #0B0B0B, 0 0 0 5px #2B2E2F, 0 30px 50px -20px rgba(0, 0, 0, .7); }
  .rx-care-tiers { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rx-care-tiers li { gap: 12px; padding: 16px 0 0; }
}

/* ---------- What we build, the live chapters with no dividing lines (Alex 2 Nov 03:32: "rejouice doesnt use all those
   line breakers"): the list, the price and the offer are held by space and one soft fill, not rules; and Rejouice's
   services bar, sticky under the menu, with all four services and their prices, the one on screen filled ---------- */
.dark-site .services .section-head::before { display: none; }
.dark-site .services .sf-ch { --sf-c2: #FFF; box-shadow: none; }
.dark-site .services .sf-ch::after { background: #FFF; }
.dark-site .services .sf-foot { border-top: 0; padding-top: 0; }
:root .dark-site .services .sf-inc li { padding: 4px 0; border-bottom: 0; }
.dark-site .services .sf-inc li:first-child { padding-top: 0; }
.dark-site .services .sf-offer { margin-top: 14px; padding: 0; border-top: 0; background: none; }
.rx-pick { display: none; }
@media (min-width: 1101px) and (min-height: 540px) {
  .dark-site .services { --rx-ph: 60px; }
  .dark-site .services .rx-pick { position: sticky; top: calc(var(--rx-nav, 64px) + 8px); z-index: 8; display: block; height: var(--rx-ph); margin-top: clamp(48px, 4.4vw, 80px); padding: 0 40px; background: #FFF; box-shadow: 0 -8px 0 #FFF; }
  .rx-pick ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: 100%; margin: 0; padding: 0; list-style: none; }
  /* once the bar sticks, it is one white band from the top of the screen to its foot, so the menu sits on white and
     the chapters slide away under it, never into the gap between the menu and the bar (Alex 2 Nov 20:06, "Header
     looks weird here": a film showed behind the menu, two links turned white on white and the last title showed
     above the bar). rx.js sets .is-stuck; hidden before then, so it never covers the section's opening lines and the
     menu's colour check doesn't read it */
  .dark-site .services .rx-pick::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--rx-nav, 64px) + 8px); background: #FFF; visibility: hidden; }
  .dark-site .services .rx-pick.is-stuck::before { visibility: visible; }
  .dark-site .services .rx-pick ul { opacity: calc(1 - var(--rx-out, 0)); }
  .rx-pick a { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; padding: 0 clamp(16px, 1.4vw, 26px); color: #000; text-decoration: none; transition: background-color .5s var(--rx-ease); }
  .rx-pick a:hover { background: rgba(20, 26, 24, .03); }
  .rx-pick li.is-on a { background: #F2F2F2; }
  .rx-pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.25 var(--font-text); }
  .rx-pick span { font: 400 14px/1.25 var(--font-text); color: rgba(0, 0, 0, .55); }
  .dark-site .services .sf { margin-top: 0; }
  .dark-site .services .sf-ch { top: calc(var(--sf-top) + var(--rx-ph)); --sf-h: min(calc(100svh - var(--sf-top) - var(--rx-ph) - var(--sf-gap)), 1180px); }
}
/* the bar takes 60 px of the screen, so on laptop-height screens the space round each title gives a little back */
@media (min-width: 1101px) and (min-height: 540px) and (max-height: 1000px) {
  .dark-site .services .sf-mid { padding-block: 6px; }
}
@media (min-width: 1101px) and (min-height: 540px) and (max-height: 760px) {
  .dark-site .services .sf-mid { padding-block: 0; }
  .dark-site .services .sf-links { margin-top: 12px; }
  .dark-site .services .sf-offer { margin-top: 8px; }
}

/* two weights only, as Rejouice (Suisse 300 big, 400 small): the big lines light, every small word regular, no medium */
:root .dark-site :is(.services, .rx-care) :is(.sf-tag, .sf-per, .sf-from, .sf-offer b, .rx-pick b, .sf-btn, .sf-ask) { font-weight: 400 !important; }
:root .dark-site .rx-care .rx-amt { font-family: var(--font) !important; font-weight: 300 !important; }