/* v3.4 began as a copy of v3.3 (6 Oct 2026, pre-launch). Comments below that name v3.3 are its history;
   v3.4 is the copy that changes from here. */
/* ============================================================
   v3.3 - the homepage's own styles (client, 5 Oct 2026). v3.3 is v3.2 with
   the Client Impact cards over the site's own sector photographs (option 04)
   in place of the illustrations. Began as a copy of v3.2's home-v3.2.css: the
   same rules, now v3.3's alone (v3/src-v3.4/, edition own_src=), so changing
   one version never moves the other. Loaded after home.css (home_css=).
   ============================================================ */

/* ---------- a red disc ends every trustline line ----------
   In place of each line's full stop, which stays in the text, visually
   hidden, for screen readers. The disc is the trustline's own: .32em, .08em
   after the text, on the baseline. */
.persp__trust--dots > span::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.08em;border-radius:50%;
  background:var(--red);vertical-align:baseline}
/* home.css gives the last span of the trustline a disc
   (.persp__trust span:last-child::after); the hidden full stop is the last
   span inside each line, so it must not get one - specific enough to win */
.persp__trust.persp__trust--dots span.visually-hidden::after{content:none}

/* ---------- Conversations & Perspectives on red ----------
   An experiment against the brand rule that red is an accent, never a band
   (V33). Worn with .band--dark, which gives white type, the white focus ring
   and keeps the white-band hairline away. On red the dark band's 78% white
   fails (about 3.2:1), so all text is white (4.81:1). The arrow circle's red
   hover fill would vanish, so it fills white. */
.band--red{background:var(--red);--fg-2:#fff}
.band--red .textlink:hover .arr,.band--red .is-link:hover .arr{background:#fff;border-color:#fff;color:var(--red)}

/* ---------- Client Impact over warm illustrations (.ci-art) ----------
   First tried as option 02 of experiments/client-impact-preview.html.
   The illustration sits in the top 340px of the card; the scrim (the site's
   photo scrim colour, charcoal in v3.x) is light over its first ~110px, where
   only the sector chip sits, and solid by 340px, so the title and the case
   text are white on a near-solid ground whatever the picture holds. */
.ci-art .case{position:relative;isolation:isolate;overflow:hidden;padding-top:210px;background:rgb(var(--scrim));
  color:#fff;--fg:#fff;--fg-2:var(--on-dark-2);--focus:#fff}
.ci-art__img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:340px;object-fit:cover}
.ci-art .case::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--scrim) / .08) 0,rgb(var(--scrim) / .22) 110px,rgb(var(--scrim) / .88) 220px,
    rgb(var(--scrim)) 340px)}
.ci-art .case .chip{position:absolute;top:24px;left:28px}

/* ---------- ... with depth on scroll (.ci-depth; option 03, client, 5 Oct 2026) ----------
   02's cards, driven by the scroll itself: CSS scroll-driven animations, no
   script, run off the main thread. Each card is a view timeline (--ci-card):
   - the illustration recedes - it starts at 135% and settles to 100% as the
     card comes into view (scale) - and drifts down 120px over the card's whole
     pass (translate), slower than the page, so it reads as further away. The
     image is 460px tall from -60px, so the drift never opens a gap above the
     scrim's solid line at 340px;
   - the front arrives: the chip slides in from the left, then the title, then
     each block rises 56px into place, fading in and coming into focus; the
     last finishes as the card is fully in view (entry 100%), and the value's
     red rule then draws itself;
   - on a wide screen the three cards follow one another (--lag).
   Browsers without scroll-driven animations skip all of it (@supports); there
   ci-depth.js writes the same values (.ci-js, below). Reduced motion stops
   every animation (site.css) and the script stands down: the still cards.
   The card itself never moves - it is the timeline's subject. */
@supports (animation-timeline: view()) {
  .ci-depth .case{view-timeline-name:--ci-card;--lag:0%}
  .ci-depth .ci-art__img{top:-60px;height:460px;
    animation:ci-recede linear both,ci-drift linear both;animation-timeline:--ci-card,--ci-card;
    animation-range:entry 0% cover 50%,cover 0% cover 100%}
  .ci-depth .case > .chip{animation:ci-pin linear both;animation-timeline:--ci-card;
    animation-range:entry calc(0% + var(--lag)) entry calc(40% + var(--lag))}
  .ci-depth .case > .case__title,.ci-depth .case dl > div{animation:ci-arrive linear both;animation-timeline:--ci-card}
  .ci-depth .case > .case__title{animation-range:entry calc(10% + var(--lag)) entry calc(55% + var(--lag))}
  .ci-depth .case dl > div:nth-child(1){animation-range:entry calc(22% + var(--lag)) entry calc(70% + var(--lag))}
  .ci-depth .case dl > div:nth-child(2){animation-range:entry calc(34% + var(--lag)) entry calc(85% + var(--lag))}
  .ci-depth .case dl > div:nth-child(3){animation-range:entry calc(46% + var(--lag)) entry calc(100% + var(--lag))}
  .ci-depth .case__block--value{position:relative;border-left-color:transparent}
  .ci-depth .case__block--value::before{content:"";position:absolute;top:0;bottom:0;left:-3px;width:3px;
    background:var(--red);transform-origin:top;animation:ci-draw linear both;animation-timeline:--ci-card;
    animation-range:entry calc(70% + var(--lag)) entry calc(110% + var(--lag))}
  @media (min-width:1025px){
    .ci-depth .case:nth-child(2){--lag:6%}
    .ci-depth .case:nth-child(3){--lag:12%}
  }
}
@keyframes ci-recede{from{scale:1.35}to{scale:1}}
@keyframes ci-drift{from{translate:0 -60px}to{translate:0 60px}}
@keyframes ci-pin{from{opacity:0;translate:-32px 0}to{opacity:1;translate:none}}
@keyframes ci-arrive{from{opacity:0;translate:0 56px;filter:blur(6px)}to{opacity:1;translate:none;filter:none}}
@keyframes ci-draw{from{scale:1 0}to{scale:1 1}}

/* the script fallback (ci-depth.js): where the browser has no scroll-driven
   animations, the script adds .ci-js and writes the values inline; these are
   the static parts the @supports block would otherwise give */
.ci-depth.ci-js .ci-art__img{top:-60px;height:460px}
.ci-depth.ci-js .case__block--value{position:relative;border-left-color:transparent}
.ci-depth.ci-js .case__block--value::before{content:"";position:absolute;top:0;bottom:0;left:-3px;width:3px;background:var(--red);
  transform-origin:top;scale:1 var(--ci-rule,1)}
.ci-depth.ci-js .case *,.ci-depth.ci-js .case__block--value::before{animation:none!important}

/* ---------- Leadership on navy, its team note on red ----------
   Client, 5 Oct 2026: "make navy bg of the section: The Leadership Behind CAPE
   Advisory and red bg of the small section: Senior-led. Multidisciplinary in
   execution." The band wears .band--dark (edition home_navy_bands=), so its
   type is white, roles and credentials 78% white, the focus ring white. The
   team note under the three leaders becomes a full-width red strip that closes
   the band: red where the client chose it (V33). On red every word is pure
   white (4.81:1); the chips turn white with red words (4.81:1), and the arrow
   circle fills white on hover, since its red fill would vanish. */
.lead.band--dark{padding-bottom:0;overflow:hidden}
.lead.band--dark .person__portrait{background:var(--dark)}
.lead.band--dark .team{position:relative;isolation:isolate;margin-top:var(--s8);padding-block:var(--s8);border-top:0;--fg-2:#fff}
.lead.band--dark .team::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--red)}      /* edge to edge; the band clips the scrollbar's share */
.lead.band--dark .team__copy{color:#fff}
.lead.band--dark .team .chip{background:#fff;color:var(--red)}
.lead.band--dark .team .textlink:hover .arr{background:#fff;border-color:#fff;color:var(--red)}

/* ---------- Research & Publications: the stack (after the American Express band, citybankplc.com) ----------
   Client, 5 Oct 2026 ("replace the home page research publication section with
   this option in both 3.2 and 3.3"): option 02 of the preview, built by
   build_home.publications_stack() (edition home_pubs='stack'), moved by rp-stack.js.
   Flat navy (one navy, client 5 Oct 2026: the lift of --dark-800 behind the
   pile is gone). The pile, the diagonal and
   the deal are transforms the script writes on .rps__book. It also sets, per
   column, --rp-plinth (the plinth's ground) and --rp-rv (the words), and on
   the band --rp-a (the cube outline drawing in) and --rp-fade. Every default
   is the finished state, so the band is today's layout without the script. */
.rps{position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark)}
.rps__wrap{position:relative}
.rps .sechead__main{max-width:min(64ch,54%)}          /* the pile sits beside it */

/* Where the pile is: the script reads this box. Behind the words (z -1, in
   the band's isolated stack), so the outline never crosses over text. */
.rps__anchor{position:absolute;z-index:-1;top:calc(var(--s6) * -1);
  left:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .58);right:var(--gutter);
  height:clamp(360px,30vw,440px);pointer-events:none}

/* CAPE's cube outline, six hexagons, the second red */
.rps__art{position:absolute;left:50%;top:50%;width:min(120%,580px);height:auto;aspect-ratio:1;overflow:visible;
  translate:-50% -50%;rotate:calc(var(--rp-a,1) * 30deg - 30deg);scale:calc(.8 + var(--rp-a,1) * .2);
  opacity:var(--rp-fade,.6)}
.rps__art path{fill:none;stroke:rgb(255 255 255 / .18);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, var(--rp-a,1) * 1.7 - var(--n) * .13, 1))}
.rps__art path.is-red{stroke:var(--red);stroke-width:1.5}

/* the plinths: their ground is a layer of its own, so it can arrive after the
   book without the book (inside it) fading too */
.rps .pub__plinth{position:relative;background:none}
/* the plinth filled in --dark-800 (#17395F), an exception to one navy the client
   chose (5 Oct 2026: "restore this book behind dark navy to home page", option 03
   of the preview); for a while it was a hairline outline */
.rps .pub__plinth::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--dark-800);
  opacity:var(--rp-plinth,1)}
.rps__book{position:absolute;inset:var(--s6);z-index:1;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 22px 24px rgb(0 0 0 / .34)) drop-shadow(0 3px 6px rgb(0 0 0 / .26))}
/* The plinth's height, the width from the cover's own ratio (its width and
   height attributes): the same size today's rule gives once the file is in,
   but known before a lazy cover loads, so the script can measure it. */
.rps__book img{height:100%;width:auto;max-height:none;max-width:none}
.rps .pub__cover:not(.pub__cover--mockup){border-radius:3px}
/* The two book renders stand on a pale studio ground: on navy it would show
   as slivers at the corners, so each is cut to the book's own outline. */
.rps .pub__cover--mockup{clip-path:polygon(0 1.9%,.9% 1.1%,3.4% .7%,6.8% .5%,99% 3.1%,99.5% 3.8%,99.5% 94.6%,
  99% 96.5%,96.8% 97.4%,16% 99.4%,6.8% 99.6%,.9% 99.5%,0 97.6%)}

/* the main action: today's pill with the site's arrow, which slides on hover
   (the only action now: "View Digital Edition" and "Purchase" are gone) */
.rps__go{gap:10px;padding-right:18px}
.rps__arr{display:inline-grid;place-items:center;width:18px;height:18px;transition:translate var(--t-fast) var(--ease)}
.rps__arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rps__go:hover .rps__arr,.rps__go:focus-visible .rps__arr{translate:4px 0}
/* every publication: under the intro, clear of the pile beside it */
.rps__all{margin-top:var(--s5)}

/* the script running: the words of each column wait for its book */
.rps.is-live .rps__book{will-change:transform}
.rps.is-live .rps__item > :not(.pub__plinth){opacity:var(--rp-rv,1);translate:0 calc((1 - var(--rp-rv,1)) * 24px)}

@media (max-width:1024px){
  /* no room beside the heading: no pile; the outline stays as a mark */
  .rps .sechead__main{max-width:64ch}
  .rps__anchor{top:calc(var(--s8) * -1);left:auto;right:calc(var(--gutter) * -1);width:min(62vw,340px);
    height:min(62vw,340px);translate:30% 0}
}
@media (prefers-reduced-motion:reduce){
  .rps.is-live .rps__book{transform:none!important}
  .rps.is-live .rps__item > :not(.pub__plinth){opacity:1;translate:none}
  .rps .pub__plinth::before{opacity:1}
  .rps__art{rotate:none;scale:none;opacity:.6}
  .rps__art path{stroke-dashoffset:0}
}
@media print{
  .rps__book{transform:none!important}
  .rps .rps__item > *{opacity:1!important;translate:none!important}
}

/* ---------- The closing call to action: oversized type, round badge ----------
   Client, 5 Oct 2026: "make 5 final in v3.2 and 3.3" - option 05 of
   cta-preview.html, built by build_home.cta_type() (edition home_cta='type').
   The same rules as the preview's cta-preview.css, the version's own copy. */
.cta-type__h{max-width:15ch;font-size:clamp(44px,7.6vw,124px);font-weight:800;line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.cta-type__q{color:var(--red)}
.cta-type__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.cta-type__copy{max-width:34ch;font-size:var(--fs-md);font-weight:300;line-height:1.3}
.cta-type__badge{position:relative;display:grid;place-items:center;width:clamp(156px,14.5vw,216px);aspect-ratio:1;
  border-radius:50%;background:var(--dark);color:#fff;text-decoration:none;--focus:var(--red)}
.cta-type__ring{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;overflow:visible}
.cta-type__ring text{font:700 15px var(--font);letter-spacing:.04em}
.cta-type__core{display:grid;place-items:center;width:34%;aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;
  transition:transform .3s var(--ease)}
.cta-type__core svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transform:rotate(-45deg);transition:transform .3s var(--ease)}
/* the ring turns only while the badge is hovered or focused: motion the
   visitor starts, so it needs no pause control */
.cta-type__badge:hover .cta-type__ring,.cta-type__badge:focus-visible .cta-type__ring{animation:cta-spin 9s linear infinite}
.cta-type__badge:hover .cta-type__core{transform:scale(1.08)}
.cta-type__badge:hover .cta-type__core svg,.cta-type__badge:focus-visible .cta-type__core svg{transform:none}
@keyframes cta-spin{to{transform:rotate(360deg)}}
@media (max-width:600px){
  .cta-type__foot{grid-template-columns:minmax(0,1fr);justify-items:start}
}

/* ---------- The CAPE Perspective: the hexagon line art (client, 6 Oct 2026) ----------
   After City Bank's Amex band: one flat blue, an even heavy outline, cropped by the band's edge. Drawn from the
   cube - its six nested hexagons (the second red) at the bottom right beside the trustline, and from them a run
   of honeycomb cells climbing up and to the left. It sits behind the words (z 0, the words z 1) and dims where
   it passes behind the three columns, so no column's text sits on a full-strength stroke. */
.persp--strip{position:relative;overflow:hidden;isolation:isolate}
.persp--strip > .wrap{position:relative;z-index:1}
.persp__art{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 0,#000 22%,rgb(0 0 0 / .3) 36%,rgb(0 0 0 / .3) 52%,#000 66%);
          mask-image:linear-gradient(#000 0,#000 22%,rgb(0 0 0 / .3) 36%,rgb(0 0 0 / .3) 52%,#000 66%)}
.persp__art path{fill:none;stroke:#2478C8;stroke-width:13;stroke-linejoin:miter;stroke-miterlimit:3}
.persp__art path.is-red{stroke:var(--red)}
@media (max-width:760px){ .persp__art{opacity:.55} }