/* What we build, as films: each service gets a chapter the height of the screen, with its film edge to edge on one side
   and its words on a field of the film's own colour, fading to night. The chapters stack as you scroll: the next one
   rises over the last, which settles back and dims. Phones get each service's still in place of the film.
   Colours are taken from the edge of each film, so the film melts into its field with no seam. */
.sf { --sf-top: 72px; --sf-gap: clamp(8px, .8vw, 14px); --sf-ease: cubic-bezier(.22, .61, .36, 1); --sf-w: #EFECE5;
  display: grid; gap: var(--sf-gap); margin: clamp(56px, 5.6vw, 104px) 0 0; padding: 0 var(--sf-gap); }
/* every chapter sits on the same ground; the colour comes from the films alone (light, set below) */
.sf-ch { --sf-c2: #0F0F0F; }

.sf-ch { --sf-in: 1; --sf-cover: 0; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; isolation: isolate;
  border-radius: 10px; color: var(--sf-w); scroll-margin-top: var(--sf-top);
  background: var(--sf-c2); }
.sf-ch--flip { grid-template-columns: minmax(0, 1fr) auto; }
.sf-ch--flip .sf-film { order: 2; }
/* text selection in the chapters: the services colours from styles.css (.dark-site .services) always won over the
   two .sf-ch rules that were here, so they are gone (see the note on ::selection in styles.css) */
/* the dimming as the next chapter covers this one */
.sf-ch::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #070A09; opacity: calc(var(--sf-cover) * .62); }

/* ---------- the film: full height, its inner edge feathered into the field ---------- */
.sf-film { --sf-pad: clamp(10px, 1vw, 18px); position: relative; display: block; align-self: stretch; height: auto; margin: var(--sf-pad) 0 var(--sf-pad) var(--sf-pad); aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 6px; background: #000000; color: inherit; }
.sf-ch--flip .sf-film { margin: var(--sf-pad) var(--sf-pad) var(--sf-pad) 0; }
.sf-film video, .sf-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-film video { transform: scale(calc(1.06 - var(--sf-in, 1) * .045 - var(--sf-on, 0) * .015)); transition: scale 1.4s var(--sf-ease); }
.sf-still { display: none; }
.sf-film:hover video { scale: 1.03; }
.sf-try { position: absolute; left: clamp(20px, 2vw, 36px); bottom: clamp(20px, 2vw, 36px); z-index: 2; display: inline-flex; gap: 8px; align-items: center; height: 40px; padding: 0 16px;
  border-radius: 3px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 14px/1 var(--font-text, "Geist", sans-serif); color: var(--sf-w);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--sf-ease), transform .5s var(--sf-ease); }
.sf-ch--flip .sf-try { left: auto; right: clamp(20px, 2vw, 36px); }
.sf-film:hover .sf-try, .sf-film:focus-visible .sf-try { opacity: 1; transform: none; }
.sf-film:focus-visible { outline: 2px solid var(--sf-w); outline-offset: -6px; }
.sf-pp { position: absolute; z-index: 6; top: clamp(16px, 1.6vw, 28px); left: clamp(16px, 1.6vw, 28px); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 3px;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--sf-w); cursor: pointer; opacity: .8; transition: opacity .3s; }
.sf-pp:hover, .sf-pp:focus-visible { opacity: 1; }
.sf-pp svg { width: 12px; height: 12px; }
.sf-ch--flip .sf-pp { left: auto; right: clamp(16px, 1.6vw, 28px); }

/* ---------- the words ---------- */
.sf-body { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding: clamp(22px, min(2.8vw, 4.6vh), 56px) clamp(26px, 3.4vw, 72px); }
.sf-ch--flip .sf-body { padding-left: clamp(26px, 3.4vw, 72px); }
.sf-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sf-top p { margin: 0; font: 500 13.5px/1.2 var(--font-text, "Geist", sans-serif); letter-spacing: -.005em; }
.sf-firm { display: inline-flex; align-items: center; gap: 10px; color: rgba(239, 236, 229, .82); }
.sf-firm svg { width: 22px; height: 22px; flex: none; }
.sf-tag { color: var(--mint); }
.sf-mid { align-self: center; padding: clamp(24px, 3vw, 56px) 0; }
.dark-site .sf-title { margin: 0 0 0 -.04em; max-width: 9.5ch; font: 500 clamp(48px, min(5.6vw, 11.5vh), 120px)/.9 var(--font); letter-spacing: -.055em; color: var(--sf-w); text-wrap: balance; }
.sf-title .sf-w { display: inline-block; overflow: hidden; padding: .1em .02em .14em; margin: -.1em -.02em -.14em; vertical-align: top; }
.sf-title .sf-i { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--sf-ease); transition-delay: var(--d, 0s); }
.sf-ch.sf-on .sf-i { transform: none; }
.dark-site .sf-line { margin: clamp(18px, 1.8vw, 30px) 0 0; max-width: 36ch; font: 400 clamp(17px, 1.2vw, 21px)/1.45 var(--font-text, "Geist", sans-serif); color: rgba(239, 236, 229, .78); }
.sf-line, .sf-foot { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--sf-ease) .35s, transform 1s var(--sf-ease) .35s; }
.sf-foot { transition-delay: .5s; }
.sf-ch.sf-on .sf-line, .sf-ch.sf-on .sf-foot { opacity: 1; transform: none; }
.no-js .sf-i, .no-js .sf-line, .no-js .sf-foot { opacity: 1; transform: none; }

.sf-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 56px); align-items: end; padding-top: 22px; border-top: 1px solid rgba(239, 236, 229, .2); }
.sf-inc { margin: 0; padding: 0; list-style: none; align-self: start; }
.dark-site .sf-inc li { padding: 10px 0; border-bottom: 1px solid rgba(239, 236, 229, .1); font: 400 15px/1.35 var(--font-text, "Geist", sans-serif); color: rgba(239, 236, 229, .8); }
.sf-inc li:first-child { padding-top: 0; }
.sf-deal p { margin: 0; }
.sf-price { display: flex; align-items: baseline; gap: 10px; }
.dark-site .sf-amt { font: 500 clamp(40px, 3.4vw, 68px)/1 var(--font); letter-spacing: -.045em; color: var(--sf-w); }
.dark-site .sf-from, .dark-site .sf-per { font: 500 14px/1 var(--font-text, "Geist", sans-serif); color: rgba(239, 236, 229, .66); }
.sf-from { order: -1; }
.dark-site .sf-note, .dark-site .sf-more { margin-top: 8px; font: 400 14px/1.45 var(--font-text, "Geist", sans-serif); color: rgba(239, 236, 229, .66); }
.dark-site .sf-offer { margin-top: 16px; padding-top: 14px; max-width: 38ch; border-top: 1px solid rgba(239, 236, 229, .16); font: 400 14.5px/1.45 var(--font-text, "Geist", sans-serif); color: rgba(239, 236, 229, .7); }
.sf-offer b { display: block; font-weight: 500; color: var(--sf-w); }
.sf-more a { color: inherit; text-underline-offset: 3px; }
.sf-more a:hover { color: var(--sf-w); }
.sf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.dark-site .sf-btn { display: inline-flex; align-items: center; height: 48px; padding-left: 20px; overflow: hidden; border-radius: 3px; background: var(--sf-w); color: #000000; text-decoration: none;
  font: 600 15px/1 var(--font-text, "Geist", sans-serif); transition: background-color .3s var(--sf-ease); }
.sf-btn .arrow { display: grid; place-items: center; width: 48px; height: 48px; margin-left: 20px; border-left: 1px solid rgba(0, 0, 0, .14); transition: background-color .3s var(--sf-ease), color .3s var(--sf-ease); }
.sf-btn:hover .arrow, .sf-btn:focus-visible .arrow { background: #000000; color: var(--sf-w); }
.dark-site .sf-ask { display: inline-flex; gap: 8px; padding-bottom: 3px; color: var(--sf-w); text-decoration: none; font: 500 15px/1.2 var(--font-text, "Geist", sans-serif);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .45s var(--sf-ease); }
.sf-ask:hover { background-size: 30% 1px; }

/* ---------- the film's timeline: a hairline along its foot that fills as the loop plays ---------- */
.sf-time { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; background: rgba(239, 236, 229, .16); pointer-events: none; }
.sf-time::after { content: ""; position: absolute; inset: 0; background: var(--sf-w); transform-origin: 0 50%; transform: scaleX(var(--sf-t, 0)); }

/* ---------- the Try it circle that follows the pointer over a film (polish.js's View circle, in our words) ---------- */
.sf-cursor { position: fixed; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; pointer-events: none;
  background: var(--sf-w, #EFECE5); color: #000000; font: 600 14.5px/1 var(--font-text, "Geist", sans-serif);
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0); opacity: 0; transition: opacity .35s cubic-bezier(.22, .61, .36, 1), scale .5s cubic-bezier(.22, .61, .36, 1); scale: .3; }
.sf-cursor.is-on { opacity: 1; scale: 1; }
.sf-cursor span { display: inline-flex; gap: 6px; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .sf-film { cursor: none; }
  .sf-film:hover .sf-try { opacity: 0; }
}

/* ---------- laptops and up, tall enough: chapters fill the screen and stack ---------- */
@media (min-width: 1101px) and (min-height: 540px) {
  /* the film's column is worked out from the chapter's height, so it never depends on the film to size itself */
  .sf-ch { --sf-pad: clamp(10px, 1vw, 18px); --sf-h: min(calc(100svh - var(--sf-top) - var(--sf-gap)), 1180px); --sf-fw: min(54vw, calc((var(--sf-h) - 2 * var(--sf-pad)) * .8));
    grid-template-columns: calc(var(--sf-fw) + var(--sf-pad)) minmax(0, 1fr);
    position: sticky; top: var(--sf-top); height: var(--sf-h); transform-origin: 50% 0; transform: scale(calc(1 - var(--sf-cover) * .05));
    /* each chapter, its dimming and its film get their own layer, so Chrome moves and fades them as they are instead of
       redrawing the whole chapter on every frame of the scroll (without this the chapters lagged and showed up late in Chrome) */
    will-change: transform; }
  .sf-ch::after { will-change: opacity; }
  .sf-film video { will-change: transform; }
  .sf-ch--flip { grid-template-columns: minmax(0, 1fr) calc(var(--sf-fw) + var(--sf-pad)); }
  .sf-film { width: var(--sf-fw); height: auto; aspect-ratio: auto; }
  /* each chapter settles whole on screen, price and buttons included, a moment before the next one rises over it (it
     used to hold for half a screen, which read as the page lagging under the wheel; its film now keeps easing back) */
  .sf-ch + .sf-ch { margin-top: 20svh; }
}
@media (min-width: 1101px) and (max-height: 1000px) {
  .sf-inc li { padding: 7px 0; }
  .dark-site .sf-inc li { font-size: 14px; }
  .sf-mid { padding: 18px 0; }
}
/* short laptop screens: the list of what's included gives way, so the price and buttons always fit */
@media (min-width: 1101px) and (max-height: 760px) {
  .sf-inc { display: none; }
  .sf-foot { grid-template-columns: minmax(0, 1fr); }
  .sf-offer { max-width: 52ch; }
  .dark-site .sf-title { font-size: clamp(44px, 9.6vh, 80px); }
  .sf-mid { padding: 10px 0; }
  .dark-site .sf-line { margin-top: 14px; font-size: 16px; }
  .sf-foot { padding-top: 16px; }
  .dark-site .sf-offer { margin-top: 12px; padding-top: 10px; }
  .sf-links { margin-top: 16px; }
}

/* very short laptop screens, such as a 1080p laptop at 125% with the browser's bars, or a zoomed-in page: the chapters
   still stack, with the words set by the screen's height so the price and buttons fit */
@media (min-width: 1101px) and (min-height: 540px) and (max-height: 660px) {
  :root .dark-site .sf .sf-ch h3 { font-size: clamp(30px, 7.2vh, 56px) !important; }
  .sf-body { padding-block: 14px; }
  .sf-mid { padding: 6px 0; }
  .dark-site .sf-line { margin-top: 10px; }
  .sf-foot { padding-top: 12px; gap: 12px clamp(24px, 3vw, 56px); }
  .dark-site .sf-offer { margin-top: 8px; padding-top: 8px; }
  .sf-links { margin-top: 12px; }
}

/* ---------- tablets, and laptops with very short screens: chapters sit one after another ---------- */
@media (max-width: 1100px), (max-height: 539px) {
  .sf-ch { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .sf-ch--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
  .sf-film { align-self: start; aspect-ratio: 4 / 5; }
  .sf-foot { grid-template-columns: minmax(0, 1fr); }
  .sf-inc { display: none; }
}

/* ---------- phones: the still on top, the words underneath ---------- */
@media (max-width: 760px) {
  .sf { margin-top: 32px; padding: 0 2px; gap: 8px; }
  .dark-site .svc-toc { display: none; }
  .sf-ch, .sf-ch--flip { display: block; border-radius: 6px; }
  .sf-film, .sf-ch--flip .sf-film { aspect-ratio: 4 / 5; height: auto; min-height: 0; margin: 8px; }
  .sf-try { display: none; }
  .sf-still { display: block; }
  .sf-film video { opacity: 0; transition: opacity .8s cubic-bezier(.22, .61, .36, 1); object-position: 50% 42%; }
  .sf-film video.is-ready { opacity: 1; }
  .sf-pp, .sf-ch--flip .sf-pp { top: 12px; left: auto; right: 12px; }
  .sf-body, .sf-ch--flip .sf-body { padding: 4px 20px 26px; }
  .sf-top { flex-wrap: wrap; }
  body:not(.ck-page) .sf-top .sf-tag { padding-top: 18px; }
  .sf-mid { padding: 22px 0 26px; }
  .dark-site .sf-title { font-size: clamp(40px, 11.6vw, 54px); max-width: 11ch; }
  .dark-site .sf-line { font-size: 16.5px; }
  .sf-foot { padding-top: 18px; }
  .dark-site .sf-amt { font-size: 40px; }
  .sf-links { gap: 14px 22px; margin-top: 20px; }
}

/* ---------- the way in: a quiet line of the apps we work with, then one rule, one label, one title ---------- */
/* the apps sit still in one centred line, in their own marks but no brand colours, with no scrolling and no copies */
.dark-site .hero-film-bleed .tools { padding-bottom: clamp(64px, 6vw, 104px); }
.dark-site .hero-film-bleed .tools-title { margin-bottom: 26px; }
.dark-site .hero-film-bleed .tools .tool-viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
.dark-site .hero-film-bleed .tools .tool-track { width: auto; animation: none; justify-content: center; }
.dark-site .hero-film-bleed .tools .tool-grid[aria-hidden] { display: none; }
.dark-site .hero-film-bleed .tools .tool-grid { flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 3vw, 56px); padding: 0; }
.dark-site .hero-film-bleed .tools .tool { gap: 10px; }
.dark-site .hero-film-bleed .tools .tool-mark svg { width: 18px; height: 18px; }
.dark-site .hero-film-bleed .tools .tool-name { font-size: 16px; color: rgba(236, 240, 234, .66); }

/* the heading: a plain hairline (no tape measure), the label with one line of guidance opposite, then the title;
   the index of the four services is gone, because the chapters say it straight after */
.dark-site .services .section-head::before { height: 1px; background: var(--line-2); }
.dark-site .services .section-head { padding-top: 18px; }
.dark-site .services .services-intro { display: block; grid-column: 2; grid-row: 1; align-self: baseline; margin: 0; padding: 0; text-align: right; }
.dark-site .services .services-intro::before, .dark-site .services .si-note { display: none; }
.dark-site .services .si-lead { font: 400 15px/1.5 var(--font); letter-spacing: 0; color: var(--soft); max-width: none; }
.dark-site .services .section-head h2 { grid-row: 2; }
.dark-site .svc-head-index { display: none; }
.sf { margin-top: clamp(48px, 4.4vw, 80px); }
@media (max-width: 760px) {
  .dark-site .services .services-intro { grid-column: 1; grid-row: 3; margin-top: 18px; text-align: left; }
  .dark-site .hero-film-bleed .tools .tool-grid { gap: 14px 24px; }
  .dark-site .hero-film-bleed .tools .tool-name { font-size: 14px; }
}

/* ---------- the chapters on light: warm white with dark type, a black Try it, the films carrying the colour ---------- */
.sf-ch { --sf-c2: #F8F6F1; --sf-w: #141414; box-shadow: inset 0 0 0 1px rgba(20, 26, 24, .07); }
.sf-ch::after { background: #EFECE5; }
.sf-firm, .dark-site .sf-inc li { color: rgba(20, 26, 24, .78); }
.sf-tag { color: #2E6B63; }
.dark-site .sf-line { color: rgba(20, 26, 24, .72); }
.sf-foot { border-top-color: rgba(20, 26, 24, .14); }
.dark-site .sf-inc li { border-bottom-color: rgba(20, 26, 24, .09); }
.dark-site .sf-from, .dark-site .sf-per, .dark-site .sf-note, .dark-site .sf-more, .dark-site .sf-offer { color: rgba(20, 26, 24, .6); }
.dark-site .sf-offer { border-top-color: rgba(20, 26, 24, .12); }
.dark-site .sf-btn { background: #141414; color: #F5F3EE; }
.dark-site .sf-btn .arrow { border-left-color: rgba(245, 243, 238, .16); }
.sf-btn:hover .arrow, .sf-btn:focus-visible .arrow { background: #F5F3EE; color: #141414; }
.sf-time { background: rgba(20, 26, 24, .12); }
.sf-time::after { background: #141414; }
.sf-cursor { background: #141414; color: #F5F3EE; }
/* the pause button: small and round, so it never reads as a placeholder */
.sf-pp, .sf-ch--flip .sf-pp { width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 26, 24, .28); opacity: .9; }

/* ---------- care after launch, as one more chapter: the status card set in a stone frame like the films,
   the words beside it in the chapters' type, on the same warm white ---------- */
.sf-care { --sf-gap: clamp(8px, .8vw, 14px); --sf-pad: clamp(10px, 1vw, 18px); margin-top: var(--sf-gap); padding: 0 var(--sf-gap); }
.dark-site .sf-care .care { display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); gap: 0; align-items: stretch; margin: 0; padding: 0; border-radius: 10px; background: #F8F6F1; box-shadow: inset 0 0 0 1px rgba(20, 26, 24, .07); color: #141414; }
.care-frame { display: grid; place-items: center; margin: var(--sf-pad) 0 var(--sf-pad) var(--sf-pad); padding: clamp(28px, 4vw, 80px) clamp(20px, 3vw, 64px); border-radius: 6px; background: #D6D1C7; }
/* the card itself: flat night, no glow, every label in plain sentence case */
.dark-site .sf-care .care-inst { width: 100%; max-width: 520px; border-radius: 12px; background: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 30px 70px -30px rgba(40, 30, 20, .45); }
.dark-site .sf-care .care-inst .ci-top { font: 400 13px/1.2 var(--font-text, "Geist", sans-serif); letter-spacing: 0; text-transform: none; }
.dark-site .sf-care .care-inst .ci-top span, .dark-site .sf-care .care-inst .ci-axis span, .dark-site .sf-care .care-inst .ci-rows em span,
.dark-site .sf-care .care-inst .ci-calm span:last-child, .dark-site .sf-care .care-inst .ci-note b span { font-family: var(--font-text, "Geist", sans-serif); }
.dark-site .sf-care .care-inst .ci-axis { font: 400 12px/1 var(--font-text, "Geist", sans-serif); letter-spacing: 0; }
.dark-site .sf-care .care-inst .ci-rows em, .dark-site .sf-care .care-inst .ci-calm { font: 400 13px/1 var(--font-text, "Geist", sans-serif); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dark-site .sf-care .care-inst .ci-rows em span { font-size: 13px; }
.dark-site .sf-care .care-inst .ci-bars i { width: 1.5px; opacity: .6; }
/* the words */
.dark-site .sf-care .care-body { display: flex; flex-direction: column; justify-content: center; max-width: none; padding: clamp(32px, 4vw, 80px) clamp(26px, 3.4vw, 72px); }
.dark-site .sf-care .care-body h3 { margin: 0; font: 500 clamp(44px, 4.6vw, 96px)/.92 var(--font); letter-spacing: -.055em; color: #141414; }
.dark-site .sf-care .care-what { margin: clamp(18px, 1.8vw, 30px) 0 0; max-width: 40ch; font: 400 clamp(17px, 1.2vw, 21px)/1.45 var(--font-text, "Geist", sans-serif); color: rgba(20, 26, 24, .72); }
.dark-site .sf-care .care-tiers { margin-top: clamp(28px, 3vw, 52px); border-top: 1px solid rgba(20, 26, 24, .14); }
.dark-site .sf-care .care .tier { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border: 0; border-bottom: 1px solid rgba(20, 26, 24, .09); }
.dark-site .sf-care .care .tier-name { margin: 0; font: 400 15px/1.35 var(--font-text, "Geist", sans-serif); color: rgba(20, 26, 24, .78); }
.dark-site .sf-care .care .tier-price { margin: 0; white-space: nowrap; font: 500 clamp(24px, 1.8vw, 34px)/1 var(--font); letter-spacing: -.04em; color: #141414; }
.dark-site .sf-care .care .tier-price small { margin-left: 4px; font: 500 14px/1 var(--font-text, "Geist", sans-serif); letter-spacing: 0; color: rgba(20, 26, 24, .6); }
.dark-site .sf-care .care .tier-price small.from { margin: 0 6px 0 0; }
.dark-site .sf-care .card-links { margin-top: clamp(24px, 2.4vw, 40px); }
.dark-site .sf-care .care-small { margin-top: 16px; font: 400 14px/1.45 var(--font-text, "Geist", sans-serif) !important; color: rgba(20, 26, 24, .6); }
@media (max-width: 1100px) {
  .dark-site .sf-care .care { grid-template-columns: minmax(0, 1fr); }
  .care-frame { margin: var(--sf-pad) var(--sf-pad) 0; }
}
@media (max-width: 760px) {
  .sf-care { padding: 0; }
  .care-frame { margin: 8px 8px 0; padding: 24px 14px; }
  .dark-site .sf-care .care-body { padding: 24px 20px 30px; }
  .dark-site .sf-care .care .tier { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
}

/* What we build heading (Alex 26 Oct 18:28 asked what would make it better): no "Services" label, since the heading
   says it; the heading pulled onto the rule's edge (the W's own side space made it look indented); and the intro sits
   on the heading's baseline to the right, so the two read together. Narrower screens put the intro under it. */
.dark-site .services .section-head > .eyebrow { display: none; }
.dark-site .services .section-head { grid-template-columns: auto minmax(0, 1fr); padding-top: clamp(28px, 2.6vw, 52px); }
.dark-site .services .section-head h2 { grid-row: 1; grid-column: 1; margin-left: -.045em; align-self: last baseline; }
.dark-site .services .services-intro { grid-row: 1; grid-column: 2; align-self: last baseline; justify-self: end; max-width: 24ch; text-align: left; font-size: 15px; line-height: 1.45; }
.dark-site .services .services-intro .si-lead { line-height: 1.45; }
@media (max-width: 1199px) {
  .dark-site .services .section-head { grid-template-columns: minmax(0, 1fr); }
  .dark-site .services .services-intro { grid-column: 1; grid-row: 2; justify-self: start; max-width: none; margin-top: 18px; }
}
@media (max-width: 760px) {
  .dark-site .services .section-head { padding-top: 36px; }
  .dark-site .services .services-intro { font-size: inherit; line-height: 1.5; }
}

/* How far the next chapter has covered this one is set on the chapter every frame of the scroll. Registered as not
   passed down, so changing it restyles only the chapter and its dimming layer, not every word, button and film inside
   it on every frame (that restyle was the weight under the wheel in this section). */
@property --sf-cover { syntax: '<number>'; inherits: false; initial-value: 0; }
.sf-ch::after { --sf-cover: inherit; }