/* path page hero: full photo like the home page, text on the dark side */
.hero--path{min-height:min(calc(100svh - 64px),720px)}
.hero--path .bg{object-position:70% 40%}
.crumb{display:flex;gap:12px;align-items:center;font-size:15px;color:rgba(255,255,255,.8);margin-bottom:22px}
.hero--path h1{font-size:clamp(32px,1.1rem + 2.2vw,52px);max-width:19ch;line-height:1.1}

/* services: the problems as a list, one sticky panel shows the picked service */
.svc-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);margin-top:56px;align-items:start}
.sg{margin-bottom:36px}
.sg h3{display:flex;gap:12px;align-items:baseline;font:700 12px/1.3 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);padding-bottom:12px;border-bottom:1px solid var(--line)}
.sg h3 span{font:400 14px/1 var(--ff);letter-spacing:0;text-transform:none;color:var(--muted)}
.plist{list-style:none}
.plist button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:16px 40px 16px 22px;border-bottom:1px solid var(--line);font:400 clamp(17px,1.3vw,20px)/1.4 var(--ff);color:var(--muted);position:relative;transition:color .2s ease}
.plist button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--petrol);transform:scaleY(0);transition:transform .25s ease}
.plist button::after{content:"";position:absolute;right:10px;top:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:0;transition:opacity .2s ease}
.plist button:hover,.plist button[aria-selected=true]{color:var(--ink)}
.plist button[aria-selected=true]::before{transform:scaleY(1)}
.plist button[aria-selected=true]::after{opacity:.6}
.spanel{position:sticky;top:96px;display:grid}
.spanel .sp{grid-area:1/1}
.sp{background:var(--frame);color:#fff;border-radius:24px;padding:36px 34px 30px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.js .spanel .sp{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.js .spanel .sp.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sp .grp{font:700 11px/1.3 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:#9fd0e2}
.sp h4{font-size:clamp(26px,2.2vw,34px);font-weight:400;line-height:1.15;letter-spacing:-.015em}
.sp .ar{font-size:16px;color:rgba(255,255,255,.75);margin-top:-6px}
.sp q{quotes:none;font-size:17px;line-height:1.5;color:rgba(255,255,255,.88);padding-left:16px;border-left:2px solid rgba(255,255,255,.25)}
.sp .cov{margin-top:6px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.sp .cov p{font:700 11px/1.3 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.sp .cov ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.sp .cov li{position:relative;padding-left:16px;font-size:15px;line-height:1.4}
.sp .cov li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#9fd0e2}
.sp .acts{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sp .arrow{color:#fff}
.sp .btn{background:#fff;color:var(--ink);padding:12px 20px;font-size:15px}
.sp-in{display:none}
@media (max-width:900px){
  .svc-wrap{grid-template-columns:1fr}.spanel{display:none}
  .plist li:has(button[aria-selected=true]) .sp-in{display:block;margin:4px 0 18px}
  .sp-in .sp{position:relative}
  .sp .cov ul{grid-template-columns:1fr}
}

/* ACCF: the product, one dark panel inside a light section */
.accf{background:var(--frame);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px);position:relative;overflow:hidden}
.accf .crumb{margin-bottom:18px}
.accf h2{font-size:clamp(28px,1.2rem + 1.8vw,44px);max-width:22ch}
.sym{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.sym div{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.sym b{display:block;font-weight:500;font-size:19px}
.sym p{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.78)}
.track{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.track li{counter-increment:st;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px;line-height:1.3}
.track li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--stamp);background:rgba(255,255,255,.12)}
.keep{margin-top:36px;display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.08);max-width:640px}
.keep svg{flex:none;color:#9fd0e2}
.keep p{font-size:16px;line-height:1.5}
.accf .acts{margin-top:36px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.accf .arrow{color:#fff}
@media (max-width:900px){.sym{grid-template-columns:1fr;gap:20px}.track{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.track{grid-template-columns:1fr}}

/* cases: three paper cards */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;align-items:stretch}
.case q{font-size:clamp(20px,1.5vw,23px)}
.case{min-height:0}
.more{margin-top:40px}
@media (max-width:900px){.cases{grid-template-columns:1fr;max-width:440px}}

/* how we work: one line */
.howline{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:28px 32px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.howline p{font-size:var(--fs-lg);font-weight:300;line-height:1.4}

/* close for individuals: no initiation session; the card lists the programmes */
.pgo{background:var(--frame);color:#fff;border-radius:24px;padding:32px 32px 20px}
.pgo-h{font:700 11px/1.3 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:#9fd0e2;margin-bottom:8px}
.pgo ul{list-style:none}
.pgo li+li{border-top:1px solid rgba(255,255,255,.12)}
.pgo a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;text-decoration:none;font-size:18px;font-weight:500;color:#fff}
.pgo a span{display:block;font-size:14px;font-weight:400;color:rgba(255,255,255,.7);margin-top:2px}
.pgo a i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-style:normal;transition:background-color .2s ease,transform .2s ease}
.pgo a:hover i{background:#fff;color:var(--ink);transform:translateX(3px)}

/* show the work: real screenshots of documents, canvases and tools */
.shots-wrap{position:relative;margin-top:48px}
.shots{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:8px var(--pad) 28px;margin-inline:calc(var(--pad) * -1);scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:0 0 clamp(260px,30vw,400px);scroll-snap-align:start;margin:0}
.shot .fr{display:block;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 0 0 1px var(--line),0 18px 36px rgba(6,46,55,.12);transition:transform .25s ease}
.shot:hover .fr{transform:translateY(-4px)}
.shot img{width:100%;height:auto}
.shot figcaption{margin-top:14px}
.shot small{display:block;font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.shot strong{display:block;margin-top:6px;font-weight:500;font-size:17px;line-height:1.35}
.shots-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.shots-nav button{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background-color .2s ease}
.shots-nav button:hover{background:var(--tint)}
.shots-nav button:first-child svg{transform:scaleX(-1)}
.tint .shots-nav button{background:var(--white)}
.note{margin-top:8px;font-size:14px;color:var(--muted)}

/* a brighter hero image: a deeper scrim where the text sits */
.hero--bright::before{background:linear-gradient(90deg,rgba(3,15,20,.94) 0%,rgba(3,15,20,.86) 40%,rgba(3,15,20,0) 72%)}

/* what you receive: one results chain per component (problem, able to, you get) */
.chains{display:grid;gap:24px;margin-top:56px}
.chain{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr);gap:clamp(24px,4vw,56px);padding:32px;border-radius:24px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.chain h3{font-size:clamp(22px,1.7vw,28px);line-height:1.2}
.chain .ar{margin-top:6px;color:var(--muted);font-size:16px}
.links{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.links li{position:relative;padding:20px 20px 22px;border-radius:16px;background:var(--tint)}
.links li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-14px;width:14px;height:2px;background:var(--petrol);opacity:.35}
.links li:last-child{background:var(--frame);color:#fff}
.links b{display:block;font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-bottom:10px}
.links li:last-child b{color:#9fd0e2}
.links p{font-size:16px;line-height:1.5}
@media (max-width:1000px){.chain{grid-template-columns:1fr}}
@media (max-width:700px){
  .chain{padding:24px 20px}
  .links{grid-template-columns:1fr;gap:12px}
  .links li:not(:last-child)::after{top:auto;bottom:-12px;right:auto;left:28px;width:2px;height:12px}
}

/* a portrait photo: it takes the right half, the text keeps the dark side */
@media (min-width:901px){
  .hero--portrait .bg{left:auto;right:0;width:48%;object-position:50% 25%}
  .hero--portrait::before{background:linear-gradient(90deg,var(--night) 0%,var(--night) 52%,rgba(3,15,20,.55) 56%,rgba(3,15,20,0) 66%)}
}
.hero--portrait .bg{object-position:50% 22%}
@media (max-width:900px){.hero--portrait::after{inset:170px 0 0 0}}

/* Insights card row: Insights, case and article pages */
.irow{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:28px var(--pad) 28px;margin-inline:calc(var(--pad) * -1);scrollbar-width:none}
.irow::-webkit-scrollbar{display:none}
.icard{flex:0 0 clamp(240px,24vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1px var(--line),0 10px 24px rgba(6,46,55,.06);text-decoration:none;transition:transform .2s ease}
.icard:hover{transform:translateY(-3px)}
.icard .im{aspect-ratio:1;overflow:hidden;background:var(--tint);display:grid;place-items:center}
.icard .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.icard .im.case{background:var(--frame);color:#fff;padding:24px;text-align:left;align-items:end;justify-items:start}
.icard .im.case q{quotes:none;font-size:20px;line-height:1.3}
.icard .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.icard .k{font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.icard strong{font-weight:500;font-size:17px;line-height:1.3}
.icard .c{margin-top:auto;padding-top:6px;color:var(--muted);font-size:14px}

/* reading column with contents: case, article and privacy pages */
.col{max-width:calc(720px + var(--pad) * 2);margin:0 auto;padding-inline:var(--pad)}
.wide{max-width:calc(1040px + var(--pad) * 2);margin:0 auto;padding-inline:var(--pad)}
.toc{position:sticky;top:96px;align-self:start;font-size:14px}
.toc small{display:block;font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:10px;border-left:1px solid var(--line);padding-left:16px}
.toc a{color:var(--muted);text-decoration:none;line-height:1.35;display:block}
.toc a:hover{color:var(--ink)}
@media (max-width:1000px){.toc{display:none}}

/* featured alumni, Professionals and Professionals Network (CMS: featured tick on the alumni collection) */
.alumni{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:48px}
.alum{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.alum .ph{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tint);margin-bottom:10px}
.alum img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .5s ease}
.alum:hover img{transform:scale(1.04)}
.alum strong{font-weight:500;font-size:17px}
.alum span{font-size:14px;color:var(--muted);line-height:1.4}
.alum-more{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 28px;border-radius:20px;background:var(--tint)}
.alum-more p{font-size:var(--fs-lg);font-weight:300;line-height:1.4;max-width:46ch}
@media (max-width:1000px){.alumni{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.alumni{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}