/* Use the actual Black font file rather than relying on the browser to map
   `font-weight: 900` to the generic Lato family. */
@font-face{
      font-family:'Lato Black';
      src:url('/assets/fonts/Lato-Black.woff2') format('woff2');
      font-style:normal;
      font-weight:900;
      font-display:swap;
    }

:root{
      --orange:#f4511e;
      --orange-soft:#fff1eb;
      --ink:#242629;
      --muted:#5f6266;
      --paper:#ffffff;
      --warm:#eeeae4;
      --line:#ece8e4;
      --shell:1296px;
      --radius:18px;
      --ease:cubic-bezier(.22,1,.36,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:'Lato',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    button,a{font:inherit}
    .shell{width:min(var(--shell),calc(100% - 96px));margin-inline:auto}
    main .eyebrow{margin:0 0 24px;color:var(--orange);font-family:'Lato Black','Lato',Arial,Helvetica,sans-serif;font-size:15px;font-weight:900!important;letter-spacing:.11em;text-transform:uppercase}
    h1,h2,h3,p{margin-top:0}
    h1{margin-bottom:25px;font-size:58px;line-height:1.02;letter-spacing:-.045em}
    h2{margin-bottom:24px;font-size:50px;font-weight:700;line-height:1.08;letter-spacing:-.04em}
    h3{font-size:24px;line-height:1.25}
    p{color:var(--muted);font-size:19px;line-height:1.55}

    /* Keep the landing navigation fixed below PCI Web's global header.
       Fixed positioning prevents the small movement that occurred with sticky. */
    .landing-page-shell{padding-top:148px!important}
    .site-header{height:72px;background:#fff;position:fixed;top:128px;right:0;left:0;width:100%;z-index:1020;box-shadow:0 1px 0 rgba(36,38,41,.07)}
    .site-header + main{padding-top:72px}
    .site-header .shell{width:calc(100% - 96px);max-width:none;height:72px;display:flex;align-items:center;justify-content:space-between}
    .nav{display:flex;align-items:center;gap:34px;margin-left:auto;font-size:16px;font-weight:650}
    .nav a:not(.button),.nav a:not(.button):visited,.nav a:not(.button):hover,.nav a:not(.button):focus{position:relative;padding:24px 0;color:#242629;text-decoration:none}
    .nav a:not(.button)::after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:2px;background:var(--orange);transition:right .3s var(--ease)}
    .nav a:not(.button):hover::after{right:0}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:7px;background:var(--orange);color:#fff;font-weight:750;padding:16px 24px;box-shadow:0 10px 24px rgba(244,81,30,.14);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
    .button:visited,.button:hover,.button:focus,.button:active{background:var(--orange);color:#fff;text-decoration:none}
    .button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(244,81,30,.22)}
    .button:focus-visible,.nav a:focus-visible{outline:3px solid rgba(244,81,30,.28);outline-offset:4px}
    .arrow{font-size:20px;line-height:1}
    /* Native anchor navigation is deliberately used here: it works even when
       JavaScript is unavailable. Account for the fixed global header and this
       landing-page navigation so the section heading remains visible. */
    .section,.story,.fit,.process{scroll-margin-top:236px}

    .hero{height:600px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
    .hero>*{min-width:0}
    .hero-copy{display:flex;align-items:center;background:#fff}
    .hero-copy-inner{width:min(648px,calc(100% - max(48px,calc((100vw - var(--shell))/2))));margin-left:max(48px,calc((100vw - var(--shell))/2));padding-right:64px}
    .hero-copy .eyebrow{margin-bottom:26px}
    .hero-copy p{max-width:590px;margin-bottom:20px}
    .facts{display:flex;align-items:center;gap:22px;margin:24px 0 28px;font-size:16px;font-weight:720}
    .facts span+span::before{content:"";display:inline-block;width:7px;height:7px;margin:0 22px 2px 0;border-radius:50%;background:var(--orange)}
    .hero-visual{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:64px;overflow:hidden;background:#cbd1d3}
    .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;animation:heroImage 12s ease-out both}
    .hero-tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(219,226,231,.20),rgba(255,255,255,.02) 55%,rgba(30,35,39,.06))}
    .journey-card{width:592px;height:472px;padding:44px 48px;border-radius:22px;background:rgba(255,255,255,.77);border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 50px rgba(18,25,31,.14);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);overflow:hidden;animation:heroCard .9s .15s var(--ease) both}
    .journey-card .eyebrow{margin-bottom:17px;font-size:14px;letter-spacing:.04em}
    .journey-number{margin:0 0 12px;font-size:80px;line-height:.92;font-weight:760;letter-spacing:-.055em}
    .journey-lead{width:390px;margin:0 0 14px;color:#4d5155;font-size:18px;line-height:1.2}
    .journey-list{display:grid;gap:9px;margin:0 0 16px;padding:0;list-style:none;font-size:15px;line-height:1.15}
    .journey-list strong{display:inline-block;width:27px;font-weight:500}
    .pathway{display:flex;align-items:center;gap:10px;color:var(--orange);font-size:13px;font-weight:760;white-space:nowrap}
    .pathway i{width:13px;height:1px;background:var(--orange);position:relative}
    .pathway i::before,.pathway i::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-top:1px solid var(--orange)}
    .pathway i::before{left:0;border-left:1px solid var(--orange);transform:rotate(-45deg)}
    .pathway i::after{right:0;border-right:1px solid var(--orange);transform:rotate(45deg)}

    .section{padding:104px 0}
    /* Explicit white prevents inherited PCI Web backgrounds from reducing the
       contrast with the warm sections on this landing page. */
    .section:not(.warm),.fit:not(.warm){background:#fff}
    .section.warm,.fit.warm{background-color:var(--warm)!important}
    .intro p{max-width:790px;margin-bottom:54px}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .metric{min-height:158px;padding:33px 32px;background:#fff;border:1px solid rgba(36,38,41,.03);box-shadow:0 15px 35px rgba(36,38,41,.055)}
    .metric strong{display:block;margin-bottom:17px;color:var(--orange);font-size:33px;letter-spacing:-.025em}
    .metric p{margin:0;font-size:18px}

    .programme{padding-bottom:0}
    .programme .subcopy{margin:0 0 58px;max-width:790px}
    .rotations{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding-bottom:84px}
    .rotations::before{content:"";position:absolute;left:55px;right:55px;top:52px;height:4px;background:#f6b199;transform:scaleX(0);transform-origin:left;transition:transform 1.15s .15s var(--ease)}
    .rotations.is-visible::before{transform:scaleX(1)}
    .rotation{position:relative;z-index:1}
    .rotation-number{display:grid;place-items:center;width:104px;height:104px;margin-bottom:31px;border-radius:50%;background:var(--orange);color:#fff;font-size:32px;font-weight:760;box-shadow:0 0 0 10px #fff}
    .rotation h3{margin-bottom:14px;color:var(--ink);font-size:26px}
    .rotation p{min-height:82px;margin-bottom:18px;font-size:18px}
    .rotation small{color:#777b7e;font-size:16px}
    .next-step{display:flex;align-items:center;justify-content:space-between;min-height:170px;padding:39px 48px;border-radius:16px 16px 0 0;background:var(--ink);color:#fff}
    .next-step .eyebrow{margin-bottom:22px}
    .next-step h3{margin:0;color:#fff;font-size:32px;font-weight:700;letter-spacing:-.025em}
    .bolt{font-size:30px;transform:rotate(-15deg)}

    .benefits{padding-top:104px}
    .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
    .benefit{height:320px;padding:39px 32px;background:#fff;border:1px solid rgba(36,38,41,.03);box-shadow:0 13px 32px rgba(36,38,41,.045);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
    .benefit:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(36,38,41,.09)}
    .benefit-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:32px;border-radius:50%;background:#ffd8ca;color:var(--orange);font-size:23px}
    .benefit h3{margin-bottom:14px;color:var(--ink);font-weight:800}
    .benefit p{margin:0;font-size:18px}

    .ceo-message{padding:96px 0;background:#fff}
    .ceo-card{display:grid;grid-template-columns:420px 1fr;min-height:444px;background:var(--warm);overflow:hidden}
    .ceo-photo-wrap{position:relative;min-height:444px;background:#303438;overflow:hidden}
    .ceo-photo-wrap::after{content:"";position:absolute;right:0;bottom:0;left:0;height:10px;background:var(--orange)}
    .ceo-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%}
    .ceo-copy{display:flex;flex-direction:column;justify-content:center;padding:62px 72px}
    .ceo-copy .eyebrow{margin-bottom:20px}
    .ceo-quote{max-width:690px;margin:0 0 28px;color:var(--ink);font-size:29px;font-weight:600;line-height:1.42;letter-spacing:-.02em}
    .ceo-name{margin:0;color:var(--ink);font-size:17px;font-weight:800}
    .ceo-role{margin:5px 0 0;color:var(--muted);font-size:15px}

    .story{padding:84px 0 95px;background:#fff}
    .story-card{min-height:444px;display:grid;grid-template-columns:210px 1fr;align-items:center;padding:66px 74px;border-radius:4px;background:var(--orange);color:#fff;overflow:hidden}
    .portrait{position:relative;width:132px;height:132px;border-radius:50%;background:#fff0e9;overflow:hidden}
    .portrait::before{content:"";position:absolute;left:39px;top:26px;width:54px;height:54px;border-radius:50%;background:#ee8d6d}
    .portrait::after{content:"";position:absolute;left:20px;bottom:-16px;width:92px;height:80px;border-radius:50% 50% 24% 24%;background:#ee8d6d}
    .story .eyebrow{margin-bottom:25px;color:#732207;font-family:'Lato Black','Lato',Arial,Helvetica,sans-serif!important;font-size:13px;font-weight:900!important}
    blockquote{max-width:780px;margin:0 0 25px;font-size:32px;font-weight:650;line-height:1.35;letter-spacing:-.02em}
    .attribution{margin:0;color:#fff;font-size:16px;font-weight:700}
    .verification{margin:8px 0 0;color:rgba(255,255,255,.72);font-size:13px}

    .fit{padding:100px 0 112px}
    .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px}
    .fit-card{min-height:310px;padding:41px 42px;background:#fff}
    .fit-card h3,.work-card h3{margin-bottom:25px;font-size:22px;font-weight:700}
    .fit-card h3{color:var(--ink)}
    .checklist{display:grid;gap:16px;margin:0;padding:0;list-style:none;color:#4f5356;font-size:17px}
    .checklist li{display:flex;gap:11px;align-items:flex-start}
    .checklist li::before{content:"\2713";color:var(--orange);font-weight:800}
    .work-card{min-height:310px;padding:41px 42px;background:var(--ink);color:#fff}
    .work-card h3{margin:0;color:#fff}
    .fit-media{min-height:310px;margin:0;background:#d7dbdd;overflow:hidden}
    .fit-media img{display:block;width:100%;height:100%;object-fit:cover}

    .process{padding:100px 0 0;background:#fff}
    .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:42px;margin:54px 0 72px}
    .step-number{display:grid;place-items:center;width:62px;height:62px;margin-bottom:27px;border-radius:50%;background:var(--orange);color:#fff;font-size:24px;font-weight:800}
    .step h3{margin-bottom:13px;color:#242629;font-size:23px}
    .step p{margin:0;font-size:17px}
    .final-cta{min-height:150px;display:flex;align-items:center;justify-content:space-between;padding:32px 40px;background:var(--orange);color:#fff}
    .final-cta h3{margin:0 0 7px;color:#fff;font-size:28px;font-weight:800}
    .final-cta p{margin:0;color:rgba(255,255,255,.8);font-size:15px}
    .final-cta .button{background:#fff;color:var(--orange);box-shadow:none}

    /* The explicit grid display overrides the browser's default closed-dialog rule. */
    .application-dialog:not([open]),.application-dialog[hidden]{display:none!important}
    .application-dialog{width:51.2vw;height:90vh;max-height:90vh;padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 30px 90px rgba(19,24,27,.28);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr)}
    .application-dialog::backdrop{background:rgba(25,28,31,.68);backdrop-filter:blur(5px)}
    .dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:44px 50px 36px;background:#fff;border-bottom:1px solid var(--line)}
    .dialog-head .eyebrow{margin:0 0 10px;color:var(--orange);font-family:'Lato Black','Lato',Arial,Helvetica,sans-serif;font-weight:900!important}
    .dialog-head h2{margin:0;color:var(--ink);font-size:42px;font-weight:800;line-height:1.05}
    .dialog-close{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--warm);color:var(--ink);font-size:25px;line-height:1;cursor:pointer}
    .dialog-close:focus-visible{outline:3px solid rgba(244,81,30,.28);outline-offset:3px}
    .application-dialog iframe{display:block;width:100%;height:100%;min-height:0;border:0;margin:0;overscroll-behavior:contain}

    .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
    .reveal.is-visible{opacity:1;transform:none}
    .stagger>*{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
    .stagger.is-visible>*{opacity:1;transform:none}
    .stagger.is-visible>*:nth-child(2){transition-delay:.10s}
    .stagger.is-visible>*:nth-child(3){transition-delay:.20s}
    .stagger.is-visible>*:nth-child(4){transition-delay:.30s}
    @keyframes heroCard{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
    @keyframes heroImage{from{transform:scale(1.055)}to{transform:scale(1)}}

    @media(max-width:980px){
      .shell{width:min(100% - 48px,var(--shell))}
      .site-header .shell{width:calc(100% - 48px)}
      .nav a:not(.button){display:none}
      .hero{height:auto;grid-template-columns:1fr}
      .hero-copy-inner{width:auto;margin:0;padding:72px 24px}
      .hero-visual{min-height:600px;padding:50px 24px}
      .metrics,.benefit-grid{grid-template-columns:1fr}
      .benefit{height:auto;min-height:250px}
      .rotations{grid-template-columns:1fr 1fr;gap:55px}
      .rotations::before{display:none}
      .ceo-card{grid-template-columns:330px 1fr}
      .ceo-copy{padding:48px}
      .fit-grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr 1fr}
    }
    @media(max-width:640px){
      .landing-page-shell{padding-top:108px!important}
      .site-header,.site-header .shell{height:72px}
      .site-header{top:108px}
      .site-header .button{padding:13px 16px}
      .section,.story,.fit,.process{scroll-margin-top:196px}
      .hero-copy-inner{padding-block:58px}
      h1{font-size:45px}
      h2{font-size:39px}
      .facts{align-items:flex-start;gap:9px;flex-direction:column}
      .facts span+span::before{margin-right:10px}
      .hero-visual{min-height:520px;padding:28px 20px}
      .journey-card{width:100%;height:auto;min-height:440px;padding:36px 30px;background:rgba(255,255,255,.78)}
      .journey-lead{width:auto}
      .journey-number{font-size:70px}
      .pathway{font-size:11px}
      .section{padding:76px 0}
      .rotations{grid-template-columns:1fr}
      .next-step{padding:34px 28px}
      .next-step h3{font-size:26px}
      .story-card{grid-template-columns:1fr;padding:45px 30px;gap:30px}
      blockquote{font-size:26px}
      .ceo-message{padding:72px 0}
      .ceo-card{grid-template-columns:1fr}
      .ceo-photo-wrap{min-height:380px}
      .ceo-copy{padding:38px 30px 44px}
      .ceo-quote{font-size:24px}
      .fit-grid{gap:22px}
      .steps{grid-template-columns:1fr}
      .final-cta{align-items:flex-start;flex-direction:column;gap:25px;padding:30px}
      .dialog-head{padding:28px 22px 24px}
      .dialog-head h2{font-size:34px}
      .application-dialog{width:80vw;height:72vh;max-height:72vh}
      .application-dialog iframe{height:100%;margin:0}
    }
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation:none!important;transition:none!important}
      .reveal,.stagger>*{opacity:1!important;transform:none!important}
      .rotations::before{transform:none!important}
    }
