/* About + Services pages. Builds on showcase.css (closing CTA, header fixes). */
.pg-eyebrow{font:700 12px/1.6 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 20px;display:inline-block;background:rgba(0,40,59,.55);padding:9px 16px;border-radius:999px}
.pg-eyebrow.dark{background:#00283b}
/* hero */
.pg-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3%;align-items:center;padding:60px 6% 110px;min-height:700px;overflow:hidden}
.pg-hero h1,.pg-hero .hero-slogan{font-size:clamp(60px,6.8vw,114px);line-height:.93;color:#fff;letter-spacing:-.03em;animation:cdmrise .9s cubic-bezier(.2,.8,.2,1) .1s both}
.pg-hero h1 i,.pg-hero .hero-slogan i{color:var(--orange)}
.pg-hero-text{color:#fff;font-size:20px;max-width:540px;margin:28px 0 36px;animation:cdmrise .9s .45s cubic-bezier(.2,.8,.2,1) both}
.pg-hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;animation:cdmrise .9s .65s cubic-bezier(.2,.8,.2,1) both}
.pg-hero-actions .btn-big{border-radius:999px;background:var(--orange);color:var(--ink)}
.pg-ghost{color:#fff;font-weight:800;border-bottom:2px solid var(--orange);padding-bottom:4px}
.pg-hero-art{position:relative;height:600px}
.pg-disc{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:min(540px,42vw);height:min(540px,42vw);border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffb04d,var(--orange) 50%,#f27a00);animation:cdmfloat 9s ease-in-out infinite}
.pg-disc:after{content:"";position:absolute;inset:-9%;border-radius:50%;border:3px dashed rgba(255,255,255,.5);animation:pgspin 70s linear infinite}
@keyframes pgspin{to{rotate:360deg}}
.about .pg-disc{background:radial-gradient(circle at 30% 25%,#1aa9e3,#0288c4 55%,#00648d);box-shadow:0 0 0 14px var(--orange),0 0 0 30px rgba(255,255,255,.18),0 40px 80px rgba(0,60,95,.4)}
.pg-logo{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:min(400px,31vw);aspect-ratio:520/480;height:fit-content;animation:cdmfloat 7s ease-in-out infinite reverse}
.pg-logo .kinetic-logo{width:100%;max-width:none;transform:none!important}
.pg-orbit .pg-pill{position:absolute;background:#fff;color:#00283b;font:700 18px/1 Georgia,serif;font-style:italic;padding:15px 24px;border-radius:999px;box-shadow:0 18px 36px rgba(0,40,59,.35);white-space:nowrap;animation:pgpop .8s cubic-bezier(.3,1.6,.5,1) both,cdmfloat 6s ease-in-out infinite;transition:background .2s,color .2s}
.pg-orbit .pg-pill:hover{background:#00283b;color:#fff}
.p1{left:6%;top:8%;rotate:-6deg;animation-delay:.5s,0s}.p2{right:4%;top:14%;rotate:5deg;animation-delay:.65s,-1s}.p3{left:0;top:38%;rotate:4deg;animation-delay:.8s,-2s}
.p4{right:0;top:48%;rotate:-5deg;animation-delay:.95s,-3s}.p5{left:8%;bottom:14%;rotate:-4deg;animation-delay:1.1s,-4s}.p6{right:8%;bottom:6%;rotate:6deg;animation-delay:1.25s,-5s}
@keyframes pgpop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
/* services rows */
.pg-svc{position:relative;padding:130px 6% 140px;overflow:hidden}
.pg-svc:before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:120px;background:var(--prev,#0399d4);border-radius:0 0 50% 50%/0 0 100% 100%}
.pg-svc-inner{position:relative;max-width:1260px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.pg-svc.v1 .pg-svc-inner{direction:rtl}.pg-svc.v1 .pg-svc-inner>*{direction:ltr}
.pg-big{position:absolute;left:-10px;top:-100px;font:700 clamp(160px,19vw,300px)/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.3);pointer-events:none;user-select:none}
.pg-svc-head{position:relative;padding-top:40px}
.pg-tag{font:700 12px/1.6 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.pg-svc h2{font-size:clamp(58px,7vw,116px);line-height:.94;letter-spacing:-.03em;margin:0}
.pg-svc h2 i{font-style:normal}
.pg-svc-card{border-radius:34px;padding:46px 44px;box-shadow:0 34px 70px rgba(0,40,59,.3)}
.pg-lead{font-size:20px;margin:0 0 26px}
.pg-pts{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.pg-pts li{position:relative;padding:14px 16px 14px 56px;border-radius:14px;transition:translate .25s}
.pg-pts li:before{content:"\2713";position:absolute;left:14px;top:50%;translate:0 -50%;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:900}
.pg-pts li:hover{translate:8px 0}
.pg-btn{display:inline-flex;align-items:center;gap:16px;font-weight:800;font-size:17px;padding:19px 32px;border-radius:999px;box-shadow:0 14px 30px rgba(0,40,59,.3);transition:translate .2s,box-shadow .2s,background .2s}
.pg-btn:hover{translate:0 -4px;box-shadow:0 22px 40px rgba(0,40,59,.4)}
/* three colourways */
.pg-svc.v0{background:linear-gradient(135deg,#0399d4,#0288c4 55%,#006a99);--prev:#0399d4}
.pg-svc.v0 .pg-tag{color:var(--orange)}.pg-svc.v0 h2{color:#fff}.pg-svc.v0 h2 i{color:var(--orange)}.pg-svc.v0 h2 .heading-dot{color:var(--orange)}
.pg-svc.v0 .pg-svc-card{background:#fff;color:#35505e}.pg-svc.v0 .pg-lead{color:#00283b}.pg-svc.v0 .pg-pts li{background:#eaf8fd;color:#00283b}.pg-svc.v0 .pg-pts li:before{background:var(--orange);color:#00283b}
.pg-svc.v0 .pg-btn{background:var(--orange);color:#00283b}
.pg-svc.v1{background:#fff;--prev:#0288c4}
.pg-svc.v1 .pg-big{-webkit-text-stroke:2px rgba(3,153,212,.28)}
.pg-svc.v1 .pg-tag{color:#a74700}.pg-svc.v1 h2{color:var(--blue)}.pg-svc.v1 h2 i{color:var(--orange)}.pg-svc.v1 h2 .heading-dot{color:var(--orange)}
.pg-svc.v1 .pg-svc-card{background:linear-gradient(135deg,#0399d4,#006a99);color:#fff}.pg-svc.v1 .pg-lead{color:#fff}.pg-svc.v1 .pg-pts li{background:rgba(255,255,255,.16);color:#fff}.pg-svc.v1 .pg-pts li:before{background:var(--orange);color:#00283b}
.pg-svc.v1 .pg-btn{background:var(--orange);color:#00283b}
.pg-svc.v2{background:linear-gradient(135deg,var(--orange),#f27a00);--prev:#fff}
.pg-svc.v2 .pg-tag{color:#00283b}.pg-svc.v2 h2{color:#fff}.pg-svc.v2 h2 i{color:transparent;-webkit-text-stroke:2.5px #fff}.pg-svc.v2 h2 .heading-dot{color:#fff}
.pg-svc.v2 .pg-svc-card{background:#fff;color:#35505e}.pg-svc.v2 .pg-lead{color:#00283b}.pg-svc.v2 .pg-pts li{background:#fff4e6;color:#00283b}.pg-svc.v2 .pg-pts li:before{background:#00283b;color:#fff}
.pg-svc.v2 .pg-btn{background:#00283b;color:#fff}
.pg-svc.v2 .pg-big{-webkit-text-stroke:2px rgba(255,255,255,.4)}
/* about: story */
.pg-story{position:relative;background:#fff;padding:130px 6% 120px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.pg-story:before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:120px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.pg-story h2{font-size:clamp(54px,6.2vw,104px);line-height:.96;color:var(--blue);letter-spacing:-.03em}
.pg-story h2 i{color:var(--orange)}.pg-story h2 .heading-dot{color:var(--orange)}
.pg-story-text p{font-size:19px;color:#35505e;max-width:560px}
.pg-pull{font:700 clamp(28px,2.8vw,40px)/1.15 'Brand Condensed','Arial Narrow',Arial,sans-serif!important;color:#00283b!important;letter-spacing:-.01em;border-left:8px solid var(--orange);padding-left:24px;margin:0 0 28px!important}
/* about: connect */
.pg-connect{position:relative;background:linear-gradient(135deg,#0399d4,#0288c4 55%,#006a99);padding:120px 6% 130px;text-align:center;overflow:hidden}
.pg-connect h2{font-size:clamp(52px,6.4vw,104px);color:#fff;line-height:.96;letter-spacing:-.03em;margin-bottom:56px}
.pg-connect h2 i{color:var(--orange)}.pg-connect h2 .heading-dot{color:var(--orange)}
.pg-chain{position:relative;display:flex;justify-content:center;gap:0;max-width:1100px;margin:auto}
.pg-chain:before{content:"";position:absolute;left:12%;right:12%;top:90px;border-top:4px dashed rgba(255,255,255,.55)}
.pg-chain a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;transition:translate .3s}
.pg-chain a:hover{translate:0 -10px}
.pg-chain b{display:grid;place-items:center;width:180px;height:180px;border-radius:50%;background:#fff;color:var(--blue);font:700 34px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;box-shadow:0 22px 44px rgba(0,40,59,.3);transition:background .3s,color .3s}
.pg-chain a:nth-child(even) b{background:var(--orange);color:#fff}
.pg-chain a:hover b{background:#00283b;color:#fff}
.pg-chain span{font-weight:700;font-size:16px;max-width:170px}
/* about: principles */
.pg-principles{background:linear-gradient(135deg,var(--orange),#f27a00);padding:120px 6% 130px}
.pg-three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.pg-three article{background:rgba(255,255,255,.18);border-radius:26px;padding:38px 32px;transition:translate .3s,background .3s}
.pg-three article:hover{translate:0 -10px;background:rgba(255,255,255,.3)}
.pg-three span{font:700 64px/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:#fff;opacity:.6}
.pg-three h3{font-size:clamp(38px,3.6vw,56px);color:#fff;margin:12px 0 10px}
.pg-three h3 i{color:transparent;-webkit-text-stroke:2px #fff;font-style:normal}.pg-three h3 .heading-dot{color:#fff}
.pg-three p{color:#fff;font-size:18px;font-weight:500;margin:0}
/* about: work */
.pg-work{position:relative;background:#fff;padding:130px 6%;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;overflow:hidden}
.pg-work h2{font-size:clamp(52px,6vw,98px);line-height:.96;color:var(--blue);letter-spacing:-.03em}
.pg-work h2 i{color:var(--orange)}.pg-work h2 .heading-dot{color:var(--orange)}
.pg-work p:not(.pg-eyebrow){font-size:19px;color:#35505e;max-width:460px;margin:20px 0 30px}
.pg-work .pg-btn{background:var(--orange);color:#00283b}
.pg-stack{position:relative;height:460px}
.pg-shot{position:absolute;width:74%;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,40,59,.35);background:#fff;border:1px solid rgba(0,0,0,.08);transition:translate .4s,rotate .4s}
.pg-shot img{display:block;width:100%;height:auto}
.pg-shot.s1{left:0;top:0;rotate:-5deg}.pg-shot.s2{right:0;top:20%;rotate:4deg}.pg-shot.s3{left:12%;bottom:0;rotate:-2deg}
.pg-stack:hover .s1{translate:-14px -14px}.pg-stack:hover .s2{translate:14px 0}.pg-stack:hover .s3{translate:0 14px}
/* reveals */
.js-pg [data-pg]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-pg [data-pg=left]{transform:translateX(-80px)}.js-pg [data-pg=right]{transform:translateX(80px)}.js-pg [data-pg=up]{transform:translateY(46px)}
.js-pg [data-pg].in{opacity:1;transform:none}
.pg-svc,.pg-story,.pg-connect,.pg-principles,.pg-work{overflow-x:clip}
@media(max-width:1000px){
 .pg-hero{grid-template-columns:1fr;min-height:0;padding:40px 6% 70px}
 .pg-hero-art{height:440px;margin-top:20px}
 .pg-disc{width:min(380px,76vw);height:min(380px,76vw)}.pg-logo{width:min(280px,58vw)}
 .pg-svc{padding:90px 6% 100px}.pg-svc-inner,.pg-svc.v1 .pg-svc-inner{grid-template-columns:1fr;direction:ltr;gap:36px}
 .pg-svc-card{padding:34px 24px;border-radius:26px}
 .pg-story,.pg-work{grid-template-columns:1fr;gap:40px;padding:90px 6%}
 .pg-three{grid-template-columns:1fr}.pg-chain{flex-wrap:wrap;gap:28px 0}.pg-chain a{flex:1 1 50%}.pg-chain:before{display:none}.pg-chain b{width:140px;height:140px;font-size:28px}
 .pg-stack{height:380px}
}
@media(max-width:600px){.pg-hero h1,.pg-hero .hero-slogan{font-size:15vw}.pg-svc h2{font-size:17vw}.pg-orbit .pg-pill{font-size:14px;padding:11px 16px}.pg-hero-actions .btn-big,.pg-btn{width:100%;justify-content:center}.pg-big{font-size:140px;top:-70px}}
@media(prefers-reduced-motion:reduce){.pg-disc,.pg-disc:after,.pg-logo,.pg-pill{animation:none}.pg-pill{opacity:1;scale:1}.js-pg [data-pg]{opacity:1;transform:none}}
.pg-svc-head{padding-top:110px}
.pg-big{top:-40px;font-size:clamp(150px,17vw,260px)}
.pg-tag{position:relative;z-index:1}
@media(max-width:600px){.pg-svc-head{padding-top:70px}.pg-big{top:-30px}}
.pg-svc-head{padding-top:0}
.pg-big{position:static;display:block;font-size:clamp(110px,12vw,190px);line-height:.85;margin:0 0 6px;-webkit-text-stroke-width:2px}
@media(max-width:600px){.pg-big{font-size:110px;top:auto}}
/* services hero: fill the orange disc */
.pg-six{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:fit-content;height:fit-content;text-align:center;z-index:1;animation:cdmfloat 7s ease-in-out infinite reverse;pointer-events:none}
.pg-six b{display:block;font:700 clamp(200px,20vw,330px)/.82 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:#fff;text-shadow:0 8px 0 rgba(0,40,59,.25)}
.pg-six span{display:block;margin-top:14px;font:700 clamp(30px,3.1vw,48px)/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.02em;color:#00283b;text-transform:uppercase}
.pg-orbit{z-index:2}
@media(max-width:1000px){.pg-six b{font-size:min(54vw,230px)}.pg-six span{font-size:26px}}
@media(prefers-reduced-motion:reduce){.pg-six{animation:none}}
.p5{left:-2%;bottom:6%}
.pg-six span{margin-top:6px}

/* round 4: 7th pill on /services */
.p7{right:-2%;top:31%;rotate:-4deg;animation-delay:1.4s,-6s}

/* round 9: Hareshill proof section on /about (blue variant of .pg-story) */
.pg-proof{background:var(--blue)}
.pg-proof:before{background:var(--blue)}
.pg-proof h2{color:#fff}
.pg-proof .pg-story-text p{color:#fff}
.pg-proof .pg-pull{color:#fff!important}
.pg-proof .text-link{color:#fff;font-weight:800;text-decoration-color:var(--orange);text-underline-offset:6px}
.pg-stats{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pg-stats li{background:#fff;border-radius:20px;padding:20px 18px;box-shadow:0 14px 30px rgba(0,40,59,.2)}
.pg-stats b{display:block;font:700 clamp(38px,3.6vw,54px)/1 'Brand Condensed','Arial Narrow',Arial,sans-serif;color:var(--orange)}
.pg-stats span{display:block;margin-top:8px;font:700 14px/1.35 Arial,Helvetica,sans-serif;color:var(--ink)}
.pg-stats-note{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
@media(max-width:600px){.pg-stats{grid-template-columns:1fr}.pg-stats li{display:flex;align-items:center;gap:14px}.pg-stats b{white-space:nowrap;min-width:118px}.pg-stats span{margin:0}}

/* round 13: /about "Our approach" write-up in two columns under the heading and quote; one column on phones */
.pg-story-split{row-gap:40px}
.pg-story-cols{grid-column:1/-1;column-count:2;column-gap:70px}
.pg-story-cols p{font-size:18px;color:#35505e;break-inside:avoid}
@media(max-width:1000px){.pg-story-cols{column-count:1}.pg-story-cols p{font-size:19px;max-width:560px}}