/* Quiet finish (preview): fewer of everything, after the 26 Oct comparison with Rejouice.
   1. One typeface for every word: Ukason Sans, light for anything big, the 480 cut for small labels.
   2. A flat ground: no grid or glow in the hero, one night and one paper, no cards on cards.
   3. Fewer sizes and colours: hero and footer wordmark are the only huge type; heading spacing loosened.
   4. The live project stack kept, the Rejouice way: on the night, edge to edge, one small corner, bigger screens, plain links.
   5. Phones: no header bar and no bar fixed at the bottom, a big hero line, service films edge to edge.
   App mock ups (the phone and laptop in How it works, the care dashboard) keep Geist, as a real screen would. */

/* ---------- 1. one typeface ---------- */
.dark-site { --font-text: var(--font); }
.dark-site .hd-phone, .dark-site .hd-laptop, .dark-site .care-inst { --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
.reel-bar .reel-open, .reel-bar .media-toggle.labelled, .reel-cursor, .reel-label { font-family: var(--font) !important; }

/* ---------- 2. a flat ground ---------- */
.dark-site { --night: #000000; --q-paper: #FFFFFF; --q-ink: #141414; --q-grey: #5E6562; --q-grey-night: #939B97; --q-hair: rgba(20, 26, 24, .14); }
body.dark-site { background: var(--night); }
.dark-site .hero::before, .dark-site .hero::after { content: none; display: none; }
.dark-site .hero, .dark-site .hero .film-frame { background: var(--night); }

/* paper sections run edge to edge, square, in one paper */
:root .dark-site .services, :root .dark-site .lw-light { margin-left: 0; margin-right: 0; border-radius: 0; background: var(--q-paper); }
:root .dark-site .sf { padding: 0 40px; gap: 0; }
/* the heading lines up with the panels and the header, on the same 40 px edge */
@media (min-width: 761px) { :root .dark-site .services > .wrap { max-width: none; padding-inline: 40px; } }
/* each service is a flat panel of the same paper, with a hairline on top, so the next one slides over like a page */
:root .dark-site .sf-ch { --sf-c2: var(--q-paper); border-radius: 0; box-shadow: inset 0 1px 0 var(--q-hair); }
:root .dark-site .sf-ch::after { background: var(--q-paper); }
:root .dark-site .sf-care .care { border-radius: 0; background: var(--q-paper); box-shadow: inset 0 1px 0 var(--q-hair); }
:root .dark-site .care-frame { background: transparent; }

/* ---------- 3. fewer sizes and colours ---------- */
:root .dark-site :is(h1, h2, h3), :root .dark-site :is(h1, h2, h3) :is(.pl-w, .pl-i, .sf-w, .sf-i) { letter-spacing: -.02em !important; }
/* section headings: 80 px at 1920 */
:root .dark-site :is(#services-title, #work-title, #process-title, #about-title, #faq-title, #contact-title) { font-size: clamp(40px, 4.17vw, 80px) !important; line-height: 1 !important; }
/* service names: 64 px at 1920 */
:root .dark-site .sf-ch h3, :root .dark-site .sf-care h3 { font-size: clamp(34px, 3.34vw, 64px) !important; line-height: 1 !important; max-width: 14ch; }
/* the hero line keeps to one line with the looser spacing */
:root .dark-site .hx .hx-title { font-size: min(5.72vw, 121px); }
/* 40 px: steps, prices, the footer email */
:root .dark-site :is(.hw-title, .sf-amt, .ft-mail) { font-size: clamp(28px, 2.1vw, 40px) !important; line-height: 1.05 !important; letter-spacing: -.02em; }
:root .dark-site :is(.faq summary, .tier-price) { font-size: clamp(22px, 1.46vw, 28px) !important; line-height: 1.15 !important; letter-spacing: -.01em; }
/* 20 px light: every short paragraph */
:root .dark-site :is(.hx-lede, .hx-lede span, .sf-line, .care-what, .hw-line, .about p.reveal, .faq details p, .contact-aside p, .contact-aside p a, .qw-name) { font-size: clamp(17px, 1.05vw, 20px) !important; line-height: 1.3 !important; font-weight: 400; letter-spacing: -.005em; }
/* 16 px: lists, links and buttons */
:root .dark-site :is(.sf-inc li, .sf-ask, .sf-btn, .btn-try, .tier-name, .textlink, .lw-call, .ft-call, .hx-link, .run-tests, .qw-line, .qw-go, .contact label, .contact .btn) { font-size: 16px !important; letter-spacing: 0; }
/* 14 px: small print, labels and meta */
:root .dark-site :is(.eyebrow, .sf-firm, .sf-tag, .sf-per, .sf-from, .sf-note, .sf-more, .sf-more a, .sf-offer, .sf-offer b, .care-small, .tier-price small, .si-lead, .hw-when, .form-note, .form-note a, footer small, .footer-base > span, footer .pl-local) { font-size: 14px !important; line-height: 1.45 !important; letter-spacing: 0 !important; }
.dark-site .nav .nav-links a { font-size: 15px; }

/* four text colours: ink and one grey on paper, paper and one grey on night; mint stays only in the hero line */
:root .dark-site :is(.services, .lw-light) :is(p, li, small, .sf-per, .sf-from, .si-lead, .tier-name) { color: var(--q-grey); }
:root .dark-site :is(.services, .lw-light) :is(h2, h3, b, summary, .sf-amt, .tier-price, .sf-ask, .sf-firm, .sf-tag, .sf-offer b) { color: var(--q-ink); }
:root .dark-site .sf-tag { color: var(--q-grey); }
:root .dark-site :is(.work, .process, .contact, footer) :is(.eyebrow, .hw-line, .form-note, small, .pl-local) { color: var(--q-grey-night); }

/* ---------- 4. the live project stack, the Rejouice way ---------- */
/* the cards sit straight on the night, edge to edge in the 40 px gutter, with no warm white sheet behind them */
:root .dark-site .work .work-sheet.pv-sheet { margin: 0; padding-top: 0; border-radius: 0; background: none; }
:root .dark-site .work .work-sheet.pv-sheet > .wrap { max-width: none; margin: 0; padding-inline: 40px; }
/* one small corner, no drop shadow */
:root .dark-site .pv-s-card { border-radius: 6px; box-shadow: none; }
/* the same three hues, flatter and darker, so the screens carry the colour */
:root .dark-site .pv-field--monpro { background: linear-gradient(170deg, #17302C 0%, #0E1D1B 55%, #0B1715 100%); }
:root .dark-site .pv-field--visitrove { background: linear-gradient(170deg, #182631 0%, #0F171D 55%, #0C1216 100%); }
:root .dark-site .pv-field--studio { background: linear-gradient(170deg, #241B15 0%, #17110E 55%, #120E0B 100%); }
/* bigger screens, so the work fills the card */
@media (min-width: 761px) {
  :root .dark-site .pv-s--monpro .pv-wide { left: 37%; top: 9%; width: 70%; }
  :root .dark-site .pv-s--monpro .pv-phone { left: 26%; top: 13%; width: 14%; }
  :root .dark-site .pv-s--visitrove .pv-wide { left: 30%; top: 8%; width: 62%; }
  :root .dark-site .pv-s--visitrove .pv-phone { right: 4%; top: 20%; width: 16.5%; }
  :root .dark-site .pv-s--studio .pv-full { left: 35%; top: 8%; width: 61%; }
}
/* labels in sentence case, like Rejouice's Highlights and See the work */
:root .dark-site .pv-meta { font: 400 14px/1 var(--font); letter-spacing: 0; text-transform: none; }
/* View project as a plain underlined link, not a filled button */
:root .dark-site .pv-s-go { gap: 8px; padding: 0 0 3px; border-radius: 0; overflow: visible; color: #EFECE5; font-size: 16px; font-weight: 400; line-height: 1.2;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .45s cubic-bezier(.22, .61, .36, 1); }
:root .dark-site .pv-s-go .arrow { width: auto; height: auto; border: 0; background: none !important; color: inherit !important; }
:root .dark-site .pv-s-card:hover .pv-s-go, :root .dark-site .pv-s-card:focus-visible .pv-s-go { background-size: 30% 1px; }
@media (max-width: 760px) {
  :root .dark-site .work .work-sheet.pv-sheet > .wrap { padding-inline: 16px; }
}

/* ---------- 5. phones, the Rejouice way ---------- */
/* the header has no bar on phones either: the name and Menu sit straight on the page in one ink that inverts against
   what is under it (header.css), Get in touch is plain underlined text, and the menu button has no ring */
@media (max-width: 900px) {
  :root .dark-site .nav, :root .dark-site .nav.scrolled, :root .dark-site .nav.on-dark, :root .dark-site .nav.on-dark.scrolled { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .dark-site .nav { --nav-ink: #F2EFE8; --nav-halo: rgba(0, 0, 0, .38); color: var(--nav-ink); }
  :root .dark-site .nav.open .ink-dark { --nav-ink: #F2EFE8; }
  :root .dark-site .nav.open, :root .dark-site .nav.open.on-light { --nav-ink: #F2EFE8; background: var(--night); }
  :root .dark-site .nav :is(.brand-u, .brand-d) { stroke: var(--nav-ink) !important; transition: stroke .08s linear; }
  :root .dark-site .nav .brand :is(span, b) { color: var(--nav-ink) !important; transition: color .08s linear; }
  :root .dark-site .nav .btn.btn-small { height: auto; padding: 0 0 2px; background: none !important; color: var(--nav-ink) !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none; font-size: 15px; font-weight: 400; transition: color .08s linear; }
  :root .dark-site .nav .menu-toggle { box-shadow: none; color: var(--nav-ink); }
}
@media (max-width: 760px) {
  /* nothing fixed to the bottom of the screen: Get in touch in the header is the one way to us that stays in view */
  :root .dark-site .mobile-cta { display: none !important; }
  /* the hero line big, the way Rejouice opens on its name: three lines gutter to gutter */
  :root .dark-site .hx .hx-title { font-size: 13.4vw; line-height: .98; }
  :root .dark-site .hx .hx-title .line > span.accent { white-space: normal; }
  /* each service film edge to edge, the words on the page's own gutter */
  :root .dark-site .sf { padding: 0; gap: 0; }
  :root .dark-site .sf-film, :root .dark-site .sf-ch--flip .sf-film { margin: 0; border-radius: 0; }
  :root .dark-site .sf-body, :root .dark-site .sf-ch--flip .sf-body { padding-inline: var(--gutter); }
  :root .dark-site .sf-ch h3, :root .dark-site .sf-care h3 { font-size: clamp(40px, 11.6vw, 54px) !important; }
}