/* v5 · C4 · The closing with the email field in two layouts.
   Why: the closing is the one section a visitor meets on 23 pages, so it is where a held frame (or its absence) shows most.
   v3 set it six ways: the home's question at 80 px over the desk, the oculus question at 52 px in the painted sky, the industries
   index with a 144 px word under a 52 px line, the case study at 52 px with no label, and the industry, product and security
   closings at 80 px with three different sets of gaps and two colours of line.
   Now:
     1 · the centred block: label (where the page has one), the question at the title size (80 px; the creative director's rule:
         the title size is for openings and closings), one line, the field. Gaps 16 / 28 / 28 px. On the home it sits over the desk
         and cloth, everywhere else on the dark ground with its glow, which stays as it is.
     2 · the oculus (About, Approach): the question in the painted sky, the line and the field on paper beneath. Unchanged in layout.
   Grounds, glows, the cloth and the oculus painting and their motion are untouched. */

/* ---- 1 · the centred block ---- */
.cl-mid,.cl-opp,.cl-word{padding:clamp(120px,13vw,184px) 0 clamp(96px,10vw,144px);text-align:center}
.cl-mid .eyebrow,.cl-opp .eyebrow,.cl-word .eyebrow{margin-bottom:16px}
.cl-mid .h1,.cl-opp .h1,.cl-word .h1,.cl-mid .h2.cs-q{max-width:13em;margin:0 auto}
.cl-mid .lede,.cl-opp .lede,.cl-word .lede{max-width:34em;margin:28px auto 0;color:rgba(255,255,255,.86)}
.cl-mid .mail,.cl-opp .mail,.cl-word .mail{margin:28px auto 0}
.cl-opp .cl-more{margin-top:24px}
.cl-opp .lede{max-width:40em}

/* the industries index: one question at one size, no giant word under a smaller line */
.cl-word .close-h{display:block;max-width:13em;margin:0 auto;font:var(--w-h1) var(--s-h1)/1 var(--f);letter-spacing:-.022em;color:#fff}
.cl-word .close-h .ch-line,.cl-word .close-h .ch-word{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}

/* the case study: its closing question at the closing size */
.cs-close>.wrap>.h2:first-child{font-size:var(--s-h1);line-height:1;letter-spacing:-.022em;max-width:13em;margin:0 auto}
.cs-close>.wrap>.lede{margin-top:28px}

/* the home: the same block over the desk */
.close .close-h{width:min(13em,100%)}
.close-act{gap:0;margin-top:28px}
.close-act .mail{margin-top:28px}
.close-act .lede{color:rgba(255,255,255,.86)}

@media (max-width:760px){
  .cl-word .close-h,.cs-close>.wrap>.h2:first-child{font-size:var(--s-h1)}
}