/* 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 - its own page styles (client, 5 Oct 2026). Rules for the inner pages
   v3.2 and v3.3 change alike (edition.v3_pages), loaded after pages.css only
   on the pages listed in its edition's page_css= (v3/src-v3.4/, own_src=), so no other edition - and no
   other v3.3 page - is touched.
   ============================================================ */

/* ---------- Our People: "The Team Behind the Advisors" in one column ----------
   Client: "the texts are in 2 columns. make them full width one column before
   photo card." The two paragraphs stack, full width, above the team's photo
   cards, in place of pages.css's two columns. */
.ppl-delivery__cols{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}

/* ---------- Our People: the closing call to action as the inset panel ----------
   Client: "replace bottom cta of http://127.0.0.1:8773/our-people/#delivery-h
   with number 4" - option 04 of cta-preview.html, built by
   build_home.cta_panel() with the page's own words (edition page_cta=). The
   same rules as the preview's cta-preview.css, the version's own copy. */
.cta-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--s7) var(--s8);align-items:end;padding:clamp(24px,5vw,80px);border-radius:var(--r-card);
  background:var(--dark);color:#fff;--fg:#fff;--focus:#fff}
/* the cube as a white silhouette, a ghost hexagon off the right edge */
.cta-panel__mark{position:absolute;z-index:-1;right:-7%;top:50%;width:min(440px,46%);height:auto;transform:translateY(-50%);
  opacity:.07;filter:brightness(0) invert(1);pointer-events:none}
.cta-panel__main{display:grid;gap:var(--s4)}
.cta-panel h2{max-width:18ch}
.cta-panel__copy{max-width:44ch;color:var(--on-dark-2);font-size:var(--fs-body-lg);line-height:1.5}
.cta-panel__side{display:grid;justify-items:start;gap:var(--s4)}
.cta-panel__faces{display:flex;margin:0;padding:0 0 0 14px;list-style:none}
.cta-panel__faces li{flex:none;width:64px;height:64px;margin-left:-14px;overflow:hidden;border:3px solid var(--dark);
  border-radius:50%;background:var(--dark)}
.cta-panel__faces img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.cta-panel__names{color:var(--on-dark-2);font-size:15px;line-height:1.45;text-wrap:balance}
.cta-panel__names span{white-space:nowrap}
@media (max-width:900px){
  .cta-panel{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:420px){
  /* inside a padded panel the pill would wrap: full width, tighter sides */
  .cta-panel .btn{width:100%;padding-inline:var(--s4)}
}

/* ---------- About: the closing call to action as the bento ----------
   Client: "replace bottom cta: http://127.0.0.1:8772/about/ with number 7" -
   option 07 of cta-preview.html, built by build_home.cta_bento() with the
   page's own words (edition page_cta=). The same rules as the preview's
   cta-preview.css, the version's own copy. */
.cta-bento__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(300px,auto) auto;gap:var(--s3)}
.cta-bento__grid > *{overflow:hidden;border-radius:var(--r-card)}
.cta-bento__main{grid-column:1 / 3;grid-row:1 / 3;display:grid;align-content:end;justify-items:start;gap:var(--s5);
  padding:clamp(28px,3.4vw,56px);background:var(--dark);color:#fff;--fg:#fff;--focus:#fff}
.cta-bento__main p{max-width:40ch;color:var(--on-dark-2);font-size:var(--fs-body-lg);line-height:1.5}
.cta-bento__photo{position:relative;grid-column:3 / 5;grid-row:1;min-height:300px;background:var(--canvas-soft)}
.cta-bento__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cta-bento__trust{grid-column:3;grid-row:2;display:flex;align-items:flex-end;padding:var(--s5);background:var(--canvas-soft);color:var(--ink)}
.cta-bento__trust p{font-size:clamp(17px,1.4vw,21px);font-weight:800;line-height:1.08;text-transform:uppercase}
.cta-bento__trust span{display:block}
/* the trustline's red full stop, as on the homepage (.persp__trust) */
.cta-bento__trust span:last-child::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.08em;
  border-radius:50%;background:var(--red);vertical-align:baseline}
.cta-bento__areas{grid-column:4;grid-row:2;display:grid;align-content:space-between;gap:var(--s4);padding:var(--s5);
  background:var(--dark);color:#fff;--fg:#fff}       /* one navy (the preview's tile is --dark-800) */
.cta-bento__areas .eyebrow{margin:0}
.cta-bento__areas .chip{background:rgb(255 255 255 / .1);color:#fff}
@media (max-width:1024px){
  .cta-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .cta-bento__main,.cta-bento__photo{grid-column:1 / -1;grid-row:auto}
  .cta-bento__photo{min-height:0;aspect-ratio:16 / 9}
  .cta-bento__trust,.cta-bento__areas{grid-column:auto;grid-row:auto}
}
@media (max-width:600px){
  .cta-bento__grid{grid-template-columns:minmax(0,1fr)}
  .cta-bento__main{padding:var(--s5)}
}
@media (max-width:420px){
  .cta-bento__main .btn{width:100%;padding-inline:var(--s4)}
}

/* ---------- Contact: a closing call to action, option 02, centred ----------
   Client: "replace bottom cta: http://127.0.0.1:8772/contact/ with no. 2" -
   v1's Contact page had none, so the band is added after the offices
   (build_pages.added_cta, edition page_cta=). Option 02 of cta-preview.html,
   built by build_home.cta_center(): the words on clear white; v1's What We Do
   illustration rises from the bottom out of a white wash, overlapping only
   behind the button. The same rules as the preview's cta-preview.css, v3.2's
   own copy. After a white band it takes the site's hairline, as a white band
   following a white band does (site.css), in place of its own top padding. */
.cta-center{position:relative;isolation:isolate;overflow:hidden;padding-top:var(--band);
  padding-bottom:clamp(210px,23vw,370px);background:#fff;color:var(--ink);text-align:center;--fg:var(--ink)}
.cta-center__art{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:clamp(300px,34vw,540px)}
.cta-center__art img{width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.cta-center__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,#fff 0%,#fff 16%,rgb(255 255 255 / .75) 36%,rgb(255 255 255 / 0) 68%)}
.cta-center__in{display:grid;justify-items:center;gap:var(--s5)}
.cta-center h2{max-width:22ch;text-wrap:balance}
.cta-center__copy{max-width:46ch;color:var(--text-2);font-size:var(--fs-body-lg);line-height:1.5;text-wrap:balance}
.band:not(.band--dark) + .cta-center{padding-top:0}
.band:not(.band--dark) + .cta-center > .cta-center__in::before{content:"";justify-self:stretch;height:1px;
  margin-bottom:calc(var(--band) - var(--s5));background:var(--line)}

/* ---------- About: arrows in place of the perspective heading's '+' ----------
   Client: "replace + sign with arrow: Senior Regulatory Insight +
   Multinational Commercial Understanding + Practical Execution". The site's
   arrow, red as an accent (3.03:1 on navy, over the 3:1 a graphic needs),
   sized to the heading; the '+' stays in the text, visually hidden
   (build_pages.heading_arrows, edition page_arrows=). */
.hd-arrow{display:inline-block;width:.78em;height:.78em;vertical-align:-.04em;color:var(--red)}
.hd-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}

/* ---------- Insights: option 03, split, after Latest Insights ----------
   Client: "in http://127.0.0.1:8772/insights/, after insights section, place
   cta 3" - option 03 of cta-preview.html, built by build_home.cta_split(),
   placed by build_pages.cta_after() (edition page_cta_after=). The same
   rules as the preview's cta-preview.css, the version's own copy.
   The text keeps the page's left edge; the photograph takes the right half
   of the band, edge to edge. The wrap is centred, so its two columns meet at
   the viewport's middle, where the photograph starts. */
.cta-split{position:relative;background:var(--dark);color:#fff;--fg:#fff;--focus:#fff}
.cta-split__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8);align-items:center;
  min-height:clamp(480px,38vw,620px);padding-block:var(--band)}
.cta-split__text{display:grid;justify-items:start;gap:var(--s5)}
.cta-split__copy{max-width:40ch;color:var(--on-dark-2);font-size:var(--fs-body-lg);line-height:1.5}
.cta-split__media{position:absolute;top:0;bottom:0;left:50%;right:0;background:var(--dark)}
.cta-split__media img{width:100%;height:100%;object-fit:cover;object-position:55% 35%}
@media (max-width:900px){
  .cta-split__in{grid-template-columns:minmax(0,1fr);min-height:0}
  .cta-split__media{position:relative;left:auto;aspect-ratio:16 / 10}
}

/* ---------- Industries: its call to action as option 01, mid-page ----------
   Client: "reorganize 7 capabilities block after experience not coverage
   block. then place cta 1 then industries we advise. remove bottom cta" -
   option 01 of cta-preview.html, built by build_home.cta_art() with the
   page's own words (edition page_cta=, page_order=). The same rules as the
   preview's cta-preview.css, the version's own copy.
   v1's Insights illustration under the photo scrim's ramp (DESIGN.md, Hero -
   photo): dense behind the words, nearly clear over the lit building. */
.cta-art{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(460px,40vw,600px);padding-block:var(--band);background:rgb(var(--scrim));color:#fff;--fg:#fff;--focus:#fff}
.cta-art__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:75% 55%}
.cta-art::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(var(--scrim) / .92) 0%,rgb(var(--scrim) / .8) 38%,rgb(var(--scrim) / .42) 70%,rgb(var(--scrim) / .08) 100%)}
.cta-art__in{width:100%;display:grid;justify-items:start;gap:var(--s5)}
.cta-art h2{max-width:17ch}
.cta-art__copy{max-width:44ch;color:var(--on-dark-2);font-size:var(--fs-body-lg);line-height:1.5}
.cta-art .btn{margin-top:var(--s2)}
@media (max-width:900px){
  /* the copy runs too far right for the ramp (measured 4.1:1 at 768): an even scrim */
  .cta-art::before{background:linear-gradient(to top,rgb(var(--scrim) / .9),rgb(var(--scrim) / .76))}
}

/* ---------- Client Impact: its call to action as option 06, the marquee ----------
   Client: "in http://127.0.0.1:8772/client-impact/, place our perspective
   after anonymous by default section then selected engagement then place cta
   6 and remove bottom cta" - option 06 of cta-preview.html, built by
   build_home.cta_marquee() with the page's own words (edition page_cta=,
   page_order=). The same rules as the preview's cta-preview.css, v3.2's own
   copy.
   The practice areas in outline type, two copies end to end so the belt
   loops seamlessly at -50%. Paused by its button, off screen (cta-marquee.js)
   and under reduced motion (site.css stops every animation; the button
   hides). On the site's one navy (--dark, client 5 Oct 2026; the preview's is
   --dark-900) the red Pause label, 19px bold, is 3.03:1 - WCAG large text. */
.cta-marquee{position:relative;overflow:hidden;padding-top:var(--s6);padding-bottom:var(--band);background:var(--dark);
  color:#fff;--fg:#fff;--focus:#fff}
.cta-marquee__top{display:flex;justify-content:flex-end}
.cta-marquee__belt{margin:var(--s4) 0 var(--s7);overflow:hidden}
.cta-marquee__track{display:flex;width:max-content;animation:cta-marquee 50s linear infinite}
.cta-marquee__track span{flex:none;padding-right:.32em;font-size:clamp(56px,9vw,160px);font-weight:800;line-height:1.02;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px rgb(255 255 255 / .5)}
.cta-marquee__track .cta-marquee__sep{-webkit-text-fill-color:var(--red);-webkit-text-stroke:0}
.cta-marquee[data-paused="true"] .cta-marquee__track,.cta-marquee.is-offscreen .cta-marquee__track{animation-play-state:paused}
@keyframes cta-marquee{to{transform:translateX(-50%)}}
.cta-marquee__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end}
.cta-marquee__text{display:grid;gap:var(--s4)}
.cta-marquee h2{max-width:24ch}
.cta-marquee__copy{max-width:52ch;color:var(--on-dark-2);font-size:var(--fs-body-lg);line-height:1.5}
@media (max-width:760px){
  .cta-marquee__in{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media (prefers-reduced-motion:reduce){
  .cta-marquee__top{display:none}
}

/* ---------- Client Impact: each case over its sector's photograph, with depth ----------
   Client: "in all Selected Engagements cases give photo bg with deep scroll
   animation like you made in the home page of client impacts". The
   homepage's Client Impact cards, widened: each case is charcoal (the photo
   scrim's colour) with its sector's photograph - the hero of the industry
   page it links to - in its top part. The picture is clear under the case
   number and sector chip, then the scrim closes over it (solid by 280-400px),
   so every word is white on charcoal. The photograph is 120px taller than
   its window so its drift never shows an edge. build_pages.case_photos()
   (edition page_case_photos=) puts the photograph in; ci-cases.js moves it.
   Without the script, or with reduced motion, the cards stand still. */
.ci-cases--art .ci-case{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(230px,24vw,320px);
  background:rgb(var(--scrim));color:#fff;--fg:#fff;--fg-2:var(--on-dark-2);--focus:#fff}
.ci-case__img{position:absolute;z-index:-2;left:0;top:-60px;width:100%;height:calc(clamp(300px,30vw,420px) + 120px);
  object-fit:cover;object-position:50% 42%}
.ci-cases--art .ci-case::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--scrim) / 0) 0,rgb(var(--scrim) / .15) 90px,
    rgb(var(--scrim) / .82) clamp(200px,21vw,280px),rgb(var(--scrim)) clamp(280px,29vw,400px))}
.ci-case__tags{position:absolute;top:clamp(20px,2.4vw,32px);left:clamp(24px,4vw,48px);right:clamp(24px,4vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.ci-cases--art .ci-case__n{padding:4px 14px;border-radius:var(--r-chip);background:rgb(var(--scrim) / .82);color:#fff}
.ci-cases--art .ci-case__sector{color:var(--ink)}
.ci-cases--art .ci-part__h,.ci-cases--art .ci-case__k{color:var(--on-dark-2)}
.ci-cases--art .ci-case__links{border-top-color:var(--line-dark)}
/* the script running: the value rule draws itself (a layer of its own) */
.ci-cases.is-live .ci-case__img{will-change:transform}
.ci-cases.is-live .ci-part--value{position:relative;border-left-color:transparent}
.ci-cases.is-live .ci-part--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)}
@media (prefers-reduced-motion:reduce){
  .ci-cases.is-live .ci-case *{opacity:1!important;translate:none!important;filter:none!important}
  .ci-cases.is-live .ci-case__img{scale:none!important}
  .ci-cases.is-live .ci-part--value::before{scale:none}
}

/* ---------- Insights: a thumbnail on every article card ----------
   Client: "in both versions of latest insights, add thumbnail for: latest
   insights and regulatory update". The picture runs to the card's edges at
   its top (the card's 28px padding taken back), then the category, title,
   date and Read as before; it eases in a little on hover, as the homepage's
   Latest Insights do (build_pages.insight_thumbs). */
.insight .story__media{margin:-28px -28px var(--s2);border-radius:var(--r-card) var(--r-card) 0 0}
.insight:hover .story__media img{transform:scale(1.04)}

/* ---------- Insights: the videos and publications in their bands ----------
   Client: "add conversation videos and publications under respective sections
   too". The homepage's conversation video cards and the three publications
   (site.css's .vidcard and .pub) sit between each band's introduction and its
   "All ..." link (build_pages.insight_cards); the publications' look is the
   next block. */
.ins-cards{margin:var(--s6) 0 var(--s5)}

/* ---------- Insights: the publications, one size, their buttons on one line ----------
   Client: "the 3 book card heights are not equal", then "remove the navy bg
   style and follow general style as it was in previous version. the explore
   the publication button should be lower and in same line with other 2 books
   button, see home page section".
   - General style, on the white band: the light plinth of site.css, the dark
     outline pill with its arrow; no shadow, no navy.
   - The homepage's measurements: each cover is the plinth's height less 32px
     each side, placed in it, so every plinth keeps its 5:4 (424x339 at 1440)
     whatever the cover's shape (site.css's plinth grew to the taller Budget
     Review cover: 421px against 399px).
   - The buttons on one line: pages.css gives every div in a .pub flex:1 and a
     column (for the Research & Publications page's own cards), which grew each
     button row and held its pill at the top. Undone here, the row takes
     site.css's margin-top:auto and sits at the foot of the card, as on the
     homepage. */
.ins-pubs .pub__plinth{position:relative;flex:none}
.ins-pubs .rps__book{position:absolute;inset:var(--s6);display:flex;align-items:center;justify-content:center}
.ins-pubs .rps__book img{height:100%;width:auto;max-height:none;max-width:none}
.ins-pubs .pub__actions{flex:none;flex-direction:row;align-items:center}
.ins-pubs .rps__go{gap:10px;padding-right:18px}
.ins-pubs .rps__arr{display:inline-grid;place-items:center;width:18px;height:18px;transition:translate var(--t-fast) var(--ease)}
.ins-pubs .rps__arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ins-pubs .rps__go:hover .rps__arr,.ins-pubs .rps__go:focus-visible .rps__arr{translate:4px 0}

/* ---------- Our People: "The Team Behind the Advisors", larger type ----------
   Client: "make fonts bigger in http://127.0.0.1:8772/our-people/ under the team
   behind adviser". Its two paragraphs take the site's large body size (18-22px,
   as the section intros do) in place of pages.css's 17px; the team cards' names
   go from 17 to 20px, credentials from 13 to 15px, roles from 14 to 16px. The
   greys stay #666 (5.74:1 on white). */
.ppl-delivery__cols p{font-size:var(--fs-body-lg);line-height:1.55}
.ppl-team__name{font-size:20px}
.ppl-team__cred{font-size:15px}
.ppl-team__role{font-size:16px;line-height:1.45}

/* ---------- Our People: the team four to a row (v3.3 only) ----------
   Client, 5 Oct 2026: "make this version final in v3.3" - our-people-preview.html.
   pages.css fits as many 170px columns as the width allows (six at 1440); here
   four, with a little more air between rows, so each photograph is about half as
   large again (306px at 1440; build_pages.team_four_sizes loads the 480px files).
   Two to a row from 601 to 900px; on a phone pages.css's own grid, one to a row as before.
   Not in pages-v3.2.css: v3.2 keeps six. */
@media (min-width:901px){
  .ppl-team{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s7) var(--s6)}
}
@media (min-width:601px) and (max-width:900px){
  .ppl-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
}

/* ---------- Client Impact: the CTA on the right, its button under its words ----------
   Client, 5 Oct 2026: "discuss a business challenge heading and sub text right",
   then "Do not revert. Make the discuss button right side below texts and add
   appropriate space in navy bg as it is now below button". Over 760px the band
   is one column on the right: the heading and copy right-aligned, then the button,
   right-aligned below them (the grid's 32px gap above it). The band's own bottom
   padding stays below the button, as before. Visual order is the markup's, words
   then button. On a phone, one column on the left as before. */
@media (min-width:761px){
  .cta-marquee__in{grid-template-columns:minmax(0,1fr)}
  .cta-marquee__text{justify-items:end;text-align:right}
  .cta-marquee__in > .btn{justify-self:end}
}

/* ---------- Client Impact: the perspective on red (v3.3 only) ----------
   Client, 5 Oct 2026: "apply the color change in v3.3 client-impact page" -
   option 02 of perspective-preview.html. The quote band is red, the call to
   action below it stays navy. On red every word is pure white (4.81:1); the
   cube stays the logo as it is. Not in pages-v3.2.css: v3.2 keeps navy. */
.quote--red{background:var(--red);--fg-2:#fff}

/* ---------- About: the stat strip on red (v3.3 only) ----------
   Client, 5 Oct 2026. The band is red (.band--red, home-v3.4.css is not loaded
   here, so it is set again); all type is pure white (4.81:1) and the rules
   between the figures are white hairlines. */
.glance--red{background:var(--red);--fg-2:#fff;color:#fff}
.glance--red .eyebrow,.glance--red .abt-stat__n,.glance--red .abt-stat__l{color:#fff}
.glance--red .abt-stats,.glance--red .abt-stat+.abt-stat{border-color:rgba(255,255,255,.4)}

/* ---------- What We Do: a thumbnail on every capability card (v3.3 only) ----------
   Client, 6 Oct 2026: "add thumbnails, follow the What We Do section photos of
   the homepage" - each capability's own perspective photograph
   (build_pages.wwd_thumbs). The picture runs to the card's edges at its top
   (the card's 28px padding taken back) and eases in a little on hover. */
.wwd-cards .story__media{margin:-28px -28px var(--s2);border-radius:var(--r-card) var(--r-card) 0 0}
.wwd-cards .hubcard:hover .story__media img{transform:scale(1.04)}

/* ---------- Sector pages: a thumbnail on every capability card (v3.3 only) ----------
   Client, 6 Oct 2026: the capability's own photograph, as What We Do gives it
   (build_pages.capcard_thumbs). The picture runs to the card's edges at its
   top (the card's 24px padding taken back). */
.ind-capcard .story__media{margin:-24px -24px 0;border-radius:var(--r-card) var(--r-card) 0 0}
.ind-capcard a{overflow:hidden}
.ind-capcard a:hover .story__media img{transform:scale(1.04)}

/* ---------- Capability pages: a thumbnail on every Dedicated Advisory Pages card (v3.3 only) ----------
   Client, 6 Oct 2026: each advisory carries the same photograph on every page
   that offers it (build_capabilities.SUB_PHOTOS). The picture runs to the
   card's edges at its top (the card's 28px padding taken back). */
.subcard .story__media{margin:-28px -28px var(--s2);border-radius:var(--r-card) var(--r-card) 0 0}
.subcard:hover .story__media img{transform:scale(1.04)}

/* ---------- Insights: the video slider over the call to action (v3.4 only) ----------
   Client, 6 Oct 2026: "use this block by replacing the old block in insight page" - option 03 of
   perspective-preview.html (experiments-src-v3.4/css/perspective-video.css is the preview's copy). The call to
   action is the marquee as it is everywhere (.cta-marquee: Pause, drifting words, words and button on the right),
   the slider laid over its left: an arched window over two rings, loops that fade into each other on their own, an
   outlined word overlapping the window, dots, the site's arrows (.iconbtn) and a pause. The arch's top is level with
   the Pause row, above the row of words, and comes down across it; the words pass behind the window. */
.pvs{display:grid;gap:var(--s7);justify-items:start}
.pvs__stage{position:relative;width:min(100%,460px);margin:var(--s6) 0 0 var(--s6)}
.pvs__slides{display:grid}
.pvs__slide{grid-area:1/1;position:relative;margin:0;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s}
.pvs__slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.pvs__window{position:relative;aspect-ratio:8/9;overflow:hidden;border-radius:999px 999px 28px 28px;background:var(--dark-800)}
.pvs__window video{display:block;width:100%;height:100%;object-fit:cover}
/* the foot of the window darkens so the outlined word reads over the footage */
.pvs__window::after{content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgb(16 42 71 / .92),rgb(16 42 71 / 0))}
/* the rings: the window's own outline, twice, drawn out from it */
.pvs__ring{position:absolute;pointer-events:none;border:2px solid var(--red);border-radius:999px 999px 36px 36px}
.pvs__ring--1{inset:-16px}
.pvs__ring--2{inset:-34px;border-width:1.5px;border-color:rgb(230 0 0 / .45)}
/* the word overlaps the window's foot and runs out past its left edge, as PEOPLE does on vodafone.com */
.pvs__cap{position:absolute;z-index:2;left:calc(var(--s6) * -1);right:var(--s4);bottom:var(--s5);display:grid;gap:var(--s1)}
.pvs__eyebrow{margin:0;color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pvs__word{margin:0;color:#fff;font-size:clamp(20px,2vw,28px);font-weight:300;line-height:1.1}
.pvs__word span{display:block;font-size:clamp(48px,5.6vw,88px);font-weight:800;line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #fff}
.pvs__who{margin:var(--s1) 0 0;color:#fff;font-size:14px;line-height:1.4}

.pvs__nav{display:flex;align-items:center;gap:var(--s4);margin-left:var(--s6)}
.pvs__dots{display:flex;align-items:center;gap:var(--s3)}
.pvs__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255 / .4);cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.pvs__dot.is-active{background:#fff;transform:scale(1.25)}
/* arrows and pause: the site's own .iconbtn (site.css), white on navy */
.pvs__nav .iconbtn:last-child{margin-left:var(--s2)}
.pvs button:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:860px){
  .cta-video__in{grid-template-columns:minmax(0,1fr)}
  .cta-video__text{justify-items:start;text-align:left}
  .pvs__stage{width:min(100% - var(--s6),380px)}
}
@media (prefers-reduced-motion:reduce){
  .pvs__slide{transition:none}
}


.cta-marquee--video{min-height:min(100vh,860px)}
.cta-marquee--video .cta-marquee__text{justify-self:end;max-width:min(100%,52%)}   /* clear of the arch: a long headline wraps in the right half */
.cta-marquee__video{position:absolute;inset:0;z-index:2;pointer-events:none}
.cta-marquee__video .pvs{position:absolute;top:var(--s5);left:var(--s4);pointer-events:auto;gap:var(--s5)}
.cta-marquee__video .pvs__stage{margin-top:var(--s6)}
@media (max-width:860px){
  .pvs__stage{width:min(100% - var(--s6),380px)}
  .cta-marquee--video{min-height:0}
  .cta-marquee__video{position:static;pointer-events:auto}
  .cta-marquee__video .pvs{position:static;margin-top:var(--s6)}
}