/* Homepage (DES-WF-01, re-cut for ADR-0011).
 *
 * The old homepage was a choreographed dark page: a WebGL wave field, a sticky
 * counting number, sections that animated in on scroll. All of it is gone. The
 * argument here is made by type, whitespace and a twelve-column rhythm, which is
 * also why there is no JavaScript on this page any more.
 *
 * One dark band survives, and it earns its place: it is the only place the
 * brand's bright blues can carry text, so it is where the differentiating claim
 * sits. */

.blueprysm-home{--gutter:clamp(20px,5vw,96px);--maxw:76rem}
.blueprysm-home .pad{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,104px) var(--gutter)}
.blueprysm-home section+section{border-top:1px solid var(--rule)}

.blueprysm-home .eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px}
.blueprysm-home .eyebrow b{color:var(--accent);font-weight:500;margin-right:10px}
.blueprysm-home h2{font-size:clamp(1.9rem,3.7vw,2.7rem);margin:0 0 18px}
.blueprysm-home h3{font-size:var(--fs-md);letter-spacing:-.02em;margin:0 0 9px}
.blueprysm-home .section-lead{max-width:var(--col);color:var(--ink-2);font-size:var(--fs-md);margin:0 0 clamp(32px,4vw,52px)}

/* Hero ------------------------------------------------------------------ */
.blueprysm-home .hero{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,132px) var(--gutter) clamp(52px,6vw,88px)}
.blueprysm-home .hero h1{font-size:clamp(2.7rem,7vw,5rem);letter-spacing:-.04em;line-height:1.02;margin:0 0 clamp(28px,3.5vw,44px);max-width:17ch}
.blueprysm-home .hero h1 em{font-style:normal;color:var(--accent)}
.blueprysm-home .hero .sub{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;max-width:46rem}
.blueprysm-home .lead{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--ink-2);margin:0}
.blueprysm-home .lead b{color:var(--ink);font-weight:600}

.blueprysm-home .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.blueprysm-home .btn{display:inline-block;font-size:var(--fs-sm);font-weight:500;padding:14px 26px;border:1px solid transparent}
.blueprysm-home .btn.fill{background:var(--accent);color:#FFFFFF}
.blueprysm-home .btn.fill:hover{background:var(--accent-deep);text-decoration:none}
.blueprysm-home .btn.line{border-color:var(--rule-2);color:var(--ink)}
.blueprysm-home .btn.line:hover{border-color:var(--ink);text-decoration:none}

/* Three fields ---------------------------------------------------------- */
.blueprysm-home .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.blueprysm-home .field .bar{height:6px;margin:0 0 20px}
.blueprysm-home .field p{color:var(--ink-2);font-size:var(--fs-sm);margin:0}

/* Five stages ----------------------------------------------------------- */
.blueprysm-home .stage-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:none}
.blueprysm-home .stage-list li{border-top:2px solid var(--rule-2);padding-top:16px}
/* The last three are ours to stay for, so they are the ones in brand colour. */
.blueprysm-home .stage-list li:nth-child(n+3){border-top-color:var(--accent)}
.blueprysm-home .stage-list .n{display:block;font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--ink-3);margin:0 0 12px}
.blueprysm-home .stage-list li:nth-child(n+3) .n{color:var(--accent)}
.blueprysm-home .stage-list h3{font-size:var(--fs-base);margin:0 0 8px}
.blueprysm-home .stage-list p{color:var(--ink-2);font-size:var(--fs-sm);margin:0}

/* The claim band — the one dark surface, and the only place the bright blues
   have the contrast to carry text (6.31:1 and 10.47:1 on ink). */
.blueprysm-home .claimband{background:var(--ink);color:#FFFFFF;border-top:0}
.blueprysm-home .claimband .inner{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,8vw,116px) var(--gutter)}
.blueprysm-home .claimband .eyebrow{color:var(--sky)}
.blueprysm-home .claimband .big{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4.2vw,3.1rem);letter-spacing:-.035em;line-height:1.1;margin:0 0 26px;max-width:22ch}
.blueprysm-home .claimband .big{color:#fff}
.blueprysm-home .claimband .note{color:#C3C7D0;max-width:var(--col);font-size:var(--fs-sm);margin:0}

/* Thinking -------------------------------------------------------------- */
.blueprysm-home .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);padding:26px 24px 22px;color:inherit}
.blueprysm-home .card:hover{border-color:var(--accent);text-decoration:none}
.blueprysm-home .card .k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.blueprysm-home .card p{color:var(--ink-2);font-size:var(--fs-sm);margin:0}
.blueprysm-home .card .go{margin-top:20px;font-size:var(--fs-xs);font-weight:500;color:var(--accent)}

.blueprysm-home .bench-sec{padding-bottom:0}

/* Framework library: four questions a buyer recognises, each opening the
   framework that answers it, and beside them the offer to fit the frameworks
   to the visitor's organisation. The offer sits on ink, as the featured
   analysis does in the section above, using the hero's measured colours
   (sky 10.47:1, body grey 10.87:1, bright button 6.31:1). */
.blueprysm-home .lib{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.blueprysm-home .lib .k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.blueprysm-home .lib-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 26px}
.blueprysm-home .lib-q{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid var(--rule);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .12s}
.blueprysm-home .lib-q:hover{border-color:var(--accent);text-decoration:none}
.blueprysm-home .lib-q h3{font-size:var(--fs-base);line-height:1.3;margin:0}
.blueprysm-home .lib-q .go{font-size:var(--fs-xs);font-weight:500;color:var(--accent)}
.blueprysm-home .lib-q .go span{font-weight:400;color:var(--ink-3)}
.blueprysm-home .lib-us{display:flex;flex-direction:column;background:var(--ink);color:#FFFFFF;padding:clamp(24px,2.8vw,36px)}
.blueprysm-home .lib-us .k{color:var(--sky)}
.blueprysm-home .lib-us h3{font-size:var(--fs-xl);line-height:1.2;letter-spacing:-.025em;color:#FFFFFF;margin:0 0 14px}
.blueprysm-home .lib-us p:not(.k){color:#C3C7D0;font-size:var(--fs-sm);line-height:var(--lh-body);margin:0 0 26px}
.blueprysm-home .lib-us .btn{margin-top:auto;align-self:flex-start}
.blueprysm-home .lib-us .btn.fill{background:var(--bright);color:var(--ink);font-weight:600}
.blueprysm-home .lib-us .btn.fill:hover{background:var(--sky);color:var(--ink)}
@media(max-width:900px){
  .blueprysm-home .lib{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .blueprysm-home .lib-qs{grid-template-columns:minmax(0,1fr)}
}

/* End CTA --------------------------------------------------------------- */
.blueprysm-home .endcta{border-top:1px solid var(--rule)}
.blueprysm-home .endcta .inner{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,104px) var(--gutter)}
.blueprysm-home .endcta h2{max-width:16ch}
.blueprysm-home .endcta p{color:var(--ink-2);max-width:var(--col);margin:0 0 30px}

/* Narrow ---------------------------------------------------------------- */
@media(max-width:1000px){
  .blueprysm-home .stage-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blueprysm-home .stage-list li:nth-child(5){grid-column:1 / -1}
}
@media(max-width:760px){
  .blueprysm-home .grid-3{grid-template-columns:minmax(0,1fr)}
  .blueprysm-home .stage-list{grid-template-columns:minmax(0,1fr)}
  .blueprysm-home .hero h1{max-width:none}
}

/* Hero background image ------------------------------------------------------
 *
 * The hero is the one dark surface at the top of the page (ADR-0011 §3a). It is
 * dark for a measurable reason, not a stylistic one: white on near-black gives
 * 10:1 against the real rendered background, where the light treatment it
 * replaced managed 4.68:1 — passing, but with so little headroom that changing
 * the picture would have broken it. It is also the only place --bright and --sky
 * have the contrast to carry text at all.
 *
 * Driven entirely by --hero-image, so swapping in a photograph is a one-line
 * change and needs no markup edit:
 *
 *     .blueprysm-home .hero{ --hero-image:url("/wp-content/uploads/2026/09/x.jpg"); }
 *
 * The shipped image is rendered, not photographed — light dispersing through a
 * prism, in the mark's own three blues (tools/render-hero.py). Original work, so
 * there is no stock licence attached to the site and nothing to re-clear.
 *
 * Re-run tools/check-hero-contrast.js after changing the image. There is real
 * headroom here, but a picture that is bright on its left third will still fail.
 */
.blueprysm-home .hero{
  /* Prefixed first, so an older WebKit takes that one and anything modern
     overrides it with the standard form. A browser that understands neither
     gets no background image, which is fine: the scrim is opaque across the
     text and the hero still reads. */
  --hero-image:-webkit-image-set(
    url("/wp-content/themes/blueprysm/assets/hero-prism-1280.jpg") 1x,
    url("/wp-content/themes/blueprysm/assets/hero-prism-2560.jpg") 2x);
  --hero-image:image-set(
    url("/wp-content/themes/blueprysm/assets/hero-prism-1280.jpg") 1x,
    url("/wp-content/themes/blueprysm/assets/hero-prism-2560.jpg") 2x);
  position:relative;
  isolation:isolate;
  background:var(--ink);
  color:#FFFFFF;
  /* The hero is the only full-bleed element on the page, so it manages its own
     gutters rather than inheriting the centred .pad box. */
  max-width:none;
  padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));
}
.blueprysm-home .hero::before,
.blueprysm-home .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.blueprysm-home .hero::before{
  background-image:var(--hero-image);
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}
/* The scrim: solid ink across the text column, clearing only past it so the
   beam shows in the space the copy does not use. */
.blueprysm-home .hero::after{
  background:linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 42%,
    rgba(18,20,26,.86) 55%,
    rgba(18,20,26,.40) 70%,
    rgba(18,20,26,0) 86%);
}

/* Hero type, on ink. Every colour here is measured in ADR-0011 §3a. */
.blueprysm-home .hero .eyebrow{color:var(--sky)}          /* 10.47:1 */
.blueprysm-home .hero h1{color:#FFFFFF}                    /* 18.41:1 */
.blueprysm-home .hero h1 em{font-style:normal;color:var(--sky)}
.blueprysm-home .hero .lead{color:#C3C7D0}                 /* 10.87:1 */
.blueprysm-home .hero .lead b{color:#FFFFFF}
.blueprysm-home .hero .btn.fill{background:var(--bright);color:var(--ink);font-weight:600}  /* 6.31:1 */
.blueprysm-home .hero .btn.fill:hover{background:var(--sky);color:var(--ink)}
.blueprysm-home .hero .btn.line{border-color:#4A515F;color:#FFFFFF}
.blueprysm-home .hero .btn.line:hover{border-color:#FFFFFF}

/* The hero ends on a hard edge against the paper below. That boundary is the
   pattern, not a seam to hide, so there is no bottom mask and no rule under it. */
.blueprysm-home .fields{border-top:0}

/* Narrow: the beam moves behind the copy, so the scrim goes vertical and the
   image sits lower. Measured at 10.47:1 on a 390px viewport even so. */
@media(max-width:900px){
  .blueprysm-home .hero::before{background-position:right bottom}
  .blueprysm-home .hero::after{
    background:linear-gradient(175deg,
      var(--ink) 0%, rgba(18,20,26,.92) 38%,
      rgba(18,20,26,.72) 68%, rgba(18,20,26,.55) 100%);
  }
}
/* Asked to save data, or printing: no decorative image. The hero still reads,
   because the type sits on ink rather than on the picture. */
@media (prefers-reduced-data:reduce){.blueprysm-home .hero::before{background-image:none}}
@media print{
  .blueprysm-home .hero{background:none;color:var(--ink)}
  .blueprysm-home .hero::before,.blueprysm-home .hero::after{display:none}
  .blueprysm-home .hero h1,.blueprysm-home .hero .lead b{color:var(--ink)}
  .blueprysm-home .hero .lead,.blueprysm-home .hero .eyebrow{color:var(--ink-2)}
}

/* Thought leadership on the homepage: one piece carrying its actual finding,
   with three smaller entries beside it. Cards that describe a category were
   replaced on 2026-09-29 — a card saying "worked analyses with their receipts"
   is a promise, and the receipts themselves are the proof. */
.blueprysm-home .tl-home{
	display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem;margin:1.8rem 0 0}
.blueprysm-home .tl-feat{
	display:flex;flex-direction:column;justify-content:flex-end;
	padding:1.8rem;text-decoration:none;color:#fff;background:var(--ink,#12141A);
	transition:background .14s}
.blueprysm-home .tl-feat:hover{background:#1B1E26}
.blueprysm-home .tl-feat .k{color:var(--sky,#58D1FC);margin:0 0 auto}
.blueprysm-home .tl-feat h3{font-size:var(--fs-xl);line-height:1.2;margin:1.6rem 0 .6rem;color:#fff}
.blueprysm-home .tl-feat p{color:#C3C7D0;line-height:var(--lh-body);margin:0}
.blueprysm-home .tl-feat p b{color:#fff}
.blueprysm-home .tl-feat .go{margin:1.1rem 0 0;color:var(--bright,#009CFF);font-weight:500}
.blueprysm-home .tl-side{display:grid;gap:1rem;align-content:start}
.blueprysm-home .tl-mini{
	display:block;padding:1.1rem 1.25rem;text-decoration:none;color:inherit;
	border:1px solid var(--rule,#DCDAD3);background:var(--surface,#fff);
	transition:border-color .12s}
.blueprysm-home .tl-mini:hover{border-color:var(--ink-3,#5F6472)}
.blueprysm-home .tl-mini .k{margin:0 0 .35rem;color:var(--ink-3,#5F6472)}
.blueprysm-home .tl-mini h3{font-size:var(--fs-base);line-height:1.3;margin:0 0 .3rem}
.blueprysm-home .tl-mini p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2,#565B66);margin:0}
@media (max-width:900px){
	.blueprysm-home .tl-home{grid-template-columns:1fr;gap:1rem}
	.blueprysm-home .tl-feat h3{font-size:var(--fs-lg)}
}

/* A figure on the home page carries its source, like a figure anywhere else on
   the site. These three cards were the exception: $105.4B, $33.8B and $19.6B
   appeared on the one page every visitor sees with nothing attached to them. */
.blueprysm-home .tl-src{font-size:11px;letter-spacing:.01em;margin:10px 0 0;opacity:.78}
.blueprysm-home .tl-feat .tl-src{color:#8E95A3}
.blueprysm-home .tl-mini .tl-src{color:var(--ink-3,#5F6472);margin-top:8px}