/* ── the home hero, on Ink ───────────────────────────────────────────────
   Every style the home hero's redesign added (27 September 2026). site.css is
   not edited; this file loads last, on the home page only, and everything in
   it is scoped to .home-hero except the two rules for the bar that sits over
   it (at the end).

   Dixon, from his phone: "I don't see the background is moving, because most
   of it is blocked by the words", and on both screens: "the first impression
   of the hero is too white, a lot of white space".

   Why Ink. The stage goes dark, like the new Tally, contact and ROI heroes:
   white type on Ink, one light button, the tessellation back on the navy it
   was drawn from. On paper the field had to be held at a quarter strength so
   the words would read, and at that strength nothing it did could be seen. On
   Ink the relationship turns over: the field can be carried at full weight
   and still sit well below the type, because the type is the lightest thing
   on the stage.

   The palette is the brand sheet's:
     Navy #0A1622 (the DDX mark's darkest stop)   Steel-blue #3F5F7E (the
     mark's accent)   a Tally-blue #1F6BFF glow up to the right   rims #BFD8FF
     Raised #E6E6E6   Paper #FFFFFF. Recoloured 28 Sep 2026 to match the
     contact page. The lightest raised piece is now about #38566F, darker than
     the #4E607A the figures below were measured against, so each figure can
     only rise; they were not re-measured from frames. The accent gradient
     stops at #6FAAFF: about 3.2 over a raised piece with no shade (large type
     needs 3), 5.5 or more under the reading shade.

   Contrast. The field under the words is capped rather than cleared: the
   lightest thing assets/home-hero.js can draw is a fully raised piece, Dim
   lit most of the way to Steel, and the reading shade below takes it down
   again behind the copy. Measured (WCAG) from rendered frames at 320, 390,
   768, 1024, 1440 and 1920, with the field moving and with a raised piece
   held under each line in turn, against the single worst pixel under any
   line box in any frame:
     headline, Paper          7.2  (large type, needs 3)
     accent, Line             4.5  (large type, needs 3)
     sub, label, lede, note   6.3  (Raised; needs 4.5)
     button, Ink on Paper    15.3
   The typical figure, over resting field, is 12 to 17. Small type is Raised
   rather than Line on purpose: Line would pass too, but by less.

   5 October 2026: the headline is two lines, the label and lede are gone,
   and the outcomes lost the Ink plates their chips carried (16.5). Measured
   again, more lightly: 52 frames each at 390, 1024 and 1440, a piece raised
   under each line by the pointer, the lightest pixel under each line box.
   Worst over the three widths: outcomes 9.2, sub 9.3, note 9.5, accent at
   its #6FAAFF end 4.6, headline 11.4. Those runs never reached the 6.3
   above, so 6.3 stays the figure to design against. */

.hero-zone.home-hero{
  display:flex; flex-direction:column; align-items:stretch;
  min-height:100vh; min-height:100svh;
  background:#0E1928; border-bottom:0;
}

/* The dark part. Everything drawn sits in here; the strip of systems under
   it is on paper. */
.home-hero .hh-stage{
  position:relative; isolation:isolate; overflow:hidden;
  flex:1 0 auto; display:flex; align-items:center;
  background:#0E1928; color:#FFFFFF;
}
.home-hero .hh-field{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; display:block;
  pointer-events:none;
}

/* The room the field sits in: one pool of Steel light up to the right, where
   nothing is written, and a reading shade under the words. The shade scales
   the field rather than clearing it, so a raised piece is exactly as easy to
   see against its neighbours under the words as anywhere else; it is only
   the absolute level that comes down. */
.home-hero .hh-atmos{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 64% at 80% 26%, rgba(31,107,255,.18), rgba(31,107,255,0) 70%),
    linear-gradient(90deg, rgba(8,15,26,.80) 0%, rgba(8,15,26,.74) 40%,
                           rgba(8,15,26,.46) 58%, rgba(8,15,26,0) 80%),
    linear-gradient(180deg, rgba(8,18,30,.34) 0, rgba(8,18,30,0) 150px),
    linear-gradient(0deg, rgba(8,18,30,.55) 0, rgba(8,18,30,0) 120px);
}

/* The copy block. site.css sets this header's padding in a dozen places for
   a white hero with a centred, then left-set, then bottom-set column; one
   rule for the stage replaces them. The fixed bar is 70px (62 on a phone). */
.hero-zone.home-hero .hero{
  position:relative; z-index:2; display:block; width:100%;
  padding-top:calc(70px + clamp(34px,6vh,72px));
  padding-bottom:clamp(40px,7vh,84px);
}
.hero-zone.home-hero .hero-say{
  width:min(1160px,100%); margin:0 auto; padding:0; text-align:left;
}

/* ── type ─────────────────────────────────────────────────────────────── */
/* Bigger than the white hero's 58px: on Ink the headline is the brightest
   thing on the screen and can take the room. Two lines at 1440, and on a
   390 phone, since the 5 October 2026 copy. */
.home-hero .hero h1.hero-claim{
  margin-top:0; color:#FFFFFF;
  font-size:clamp(38px,2.9vw + 24px,68px); line-height:1.04; letter-spacing:-.034em;
  max-width:min(780px,100%);
}
/* the accent, as on paper: the second sentence one step softer than the
   first. Line on Ink is 11.5; at its worst over a raised piece, 4.5. */
.home-hero .hero-claim em{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}

.hero-zone.home-hero .hero .sub{
  color:#E6E6E6; margin:26px 0 0; max-width:46ch; font-size:18px; line-height:1.6;
  text-wrap:balance;
}

/* The five outcomes, one quiet line in Raised, the same colour as the
   sub-line. Until 5 October 2026 each sat in a chip with its own Ink plate;
   the plates were the part that crowded the hero, and the reading shade
   already holds this column above the floor without them (figures above).
   The diamonds are Tally blue. */
.home-hero .gain-list{margin-top:clamp(20px,2.6vh,28px)}
.home-hero .gain-list li{color:#E6E6E6}
.home-hero .gain-list li::before{background:#8FB4E8}

/* One light button on a dark stage, like the Tally page's: Paper on Ink,
   Raised when pressed or hovered. The site's own button presses to Ink,
   which on this stage would hide its label. */
.home-hero .hero-ctas{margin-top:clamp(28px,3.6vh,40px)}
.home-hero .hero-ctas .btn{background:#FFFFFF; color:#0B0F19}
.home-hero .hero-ctas .btn::before{background:#E6E6E6}
.home-hero .hero-ctas .btn:hover,
.home-hero .hero-ctas .btn:focus-visible{background:#FFFFFF; color:#0B0F19;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.home-hero .hero-ctas .btn:active,
.home-hero .hero-ctas .btn.is-press{background:#E6E6E6; color:#0B0F19}
.home-hero .hero-ctas .hero-note{color:#E6E6E6}

/* The site's ring is Steel, which on Ink is under 2:1. Paper instead, the
   same swap the other dark bands make. */
.home-hero .hh-stage :focus-visible{outline-color:#FFFFFF}

/* ── the systems, under the stage, on paper ──────────────────────────────
   Full width, so the stage ends on a clean line and the page below starts
   there. The caption sits on the same left edge as the words; below 1001px
   the rail does too, but at 1001px and up it widens past that column (see
   the breakpoint below) so a wide screen isn't left with two bare margins
   either side of it. */
/* The turn from dark to light happens here (Dixon, 28 Sep 2026: the stage
   went dark-to-white too suddenly, and a fade at the foot of the next band
   read as a stripe, "do it from the tool area"). The strip starts on the
   stage's Ink, keeps it behind the caption, then eases through the steel
   blues to the palest blue, which is where "How we work" below picks up.
   The stops are spaced as an ease-in-out, so there is no visible band.
   Each mark sits on a small Paper tile, legible on either end of the
   ramp; a black mark (Notion, Amazon) would vanish on the dark end. */
.hero-zone.home-hero .systems{
  position:relative; z-index:2; width:100%; margin:0;
  padding:clamp(18px,2.2vw,28px) 0 clamp(64px,8vw,120px);
  /* smoothstep from Ink to the palest blue between 18% and 100%, through
     Steel (#2A4A6B) and #6F8BAA rather than straight across (which greys);
     the curve flattens at the foot so the band below carries on seamlessly */
  background:linear-gradient(180deg,
    #0E1928 0%, #0E1928 18%,
    #111E2E 26.2%, #182A3F 34.4%, #223C58 42.6%, #365576 50.8%, #587595 59%,
    #7D96B3 67.2%, #A4B7CC 75.4%, #C5D1E0 83.6%, #DBE3EE 91.8%, #E1E8F2 95.9%, #E3EAF3 100%);
}
.home-hero .hh-stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:1;
  height:clamp(60px,12vh,140px); pointer-events:none;
  background:linear-gradient(180deg, rgba(14,25,40,0), #0E1928);
}
.home-hero .systems-cap{color:#8FAECB}
.home-hero .systems-track img{
  box-sizing:border-box; width:64px; height:64px; padding:12px;
  background:#F2F5F9; border-radius:16px;
  margin-right:clamp(14px,1.6vw,22px);
  box-shadow:0 8px 22px rgba(14,25,40,.26);
}
@media (max-width:640px){
  .home-hero .systems-track img{width:52px; height:52px; padding:10px; border-radius:13px; margin-right:12px}
}
/* The tiles make the track longer (82 × 86px at most), so the lap is
   longer too, to keep the site's pace of about 16.5px a second. */
.home-hero .systems-track{animation-duration:214s}
.home-hero .systems-cap,
.home-hero .systems-rail{
  width:min(1160px, calc(100% - 2 * clamp(22px,4.4vw,88px)));
  margin-left:auto; margin-right:auto;
}
.home-hero .systems-rail{margin-top:18px}

/* Desktop only, matching the breakpoint below: the rail leaves the
   caption's 1160px column and fills the white band instead, so it no
   longer sits in a narrow strip with open paper either side of it on a
   wide screen. Capped at 2560px rather than running the full band at any
   width: the two-copy loop below (site.css, .systems-track) is only
   seamless while the rail stays narrower than one copy of the set. The
   marks are 64px tiles here with a 14-22px margin, so one copy is at
   least 41 × (64+14) ≈ 3198px — a rail past that width would show the
   seam between the two copies once a lap. 2560px leaves over 600px of
   that in hand, and is itself a common monitor width, so those screens
   run edge to edge too; recheck the sum if the mark count, size or
   margin ever changes.
   The fade goes symmetric here too, about 7% each end, in place of the
   generic 3%/18% split (site.css, still used below this width). That
   split kept the left edge sharp because it lined up with the caption
   and the headline; once the rail is wider than that column it no longer
   lines up with anything, so a short fade on the left has nothing left
   to justify it. */
@media (min-width:1001px){
  .home-hero .systems-rail{
    width:min(2560px, 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
}

/* Reduced motion parks the track at rest (site.css turns the animation off),
   which lands the first mark exactly inside this fade instead of just
   passing through it, dimming it for good. Shifting the track past the
   fade keeps that mark fully visible while still. */
/* Always rolling (Dixon, 28 Sep 2026): the strip keeps moving even when the
   device asks for less motion, e.g. Windows energy saver turning on reduced
   animations. site.css stops it under prefers-reduced-motion; this puts the
   same slow loop back for the home page only. Hovering still pauses it
   (site.css .systems-rail:hover). */
@media (prefers-reduced-motion:reduce){
  .home-hero .systems-track{animation:systems-roll 214s linear infinite}
}

/* Below 1001px the copy runs most of the width, so a shade on the left alone
   would leave the ends of the lines on open field. The shade goes across. */
@media (max-width:1000px){
  .home-hero .hh-atmos{
    background:
      radial-gradient(70% 50% at 86% 12%, rgba(31,107,255,.16), rgba(31,107,255,0) 72%),
      linear-gradient(180deg, rgba(8,15,26,.66) 0%, rgba(8,15,26,.72) 28%,
                              rgba(8,15,26,.72) 74%, rgba(8,15,26,.80) 100%);
  }
}

/* ── phone ───────────────────────────────────────────────────────────────
   The words fill a phone, so the stage is the whole first screen and the
   strip waits below the fold. The copy is centred in the room under the bar
   with a band of open field above and below it, and the gaps between blocks
   close up so the field shows at the top and the foot as well as between
   the lines. The reading shade covers the whole stage here, since the whole
   stage is written on. */
@media (max-width:700px){
  .home-hero .hh-stage{min-height:100vh; min-height:100svh}
  .home-hero .hh-atmos{
    background:
      radial-gradient(90% 46% at 88% 8%, rgba(31,107,255,.16), rgba(31,107,255,0) 72%),
      linear-gradient(180deg, rgba(8,15,26,.64) 0%, rgba(8,15,26,.72) 30%,
                              rgba(8,15,26,.72) 72%, rgba(8,15,26,.66) 100%);
  }
  .hero-zone.home-hero .hero{
    padding-top:calc(62px + clamp(22px,4.5vh,44px));
    padding-bottom:clamp(26px,5vh,48px);
  }
  .home-hero .hero h1.hero-claim{font-size:clamp(34px,10.4vw,46px); line-height:1.06}
  .hero-zone.home-hero .hero .sub{margin-top:16px; font-size:17.5px; line-height:1.5; max-width:32ch}
  .home-hero .gain-list{margin-top:18px; gap:8px 18px}
  .home-hero .hero-ctas{margin-top:24px}
}

/* Forced colours (Windows high contrast) repaint the type in the system's
   colours but leave a canvas alone, so a light theme would put black type on
   the dark field. The field and its shading step aside and the system's own
   background shows through. */
@media (forced-colors:active){
  .home-hero .hh-field, .home-hero .hh-atmos{display:none}
}

/* ── the bar, over the stage ─────────────────────────────────────────────
   The bar keeps its white, as it does over the Tally and contact heroes.
   Its fall-off (site.css, nav:not(.docked)::before) was painted for the old
   photograph and turns grey over Ink, and its translucent white does the same
   where it crosses the stage; both only while undocked, which on this page
   means only while the stage is under it. */
nav:not(.docked)::before{content:none}
nav:not(.docked){background:rgba(255,255,255,.97)}