/* ── the home page's closer, redrawn (28 September 2026) ─────────────────
   Dixon: same words, new design. The band takes the hero's Ink and its
   Tally-blue light, so the page opens and closes in the same room, and the
   clock loses its box: the hours sit inside a dial of the year instead,
   with the arc filled from 1 January to now. Other pages keep the steel
   closer in site.css; everything here is scoped to .closer--clock.

   Contrast, measured on a 1440px render (28 Sep 2026) against the lightest
   band pixel near any text, the blue light behind the dial, with flat Ink
   in brackets: heading Paper 13.8 (16.3), accent at its darkest #6FAAFF
   6.3 (7.5), body #B7C4D4 8.5 (10.0), labels #8FAECB 6.5 (7.6). */

.closer.closer--clock{
  background:
    radial-gradient(52% 70% at 80% 46%, rgba(31,107,255,.20), rgba(31,107,255,0) 70%),
    radial-gradient(46% 60% at 8% 100%, rgba(84,118,156,.20), rgba(84,118,156,0) 70%),
    #0E1928;
  border-top:0;
}

/* the second half of the question carries the hero's accent */
.closer--clock h2 em{font-style:normal; color:#C2C9D2;
  background:linear-gradient(92deg,#FFFFFF 0%,#D6E6FF 35%,#9CC3FF 70%,#6FAAFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}

/* no card: the dial is the object */
.closer--clock .closer-clock{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0; background:none; border:0; border-radius:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

.closer--clock .clock-dial{position:relative; width:min(320px,76vw); aspect-ratio:1/1; max-width:100%}
.closer--clock .clock-face{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

.closer--clock .clock-ticks line{stroke:rgba(214,230,255,.24); stroke-width:2; stroke-linecap:round}
.closer--clock .clock-ticks line.is-past{stroke:#9CC3FF}
.closer--clock .clock-track{fill:none; stroke:rgba(214,230,255,.10); stroke-width:10}
.closer--clock .clock-arc,
.closer--clock .clock-glow{fill:none; stroke:url(#ck-grad); stroke-width:10; stroke-linecap:round}
.closer--clock .clock-glow{opacity:.55}
.closer--clock .clock-now{fill:#FFFFFF}
.closer--clock .clock-halo{fill:#9CC3FF; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:ck-halo 2.6s ease-out infinite}
@keyframes ck-halo{
  0%{transform:scale(1); opacity:.55}
  100%{transform:scale(3.2); opacity:0}
}

/* the number, in the middle of the dial */
.closer--clock .clock-row{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center}
.closer--clock .clock-cell b{font-size:clamp(46px,4.6vw,64px); letter-spacing:-.03em}
.closer--clock .clock-cell span{margin-top:10px}

/* a label, not body copy: .closer p (site.css) would set it at 17px */
.closer--clock .closer-clock-h{margin:26px 0 0; max-width:36ch; text-wrap:balance;
  font-size:12px; font-weight:600; line-height:1.7; letter-spacing:.14em; color:#B7C4D4}

.closer--clock .clock-reset{margin-top:20px; padding:12px 18px; border-radius:999px;
  border-color:rgba(214,230,255,.34); background:rgba(214,230,255,.05)}
.closer--clock .clock-reset:hover{background:#F2F6FA; color:#0E1928; border-color:#F2F6FA}
.closer--clock .clock-reset:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px}

@media (min-width:1000px){
  .closer--clock .closer-in{grid-template-columns:minmax(0,1fr) minmax(360px,420px)}
}
@media (max-width:640px){
  .closer--clock .clock-dial{width:min(280px,78vw)}
  .closer--clock .closer-clock{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .closer--clock .clock-halo{animation:none}
}

/* ── "Find it. Build it. Run it." (28 Sep 2026) ───────────────────────────
   The dark-to-light turn happens in the systems strip above (home-hero.css),
   so this band only has to finish it: it opens on the strip's last, palest
   blue and settles to paper, with the usual dark type. The accent on
   "Run it." is the hero's gradient taken the other way, Ink to Tally blue,
   so it reads on a light ground. No top rule: it would draw a seam across
   a colour that is meant to carry straight on. */
#services.ways{border-top:0;
  background:linear-gradient(180deg,#E3EAF3 0%,#EAF0F6 10%,#F3F6FA 25%,#FFFFFF 50%)}
/* the bloom off the top right is cut by the band's top edge, which on this
   ramp shows as a corner; the ramp does its job */
#services.ways .glow{display:none}
#services .kyn-say em{font-style:normal; color:#1F4F9A;
  background:linear-gradient(92deg,#0E1928 0%,#2A4A6B 42%,#1F6BFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}

/* ── Meet Tally: the film large, framed as a screen (28 Sep 2026) ────────
   Dixon: the film had shrunk. The cause was a Tally-page rule leaking onto
   this band (fixed in tally-page.css); on top of the fix, the band is
   redrawn: the heading and its words share one row, so the film comes up
   sooner, and the film sits in a rounded screen with Tally-blue light
   pooled under it. */
#tally.tally-band{
  background:
    radial-gradient(56% 40% at 50% 82%, rgba(31,107,255,.13), rgba(31,107,255,0) 72%),
    linear-gradient(180deg, #F1F1F2 0%, #EAF0F7 100%);
}
@media (min-width:1000px){
  #tally .kyn-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px); align-items:end}
  #tally .kyn-body .kyn-say{grid-row:1 / span 2; margin:0}
  #tally .kyn-body .tally-lede{margin:0; max-width:46ch}
  #tally .kyn-body .tally-acts{margin-top:22px}
}
#tally .tally-shot{position:relative; display:block; margin-top:clamp(36px,4.6vw,64px);
  border-radius:18px; overflow:hidden; isolation:isolate; transform:translateZ(0);
  box-shadow:0 0 0 1px rgba(14,25,40,.10), 0 60px 110px -60px rgba(14,25,40,.60), 0 24px 48px -30px rgba(31,107,255,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
#tally .tally-shot .tally-still{border:0; border-radius:0; box-shadow:none}
/* The film is three minutes of on-screen words. Inside the 1160px column
   it played at about 730px wide on a laptop and the words were too small to
   read (Dixon, 10 October 2026), so on a wide screen it breaks out of the
   column to the page's 1440px, centred. */
@media (min-width:1240px){
  #tally .tally-shot{width:min(1440px, calc(100vw - 96px));
    margin-left:calc(50% - min(720px, calc(50vw - 48px)))}
}
#tally .tally-shot:hover{transform:translateY(-3px)}
#tally .tally-shot:focus-visible{outline:2px solid #1F6BFF; outline-offset:4px}
@media (max-width:640px){
  #tally .tally-shot{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  #tally .tally-shot{transition:none}
  #tally .tally-shot:hover{transform:none}
}