/* Cinematic service-page hero (business, pathways, global, careers): full-bleed footage, soft tinted scrim, copy on the leading side, a frosted "tool film" stage
   on the other (phones: stacked, one compact card, plain translucent glass, no blur). A generalised copy of home-hero.css. Logical properties only. Prefix: ph-.
   Battery rules: blur only on wide screens, no filters over the video, transitions and animations use transform and opacity only.
   State classes set by /assets/site/page-hero.js on the section: ph-js (script running), ph-still (reduced motion: static final state), is-playing (video visible).
   Page tints: every service hero uses the same sky-blue tint (owner: consistent look). */
#site-header:empty{min-block-size:69px}
.ph{--ph-fh:270px;--ph-tint:rgba(26,92,150,.36);--ph-acc:#F3CF86;position:relative;isolation:isolate;display:flex;flex-direction:column;min-block-size:min(88vh,820px);background:#0B2036;color:#fff;overflow:hidden;border:0}
.ph a:not(.btn){color:#fff}
.ph :focus-visible{outline:3px solid #FFD98A;outline-offset:3px}
.ph-business{--ph-tint:rgba(26,92,150,.36)}
.ph-pathways{--ph-tint:rgba(26,92,150,.36)}
.ph-global{--ph-tint:rgba(16,42,67,.5);background:#07192B}
.ph-careers{--ph-tint:rgba(26,92,150,.36)}

/* ---------- media: poster first (it is the LCP), video fades in over it ---------- */
.ph-media{position:absolute;inset:0;z-index:0;background:#0B2036}
.ph-poster,.ph-video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 42%;display:block}
.ph-video{opacity:0;transition:opacity .7s ease;inset:2px;inline-size:calc(100% - 4px);block-size:calc(100% - 4px)} /* 2px smaller than the poster on purpose: the first video frame must not replace the poster as the Largest Contentful Paint (task Q6) */
.ph.is-playing .ph-video{opacity:1}
/* navy scrim with a soft page tint on the far side: white copy stays at 4.5:1 or better even over a pure white frame (numbers in README) */
.ph-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,27,46,.42) 0%,rgba(8,27,46,0) 28%,rgba(8,27,46,0) 64%,rgba(8,27,46,.72) 100%),
  linear-gradient(100deg,rgba(8,27,46,.9) 0%,rgba(10,34,58,.82) 46%,var(--ph-tint) 100%)}
:root[dir="rtl"] .ph-scrim{background:
  linear-gradient(180deg,rgba(8,27,46,.42) 0%,rgba(8,27,46,0) 28%,rgba(8,27,46,0) 64%,rgba(8,27,46,.72) 100%),
  linear-gradient(260deg,rgba(8,27,46,.9) 0%,rgba(10,34,58,.82) 46%,var(--ph-tint) 100%)}
.ph-global .ph-scrim{background:
  linear-gradient(180deg,rgba(5,18,32,.5) 0%,rgba(5,18,32,.05) 28%,rgba(5,18,32,.05) 62%,rgba(5,18,32,.8) 100%),
  linear-gradient(100deg,rgba(5,18,32,.93) 0%,rgba(8,27,46,.86) 46%,var(--ph-tint) 100%)}
:root[dir="rtl"] .ph-global .ph-scrim{background:
  linear-gradient(180deg,rgba(5,18,32,.5) 0%,rgba(5,18,32,.05) 28%,rgba(5,18,32,.05) 62%,rgba(5,18,32,.8) 100%),
  linear-gradient(260deg,rgba(5,18,32,.93) 0%,rgba(8,27,46,.86) 46%,var(--ph-tint) 100%)}
.ph-global::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:2px;z-index:3;background:linear-gradient(90deg,transparent,#D9A23A 20%,#F3CF86 50%,#D9A23A 80%,transparent)}

/* ---------- layout ---------- */
.ph-in{position:relative;z-index:2;flex:1;display:grid;align-content:center;gap:var(--s-6) clamp(24px,4vw,64px);padding-block:clamp(28px,4.5vw,60px) clamp(12px,2vw,20px);grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage"}
@media (min-width:900px){.ph-in{grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-areas:"copy stage";align-items:center}}
.ph-copy{grid-area:copy;display:flex;flex-direction:column;gap:var(--s-5);max-inline-size:640px}
.ph-copy h1{margin:0;color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.35)}
.ph-copy .lead{margin:0;color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(0,0,0,.3)}
.ph-copy .eyebrow{color:#F3CF86;margin:0}
.ph-copy .actions{margin-block-start:var(--s-2)}
.ph-copy .actions .btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.65)}
.ph-copy .actions .btn-secondary:hover{background:rgba(255,255,255,.22)}
.ph-copy .hero-note{color:rgba(255,255,255,.94);margin:0}
.ph-copy .pathways-proof,.ph-copy .glob-proof{margin-block-start:var(--s-3)}
.ph-copy .pathways-proof li,.ph-copy .glob-proof li{color:rgba(255,255,255,.94)}
.ph-copy .pathways-proof strong,.ph-copy .glob-proof strong{color:#F3CF86}
.ph-credit-row{position:relative;z-index:2;padding-block:0 12px}
.ph-credit{margin:0;font-size:var(--fs-13);color:rgba(255,255,255,.92);text-align:end}
@media (max-width:760px){.ph-credit-row{padding-block-end:38px}}

/* QA 2026-10-11: the Pathways band is light like the other pages: the photo stays under a light sky veil and the words are dark (was white on a navy scrim). The tool-film stage on the far side stays a dark frosted card. Tokens only. */
.ph-pathways{background:var(--sky-bar-bg,var(--sky));color:var(--ink)}
.ph-pathways .ph-media{background:var(--sky-bar-bg,var(--sky))}
.ph-pathways .ph-scrim,:root[dir="rtl"] .ph-pathways .ph-scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 94%,transparent) 0%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 86%,transparent) 46%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 55%,transparent) 100%)}
:root[dir="rtl"] .ph-pathways .ph-scrim{background:linear-gradient(270deg,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 94%,transparent) 0%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 86%,transparent) 46%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 55%,transparent) 100%)}
.ph-pathways a:not(.btn){color:var(--primary-ink)}
.ph-pathways :focus-visible{outline-color:var(--primary)}
.ph-pathways .ph-copy h1{color:var(--ink);text-shadow:none}
.ph-pathways .ph-copy .lead,.ph-pathways .ph-copy .hero-note,.ph-pathways .ph-copy .pathways-proof li{color:var(--ink-2);text-shadow:none}
.ph-pathways .ph-copy .eyebrow{color:var(--gold-ink)}
.ph-pathways .ph-copy .pathways-proof strong{color:var(--primary-ink)}
.ph-pathways .ph-copy .actions .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border-strong)}
.ph-pathways .ph-copy .actions .btn-secondary:hover{background:var(--card-2)}
.ph-pathways .ph-credit{color:var(--muted)}

/* ---------- the stage (frosted glass) ---------- */
.ph-stage{grid-area:stage;position:relative;align-self:center;justify-self:end;inline-size:100%;max-inline-size:540px;min-block-size:calc(var(--ph-fh) + 156px);padding:14px;border-radius:var(--r-xl);background:rgba(10,31,51,.68);border:1px solid rgba(255,255,255,.32);box-shadow:0 18px 46px rgba(0,0,0,.34);color:#fff;margin-block-start:8px}
@media (min-width:900px){.ph-stage{background:rgba(10,31,51,.58);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);margin-block-start:0}}
.ph-global .ph-stage{background:rgba(6,22,38,.72);border-color:rgba(243,207,134,.5)}
@media (min-width:900px){.ph-global .ph-stage{background:rgba(6,22,38,.62)}}
.ph-top{display:flex;align-items:center;gap:8px;min-block-size:26px;margin-block-end:8px;padding-inline-end:46px}
.ph-stage-t{font-size:var(--fs-13);font-weight:var(--fw-semibold);color:#fff;line-height:1.2}
.ph-emblem{position:absolute;inset-block-start:10px;inset-inline-end:14px;inline-size:auto;block-size:32px;opacity:.95;pointer-events:none}
.ph-films{position:relative;block-size:var(--ph-fh);overflow:hidden}
.ph-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.ph-scene.is-on{opacity:1;visibility:visible;transition:opacity .3s ease}
.ph-cap{margin:10px 0 0;min-block-size:38px;font-size:var(--fs-14);line-height:1.35;color:#fff}
.ph-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-start:6px}
.ph-dots{display:flex;gap:0}
.ph-dot{position:relative;inline-size:34px;block-size:44px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.ph-dot::before{content:"";position:absolute;inset-inline:4px;inset-block:19px;border-radius:6px;background:rgba(255,255,255,.4)}
.ph-dot::after{content:"";position:absolute;inset-inline:4px;inset-block:19px;border-radius:6px;background:#fff;transform:scaleX(0);transform-origin:left center}
.ph-global .ph-dot::after{background:#F3CF86}
:root[dir="rtl"] .ph-dot::after{transform-origin:right center}
.ph-dot[aria-current="true"]::after{transform:scaleX(var(--p,1))}
.ph-btns{display:flex;gap:8px;align-items:center}
.ph-btn{display:inline-flex;align-items:center;gap:6px;min-block-size:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.16);color:#fff;font:var(--fw-semibold) var(--fs-14)/1 var(--font-sans);cursor:pointer}
.ph-btn:hover{background:rgba(255,255,255,.28)}
.ph-btn[aria-pressed="true"]{background:#fff;color:#0A1F33}
.ph-btn[hidden]{display:none}
.ph-btn .icon{inline-size:16px;block-size:16px}

/* ---------- shared bits inside scenes ---------- */
.ph-lbl{display:block;font-size:var(--fs-13);font-weight:var(--fw-semibold);color:#fff;margin-block-end:3px}
.ph-input{display:flex;align-items:center;min-block-size:36px;padding:0 12px;border-radius:10px;background:#fff;color:#14263A;font-size:var(--fs-15);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;direction:ltr;text-align:start}
.ph-typed{overflow:hidden;text-overflow:ellipsis}
.ph-caret{flex:none;inline-size:2px;block-size:18px;margin-inline-start:2px;background:#2457D6;border-radius:1px}
.ph-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ph-chip{display:inline-flex;align-items:center;gap:5px;min-block-size:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.1);color:#fff;font-size:var(--fs-13);font-weight:var(--fw-semibold);transition:transform .25s var(--ease),background-color .25s}
.ph-chip.is-tick,.ph-chip.is-sel{background:#fff;color:#0A1F33;border-color:#fff}
.ph-chip.is-pop{transform:scale(1.08)}
.ph-chip .icon{inline-size:14px;block-size:14px}
.ph-chip-k{border-color:transparent;background:none;padding-inline:0;color:#fff}
.ph-note{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-14);font-weight:var(--fw-semibold);color:#fff}
.ph-note .icon{flex:none;inline-size:18px;block-size:18px}
.ph-src{margin:0;font-size:var(--fs-13);color:#fff;line-height:1.3}
.ph-fill{flex:1;min-block-size:0}

/* white document cards (high contrast: dark ink on white) */
.ph-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:#fff;color:#14263A;box-shadow:0 8px 24px rgba(0,0,0,.28);overflow:hidden}
.ph-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-block-size:24px}
.ph-card-h b{font:var(--fw-semibold) var(--fs-15)/1.2 var(--font-serif);color:#14263A}
.ph-card-h b{display:inline-flex;align-items:center;gap:6px}
.ph-card .ph-chip{border-color:#7F95AD;background:#EEF3F9;color:#14263A}
.ph-spv{display:flex;flex-direction:column;gap:6px;flex:1;min-block-size:0}
.ph-tag{display:inline-flex;align-items:center;min-block-size:22px;padding:0 9px;border-radius:var(--r-pill);background:#FFE9B8;color:#5A3B00;font-size:var(--fs-13);font-weight:var(--fw-semibold);line-height:1;white-space:nowrap}
.ph-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ph-row{display:flex;align-items:center;gap:8px;min-block-size:26px;font-size:var(--fs-14);line-height:1.25;color:#14263A}
.ph-row>span{flex:1;min-inline-size:0}
.ph-row .ph-v{flex:none;margin-inline-start:auto;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;color:#14263A}
.ph-row:not(.is-tick):not(.ph-fix) .ph-v{color:#4A5C72}
.ph-box{flex:none;display:grid;place-items:center;inline-size:18px;block-size:18px;border-radius:5px;border:2px solid #7F95AD;background:#fff;transition:background-color .2s,border-color .2s}
.ph-box .icon{inline-size:13px;block-size:13px;color:#fff;transform:scale(0);transition:transform .25s var(--ease)}
.ph-row.is-tick .ph-box,.ph-row.ph-fix .ph-box{background:#0F7A43;border-color:#0F7A43}
.ph-row.is-tick .ph-box .icon,.ph-row.ph-fix .ph-box .icon{transform:scale(1)}
.ph-row.is-ask .ph-box{background:#B26A00;border-color:#B26A00}
.ph-row.is-ask .ph-box .icon{transform:scale(1)}
.ph-ic{flex:none;inline-size:18px;block-size:18px;color:#0F7A43}
.ph-ic.is-wait{color:#B26A00}
.ph-st{flex:none;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:var(--fw-semibold);line-height:1.3;white-space:nowrap}
.ph-row .ph-st{min-inline-size:8.2rem;text-align:center}
.ph-st-ok{background:#DDF3E6;color:#0B5A31}
.ph-st-ask{background:#FFE9B8;color:#5A3B00}
.ph-st-unk{background:#E3EAF3;color:#2A3C52}
.ph-total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-start:auto;padding-block-start:6px;border-block-start:1px solid #D5E2F1;font-size:var(--fs-15);font-weight:var(--fw-semibold);color:#14263A}
.ph-total b{font:var(--fw-semibold) var(--fs-20)/1 var(--font-serif);font-variant-numeric:tabular-nums;direction:ltr;color:#14263A}
.ph-bar{block-size:8px;border-radius:6px;background:#E3EAF3;overflow:hidden}
.ph-bar i{display:block;block-size:100%;inline-size:100%;background:#2457D6;transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease)}
:root[dir="rtl"] .ph-bar i{transform-origin:right center}
.ph-bar.is-fill i{transform:scaleX(var(--v,.75))}
.ph-bar-l{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-13);color:#2A3C52}
.ph-fine{margin:0;font-size:var(--fs-13);line-height:1.3;color:#2A3C52}

/* scene: business dashboard (SVG lines, revealed by a sliding curtain) */
.ph-charts{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;flex:1;min-block-size:0}
.ph-chart{position:relative;display:flex;flex-direction:column;gap:3px;min-inline-size:0;padding:6px 8px;border-radius:10px;border:1px solid #D5E2F1;background:#F7FAFE;overflow:hidden}
.ph-chart-t{font-size:var(--fs-13);font-weight:var(--fw-semibold);color:#14263A;line-height:1.2}
.ph-plot{position:relative;flex:1;min-block-size:0;direction:ltr}
.ph-plot svg{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block}
.ph-curtain{position:absolute;inset:0;background:#F7FAFE;transform-origin:right center;transition:transform 1.8s linear}
.ph-plot.is-fill .ph-curtain{transform:scaleX(0)}
.ph-lg{display:flex;gap:4px 10px;flex-wrap:wrap;font-size:var(--fs-13);line-height:1.2;color:#2A3C52}
.ph-lg i{display:inline-block;inline-size:10px;block-size:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.ph-k1{background:#2457D6}.ph-k2{background:#B9831F}
.ph-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:5px;direction:ltr}
.ph-bars i{flex:1;block-size:var(--h);border-radius:4px 4px 0 0;background:#2457D6;transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.ph-bars i:nth-child(1){--h:38%}.ph-bars i:nth-child(2){--h:52%}.ph-bars i:nth-child(3){--h:46%}.ph-bars i:nth-child(4){--h:70%}.ph-bars i:nth-child(5){--h:62%}.ph-bars i:nth-child(6){--h:88%;background:#D9A23A}
.ph-plot.is-fill .ph-bars i{transform:scaleY(1)}
.ph-plot.is-fill .ph-bars i:nth-child(2){transition-delay:.1s}.ph-plot.is-fill .ph-bars i:nth-child(3){transition-delay:.2s}.ph-plot.is-fill .ph-bars i:nth-child(4){transition-delay:.3s}.ph-plot.is-fill .ph-bars i:nth-child(5){transition-delay:.4s}.ph-plot.is-fill .ph-bars i:nth-child(6){transition-delay:.5s}

/* scene: pathways route map (always left to right: it is a picture, not text flow) */
.ph-map{position:relative;flex:1;min-block-size:0;border-radius:14px;direction:ltr;background:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.6px) 0 0/18px 18px,rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25)}
.ph-pin{position:absolute;display:flex;align-items:center;gap:6px;translate:-6px -50%}
.ph-pin i{flex:none;inline-size:12px;block-size:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.ph-pin b{padding:2px 8px;border-radius:var(--r-pill);background:rgba(10,31,51,.82);font-size:var(--fs-13);line-height:1.3;color:#fff;white-space:nowrap;unicode-bidi:plaintext}
.ph-pin-o{inset-inline-start:70%;inset-block-start:76%}
.ph-rc{position:absolute;inset-inline-start:3%;inline-size:47%;display:flex;align-items:center;gap:6px;min-block-size:30px;padding:3px 8px;border-radius:10px;background:#fff;color:#14263A;font-size:var(--fs-13);font-weight:var(--fw-semibold);line-height:1.2}
.ph-rc .icon{flex:none;inline-size:16px;block-size:16px;color:#2457D6}
.ph-src .icon{display:inline-block;inline-size:16px;block-size:16px;vertical-align:-3px;margin-inline-end:4px}
.ph-rc span{unicode-bidi:plaintext}
.ph-rc b{display:block;font-weight:var(--fw-semibold)}
.ph-rc small{display:block;font-size:var(--fs-13);font-weight:400;line-height:1.25;color:#4A5A6E}
.ph-rc1{inset-block-start:5%}.ph-rc2{inset-block-start:37%}.ph-rc3{inset-block-start:69%}
.ph-rd{position:absolute;inline-size:6px;block-size:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#F3CF86;inset-inline-start:calc(var(--x) * 1%);inset-block-start:calc(var(--y) * 1%)}

/* scene: pathways calendar */
.ph-cal{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:20px;grid-auto-rows:minmax(21px,1fr);gap:3px;direction:ltr;flex:1;min-block-size:0}
.ph-wd{font-size:var(--fs-13);text-align:center;color:#3B4F66;font-style:normal;font-weight:var(--fw-semibold);line-height:1.2}
.ph-d{position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:21px;border-radius:6px;background:#EEF3F9;color:#14263A;font-size:var(--fs-13);font-style:normal;line-height:1}
.ph-d.ph-e{background:none}
.ph-d::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:#F3CF86;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s var(--ease)}
.ph-d.is-hit{font-weight:var(--fw-bold)}
.ph-d.is-hit::before{opacity:1;transform:none}

/* scene: events ticker (also used on the Global page) */
.ph-ticker{flex:none;overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ph-track{display:flex;gap:8px;inline-size:max-content}
.ph-ev{flex:none;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:rgba(8,27,46,.62);border:1px solid rgba(255,255,255,.34);font-size:var(--fs-13);line-height:1.25;color:#fff;transition:opacity .4s ease}
.ph-ev b{font-weight:var(--fw-semibold);unicode-bidi:plaintext}
.ph-ev em{font-style:normal;color:#fff}
.ph-ev.is-m{border-color:#F3CF86}
.ph-track.is-filter .ph-ev:not(.is-m){opacity:.55}
.ph-ask{display:inline-flex;align-items:center;gap:8px;min-block-size:36px;padding:0 14px;border-radius:var(--r-pill);background:#fff;color:#0A1F33;font-size:var(--fs-14);font-weight:var(--fw-semibold);align-self:flex-start}
.ph-ask .icon{inline-size:16px;block-size:16px;color:#2457D6}
.ph-global .ph-ask .icon{color:#8A6212}
.ph-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-14)}
.ph-list li{display:flex;align-items:center;gap:8px;color:#fff;min-block-size:24px}
.ph-list .icon{flex:none;inline-size:18px;block-size:18px;color:#8FE0B0}
.ph-list li.is-ask .icon{color:#FFD98A}
.ph-result{margin:0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid #F3CF86;font-size:var(--fs-14);line-height:1.35;color:#fff}
.ph-sl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);font-size:var(--fs-14);color:#fff}
.ph-sl .icon{flex:none;inline-size:18px;block-size:18px;color:#F3CF86}
.ph-sl b{font-weight:var(--fw-semibold);unicode-bidi:plaintext}
.ph-sl small{margin-inline-start:auto;font-size:var(--fs-13);color:#fff;white-space:nowrap}

/* scene: careers lookup results and the WhatsApp alert sign-up */
.ph-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ph-res li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);font-size:var(--fs-14);color:#fff}
.ph-res li div{display:flex;flex-direction:column;min-inline-size:0;line-height:1.25}
.ph-res li div b{font-weight:var(--fw-semibold)}
.ph-res li div small{font-size:var(--fs-13);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-res li span{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.ph-res .icon{inline-size:16px;block-size:16px;color:#8FE0B0}
.ph-wabtn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-block-size:36px;padding:0 16px;border-radius:var(--r-pill);background:#0F7A43;color:#fff;font-size:var(--fs-14);font-weight:var(--fw-semibold);transition:transform .2s var(--ease)}
.ph-wabtn.is-pop{scale:.95}
.ph-wabtn .icon{inline-size:18px;block-size:18px}
.ph-bub{align-self:flex-start;max-inline-size:92%;padding:8px 12px;border-radius:12px;background:#fff;color:#14263A;font-size:var(--fs-14);line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.26)}
.ph-bub small{display:block;margin-block-start:3px;font-size:var(--fs-13);color:#2A3C52}
.ph-bub b{font-weight:var(--fw-semibold)}

/* ---------- reveal states ---------- */
.ph-js .ph-b{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ph-js .ph-b.is-in{opacity:1;transform:none}
.ph-js .ph-rd{opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s var(--ease)}
.ph-js .is-draw .ph-rd{opacity:1;transform:none;transition-delay:calc(var(--i) * var(--ph-step,45ms))}
.ph-js .ph-pop{opacity:0;scale:.6;transition:opacity .3s ease,scale .3s var(--ease)}
.ph-js .ph-pop.is-in{opacity:1;scale:1}
.ph-js .ph-track{transform:translate3d(0,0,0)}
.ph-js .ph-track.is-run{transform:translate3d(-50%,0,0);transition:transform var(--ph-tick,4s) linear}
.ph-js .ph-track-r{transform:translate3d(-50%,0,0)}
.ph-js .ph-track-r.is-run{transform:translate3d(0,0,0)}
.ph-still *,.ph-still *::before,.ph-still *::after{transition:none!important;animation:none!important}
@keyframes ph-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (min-width:900px){.ph-js:not(.ph-still) .ph-caret{animation:ph-blink 1s steps(1) infinite}}

/* ---------- phones: stacked, one compact scene card, plain translucent glass (no blur) ---------- */
@media (max-width:899px){
  .ph{--ph-fh:246px;min-block-size:0}
  .ph-scrim,.ph-global .ph-scrim,:root[dir="rtl"] .ph-scrim,:root[dir="rtl"] .ph-global .ph-scrim{background:linear-gradient(180deg,rgba(8,27,46,.8) 0%,rgba(10,36,62,.76) 52%,rgba(8,27,46,.9) 100%)}
  .ph-stage{max-inline-size:none;justify-self:stretch;padding:12px}
  .ph-copy{gap:var(--s-4)}
  .ph-credit{text-align:start}
  .ph-copy .lead{font-size:var(--fs-16)}
  .ph-row{min-block-size:24px}
  .ph-rows{gap:3px}
  .ph-card{padding:8px 10px;gap:5px}
  .ph-ev{padding:6px 10px}
  .ph-pin-o{inset-inline-start:66%}
}
/* phones: the tool film shrinks to ONE strip (title, a short window on the scene, the controls) so the first tool is within one screen */
@media (max-width:720px){
  .ph{--ph-fh:84px}
  .ph-in{gap:var(--s-4);padding-block:20px 8px}
  .ph-stage{min-block-size:0;padding:10px 12px;margin-block-start:0}
  .ph-top{margin-block-end:4px}
  .ph-scene{justify-content:flex-start}
  .ph-cap{position:absolute;inline-size:1px;block-size:1px;min-block-size:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ph-ctl{margin-block-start:2px}
  /* phones: the tool film does not fit without misaligning (owner 2026-10-08: keep it on laptops, drop it on phones); the real tools sit right below the hero */
  .ph-stage,.ph-ctl{display:none}
}
@media (max-width:420px){.ph-btn{padding:0 12px}.ph-dot{inline-size:30px}}
@media (prefers-reduced-motion:reduce){.ph-video{transition:none}}