/* ZED Portfolio — shared draft styles (richer, logo-led) */
:root{
  --sky:#4392D0; --mid:#193065; --claret:#A3195B; --mag:#E71D73; --slate:#575C66;
  --tint:#EEF5FC; --line:#d7e3f0;
  --fh:'Krona One',Verdana,sans-serif; --fb:'Poppins',Verdana,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--fb);color:var(--mid);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1340px;margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--fh);font-weight:400;letter-spacing:.5px;}
.btn{display:inline-block;font-weight:600;font-size:14px;padding:12px 24px;border-radius:30px;transition:.15s;cursor:pointer;}
.btn.mag{background:var(--mag);color:#fff;} .btn.mag:hover{background:#c50f61;}
.btn.line{border:1.5px solid var(--mid);color:var(--mid);} .btn.line:hover{background:var(--mid);color:#fff;}
.btn.wline{border:1.5px solid #fff;color:#fff;} .btn.wline:hover{background:#fff;color:var(--mid);}
.tag{font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px;}
.section{padding:76px 0;}
.lead-line{font-family:var(--fh);font-size:30px;color:var(--mid);margin-bottom:12px;line-height:1.2;}
.muted{color:var(--slate);}

/* ---- HEADER / NAV ---- */
header{position:sticky;top:0;z-index:40;background:var(--mid);transition:background .3s,box-shadow .3s;}
header.overlay{position:fixed;top:0;left:0;right:0;background:linear-gradient(to bottom,rgba(15,25,45,.30) 0%,rgba(15,25,45,.04) 66%,rgba(15,25,45,0) 100%);}
header.overlay.scrolled{background:rgba(18,30,52,.10);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 3px 16px rgba(0,0,0,.06);}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px;}
.logo img{height:86px;width:auto;}
.menu{display:flex;gap:26px;align-items:center;font-weight:700;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;}
.menu>a,.menu>.drop>span{position:relative;color:#fff;text-shadow:0 1px 6px rgba(10,18,35,.45);cursor:pointer;padding-bottom:4px;}
.menu>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sky);transition:right .25s;}
.menu>a:hover::after{right:0;}
.menu>a:hover,.menu>.drop>span:hover{color:var(--sky);}
.menu a.current{color:var(--sky);}
.menu a.current::after{right:0;}
.drop{position:relative;}
.drop>span{border-bottom:2px solid var(--sky);}
.drop>span::after{content:' \25BE';font-size:12px;color:var(--sky);display:inline-block;transition:transform .22s;margin-left:2px;}
.drop:hover>span::after{transform:rotate(180deg);color:#fff;}
.drop .panel a{border-left:3px solid transparent;}
.drop .panel a:hover{border-left-color:var(--sky);}
.drop .panel .grp+a{border-left-color:transparent;}
.drop .panel{position:absolute;top:100%;left:-16px;background:#fff;border-radius:10px;box-shadow:0 12px 30px rgba(25,48,101,.18);padding:10px;min-width:230px;display:none;z-index:30;}
.drop:hover .panel{display:block;}
.drop .panel a{display:block;color:var(--mid);text-shadow:none;font-size:13.5px;padding:9px 12px;border-radius:7px;}
.drop .panel a:hover{background:var(--tint);color:var(--mid);}
.drop .panel .grp{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--claret);font-weight:700;padding:10px 12px 4px;}
.burger{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;}
@media(max-width:900px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--mid);padding:14px 28px;gap:8px;}
  .menu.open{display:flex;}
  .menu>a,.menu>.drop>span{text-shadow:none;}
  .drop .panel{position:static;display:block;box-shadow:none;background:transparent;padding:4px 0 4px 12px;min-width:0;}
  .drop .panel a{color:#cfe0f2;} .drop .panel a:hover{background:transparent;color:#fff;}
  .drop .panel .grp{color:var(--sky);}
  .burger{display:block;}
}

/* ---- HERO ---- */
.hero{position:relative;min-height:620px;display:flex;align-items:center;padding-top:104px;padding-bottom:64px;background:var(--mid);overflow:hidden;}
.herobg{position:absolute;inset:0;z-index:0;background:url('img/zed-hero.jpg') no-repeat;background-size:cover;background-position:68% 44%;filter:saturate(1.12) contrast(1.05) brightness(1.02);}
.heroov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,25,45,.90) 0%,rgba(15,25,45,.66) 38%,rgba(15,25,45,.30) 66%,rgba(15,25,45,.12) 100%);}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero-copy{max-width:600px;color:#fff;}
.hero h1{font-size:52px;line-height:1.12;color:#fff;margin-bottom:20px;text-transform:uppercase;}
.hero h1 .m{color:var(--mag);} .hero h1 .s{color:var(--sky);}
.hero .lead{font-weight:700;font-size:25px;line-height:1.3;margin-bottom:12px;}
.hero .lead2{font-size:16px;line-height:1.55;color:#dbe7f5;margin-bottom:8px;max-width:560px;}
.hero .cta3{margin-top:54px;}
.hero .b3{padding:7px 14px 7px 7px;font-size:11px;letter-spacing:1.3px;}
.hero .b3 .b3m{width:18px;height:18px;}
@media(max-width:820px){.hero .lead{font-size:21px;}}
.hero p{font-size:15px;line-height:1.6;color:#e7eef7;margin-bottom:24px;max-width:520px;}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.note{font-size:12.5px;font-style:italic;margin-top:14px;} .hero .note{color:#c6d4e6;}

/* ---- PAGE HERO (inner) ---- */
.pagehero{position:relative;background:var(--mid);color:#fff;padding:112px 0 62px;overflow:hidden;}
/* watermark = oversized fragment of the ZED element only (name/tag cropped out) */
.pagehero .wm{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:min(60%,640px);height:46%;background:url('img/zed-mark-white.png') no-repeat right center;background-size:contain;opacity:.09;pointer-events:none;}
.pagehero .wrap{position:relative;z-index:2;}
.pagehero .tag{color:var(--sky);font-size:17px;letter-spacing:2.5px;margin-bottom:16px;}
.pagehero h1{font-size:38px;line-height:1.18;color:#fff;max-width:820px;text-transform:uppercase;margin-bottom:10px;}
.pagehero p{font-size:17px;color:#cfe0f2;margin-top:18px;max-width:720px;line-height:1.6;}
/* full service-colour persona banner */
.pagehero.svc{background:var(--cc);}
.pagehero.svc .tag{color:rgba(255,255,255,.9)!important;}
.pagehero.svc p{color:rgba(255,255,255,.94);}
.pagehero.svc .crumb,.pagehero.svc .crumb a{color:rgba(255,255,255,.82);}
.crumb{font-size:12px;color:#9fb4cf;margin-bottom:20px;letter-spacing:.5px;}
.crumb a:hover{color:#fff;}

/* ---- CREDIBILITY STRIP ---- */
.cred{background:var(--tint);padding:22px 0;}
.cred .wrap{display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap;}
.cred .lbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--slate);font-weight:700;}
.cred .co{font-family:var(--fh);font-size:15px;color:var(--mid);opacity:.7;}

/* ---- METRICS ---- */
.metrics{background:var(--sky);color:#fff;}
.metrics .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:26px 28px;}
.metric{text-align:center;flex:1 1 auto;}
.metric b{font-family:var(--fh);font-size:24px;display:block;line-height:1.1;}
.metric span{font-size:10.5px;letter-spacing:.5px;opacity:.92;}

/* ---- DARK IMMERSIVE (help/portfolio) ---- */
.dark{position:relative;background:var(--mid);color:#fff;padding:82px 0;overflow:hidden;}
.dark .wm{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(60%,680px);height:48%;background:url('img/zed-mark-white.png') no-repeat right center;background-size:contain;opacity:.10;pointer-events:none;}
.dark .tag{color:var(--sky);}
.dark .hl{font-family:var(--fh);font-size:37px;line-height:1.15;margin-bottom:30px;}
.hgrid{display:flex;flex-wrap:wrap;position:relative;z-index:2;}
.hitem{flex:1 1 22%;min-width:210px;padding:0 24px;border-left:1px solid rgba(255,255,255,.14);}
.hitem:first-child{border-left:none;padding-left:0;}
.hitem .n{font-family:var(--fh);font-size:28px;color:var(--sky);}
.hitem h3{font-family:var(--fb);font-weight:700;font-size:17px;margin:12px 0 8px;color:#fff;}
.hitem p{font-size:13.5px;color:#c7d5e8;line-height:1.6;margin-bottom:12px;}
.hitem .more{color:var(--mag);font-weight:700;font-size:13px;}
.more{font-weight:700;font-size:13px;color:var(--mag);}

/* ---- METHOD colour-bleed ---- */
.method{background:linear-gradient(120deg,var(--mid) 0%,var(--claret) 62%,var(--mag) 120%);color:#fff;text-align:center;padding:70px 30px;}
.method h2{font-family:var(--fh);font-size:32px;line-height:1.25;max-width:900px;margin:0 auto 12px;}
.method p{font-size:16px;color:#f3d8e5;max-width:640px;margin:0 auto;}

/* ---- STORY full-bleed ---- */
.story{position:relative;min-height:500px;display:flex;align-items:center;background:#0f1c30;overflow:hidden;}
.storybg{position:absolute;inset:0;background:url('img/zed-portrait.jpg') center 20%/cover no-repeat;filter:saturate(1.1) contrast(1.03);}
.storyov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,25,45,.92) 0%,rgba(15,25,45,.55) 44%,rgba(15,25,45,.10) 72%);}
.story .wrap{position:relative;z-index:2;} .story-copy{max-width:560px;color:#fff;}
.story .tag{color:#e9c4d6;} .story h2{font-family:var(--fh);font-size:28px;margin-bottom:16px;}
.story p{font-size:16px;line-height:1.7;color:#dbe6f2;margin-bottom:14px;}
.story .sig{font-family:var(--fh);font-size:18px;color:#fff;border-left:3px solid var(--mag);padding-left:18px;margin-top:18px;line-height:1.4;}

/* ---- PROOF / carousel ---- */
.proof{background:var(--cc,var(--claret));color:#fff;padding:40px 0;}
.proof .wrap{position:relative;max-width:900px;}
.proof .tag{color:rgba(255,255,255,.88);font-weight:700;margin-bottom:4px;}
.proof .qmark,.proof .qm{font-family:Georgia,'Times New Roman',serif;font-size:64px;color:rgba(255,255,255,.5);line-height:.85;display:block;height:34px;margin:6px 0 0;}
.proof blockquote{font-size:19px;font-style:italic;line-height:1.5;font-weight:500;max-width:820px;margin-top:6px;text-align:justify;-webkit-hyphens:auto;hyphens:auto;}
.proof cite{display:block;font-style:normal;font-size:14px;color:rgba(255,255,255,.9);margin-top:14px;} .proof cite b{color:#fff;}
.proof .tcite{margin-top:16px;} .proof .tcite span{color:rgba(255,255,255,.9);} .proof .tcite span b{color:#fff;}
.proof .tavatar{border:2px solid rgba(255,255,255,.7);}
.cnav{margin-top:22px;display:flex;gap:10px;}
.cnav button{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:16px;cursor:pointer;}
.cnav button:hover{background:#fff;color:var(--claret);}
.slide{display:none;} .slide.active{display:block;}

/* ---- SIGNATURE cards ---- */
.sig2{padding:80px 0;} .sig2 .tag{color:var(--sky);}
.sig2 .hl{font-family:var(--fh);font-size:33px;color:var(--mid);margin-bottom:26px;}
.scards{display:flex;gap:26px;flex-wrap:wrap;}
.scard{flex:1 1 44%;min-width:290px;background:var(--tint);border-radius:14px;padding:28px;border-top:4px solid var(--mag);position:relative;display:flex;flex-direction:column;}
.scard .pplearn{margin-top:auto;align-self:flex-start;}
.scard .n{position:absolute;top:20px;right:24px;font-family:var(--fh);font-size:32px;color:#d4e2f1;}
.scard h3{font-family:var(--fb);font-weight:700;font-size:19px;color:var(--mid);margin-bottom:9px;max-width:82%;}
.scard p{font-size:14px;color:var(--slate);line-height:1.6;margin-bottom:11px;}

/* ---- HUMAN ---- */
.human{background:var(--mid);color:#fff;}
.human .wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding:60px 28px;}
.human .tag{color:#e9c4d6;} .human .htext{flex:1;min-width:300px;}
.human h3{font-size:24px;color:#fff;margin-bottom:14px;}
.human p{font-size:16px;line-height:1.7;color:#d6e0ee;margin-bottom:16px;}
.human .hquote{flex:1;min-width:260px;font-family:var(--fh);font-size:20px;line-height:1.4;color:#fff;border-left:3px solid var(--mag);padding-left:22px;}

/* ---- PROSE / FAQ / IMG PLACEHOLDER ---- */
.prose{max-width:760px;} .prose p{font-size:16px;line-height:1.75;margin-bottom:18px;color:#2b3a4d;}
.prose h2{font-family:var(--fb);font-weight:700;font-size:22px;color:var(--mid);margin:28px 0 12px;}
.prose ul{margin:0 0 18px;padding-left:22px;} .prose li{font-size:16px;line-height:1.7;color:#2b3a4d;margin-bottom:9px;} .prose a{color:var(--sky);text-decoration:underline;}
.imgph{background:repeating-linear-gradient(45deg,#e7eef6,#e7eef6 12px,#dde8f3 12px,#dde8f3 24px);border:1px dashed #b9c9dc;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#7d93ad;font-size:13px;text-align:center;padding:16px;min-height:220px;}
.imgph.tall{min-height:340px;}
.faq .q{font-weight:700;color:var(--mid);font-size:16px;margin-top:16px;}
.faq .a{font-size:15px;color:var(--slate);line-height:1.65;margin-top:4px;}
.final{text-align:center;background:var(--tint);} .final h2{font-size:30px;color:var(--mid);margin-bottom:14px;} .final p{font-size:16px;color:var(--slate);margin-bottom:22px;}

/* ---- CASE STUDY GRID ---- */
.csgrid{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px;}
.cscard{flex:1 1 30%;min-width:270px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:.15s;}
.cscard:hover{box-shadow:0 8px 24px rgba(25,48,101,.10);transform:translateY(-2px);}
.cscard .cshead{background:var(--mid);color:#fff;padding:16px 18px;}
.cscard .cshead .sector{font-size:11px;color:var(--sky);letter-spacing:1px;text-transform:uppercase;}
.cscard .cshead h3{font-family:var(--fb);font-weight:700;font-size:16px;margin-top:6px;color:#fff;line-height:1.3;}
.cscard .csbody{padding:16px 18px;} .cscard .csbody p{font-size:13.5px;color:var(--slate);line-height:1.6;margin-bottom:12px;}

/* ---- CONTACT FORM ---- */
.form{max-width:560px;margin-top:24px;}
.form label{display:block;font-size:13px;font-weight:600;color:var(--mid);margin:14px 0 6px;}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:var(--fb);font-size:15px;}
.form textarea{min-height:120px;}

/* ---- FOOTER ---- */
footer{background:var(--mid);color:#9fb4cf;padding:32px 0 20px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;align-items:flex-start;}
.flock{display:flex;flex-direction:column;align-items:flex-start;}
.flock img{height:70px;width:auto;display:block;}
.fcols{display:flex;gap:50px;flex-wrap:wrap;}
.fcol{display:flex;flex-direction:column;}
.fcol b{color:#fff;font-size:11px;letter-spacing:1.2px;margin-bottom:12px;}
.fcol a{color:#c3d2e6;font-size:14px;margin-bottom:8px;font-weight:500;transition:.15s;} .fcol a:hover{color:#fff;padding-left:3px;}
/* PARTNERING column = light persona colours, legible on navy */
.fcols .fcol:first-child a:nth-of-type(1){color:#6fb0e6;}
.fcols .fcol:first-child a:nth-of-type(2){color:#f2649f;}
.fcols .fcol:first-child a:nth-of-type(3){color:#d98cae;}
.fcols .fcol:first-child a:nth-of-type(4){color:#9fb4d6;}
.fcols .fcol:first-child a:nth-of-type(5){color:#b8c2cf;}
.fcols .fcol:last-child a{color:#c3d2e6;}
.fcol a:hover{color:#fff;}
.fcta{text-align:right;}
.fsoc{margin-top:16px;display:flex;gap:12px;justify-content:flex-end;}
.soc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.15s;}
.soc:hover{transform:translateY(-2px);}
.fcopy{width:100%;border-top:1px solid #2c477a;margin-top:18px;padding-top:12px;font-size:11.5px;color:#7f95b3;line-height:1.55;}

/* ---- TRIPLE CTA — consistent brand-colour word buttons ---- */
.cta3{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.b3{display:inline-flex;align-items:center;gap:7px;padding:8px 16px 8px 8px;border-radius:26px;color:#fff;font-weight:700;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;transition:.15s;}
.b3:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28);}
.b3-mag{background:var(--mag);} .b3-sky{background:var(--sky);} .b3-claret{background:var(--claret);}
.b3 .b3m{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:#fff;padding:3px;}
.b3 .b3m img{width:100%;height:100%;object-fit:contain;display:block;}
.cta3note{font-size:13px;color:#dbe7f5;margin-top:14px;white-space:nowrap;text-shadow:0 1px 8px rgba(9,17,30,.85);}
.dark .cta3note,.pagehero .cta3note{color:#cfe0f2;}
.final .cta3{justify-content:center;} .final .cta3note{color:var(--slate);margin:14px auto 0;text-align:center;}
@media(max-width:640px){.cta3note{white-space:normal;} .hero{min-height:520px;padding-bottom:40px;} .hero .cta3{margin-top:28px;}}

/* ---- PARTNERING / PERSONAS (colour blocks + linked Why-ZED box) ---- */
.ppx{position:relative;overflow:hidden;background:linear-gradient(160deg,#22407a 0%,#0f1c30 100%);padding:72px 0;}
.ppx .secwm{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(46%,560px);height:58%;background:url('img/zed-mark-white.png') no-repeat right center;background-size:contain;opacity:.06;pointer-events:none;}
.ppx>.wrap{position:relative;z-index:2;}
.ppx .pphead{text-align:center;max-width:860px;margin:0 auto 44px;}
.ppx .pphead .tag{color:var(--sky);font-size:16px;letter-spacing:2.5px;}
.ppx .pphl{font-family:var(--fh);font-size:44px;color:#fff;line-height:1.18;margin:8px 0 14px;}
.ppx .ppsub{font-size:19px;color:#cfe0f2;line-height:1.55;}
@media(max-width:640px){.ppx .pphl{font-size:30px;}}
.ppwrap2{display:flex;gap:30px;align-items:stretch;flex-wrap:wrap;}
.ppintro-box{position:relative;overflow:hidden;flex:1.25 1 340px;min-width:320px;min-height:460px;color:#fff;border-radius:0;padding:36px 32px;display:flex;flex-direction:column;justify-content:flex-end;background:#0f1c30;box-shadow:0 16px 42px rgba(0,0,0,.4);}
.ppintro-box::before{content:"";position:absolute;inset:0;z-index:0;background:url('img/chair.jpg') 48% 30%/cover no-repeat;filter:brightness(1.22) saturate(1.06);}
@media(max-width:640px){.ppintro-box{min-height:0;padding-top:206px;justify-content:flex-start;} .ppintro-box::before{inset:0 0 auto 0;height:186px;background-position:50% 24%;filter:none;} .ppintro-box::after{inset:0 0 auto 0;height:186px;background:linear-gradient(180deg,rgba(10,18,32,0) 62%,rgba(15,28,48,.5) 100%);}}
.ppintro-box::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,18,32,0) 0%,rgba(10,18,32,.22) 46%,rgba(10,18,32,.82) 100%);}
.ppintro-box>*{position:relative;z-index:2;}
.ppintro-box .whyzed{font-family:var(--fh);font-size:25px;line-height:1.28;color:#fff;margin-bottom:12px;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.ppintro-box .pnar{font-size:15px;color:#eaf1fb;line-height:1.6;margin-bottom:18px;max-width:440px;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.ppintro-box .pnar a{color:#fff;font-weight:700;border-bottom:2px solid var(--mag);white-space:nowrap;text-shadow:0 1px 8px rgba(9,17,30,.9);}
.ppintro-box .b3{align-self:flex-start;}
.ppcols{flex:1 1 330px;min-width:300px;display:flex;flex-direction:column;gap:12px;}
.ppblock{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:13px;background:var(--pc);color:#fff;transition:.15s;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(0,0,0,.3);}
.ppblock:hover{transform:translateX(5px);box-shadow:0 12px 28px rgba(25,48,101,.25);}
.ppblock .ppbody{flex:1;}
.ppblock .ppfor{font-size:10px;letter-spacing:2.5px;font-weight:700;color:rgba(255,255,255,.85);}
.ppblock .ppbody b{display:block;font-family:var(--fb);font-weight:700;font-size:16.5px;color:#fff;line-height:1.2;margin:1px 0 3px;}
.ppblock .ppd{font-size:12.5px;color:rgba(255,255,255,.92);line-height:1.45;}
/* base LEARN pill (personas + signature methodology) */
.pplearn{display:inline-flex;align-items:center;gap:7px;background:var(--pc,var(--mid));color:#fff;font-weight:700;font-size:11px;letter-spacing:1.5px;padding:7px 12px 7px 7px;border-radius:22px;flex:none;}
.pplearn .b3m{width:22px;height:22px;border-radius:5px;background:#fff;padding:3px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.pplearn .b3m img{width:100%;height:100%;object-fit:contain;display:block;}
.ppblock .pplearn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);}
@media(max-width:820px){.ppblock .pplearn .txt{display:inline;}}

.draftbadge{background:var(--claret);color:#fff;font-size:12px;font-weight:600;text-align:center;padding:8px;letter-spacing:.3px;}
@media(max-width:820px){ .hero h1{font-size:38px;} .pagehero h1{font-size:30px;} .herobg{background-size:cover;background-position:58% 30%;} }

/* ---- LARGE / WIDE SCREENS (27"+) — fill the colour fields, cap line length ---- */
@media(min-width:1600px){
  .wrap{max-width:1460px;}
  .ppx{padding:88px 0;}
  .sig2{padding:96px 0;}
  .tproof{padding:64px 0 72px;}
}

/* ---- PERSONA FULL-BLEED BAND (image bleeds, copy overlaid, scrim for legibility) ---- */
.pband{position:relative;overflow:hidden;color:#fff;padding:74px 0;background:#0f1c30;}
.pband .pbg{position:absolute;inset:0;z-index:0;}
.pband .pbg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.pband .pscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,17,30,.80) 0%,rgba(9,17,30,.5) 26%,rgba(9,17,30,.18) 48%,rgba(9,17,30,0) 68%);}
.pband .wrap{position:relative;z-index:2;}
.pband .pcopy{position:relative;max-width:600px;text-shadow:0 1px 10px rgba(0,0,0,.6);padding:20px 22px;}
.pband--plain .pcopy::before{display:none;}
.pband .pcopy::before{content:"";position:absolute;inset:-14px -18px;z-index:-1;background:radial-gradient(120% 132% at 32% 46%,rgba(9,17,30,.42),rgba(9,17,30,.22) 50%,rgba(9,17,30,0) 80%);}
.pband .tag{color:#f2649f;font-size:15.5px;letter-spacing:2px;font-weight:700;}
.pband .accrule{width:56px;height:4px;background:#f2649f;border-radius:2px;margin:2px 0 18px;}
.pband .lead{font-size:17px;font-weight:500;line-height:1.7;color:#f2f7fc;max-width:560px;margin-bottom:16px;}
.pband h2.acc{color:#fff;margin-top:8px;}
.pband .prose p{color:#d7e2f0;}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:4px 0 20px;}
.vgrid .vi{font-size:15px;font-weight:500;line-height:1.5;position:relative;padding-left:18px;color:#eaf1f9;}
.vgrid .vi::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accL,var(--sky));}
.pband .plist{list-style:none;margin:6px 0 0;padding:0;}
.pband .plist li{position:relative;padding-left:18px;margin-bottom:12px;color:#e6eef8;font-size:15px;line-height:1.55;}
.pband .plist li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accL);}
@media(max-width:1100px){.pband{padding:0 0 42px;}.pband .pbg{position:relative;height:280px;}.pband .pscrim{background:linear-gradient(180deg,rgba(9,17,30,.15) 0%,rgba(9,17,30,.66) 100%);}.pband .wrap{margin-top:24px;}.pband .pcopy{max-width:none;}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr;}}

/* copy sits on the RIGHT (for images where subject is on the left) */
.pband--right .pscrim{background:linear-gradient(270deg,rgba(9,17,30,.86) 0%,rgba(9,17,30,.60) 24%,rgba(9,17,30,.26) 46%,rgba(9,17,30,0) 66%);}
.pband--right .wrap{display:flex;justify-content:flex-end;}
@media(max-width:1100px){.pband--right .wrap{display:block;}}

/* justified body copy + USP line */
.pband .lead,.pband .prose p,.pband .usp{text-align:justify;}
.pband .usp{font-size:14.5px;line-height:1.6;color:#eef4fb;margin:2px 0 16px;max-width:560px;}
.pband .usp b{color:var(--accL);}

/* ---- "Who I help" mega-menu ---- */
.drop .panel.mega{min-width:242px;padding:9px;}
.panel.mega .mega-tiles{display:flex;flex-direction:column;gap:5px;}
.drop .panel.mega .ptile{display:block;background:var(--pc);color:#fff;border-radius:7px;padding:7px 12px;font-size:12.5px;font-weight:700;transition:.14s;}
.drop .panel.mega .ptile:hover{filter:brightness(1.09);transform:translateX(3px);}
.panel.mega .mega-more{border-top:1px solid var(--line);margin-top:10px;padding-top:8px;}
.panel.mega .mega-more .grp{display:block;color:var(--claret);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;padding:0 4px 4px;}
.drop .panel.mega .mega-more a{display:block;color:var(--slate);font-size:12.5px;padding:5px 8px;font-weight:500;}
.drop .panel.mega .mega-more a:hover{background:var(--tint);border-radius:6px;color:var(--mid);}
@media(max-width:900px){.drop .panel.mega{min-width:0;}}

/* ways to start list */
.startways{display:flex;flex-direction:column;gap:16px;margin-top:20px;}
.startway{border-left:3px solid var(--mag);padding:1px 0 1px 16px;}
.startway b{display:block;font-size:16px;color:var(--mid);}
.startway span{display:block;font-size:14.5px;color:var(--slate);line-height:1.55;margin:4px 0 10px;}

/* testimonial face on persona pages */
.tcite{display:flex;align-items:center;gap:12px;margin-top:14px;}
.tavatar{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 3px 10px rgba(25,48,101,.18);}
.tcite span{font-size:13.5px;color:var(--claret);} .tcite span b{color:var(--mid);}

/* ===== START finisher (reusable) ===== */
.finish{position:relative;overflow:hidden;background:var(--tint);padding:54px 0;}
.finish>.wrap{position:relative;z-index:1;max-width:720px;}
.finish .fwm{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);z-index:0;width:340px;max-width:66%;opacity:.05;pointer-events:none;}
.startline{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.startline .go{width:9px;height:9px;border-radius:50%;background:#37D06A;align-self:center;flex:none;}
.startline .s1{font-family:var(--fh);font-size:22px;letter-spacing:3px;color:var(--mid);}
.startline .s2{font-family:var(--fh);font-size:13px;letter-spacing:1.5px;color:var(--mag);}
.ppcard{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px;text-decoration:none;}
.ppcard .coin{flex:none;width:104px;height:104px;}
.coinrot{transform-origin:50px 50px;animation:coinspin 46s linear infinite;}
@keyframes coinspin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.coinrot{animation:none;}}
.ppcard h3{font-family:var(--fh);font-weight:400;font-size:14px;color:var(--mid);margin:0 0 5px;letter-spacing:.5px;}
.ppcard p{font-size:12.5px;color:var(--slate);line-height:1.5;margin:0;}
.ppcard p .more{color:var(--sky);font-weight:600;white-space:nowrap;}
.pp-pill{display:inline-block;margin-top:10px;background:#D11A67;color:#fff;font-family:var(--fh);font-size:10.5px;letter-spacing:.5px;padding:8px 14px;border-radius:22px;}
.ppcard:hover .pp-pill{background:var(--mid);}

/* About: passionate purpose section */
.ppabout{background:var(--tint);}
.ppabout .pptag{color:var(--mag);font-size:15px;letter-spacing:2.5px;font-weight:700;text-transform:uppercase;}
.pptitle{font-family:var(--fh);font-weight:400;font-size:30px;line-height:1.25;color:var(--mid);margin:10px 0 24px;}
.pplayout{display:flex;gap:44px;flex-wrap:wrap;align-items:center;}
.ppcopy{flex:1.3;min-width:320px;}
.ppcopy p{font-size:15.5px;line-height:1.7;color:var(--slate);margin-bottom:14px;}
.ppcopy p.pplast{color:var(--mid);font-weight:500;}
.ppvenn{flex:1;min-width:290px;text-align:center;}
.ppvenn svg{width:100%;max-width:380px;height:auto;}
.ppvenn .cred{font-size:11px;color:#9aa3ad;margin-top:10px;letter-spacing:.4px;}
@media(max-width:820px){.pptitle{font-size:24px;}}

/* ===== Case studies ===== */
.csgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;}
.cscard2{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.cscard2:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(25,48,101,.14);}
.cscard2 .csimg{height:134px;background:var(--cc,#4392D0);display:flex;align-items:center;justify-content:center;padding:14px;}
.cscard2 .csimg .chip{background:#fff;border-radius:10px;padding:12px 18px;display:flex;align-items:center;justify-content:center;max-width:82%;box-shadow:0 5px 14px rgba(0,0,0,.16);}
.cscard2 .csimg .chip img{max-height:44px;max-width:100%;display:block;}
.cscard2 .csimg .csph{color:#fff;font-family:var(--fh);font-size:16px;letter-spacing:1.5px;text-align:center;}
.cscard2 .csc{padding:16px 18px 18px;}
.cscard2 .csseg{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--cc,#4392D0);}
.cscard2 h3{font-family:var(--fb);font-weight:700;font-size:18px;color:var(--mid);margin:5px 0 8px;}
.cscard2 .csc p{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0 0 10px;}
.cscard2 .more{display:inline-flex;align-items:center;gap:6px;background:var(--cc,#4392D0);color:#fff;font-weight:700;font-size:12px;letter-spacing:.4px;padding:7px 14px;border-radius:20px;margin-top:6px;}
.cscard2.tba{opacity:.82;}
.cscard2.tba .csimg{background:#98a1ad;}
.cscard2.tba .csseg,.cscard2.tba .more{color:#9aa3ad;}
.cscard2.tba .csimg .chip{box-shadow:none;opacity:.9;}
.csbanner{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;}
.csbanner .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.cslogo{flex:none;width:184px;height:84px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;}
.cslogo img{max-width:78%;max-height:56px;}
.cslogo .csph{font-family:var(--fh);font-size:16px;letter-spacing:1px;color:var(--cc,#4392D0);}
.csimgph{flex:1;min-width:240px;height:118px;border-radius:12px;background:var(--cc,#4392D0);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fh);font-size:12.5px;letter-spacing:1px;text-align:center;padding:0 16px;opacity:.94;}
.csstory{max-width:760px;}
.csstory .seg{font-size:12px;color:var(--cc,#4392D0);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;}
.csstory .summary{font-size:17px;color:var(--mid);font-weight:500;line-height:1.5;margin:10px 0 20px;}
.csstory h4{font-family:var(--fb);font-weight:700;color:var(--cc,#4392D0);font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin:20px 0 6px;}
.csstory p{font-size:15px;line-height:1.7;color:#2b3a4d;margin-bottom:10px;}
.csstory .csq{border-left:3px solid var(--cc,#4392D0);padding-left:18px;margin-top:22px;font-style:italic;color:var(--mid);font-size:16px;}
.csstory .csq cite{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:8px;}
.csstory .csq cite b{color:var(--cc,#4392D0);}
.zacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.zact{display:block;border-radius:12px;padding:12px 14px;color:#fff;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.zact:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(25,48,101,.18);}
.zact .zh{display:flex;align-items:center;justify-content:space-between;font-family:var(--fh);font-size:12px;letter-spacing:1px;margin-bottom:5px;}
.zact .zh .zl{display:flex;align-items:center;gap:8px;}
.zact .zh .zl img{height:11px;width:auto;display:block;}
.zact .zd{font-size:12px;line-height:1.42;color:#fff;}
.zact--book{background:#D11A67;}.zact--score{background:var(--claret);}.zact--contact{background:#2E77B5;}.zact--build{background:var(--mid);}
.fcloser{text-align:center;font-family:var(--fh);font-size:13px;color:var(--mid);margin:18px 0 0;letter-spacing:.3px;line-height:1.6;}
.fcloser .fq{font-family:Georgia,serif;font-size:28px;color:var(--claret);vertical-align:-9px;}
.fpersona{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--slate);}
.fpersona a{color:var(--mid);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);}
@media(max-width:720px){.zacts{grid-template-columns:1fr;}.ppcard{flex-direction:column;text-align:center;}}

.csstory p,.csstory .summary,.ppcopy p,.cs p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;}

/* ===== Client story page (bleed template) ===== */
.csh .cshlogo{display:inline-block;margin-bottom:18px;background:rgba(255,255,255,.9);border-radius:14px;padding:13px 22px;box-shadow:0 8px 22px rgba(0,0,0,.16);}
.csh .cshlogo img{max-height:66px;max-width:340px;display:block;filter:none;}
.csh .cshlogo.solid{background:#fff;}
.csbleed{position:relative;min-height:340px;display:flex;align-items:flex-end;overflow:hidden;background:var(--cc,#193065);}
.csbleed .csbleed-img{position:absolute;inset:0;z-index:0;}
.csbleed .csbleed-img img{width:100%;height:100%;object-fit:cover;display:block;}
.csbleed .csbleed-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,17,30,.12),rgba(9,17,30,.72));}
.csbleed .wrap{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:38px;}
.csbleed .bigstat{font-family:var(--fh);font-size:46px;color:#fff;line-height:1;}
.csbleed .bigstatlbl{font-size:15px;color:rgba(255,255,255,.92);margin-top:10px;max-width:560px;line-height:1.5;}
.csbleed .csimgnote{position:absolute;top:14px;right:18px;z-index:2;font-size:11px;letter-spacing:.5px;color:rgba(255,255,255,.6);}
@media(max-width:640px){.csbleed{min-height:250px;}.csbleed .bigstat{font-size:32px;}}

/* client story: copy over image band */
.pband .csstat{font-family:var(--fh);font-size:30px;color:#fff;line-height:1.15;margin-bottom:20px;}
.pband .csstat span{display:block;font-family:var(--fb);font-size:13px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.3px;margin-top:8px;}
.pband .csh4{font-family:var(--fb);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--accL);margin:16px 0 5px;}
.pband .csp{font-size:14.5px;line-height:1.6;color:#eef4fb;text-align:justify;-webkit-hyphens:auto;hyphens:auto;}

/* client-story band: lighter scrim so the image colour stays vivid */
.pband--story .pscrim{background:linear-gradient(270deg,rgba(9,17,30,.76) 0%,rgba(9,17,30,.44) 33%,rgba(9,17,30,.10) 58%,rgba(9,17,30,0) 76%);}

/* story band: lose the scrim/tint box, keep red vivid; text carried by shadow */
.pband--story .pscrim{display:none;}
.pband--story .pcopy::before{display:none;}
.pband--story .pcopy{text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 3px rgba(0,0,0,.8);padding:0;}
.pband--story .csp{color:#fff;}
/* eyebrow: more prominent on all coloured banners */
.pagehero.svc .tag{color:#fff!important;font-weight:800;font-size:16px;letter-spacing:2.5px;}

/* oversize company logo on the story image */
.pband--story .pbrand{position:absolute;left:5%;top:14%;z-index:1;width:min(36%,400px);opacity:.62;pointer-events:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));}
@media(max-width:1100px){.pband--story .pbrand{position:static;width:180px;opacity:1;margin:14px 0 0 28px;}}

/* story band: soft feathered tint behind copy only (keeps image vivid) */
.pband--story .pscrim{display:block;background:linear-gradient(270deg,rgba(9,17,30,.82) 0%,rgba(9,17,30,.52) 17%,rgba(9,17,30,.14) 37%,rgba(9,17,30,0) 52%);}

/* case-study placeholder gradient band + text logo chip (image-less stand-in) */
.pband--story .pbg.ph{background:
  radial-gradient(130% 120% at 6% 12%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%),
  linear-gradient(118deg,var(--g1) 0%,var(--g2) 58%,#0a1422 100%);}
.csh .cshlogo.txt{font-family:var(--fh);font-size:23px;color:#4a4f57;letter-spacing:1px;line-height:1;padding:17px 26px;}

/* case-study risk-free START panel under final CTA */
.final .riskfree{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;max-width:720px;margin:28px auto 0;background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:16px 22px;text-align:left;}
.final .riskfree .rf-txt{font-size:14px;color:var(--mid);line-height:1.5;flex:1 1 320px;}
.final .riskfree .rf-ey{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--claret);margin-bottom:3px;}
.final .riskfree .b3{flex:0 0 auto;}
@media(max-width:640px){.final .riskfree{justify-content:center;text-align:center;}.final .riskfree .rf-txt{flex-basis:100%;}}

/* case-study small-phone polish */
@media(max-width:640px){
  .pband .csstat{font-size:22px;line-height:1.2;}
  .pband--story .csp{text-align:left;}
  .csh .cshlogo img{max-height:56px;}
  .csh .cshlogo{padding:11px 18px;}
}

/* case-study finish: lead heading above the START panel */
.finish .fhead{font-family:var(--fh);font-weight:400;font-size:23px;line-height:1.3;color:var(--mid);text-align:center;max-width:720px;margin:0 auto 6px;}
@media(max-width:640px){.finish .fhead{font-size:20px;}.pband--story .csp{-webkit-hyphens:none;hyphens:none;}}

/* flipped START panel: coin becomes a compact signature strip below the pills */
.finish .ppcard{max-width:560px;margin:16px auto 0;padding:11px 16px;}
.finish .ppcard .coin{width:70px;height:70px;}
.finish .ppcard h3{font-size:13px;margin-bottom:4px;}
.finish .ppcard p{font-size:12px;}

/* footer: Passionate Purpose coin + promise */
.fpromise{display:flex;align-items:center;gap:13px;max-width:300px;}
.fpromise .fcoinlink{display:block;line-height:0;flex:none;}
.fpromise .fcoin{width:72px;height:72px;}
.fpromise .fpr-txt b{color:#fff;font-family:var(--fh);font-weight:400;font-size:11.5px;letter-spacing:.3px;display:block;margin-bottom:4px;}
.fpromise .fpr-txt span{color:#c3d2e6;font-size:12px;line-height:1.45;display:block;margin-bottom:5px;}
.fpromise .fpr-txt i{color:#f2649f;font-style:italic;}
.fpromise .fpr-txt a{color:#6fb0e6;font-size:12px;font-weight:600;}
.fpromise .fpr-txt a:hover{color:#fff;}
@media(max-width:900px){.fpromise{max-width:none;flex-basis:100%;order:3;}}

/* case-study: next-story navigation bar */
.casenav{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.casenav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;}
.casenav .cn-all{color:var(--slate);font-weight:600;font-size:13.5px;letter-spacing:.3px;}
.casenav .cn-all:hover{color:var(--mid);}
.casenav .cn-next{display:flex;flex-direction:column;gap:2px;text-align:right;}
.casenav .cn-next span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);font-weight:700;}
.casenav .cn-next b{font-family:var(--fh);font-weight:400;font-size:15px;color:var(--mid);}
.casenav .cn-next:hover b{color:var(--mag);}

/* footer: standalone Passionate Purpose coin as a subtle link (no narrative) */
.fcoin-link{display:block;line-height:0;align-self:center;}
.fcoin{width:88px;height:88px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));}
@media(max-width:900px){.fcoin-link{order:3;}}

/* story band, copy on LEFT (e.g. building/architecture shots) */
.pband--left .wrap{display:block;}
.pband--story.pband--left .pscrim{background:linear-gradient(90deg,rgba(9,17,30,.9) 0%,rgba(9,17,30,.72) 22%,rgba(9,17,30,.42) 42%,rgba(9,17,30,.12) 58%,rgba(9,17,30,0) 70%);}

/* right-copy story bands: stronger feathered scrim + soft tint behind copy (legibility over busy photos) */
.pband--story .pscrim{display:block;background:linear-gradient(270deg,rgba(9,17,30,.93) 0%,rgba(9,17,30,.78) 20%,rgba(9,17,30,.52) 40%,rgba(9,17,30,.22) 58%,rgba(9,17,30,0) 76%);}
.pband--story:not(.pband--left) .pcopy::before{content:"";position:absolute;inset:-16px -22px -16px -34px;z-index:-1;display:block;background:radial-gradient(130% 130% at 80% 50%,rgba(9,17,30,.5),rgba(9,17,30,.3) 55%,rgba(9,17,30,0) 82%);}

/* ===== CASE-STUDY TEMPLATE REFINEMENTS (StepJockey exemplar) ===== */
/* slimmer coloured banner — logo now lives in the image panel */
.pagehero.csh{padding:100px 0 34px;}
/* bigger image panel; logo headlines the copy */
.pband--story{padding:88px 0;min-height:600px;}
.pband--story .bandlogo{display:inline-block;background:rgba(255,255,255,.93);border-radius:12px;padding:10px 18px;margin-bottom:20px;box-shadow:0 10px 26px rgba(0,0,0,.32);}
.pband--story .bandlogo img{max-height:48px;max-width:230px;display:block;}
/* stat + metric pills */
.pband .cspills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px;max-width:600px;}
.pband .cspill{font-size:12px;font-weight:600;color:#eaf3fb;background:rgba(143,195,239,.16);border:1px solid rgba(143,195,239,.4);padding:6px 12px;border-radius:20px;}
.pband .cspill--key{color:#ffd6e7;background:rgba(231,29,115,.20);border-color:rgba(231,29,115,.5);font-weight:700;}
.pband .csk{color:#fff;font-weight:700;}
/* reflection callout */
.pband--story .csreflect{margin-top:20px;padding:6px 0 6px 16px;border-left:3px solid var(--mag);font-style:italic;font-size:14.5px;line-height:1.6;color:#fff;max-width:600px;}
/* woven-in testimonial (replaces the separate proof panel) */
.pband--story .csquote{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);max-width:600px;}
.pband--story .csquote p{font-style:italic;font-size:14px;line-height:1.6;color:#dbe7f5;margin:0 0 12px;}
.pband--story .csquote cite{display:flex;align-items:center;gap:10px;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.82);}
.pband--story .csquote cite img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);flex:none;}
.pband--story .csquote cite b{color:#fff;}

/* ===== StepJockey refinements v2 ===== */
.pagehero.csh h1{color:#fff;}
/* punchy metric row (replaces stat + pills) */
.pband .csmetrics{display:flex;flex-wrap:wrap;gap:20px 34px;margin:10px 0 26px;}
.pband .csm b{display:block;font-family:var(--fh);font-size:27px;color:#fff;line-height:1;}
.pband .csm span{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#bfe0fb;margin-top:8px;font-weight:700;}
/* floating logo, no chip, bigger */
.pband--story .bandlogo{display:inline-block;background:none;box-shadow:none;padding:0;margin-bottom:22px;}
.pband--story .bandlogo img{max-height:66px;max-width:300px;filter:drop-shadow(0 3px 12px rgba(0,0,0,.55));}
/* reflection: labelled, magenta rule */
.pband--story .csreflect{margin-top:24px;padding:2px 0 2px 18px;border-left:3px solid var(--mag);max-width:600px;background:none;}
.pband--story .csreflect .csreflect-h{display:block;font-weight:700;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#ff86bd;margin-bottom:6px;}
.pband--story .csreflect p{font-style:italic;font-size:14.5px;line-height:1.6;color:#fff;margin:0;}
/* testimonial: distinct translucent card, non-italic, labelled */
.pband--story .csquote{margin-top:26px;padding:18px 20px;max-width:600px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;}
.pband--story .csquote .csquote-h{display:block;font-weight:700;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#bfe0fb;margin-bottom:10px;}
.pband--story .csquote p{font-style:normal;font-size:13.5px;line-height:1.6;color:#eaf3fb;margin:0 0 12px;}
.pband--story .csquote cite{display:flex;align-items:center;gap:10px;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.82);}
.pband--story .csquote cite img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);flex:none;}
.pband--story .csquote cite b{color:#fff;}

/* ===== StepJockey v3: dim scrim, left-align copy, one-line metrics, stylised testimonial ===== */
/* strong left scrim for the bright Scan & Track image */
.pband--story.pband--dim .pscrim{background:linear-gradient(90deg,rgba(9,17,30,.96) 0%,rgba(9,17,30,.94) 33%,rgba(9,17,30,.56) 49%,rgba(9,17,30,.14) 63%,rgba(9,17,30,0) 74%);}
/* left-align copy (justified was the monotonous bit) */
.pband .csp{text-align:left;-webkit-hyphens:none;hyphens:none;}
/* metrics on one line, smaller */
.pband .csmetrics{flex-wrap:nowrap;gap:24px;}
.pband .csm b{font-size:20px;}
.pband .csm span{font-size:9px;letter-spacing:.8px;white-space:nowrap;color:#bfe0fb;}
@media(max-width:640px){.pband .csmetrics{flex-wrap:wrap;gap:16px 22px;}.pband .csm b{font-size:19px;}}
/* testimonial: big stylised quote mark + coloured attribution */
.pband--story .csquote .csq-mark{display:block;font-family:Georgia,'Times New Roman',serif;font-size:56px;line-height:.2;height:26px;color:var(--accL);margin:4px 0 8px;}
.pband--story .csquote cite span{color:#9ec8ea;}
.pband--story .csquote cite span b{color:#8fc3ef;}

/* StepJockey copy 2: bigger section labels, allow 5 metrics to wrap */
.pband--story .csh4{font-size:15px;}
.pband .csmetrics{flex-wrap:wrap;gap:16px 28px;}

/* strong RIGHT dark column for the bright app image (copy-right) */
.pband--story.pband--dimr .pscrim{background:linear-gradient(270deg,rgba(9,17,30,.96) 0%,rgba(9,17,30,.95) 30%,rgba(9,17,30,.6) 47%,rgba(9,17,30,.16) 63%,rgba(9,17,30,0) 74%);}

/* crisper floating logo shadow (reduce ghosting) */
.pband--story .bandlogo img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}

/* ===== case band: image banner + copy-on-dark below (robust, no cover-zoom) ===== */
.pband--stack{padding:0 0 80px;min-height:0;}
.pband--stack .pbg{position:relative;height:clamp(300px,44vw,500px);}
.pband--stack .pbg img{object-fit:cover;}
.pband--stack .pscrim{display:none;}
.pband--stack .wrap{margin-top:0;display:block;}
.pband--stack .pcopy{max-width:960px;padding:46px 0 0;text-shadow:none;}
.pband--stack .csmetrics{gap:20px 40px;}

/* ===== StepJockey v4: midnight copy, clean logo, sky testimonial ===== */
.pband--stack{background:var(--mid);}
.pband--stack .pscrim{display:none;}
.pband--stack .pcopy::before{display:none;}
/* logo: no shadow (killed the ghost), not clipped */
.pband--story .bandlogo{overflow:visible;margin-bottom:22px;}
.pband--story .bandlogo img{filter:none;max-height:70px;}
/* reflection breathing room */
.pband--story .csreflect{margin-top:28px;}
/* testimonial: sky panel, big offset quote mark, contrasting caption */
.pband--story .csquote{background:var(--cc);border:none;border-radius:16px;padding:22px 28px 22px;margin-top:30px;max-width:640px;}
.pband--story .csquote .csquote-h{color:rgba(255,255,255,.9);}
.pband--story .csquote .csq-mark{display:block;font-family:Georgia,'Times New Roman',serif;font-size:88px;line-height:.55;height:46px;color:rgba(255,255,255,.55);margin:8px 0 6px;}
.pband--story .csquote p{color:#fff;font-size:14px;line-height:1.62;}
.pband--story .csquote cite span{color:#0e1b30;}
.pband--story .csquote cite span b{color:#0e1b30;}
.pband--story .csquote cite img{border:2px solid rgba(255,255,255,.9);}

/* stack: fade banner base into the midnight panel (no light stripe) */
.pband--stack .pbg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to bottom,rgba(25,48,101,0),var(--mid));pointer-events:none;z-index:1;}

/* ===== reflection + testimonial: side-by-side boxes (template) ===== */
.pband--story .csboxes{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap;align-items:stretch;max-width:960px;}
.pband--story .csboxes>div{flex:1 1 320px;border-radius:16px;padding:20px 26px 22px;max-width:none;margin:0;border:none;}
.pband--story .csboxes .csreflect-h,.pband--story .csboxes .csquote-h{color:rgba(255,255,255,.9);display:block;font-weight:700;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:0;}
.pband--story .csbigmark{display:block;font-family:Georgia,'Times New Roman',serif;line-height:.5;color:rgba(255,255,255,.5);margin:2px 0 8px;}
/* reflection = magenta, serif */
.pband--story .csboxes .csreflect{background:var(--mag);}
.pband--story .csboxes .csreflect .csbigmark{font-size:66px;height:34px;font-weight:700;}
.pband--story .csboxes .csreflect p{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:16.5px;line-height:1.55;color:#fff;margin:0;}
/* testimonial = sky, handwriting */
.pband--story .csboxes .csquote{background:var(--cc);}
.pband--story .csboxes .csquote .csbigmark{font-size:82px;height:44px;}
.pband--story .csboxes .csquote p{font-family:'Caveat',cursive;font-style:normal;font-size:21px;line-height:1.35;color:#fff;margin:0 0 12px;}
.pband--story .csboxes .csquote cite{margin-top:0;}
.pband--story .csboxes .csquote cite span{color:#0e1b30;font-family:var(--fb);}
.pband--story .csboxes .csquote cite span b{color:#0e1b30;}
.pband--story .csboxes .csquote cite img{border:2px solid rgba(255,255,255,.9);}
@media(max-width:760px){.pband--story .csboxes{flex-direction:column;}}

/* header: slightly larger ZED logo + tagline, with clearance so the banner grows only a touch */
.logo img{height:88px;}
.pagehero{padding-top:122px;}
.pagehero.csh{padding-top:120px;}
.hero{padding-top:118px;}

/* ===== StepJockey v5: two-column split (image left, copy right on midnight) ===== */
.pband--split{display:flex;align-items:stretch;padding:0;background:#0f1c30;overflow:hidden;min-height:0;}
.pband--split .splitimg{flex:0 0 44%;background-size:cover;background-position:center;min-height:560px;}
.pband--split .pcopy{flex:1;max-width:780px;padding:66px 60px 70px 54px;margin:0;text-shadow:none;}
.pband--split .pcopy::before{display:none;}
@media(max-width:900px){
  .pband--split{flex-direction:column;}
  .pband--split .splitimg{flex:none;height:320px;min-height:0;}
  .pband--split .pcopy{max-width:none;padding:44px 28px 54px;}
}
/* reflection + testimonial: full-width landscape boxes, stacked; oversized floated marks; stylised eyebrows; credible serif */
.pband--story .csreflect,.pband--story .csquote{display:block;border:none;border-radius:16px;padding:22px 28px 24px;max-width:none;margin:24px 0 0;overflow:hidden;}
.pband--story .csreflect{background:var(--mag);}
.pband--story .csquote{background:var(--cc);}
.pband--story .csbox-h{display:block;font-family:var(--fb);font-weight:700;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:#fff;padding-left:12px;border-left:3px solid rgba(255,255,255,.6);line-height:1.1;margin-bottom:14px;}
.pband--story .csbigmark{float:left;font-family:'Playfair Display',Georgia,serif;font-size:98px;line-height:.6;color:rgba(255,255,255,.5);margin:0 22px 0 0;}
.pband--story .csreflect p{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:17.5px;line-height:1.55;color:#fff;margin:0;}
.pband--story .csquote p{font-family:'Playfair Display',Georgia,serif;font-style:normal;font-size:15.5px;line-height:1.62;color:#fff;margin:0 0 14px;}
.pband--story .csquote cite{display:flex;align-items:center;gap:10px;font-size:12.5px;clear:both;font-family:var(--fb);}
.pband--story .csquote cite img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);}
.pband--story .csquote cite span{color:#0e1b30;} .pband--story .csquote cite span b{color:#0e1b30;font-weight:700;}
@media(max-width:600px){.pband--story .csbigmark{font-size:72px;}}

/* ===== footer coin: larger, near footer-logo size ===== */
.fcoin{width:104px;height:104px;}

/* ===== full-image band, copy on a tint panel (robust at all sizes) ===== */
.pband--tint{padding:0;background:#0f1c30;}
.pband--tint .pbg{position:absolute;inset:0;z-index:0;}
.pband--tint .pbg img{width:100%;height:100%;object-fit:cover;}
.pband--tint>.wrap{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:stretch;min-height:600px;padding-top:64px;padding-bottom:64px;}
.pband--tint .pcopy{background:rgba(11,20,36,.92);border-radius:16px;max-width:600px;padding:40px 44px 44px;margin:0;text-shadow:none;}
.pband--tint .pcopy::before{display:none;}
@media(max-width:900px){
  .pband--tint .pbg{position:relative;height:300px;}
  .pband--tint>.wrap{display:block;min-height:0;padding:0 28px 48px;}
  .pband--tint .pcopy{max-width:none;background:#0f1c30;border-radius:0;padding:40px 0 0;}
}

/* ===== reflection box: stylised eyebrow, oversized white ?, question separated from thought ===== */
.pband--story .csreflect{background:var(--mag);border-radius:16px;padding:24px 30px 26px;max-width:none;margin:26px 0 0;border:none;overflow:visible;display:block;}
.pband--story .csreflect .csbox-h{display:block;font-family:var(--fh);font-size:13.5px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:4px;padding-left:0;border:none;}
.pband--story .csreflect .csq-lead{display:flex;align-items:center;gap:18px;margin:8px 0 14px;}
.pband--story .csreflect .csbigmark{float:none;font-family:var(--fb);font-weight:700;font-size:80px;line-height:.78;color:#fff;flex:none;margin:0;}
.pband--story .csreflect .csq-q{font-family:'Lora',Georgia,serif;font-weight:600;font-size:21px;line-height:1.3;color:#fff;margin:0;}
.pband--story .csreflect .csq-t{font-family:'Lora',Georgia,serif;font-style:italic;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.94);margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.32);}
@media(max-width:600px){.pband--story .csreflect .csq-lead{gap:12px;}.pband--story .csreflect .csbigmark{font-size:58px;}.pband--story .csreflect .csq-q{font-size:18px;}}

/* ===== home-style testimonial panel, shared (static single on case pages) ===== */
.tproof{position:relative;background:var(--sky);color:#fff;padding:52px 0 46px;overflow:hidden;}
.tproof .tag{color:var(--mid);font-weight:700;}
.tproof .tstage{position:relative;}
.tproof .tslide{display:none;gap:28px;align-items:center;width:100%;}
.tproof .tslide.active{display:flex;}
.tproof .tav{width:112px;height:112px;border-radius:14px;flex:none;overflow:hidden;box-shadow:0 6px 18px rgba(10,25,50,.25);border:3px solid rgba(255,255,255,.6);background:#2f6ba3;}
.tproof .tav img{width:100%;height:100%;object-fit:cover;}
.tproof blockquote{position:relative;font-size:16px;font-style:italic;line-height:1.55;padding-top:14px;color:#fff;max-width:820px;}
.tproof blockquote::before{content:'\201C';position:absolute;left:-4px;top:-28px;font-family:Georgia,'Times New Roman',serif;font-size:76px;line-height:1;color:var(--mag);pointer-events:none;}
.tproof cite{display:block;font-style:normal;font-size:13px;color:var(--claret);margin-top:12px;font-weight:600;}
.tproof cite b{color:var(--mid);font-weight:700;}
.tproof .csnav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.4);}
.tproof .csnav a{color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.3px;}
.tproof .csnav a:hover{color:var(--mid);}
@media(max-width:640px){.tproof .tslide{flex-direction:column;text-align:center;gap:16px;}.tproof blockquote::before{display:none;}}

/* ===== LOCKED: pband--tint = image bleeds left, SOLID copy panel flush right ===== */
.pband--tint>.wrap{max-width:none;margin:0;padding:0;display:flex;justify-content:flex-end;min-height:0;}
.pband--tint .pbg img{object-position:18% center;}
.pband--tint .pcopy{background:#0f1c30;width:min(55%,820px);min-height:600px;border-radius:0;padding:62px 58px 66px;margin:0;}
@media(max-width:900px){
  .pband--tint>.wrap{display:block;}
  .pband--tint .pcopy{width:auto;min-height:0;padding:42px 28px 50px;}
}

/* ===== FINAL pband--tint: full image (phone left), copy on a feathered right tint (no panel, no seam) ===== */
.pband--tint>.wrap{max-width:1340px;margin:0 auto;padding:60px 28px;display:flex;justify-content:flex-end;align-items:center;min-height:600px;}
.pband--tint .pbg img{object-position:center;}
.pband--tint .pbg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,20,36,0) 45%,rgba(11,20,36,.55) 57%,rgba(11,20,36,.93) 68%,rgba(11,20,36,.95) 100%);pointer-events:none;}
.pband--tint .pcopy{background:none;width:auto;max-width:540px;min-height:0;padding:0;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.5);}
@media(max-width:900px){
  .pband--tint .pbg{position:relative;height:300px;}
  .pband--tint .pbg::after{background:linear-gradient(180deg,rgba(11,20,36,0) 45%,rgba(11,20,36,.9) 100%);}
  .pband--tint>.wrap{display:block;min-height:0;padding:0 28px 48px;}
  .pband--tint .pcopy{max-width:none;text-shadow:none;padding-top:38px;}
}

/* nudge image left (more phone at normal widths); tighten reflection box */
.pband--tint .pbg img{object-position:26% center;}
.pband--tint .pcopy{max-width:520px;}
.pband--story .csreflect{padding:20px 26px 22px;}
.pband--story .csreflect .csbigmark{font-size:62px;}
.pband--story .csreflect .csq-q{font-size:18px;line-height:1.28;}
.pband--story .csreflect .csq-t{font-size:14.5px;line-height:1.58;padding-top:12px;}

/* reflection box: use body font (colour differentiates it) — no third font family */
.pband--story .csreflect .csq-q{font-family:var(--fb);font-weight:700;}
.pband--story .csreflect .csq-t{font-family:var(--fb);font-style:normal;color:rgba(255,255,255,.95);}

/* band logo on a white chip (universal across case bands) */
.pband--story .bandlogo.chip{display:inline-block;background:rgba(255,255,255,.95);border-radius:12px;padding:10px 16px;box-shadow:0 8px 22px rgba(0,0,0,.28);margin-bottom:20px;}
.pband--story .bandlogo.chip img{max-height:46px;max-width:240px;filter:none;}
/* no-image case band: sector gradient behind the copy tint */
.pband--tint .pbg.grad{position:absolute;inset:0;z-index:0;}

/* Case band: copy on the LEFT (mirror), so the image hero can sit on the right */
.pband--tint.copyL>.wrap{justify-content:flex-start;}
.pband--tint.copyL .pbg::after{background:linear-gradient(90deg,rgba(11,20,36,.95) 0%,rgba(11,20,36,.93) 32%,rgba(11,20,36,.55) 43%,rgba(11,20,36,0) 55%);}

/* Footer coin: larger + always above the copyright line */
.fcoin{width:126px;height:126px;}
.fcopy{order:10;}

/* Cookie consent bar */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--mid);color:#dbe7f5;box-shadow:0 -6px 24px rgba(0,0,0,.28);}
.cookiebar-in{max-width:1100px;margin:0 auto;padding:14px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cookiebar p{margin:0;font-size:13.5px;line-height:1.5;flex:1;min-width:240px;}
.cookiebar a{color:#fff;text-decoration:underline;}
.cookiebtns{display:flex;gap:10px;flex:none;}
.cookiebar button{font-family:var(--fb);font-weight:600;font-size:13px;border:none;border-radius:22px;padding:9px 22px;cursor:pointer;}
.cookiebar .ck-dec{background:transparent;color:#dbe7f5;border:1px solid rgba(255,255,255,.4);}
.cookiebar .ck-acc{background:var(--mag);color:#fff;}

/* --- mobile polish batch (24 Aug) --- */
@media(max-width:640px){.heroov{background:linear-gradient(180deg,rgba(12,20,38,.60) 0%,rgba(12,20,38,.46) 42%,rgba(12,20,38,.72) 100%);}}
@media(max-width:1100px){.pband--story .pscrim{display:block!important;background:linear-gradient(180deg,rgba(9,17,30,0) 0%,rgba(9,17,30,.14) 55%,rgba(9,17,30,.58) 100%)!important;}}
@media(max-width:900px){.pagehero{padding-top:138px;}}

@media(max-width:1100px){.pband--tint.copyL .pbg::after{background:linear-gradient(180deg,rgba(11,20,36,0) 45%,rgba(11,20,36,.9) 100%)!important;}}