/* Deployment pages (/ethics/, /authorities/) and the homepage "Two ways to deploy" cards.
   Page-scoped: .page-sub for the sub-pages, .deploy for the homepage section. */

/* --- sub-page chrome: header keeps its dark ground on light pages --- */
body.page-sub header{background:rgba(23,30,32,.96);border-bottom-color:rgba(255,255,255,.14)}
body.page-sub main{padding-top:0}



/* --- ethics cycle reuses .journey; six rows instead of seven --- */
.cycle .journey-grid{grid-template-columns:1fr}

/* --- personas --- */
.personas-head{padding:100px 7% 20px}
.personas-head .eyebrow{color:#015758}
.personas-head h2{margin-top:26px;font-size:clamp(36px,4.4vw,70px);text-wrap:balance}
.persona{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding:60px 7%}
.persona.flip .persona-copy{order:2}
.persona:nth-of-type(odd){background:#f3f4f5}
.persona .eyebrow{color:#015758}
.persona h2{font-size:clamp(30px,3.1vw,46px);margin:22px 0 18px;text-wrap:balance}
.persona .key{font:400 20px/1.45 var(--serif);letter-spacing:-.01em;color:#17191c;margin:0 0 26px;max-width:40ch}
.persona-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.persona-list li{display:grid;grid-template-columns:1fr auto;gap:10px 22px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.persona-list li:last-child{border-bottom:1px solid var(--line)}
.persona-list li p{font-size:15px;line-height:1.65;color:#4c5054;margin:0;max-width:52ch}
.persona-list .availability{margin:2px 0 0;white-space:nowrap}
.screen-panel{margin:0;min-width:0}
.screen-frame{position:relative;width:100%;aspect-ratio:1440/1024;overflow:hidden;border-radius:10px;border:1px solid #cfd4d2;background:#f3f4f5;box-shadow:0 30px 80px #17191c2e,0 2px 4px #17191c14}
.screen-frame .cx{position:absolute;left:0;top:0;transform-origin:0 0}
.screen-frame.scroll{overflow-y:auto;scrollbar-width:none}
.screen-frame.scroll::-webkit-scrollbar{display:none}
.screen-panel figcaption{margin-top:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5c6462}
.persona-note{background:#17191c;color:#fff;border-radius:10px;padding:40px 36px;box-shadow:0 30px 80px #17191c2e}
.persona-note .eyebrow{color:#94dfc0;margin-bottom:16px}
.persona-note p:last-child{font-size:17px;line-height:1.6;color:#d7dedb;max-width:40ch}
@media(max-width:1000px){.persona{grid-template-columns:1fr;gap:34px;padding:50px 6%}.persona.flip .persona-copy{order:0}.personas-head{padding:70px 6% 10px}.persona-list li{grid-template-columns:1fr}.persona-list .availability{white-space:normal}}

/* --- authorities: regulatory areas --- */
.areas{background:#fff}
.areas .eyebrow{color:#015758}
.areas h2{margin:26px 0 22px}
.areas .body-copy{max-width:62ch}
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin:46px 0 0;border-top:1px solid var(--line)}
.areas-grid>div{padding:24px 0 26px;border-bottom:1px solid var(--line)}
.areas-grid dt{font:400 24px/1.2 var(--serif);letter-spacing:-.03em;margin-bottom:10px}
.areas-grid dd{margin:0;font-size:14px;line-height:1.65;color:#55595d}
@media(max-width:1000px){.areas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.areas-grid{grid-template-columns:1fr}}

/* --- homepage: two deployment cards in place of the three audience disclosures --- */
.deploy-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:0}
.deploy-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:30px;color:#fff;background:#095a60;isolation:isolate;overflow:hidden;text-decoration:none;transition:transform .35s}
.deploy-card.plum{background:#763858}
.deploy-card:before{content:'';position:absolute;inset:0;background:image-set(url('assets/fold-foundation-dark.webp') type('image/webp'),url('assets/fold-foundation-dark.png') type('image/png')) 70% 55%/cover;z-index:-2;opacity:.5;mix-blend-mode:luminosity;transition:transform .6s}
.deploy-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,20,25,.78),transparent 70%);z-index:-1}
.deploy-card:hover:before,.deploy-card:focus-visible:before{transform:scale(1.08)}
.deploy-card>span{position:absolute;top:30px;left:30px;font-size:9px;letter-spacing:.12em}
.deploy-card h3{font-size:36px;margin:0 0 14px;padding-right:60px}
.deploy-card p{font-size:14px;line-height:1.6;color:#e4edeb;max-width:46ch;margin:0}
.deploy-card b{position:absolute;right:25px;bottom:30px;font-size:18px;font-weight:400;border:1px solid #ffffff80;width:34px;height:34px;line-height:32px;text-align:center;border-radius:50%;transition:background .2s,color .2s}
.deploy-card:hover b{background:#fff;color:#17191c}
.deploy-card:focus-visible{outline:3px solid #00b67d;outline-offset:4px}
.deploy .applicant-line+.applicant-line{border-top:0}
@media(max-width:760px){.deploy-grid{grid-template-columns:1fr;gap:14px}.deploy-card{min-height:260px;padding:25px}.deploy-card>span{top:25px;left:25px}.deploy-card h3{font-size:30px}.deploy-card b{bottom:25px}}

/* closing block on sub-pages: keep the title to two lines */
body.page-sub .closing h2{font-size:clamp(40px,5.2vw,78px);text-wrap:balance}

/* ===== Lifecycle as a compact card grid (homepage #platform, /ethics/ #cycle, /authorities/) =====
   Pure CSS over the existing .journey markup, so the homepage stays regeneration-safe. */
.journey.section{display:block;padding:72px 7% 80px;gap:0}
.journey-heading{position:static;display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end;margin:0 0 34px}
.journey-heading .eyebrow{grid-column:1/-1;margin:0}
.journey-heading h2{font-size:clamp(36px,3.6vw,54px);margin:16px 0 0;width:auto}
.journey-heading .availability{margin:0 0 6px;justify-self:end}
body .journey .journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border:0;row-gap:12px}
body .journey.cycle .journey-grid{grid-template-columns:repeat(3,1fr)}
body .journey .journey-grid article,body .journey .journey-grid article+article{display:block;position:relative;padding:22px 22px 24px;border:0;border-radius:8px;background:#20262a;min-height:0}
.journey-grid article .step{display:block;font:600 11px/1 var(--sans);letter-spacing:.14em;color:#94dfc0;margin-bottom:34px}
.journey-grid h3{font-size:26px;margin:0 0 10px;line-height:1.08;letter-spacing:-.03em}
.journey-grid p{font-size:13.5px;line-height:1.55;color:#b7bec0;max-width:none}
.journey-grid .arrow{position:absolute;top:18px;right:20px;font-size:15px;color:#6f7a7a}
@media(max-width:1100px){body .journey .journey-grid,body .journey.cycle .journey-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .journey.section{padding:56px 0 60px}
  body .journey .journey-heading{margin:0 6% 22px;grid-template-columns:1fr;display:grid}
  .journey-heading .availability{justify-self:start;margin:14px 0 0}
  body .journey .journey-grid,body .journey.cycle .journey-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 6% 8px;scrollbar-width:none}
  .journey-grid::-webkit-scrollbar{display:none}
  body .journey .journey-grid article,body .journey .journey-grid article+article{flex:0 0 78vw;scroll-snap-align:start;padding:20px}
  .journey-grid article .step{margin-bottom:26px}
  .journey-grid h3{font-size:24px}
}

/* ===== Sub-page heroes: full-bleed, each deployment its own ground ===== */
.deploy-hero{position:relative;isolation:isolate;min-height:min(92vh,860px);display:flex;align-items:flex-end;padding:calc(150px + env(safe-area-inset-top,0px)) 7% 84px;overflow:hidden}
.deploy-hero .art{position:absolute;inset:0;z-index:-1}
.deploy-hero .art img{width:100%;height:100%;object-fit:cover;display:block}
.deploy-hero .copy{max-width:720px}
.deploy-hero h1{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.045em;line-height:1;margin:22px 0 0;text-wrap:balance}
.deploy-hero .lead{margin:26px 0 30px;max-width:56ch;font-size:17px;line-height:1.6}
.deploy-hero .hero-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.deploy-hero .availability-line{margin:30px 0 0;padding-top:20px;font-size:14px;line-height:1.75;max-width:60ch}
.deploy-hero .availability-line .availability{margin:0 2px;vertical-align:middle}
/* switcher between the two deployments */
.deploy-switch{display:inline-flex;gap:4px;padding:4px;border-radius:40px;margin-bottom:28px}
.deploy-switch a{display:inline-block;padding:9px 16px;border-radius:30px;font:500 12px/1.3 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background .2s,color .2s}
/* ethics: dark hero, copy in the image's dark left half */
.hero-ethics{background:#121617;color:#fff}
.hero-ethics .art img{object-position:72% 50%}
.hero-ethics .art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,23,.92) 0%,rgba(18,22,23,.72) 38%,rgba(18,22,23,0) 62%)}
.hero-ethics .eyebrow,.hero-ethics h1 em{color:#94dfc0}
.hero-ethics .lead{color:#d7dedb}
.hero-ethics .secondary-link{color:#fff}
.hero-ethics .availability-line{border-top:1px solid #ffffff2e;color:#b7bec0}
.hero-ethics .deploy-switch{background:#ffffff14;border:1px solid #ffffff2a}
.hero-ethics .deploy-switch a{color:#d7dedb}
.hero-ethics .deploy-switch a[aria-current]{background:#94dfc0;color:#0f2a25}
.hero-ethics .deploy-switch a:hover:not([aria-current]){background:#ffffff1f}
/* authorities: light hero on the pale fold art */
.hero-authorities{background:#eef1ee;color:#17191c}
.hero-authorities .art img{object-position:65% 45%}
.hero-authorities .art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,244,245,.94) 0%,rgba(243,244,245,.8) 40%,rgba(243,244,245,.1) 68%)}
.hero-authorities .eyebrow,.hero-authorities h1 em{color:#015758}
.hero-authorities .lead{color:#3f4447}
.hero-authorities .secondary-link{color:#17191c}
.hero-authorities .deploy-switch{background:#17191c0d;border:1px solid #17191c22}
.hero-authorities .deploy-switch a{color:#2c3133}
.hero-authorities .deploy-switch a[aria-current]{background:#003b3e;color:#fff}
.hero-authorities .deploy-switch a:hover:not([aria-current]){background:#17191c14}
@media(max-width:760px){.deploy-hero{min-height:0;padding:calc(120px + env(safe-area-inset-top,0px)) 6% 56px;align-items:flex-start}.hero-ethics .art::after{background:linear-gradient(180deg,rgba(18,22,23,.7) 0%,rgba(18,22,23,.9) 100%)}.hero-authorities .art::after{background:linear-gradient(180deg,rgba(243,244,245,.86),rgba(243,244,245,.94))}.deploy-hero .lead{font-size:16px}}

.deploy .people-heading .deploy-intro{max-width:62ch;margin:18px auto 0;color:#55595d;font-size:15px;line-height:1.65}
.personas-head .body-copy{max-width:62ch;margin-top:18px}
.persona-label{margin:0 0 18px}
.persona-label .availability{margin:0}
.persona-list li{grid-template-columns:1fr auto}

/* --- header pinned to the top at rest (removes the 36px float above the bar from header-sticky.css) --- */
body.direction-e header,header{top:env(safe-area-inset-top,0px)}
@media(max-width:760px){body.direction-e header,header{top:env(safe-area-inset-top,0px)}}
html{scroll-padding-top:100px}

/* --- deployment block directly after the hero: light ground, tighter top --- */
.deploy.section{padding-top:90px;padding-bottom:70px}

/* --- ethics page takes the plum of its card and of the identity demo's Ethics theme --- */
.hero-ethics{background:#3e1d30}
.hero-ethics .art img{mix-blend-mode:luminosity;opacity:.62}
.hero-ethics .art::after{background:linear-gradient(90deg,rgba(62,29,48,.94) 0%,rgba(62,29,48,.78) 36%,rgba(62,29,48,.18) 64%,rgba(62,29,48,.1) 100%)}
.hero-ethics .eyebrow,.hero-ethics h1 em{color:#e6bfd2}
.hero-ethics .deploy-switch a[aria-current]{background:#e6bfd2;color:#3e1d30}
.hero-ethics .button{background:#f3dfe8;color:#3e1d30;border-color:#f3dfe8}
.hero-ethics .button:hover{background:#fff}
.hero-ethics .button>span{background:#3e1d3022}
body.page-ethics .persona .eyebrow,body.page-ethics .personas-head .eyebrow{color:#753657}
body.page-ethics .persona:nth-of-type(odd){background:#f8f2f5}
body.page-ethics .journey-grid article .step{color:#e6bfd2}
body.page-ethics .screen-frame,body.page-ethics .sub-hero-art{border-color:#d9c6cf}
body.page-ethics .closing{background:#3e1d30}
body.page-ethics .closing em{color:#e6bfd2}
@media(max-width:760px){.hero-ethics .art::after{background:linear-gradient(180deg,rgba(62,29,48,.72),rgba(62,29,48,.92))}}
/* authorities page keeps the teal: already the site default; make the hero accents explicit */
.hero-authorities .eyebrow,.hero-authorities h1 em{color:#075b61}
.hero-authorities .deploy-switch a[aria-current]{background:#075b61}
body.page-authorities .persona .eyebrow{color:#075b61}

/* --- stage as the first section after the hero --- */
.record-stage{margin-top:0;padding-top:84px}
.record-stage .stage-head{border-top:0;padding-top:0}
.record-stage .stage-head .eyebrow{color:#94dfc0}

/* ===== Motion layer (motion.js sets html.js; everything below is inert without it or under reduced motion) ===== */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1);--t-press:140ms;--t-hover:180ms;--t-reveal:800ms}
@media (prefers-reduced-motion: no-preference){
  /* feedback under the hand */
  .button,.deploy-card,.stage-arrow,.stage-dots button,.cc-accept,.cc-decline{transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease,border-color var(--t-hover) ease,box-shadow var(--t-hover) ease}
  .button:active,.deploy-card:active{transform:scale(.97)}
  .stage-arrow:active{transform:translateY(-50%) scale(.94)}
  .deploy-switch a{transition:background-color var(--t-hover) ease,color var(--t-hover) ease}

  /* hero load sequence: eyebrow, headline, lead, actions rise in turn; on the homepage it waits for the intro to clear */
  .js .hero-copy > *,.js .deploy-hero .copy > *{opacity:0;transform:translateY(18px)}
  .js:not([data-claralix-intro]) .hero-copy > *,.js .deploy-hero .copy > *{animation:cx-rise var(--t-reveal) var(--ease-out) forwards}
  .js .hero-copy > :nth-child(1),.js .deploy-hero .copy > :nth-child(1){animation-delay:120ms}
  .js .hero-copy > :nth-child(2),.js .deploy-hero .copy > :nth-child(2){animation-delay:210ms}
  .js .hero-copy > :nth-child(3),.js .deploy-hero .copy > :nth-child(3){animation-delay:300ms}
  .js .hero-copy > :nth-child(4),.js .deploy-hero .copy > :nth-child(4){animation-delay:390ms}
  .js .hero-copy > :nth-child(5),.js .deploy-hero .copy > :nth-child(5){animation-delay:480ms}
  /* the moving picture: a slow settle on the hero art */
  .js:not([data-claralix-intro]) .hero-picture img,.js .deploy-hero .art img{animation:cx-settle 14s var(--ease-soft) both}
  /* signature move: the deployment cards open like a fold, bottom edge up, image easing back */
  .js .deploy .deploy-card{clip-path:inset(100% 0 0 0);transition:clip-path 1000ms var(--ease-in-out),transform var(--t-press) var(--ease-out)}
  .js .deploy .deploy-card:before{transform:scale(1.14);transition:transform 1600ms var(--ease-soft)}
  .js .deploy.is-in .deploy-card{clip-path:inset(0)}
  .js .deploy.is-in .deploy-card:before{transform:none}
  .js .deploy.is-in .deploy-card:nth-child(2){transition-delay:140ms}
  .js .deploy.is-in .deploy-card:hover:before{transform:scale(1.08)}
  /* section headings: eyebrow then title then copy (hidden state stops applying once the section is in view) */
  .js main > section > :is(.eyebrow,h2,h3,.body-copy),.js .journey-heading > *,.js .people-heading > *,.js .stage-head > *,.js .personas-head > *,.js .persona-copy > *,.js .identity-intro > *,.js .configure-copy > *,.js .assurance > div > *,.js .closing > *{transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
  .js main > section:not(.hero):not(.deploy-hero):not(.is-in) > :is(.eyebrow,h2,h3,.body-copy),
  .js main > section:not(.is-in) :is(.journey-heading,.people-heading,.stage-head,.persona-copy,.identity-intro,.configure-copy) > *,
  .js .personas-head:not(.is-in) > *,.js .assurance:not(.is-in) > div > *,.js .closing:not(.is-in) > *{opacity:0;transform:translateY(22px)}
  .js main > section > :is(.eyebrow,h2,h3,.body-copy):nth-child(2),.js :is(.journey-heading,.people-heading,.stage-head,.personas-head,.persona-copy,.identity-intro,.configure-copy) > :nth-child(2){transition-delay:80ms}
  .js main > section > :is(.eyebrow,h2,h3,.body-copy):nth-child(3),.js :is(.journey-heading,.stage-head,.personas-head,.persona-copy,.identity-intro,.configure-copy) > :nth-child(3){transition-delay:160ms}
  .js .persona-copy > :nth-child(4),.js .identity-intro > :nth-child(4){transition-delay:240ms}
  /* lists arrive row by row */
  .js .journey-grid article,.js .capability-grid article,.js .areas-grid > div,.js .assurance-list > p,.js .configuration-rows span{opacity:0;transform:translateY(20px);transition:opacity 600ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + 120ms)}
  .js .is-in .journey-grid article,.js .is-in .capability-grid article,.js .is-in .areas-grid > div,.js .is-in .assurance-list > p,.js .is-in .configuration-rows span{opacity:1;transform:none}
  .js .persona-list li{opacity:0;transform:translateX(-14px);transition:opacity 500ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms + 260ms)}
  .js .is-in .persona-list li{opacity:1;transform:none}
  /* pictures settle from a slight scale behind a mask */
  .js .screen-panel .screen-frame,.js .workspace-stage,.js .coverage-map,.js .configure-art{opacity:0;transform:translateY(26px) scale(.985);transition:opacity 800ms var(--ease-out),transform 1000ms var(--ease-out);transition-delay:200ms}
  .js .is-in .screen-panel .screen-frame,.js .is-in .workspace-stage,.js .is-in .coverage-map,.js .is-in .configure-art{opacity:1;transform:none}
  /* the stage: items fan out from the centre once loaded */
  .js .record-stage .stage-track{opacity:0;transform:scale(.94);transition:opacity 900ms var(--ease-out),transform 1100ms var(--ease-out)}
  .js .record-stage.is-in.has-items .stage-track{opacity:1;transform:none}
  .js .record-stage .stage-caption,.js .record-stage .stage-dots{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease-out) 300ms,transform 800ms var(--ease-out) 300ms}
  .js .record-stage.is-in .stage-caption,.js .record-stage.is-in .stage-dots{opacity:1;transform:none}
  /* footer: the name returns */
  .js footer > *{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-out),transform 800ms var(--ease-out)}
  .js footer.is-in > *{opacity:1;transform:none}
  .js footer.is-in > :nth-child(2){transition-delay:90ms}.js footer.is-in > :nth-child(3){transition-delay:180ms}
}
@keyframes cx-rise{to{opacity:1;transform:none}}
@keyframes cx-settle{from{transform:scale(1.06)}to{transform:none}}

/* --- ethics closing block: light type on the plum ground --- */
body.page-ethics .closing{color:#fff}
body.page-ethics .closing .eyebrow{color:#e6bfd2}
body.page-ethics .closing h2{color:#fff}
body.page-ethics .closing h2 em{color:#e6bfd2}
body.direction-e.page-ethics .closing p:not(.eyebrow){color:#e9dbe2}
body.page-ethics .closing .button{background:#f3dfe8;color:#3e1d30;border-color:#f3dfe8}
body.page-ethics .closing .button:hover{background:#fff}
body.page-ethics .closing .button>span{background:#3e1d3022}
body.page-ethics .closing:after{opacity:.22}

/* --- deployment actions: one standard button under each card --- */
.deploy-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 10px}
.deploy-actions .button{justify-self:start;margin:0}
.deploy-actions .button:nth-child(2){background:#763858;border-color:#763858}
.deploy-actions .button:nth-child(2):hover{background:#8a4368}
.deploy-actions .button:nth-child(1){background:#095a60;border-color:#095a60}
.deploy-actions .button:nth-child(1):hover{background:#0e6b72}
.deploy .applicant-line:first-of-type{margin-top:26px}
@media(max-width:760px){.deploy-actions{grid-template-columns:1fr;gap:12px}.deploy-actions .button{justify-self:stretch;justify-content:space-between}}