/* Self-hosted fallback webfont. No request leaves this site.

   Body text and headings are set in Aptos where the visitor's device already
   has it installed. Microsoft 365 and Windows 11 ship it, so most readers
   will see the real thing. Aptos itself is NOT redistributed: Microsoft's
   licence does not clearly permit hosting the font files on a web server,
   so no Aptos file is included in this site.

   Inter is the fallback for everyone else. It is the closest open-licensed
   match to Aptos, sharing the same screen-first neo-grotesque construction,
   large x-height and open apertures, and it is licensed under the SIL Open Font
   Licence 1.1 (see OFL.txt in the fonts folder). Free for commercial use,
   no fee, no subscription, no attribution required in the page itself.

   Inter is a variable font: one file per character range covers every
   weight, which is why there are four files rather than eight. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bricolage Grotesque, the display face for headlines (SIL Open Font Licence 1.1,
   see OFL-bricolage.txt). Self-hosted like Inter, so no request leaves the site. */
@font-face{
  font-family:'Bricolage';
  font-style:normal;
  font-weight:200 800;
  font-stretch:75% 100%;
  font-display:swap;
  src:url(../fonts/v2-13b4ef8760.woff2) format('woff2');
}

:root{
  --navy:#2E4155; --navy-lite:#3C4F61; --ink:#18212B; --body:#4E5A67;
  --sand:#2F74B5; --sand-lite:#9FD0F5; --paper:#F3F7FB; --rule:#DFE6EE;
  --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);
 font-family:Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;
 display:flex;align-items:center;gap:34px;padding:20px 54px;flex-wrap:wrap;
 box-shadow:0 1px 0 rgba(255,255,255,.09)}
.brand{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:27px;margin-right:auto;
 letter-spacing:.005em;cursor:pointer;white-space:nowrap}
.nav a{color:#fff;text-decoration:none;font-size:15.5px;opacity:.88;padding-bottom:5px;
 border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:.15s}
.nav a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.4)}
.nav a.on{opacity:1;border-bottom-color:var(--sand-lite)}

/* ---------- SHARED ---------- */
section{padding:96px 54px}
section.tight{padding:70px 54px}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:var(--measure)}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
 color:var(--sand);margin:0 0 18px}
h1{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(38px,5vw,62px);
 line-height:1.08;margin:0 0 22px;color:#fff;letter-spacing:-.01em}
h2{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(30px,3.4vw,42px);
 line-height:1.16;margin:0 0 26px;color:var(--ink);letter-spacing:-.005em}
h3{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:500;font-size:23px;
 line-height:1.25;margin:0 0 12px;color:var(--navy)}
p{margin:0 0 22px}
.lead{font-size:22px;line-height:1.55;color:var(--ink)}
strong{color:var(--ink);font-weight:700}
.rule{height:1px;background:var(--rule);margin:0}
a.link{color:var(--navy);font-weight:700;text-decoration:none;
 border-bottom:2px solid var(--sand-lite);padding-bottom:2px}
a.link:hover{border-bottom-color:var(--sand)}

/* A quiet centred signpost at the foot of a section: no bold, no rule, no arrow. */
.midlink{text-align:center;margin:52px 0 0;font-size:17px;color:var(--body)}
.midlink a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.midlink a:hover{color:var(--navy);border-bottom-color:var(--rule)}

/* ---------- HERO ---------- */
/* One height for every banner on the site. Each page used to set its own,
   so the paintings opened at a different depth page to page. */
.hero{position:relative;min-height:500px;display:flex;align-items:flex-end;
 padding:54px;color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(20,28,38,.86) 0%,rgba(20,28,38,.62) 46%,rgba(20,28,38,.18) 100%)}
.hero .in{position:relative;z-index:2;max-width:760px}
.hero p{color:rgba(255,255,255,.9);font-size:20px;margin:0}
.hero .eyebrow{color:var(--sand-lite)}
.plate{position:absolute;right:0;bottom:0;z-index:3;font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(18,26,36,.55);
 padding:8px 18px}
.claim{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:clamp(26px,3vw,38px);
 color:#fff;margin:26px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);
 display:inline-block}

/* ---------- FIGURE PULLS ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
 background:var(--rule);border:1px solid var(--rule)}
.fig{background:#fff;padding:32px 26px}
.fig b{display:block;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;
 font-size:44px;line-height:1;color:var(--navy);margin:0 0 10px}
.fig span{display:block;font-size:15px;line-height:1.45}
.fig em{display:block;font-size:12.5px;color:#8A929B;font-style:normal;margin-top:8px}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center}
.split.rev{grid-template-columns:1fr 1.25fr}
.split.rev>.art{order:-1}
.split .tx{max-width:var(--measure)}
figure{margin:0;position:relative}
figure img{width:100%;display:block}
figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#98A0A9;
 margin-top:12px}

/* ---------- BAND ---------- */
.bandart{position:relative;height:280px;overflow:hidden}
.bandart img{width:100%;height:100%;object-fit:cover;display:block}
.bandart .plate{color:rgba(255,255,255,.72)}

/* ---------- CARDS ---------- */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.cards.c2,.cards.c3{grid-template-columns:1fr}}
/* numbered stage list */
.stages{counter-reset:s;border-top:1px solid var(--rule)}
.stg{counter-increment:s;display:grid;grid-template-columns:96px 1fr;gap:30px;
 padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.stg::before{content:"0" counter(s);font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:34px;color:var(--sand);line-height:1}
.stg h3{margin:0 0 6px;font-size:21px}
.stg p{margin:0;font-size:16.5px}
/* value chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 32px}
.chips span{border:1px solid var(--rule);background:#fff;padding:11px 17px;font-size:15.5px;
 font-weight:700;color:var(--ink)}
@media(max-width:700px){.stg{grid-template-columns:1fr;gap:6px}}
.card{background:#fff;padding:38px 34px}
.card .n{font-size:12px;letter-spacing:.18em;color:var(--sand);font-weight:700;display:block;margin-bottom:14px}
.card p{margin:0;font-size:16.5px;line-height:1.6}

/* ---------- EXPERTS ---------- */
/* four across, so the four new photographs sit together on one row */
/* Identical grid to the consultants on Who We Are, so a photograph is the
   same size on both pages at every width. Keep these two rules in step. */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 38px;align-items:stretch}
@media(max-width:940px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.people{grid-template-columns:1fr;gap:38px}}
.person img.ph{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
 display:block;margin-bottom:20px;filter:grayscale(1)}
.person .ph{aspect-ratio:1/1;background:linear-gradient(150deg,#DFDAD2,#C4BDB2);
 display:grid;place-items:center;color:#fff;font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;margin-bottom:20px}
.person .spec{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
 font-weight:700;display:block;margin-bottom:8px}
.person h3{font-size:21px;margin-bottom:14px}
.person blockquote{margin:0;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-style:italic;
 font-size:17.5px;line-height:1.52;color:var(--body);border-left:2px solid var(--sand-lite);
 padding-left:18px}

/* ---------- RESEARCH ---------- */
.papers{border-top:1px solid var(--rule)}
.paper{display:grid;grid-template-columns:132px 1fr 148px;gap:28px;align-items:baseline;
 padding:26px 0;border-bottom:1px solid var(--rule)}
.paper .date{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#98A0A9;line-height:1.5}
.paper h3{font-size:20px;margin:0 0 7px}
.paper .sum{font-size:16px;margin:0}
.paper .dl{text-align:right}
.paper .dl a{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
 color:var(--navy);text-decoration:none;border-bottom:2px solid var(--sand-lite);padding-bottom:2px;white-space:nowrap}
.tagrow{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 46px}
.tag{font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
 border:1px solid var(--rule);padding:8px 15px;color:var(--body);background:#fff;
 cursor:pointer;transition:border-color .15s ease,color .15s ease}
.tag:hover{border-color:var(--navy);color:var(--ink)}
.tag:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
.paper[hidden]{display:none}
.tag.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- VIDEO ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:44px 38px}
.vid figure{position:relative;margin-bottom:20px}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play i{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.9);
 display:grid;place-items:center;font-style:normal;color:var(--navy);font-size:19px;padding-left:4px}
.vid .meta{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#98A0A9;margin-bottom:9px}
.vid h3{font-size:20px;margin-bottom:9px}
.vid p{font-size:16px;margin:0}

/* ---------- DIAGRAM ---------- */
.eco{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:22px;align-items:center;margin:0 0 20px}
.node{border:1px solid var(--rule);padding:22px 20px;text-align:center;background:#fff}
.node b{display:block;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:19px;color:var(--navy)}
.core{background:var(--navy);color:#fff;padding:24px;text-align:center}
.core .p{background:rgba(255,255,255,.13);padding:16px;margin:9px 0;font-size:16px}
.core .p.mid{background:var(--sand);color:#22303E;font-weight:700}
.stack{display:grid;gap:22px}

.ecofig{margin:0 0 54px}
.ecofig svg{width:100%;max-width:1000px;height:auto;display:block;margin:0 auto;color:#4E5A67}
.ecofig figcaption{max-width:72ch;margin:30px auto 0;font-size:16px;line-height:1.62;
 color:#7C858F;text-align:center;text-transform:none;letter-spacing:normal}
.ecowrap{overflow-x:auto}
@media(max-width:760px){.ecofig svg{min-width:660px}}

.slot{border:1px dashed #B9C8D6;background:#FBF9F5;padding:26px 30px;margin:38px 0 0;max-width:66ch}
.slotlab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2F74B5;
 font-weight:700;margin:0 0 10px}
.slottx{margin:0;font-size:16.5px;font-style:italic;color:#98A0A9;line-height:1.6}

.formsec{background:var(--paper)}
.form{max-width:640px;margin:0 auto}
.form .row{display:grid;gap:8px;margin:0 0 22px}
.form label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.form label .req{color:var(--sand)}
.form input,.form textarea{font-family:inherit;font-size:17px;color:var(--ink);background:#fff;
 border:1px solid var(--rule);padding:15px 16px;width:100%}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--navy);outline:none}
.btn,button.btn{display:inline-block;font-family:inherit;font-size:16px;font-weight:700;
 letter-spacing:.04em;background:var(--navy);color:#fff;border:1px solid var(--navy);
 padding:15px 34px;cursor:pointer;text-decoration:none}
.btn:hover{background:#22303E}
.hp{position:absolute;left:-9999px}
.formnote{font-size:14.5px;color:#98A0A9;margin:20px 0 0}
.formnote a{color:var(--navy)}

.legal{padding:80px 54px}
.legal .wrap{max-width:74ch}
.legalh1{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;color:var(--ink);
 font-size:clamp(30px,4vw,42px);line-height:1.14;margin:0 0 8px}
.legalmeta{font-size:14.5px;color:#98A0A9;margin:0 0 40px;padding-bottom:26px;
 border-bottom:1px solid var(--rule)}
.legal h3{font-family:Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;color:var(--navy);
 margin:38px 0 16px}
.legal .cl{margin:0 0 15px;font-size:17px;padding-left:2.6em;text-indent:-2.6em}
.legal .cl b{font-weight:700;color:var(--navy)}
.legal .sc{margin:0 0 12px;font-size:17px;padding-left:4.4em;text-indent:-1.6em}
.legal a{color:var(--navy);border-bottom:1px solid var(--sand-lite)}

/* ---------- CTA / FOOT ---------- */
.cta{background:var(--navy);color:#fff;padding:82px 54px;text-align:center}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:rgba(255,255,255,.82);max-width:56ch;margin:0 auto 32px}
.cta a{display:inline-block;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.55);
 padding:14px 30px;margin:0 7px 10px;font-size:15.5px;letter-spacing:.05em;cursor:pointer}
.cta a:hover{background:rgba(255,255,255,.1)}
.cta a.solid{background:var(--sand-lite);color:#22303E;border-color:var(--sand-lite);font-weight:700}
.foot{background:#22303E;color:rgba(255,255,255,.62);padding:46px 54px;font-size:14.5px;text-align:center}
.foot .fmail{margin:0 0 14px}
.foot .fmail a{color:#9FD0F5;text-decoration:none;font-size:16.5px;
 border-bottom:1px solid rgba(159,208,245,.4);padding-bottom:2px}
.foot .flinks{margin:0 0 12px}
.foot .fcopy{margin:0;font-size:13.5px;opacity:.75}
.nav a.navcta{border:1px solid var(--sand-lite);color:var(--sand-lite);padding:8px 18px;margin-left:6px}
.nav a.navcta:hover{background:var(--sand-lite);color:#22303E;border-bottom-color:var(--sand-lite)}
.foot .b{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#fff;font-size:20px;margin-bottom:12px}
.foot a{color:rgba(255,255,255,.62);cursor:pointer}
.foot .flinks a:hover{color:#fff}
@media(max-width:900px){
  .split,.split.rev,.eco{grid-template-columns:1fr;gap:36px}
  .split.rev>.art{order:0}
  .paper{grid-template-columns:1fr;gap:8px}
  .paper .dl{text-align:left}
  section{padding:64px 26px}
  .hero{padding:32px 26px;min-height:420px}
  .nav{padding:16px 24px;gap:20px}
}

/* ================= REAL SITE ADDITIONS ================= */

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--navy);
 padding:12px 18px;font-weight:700}
.skip:focus{left:8px;top:8px}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
 outline:3px solid var(--sand);outline-offset:3px}

/* navigation */
.nav{gap:0 34px}
.navlinks{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.navtoggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.5);
 color:#fff;font-family:inherit;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
 padding:9px 16px;cursor:pointer}
.navtoggle:hover{background:rgba(255,255,255,.1)}
/* The full horizontal nav is the real layout, so it is held as far down as it
   will legibly go: two tightening tiers before the menu button appears at all. */
@media(max-width:1060px){
  .nav{padding:16px 26px;gap:0 20px}
  .brand{font-size:22px}
  .nav a{font-size:14px}
  .navlinks{gap:20px}
  .nav a.navcta{padding:7px 14px;margin-left:2px}
}
@media(max-width:860px){
  .nav{padding:14px 18px;gap:0 14px}
  .brand{font-size:19px}
  .nav a{font-size:13px}
  .navlinks{gap:14px}
  .nav a.navcta{padding:6px 11px;margin-left:0}
}
@media(max-width:700px){
  .navtoggle{display:block}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:flex-start;
   gap:0;margin-top:16px;border-top:1px solid rgba(255,255,255,.18)}
  .navlinks.open{display:flex}
  .navlinks a{width:100%;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);
   border-bottom-color:rgba(255,255,255,.12)}
  .navlinks a.on{border-bottom-color:var(--sand-lite)}
}

/* contact form */
.formsec{background:var(--paper)}
.form{max-width:640px;margin:0 auto}
.form .row{display:grid;gap:8px;margin:0 0 22px}
.form label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
 color:var(--navy)}
.form label .req{color:var(--sand)}
.form input,.form textarea{font-family:inherit;font-size:17px;color:var(--ink);
 background:#fff;border:1px solid var(--rule);padding:15px 16px;width:100%}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--navy)}
.btn,button.btn{display:inline-block;font-family:inherit;font-size:16px;font-weight:700;
 letter-spacing:.04em;background:var(--navy);color:#fff;border:1px solid var(--navy);
 padding:15px 34px;cursor:pointer;text-decoration:none}
.btn:hover{background:#22303E}
.hp{position:absolute;left:-9999px}
.formnote{font-size:14px;color:#98A0A9;margin:20px 0 0}

/* 404 */
.oops{padding:120px 54px;text-align:center}
.oops h1{color:var(--ink);font-size:clamp(34px,5vw,54px);margin-bottom:16px}
.oops p{max-width:52ch;margin:0 auto 30px}

/* privacy / plain text pages */
.plain{padding:80px 54px}
.plain .wrap{max-width:70ch}
.plain h2{margin-top:44px}
.plain h2:first-of-type{margin-top:0}
.plain ul{font-size:17px;color:var(--body)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .nav,.navtoggle,.cta,.skip{display:none}
  body{font-size:12pt}
}

.vplay{display:block;text-decoration:none;color:inherit}
.vplay figure{overflow:hidden}
.vplay img{transition:transform .5s ease}
.vplay:hover img{transform:scale(1.03)}
.vplay:hover .play i{background:#fff;transform:scale(1.06)}
.vplay .play i{transition:transform .25s ease,background .25s ease}

.vwrap{position:relative;margin-bottom:20px;background:#18212B}
.vwrap video{display:block;width:100%;height:auto;background:#18212B}

.vplay .play i{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-style:normal;color:#2E4155;font-size:19px;padding-left:4px}

/* wordmark: bold throughout, italic M and P, as in the email signature */
.wm{font-weight:700;font-style:normal}
.wm i{font-style:italic}

/* ecosystem: diagram and cards light each other up */
.nd{cursor:pointer}
.nd rect{transition:fill .18s ease,stroke .18s ease,stroke-width .18s ease}
.nd:focus{outline:none}
.nd.lit rect{fill:#EAF4FC;stroke:#2F74B5;stroke-width:2.4;stroke-opacity:1}
.ecodia.dim .nd:not(.lit) rect{stroke-opacity:.18}
.ecodia.dim .nd:not(.lit) text{opacity:.45}
.card[data-k]{cursor:pointer;transition:background .18s ease,box-shadow .18s ease}
.card[data-k]:focus{outline:none}
.card[data-k].lit{background:#EAF4FC;box-shadow:inset 3px 0 0 #2F74B5}

/* ---------- SOME OF THE TEAM ---------- */
/* Paired with .people on The Experts: same columns, gaps and breakpoints. */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 38px;align-items:stretch}
@media(max-width:940px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.team{grid-template-columns:1fr;gap:38px}}
.tm{margin:0;display:flex;flex-direction:column;height:100%}
.tm figcaption{display:flex;flex-direction:column;flex:1}
.tm blockquote{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;flex:1}
.tm img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
 display:block;margin-bottom:22px}
.tmph{aspect-ratio:1/1;background:#DCD9D4;border:1px solid var(--rule);
 display:grid;place-items:center;margin-bottom:22px}
.tmph span{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#8C8880;
 text-align:center;line-height:1.7}
.tm figcaption{text-transform:none;letter-spacing:normal;font-size:inherit;color:var(--body);margin-top:0}
.tm blockquote{margin:0 0 16px;font-size:19px;line-height:1.5;color:var(--ink);
 text-transform:none;letter-spacing:normal;border-left:2px solid var(--sand-lite);padding-left:18px}
.tmname{margin:0;padding-top:4px;font-size:15px;font-weight:700;color:var(--navy);
 text-transform:none;letter-spacing:normal;border-top:1px solid var(--rule)}
.tmrole{margin:2px 0 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#98A0A9}

/* ---------- CENTRED SECTION HEADINGS ----------
   Eyebrows, section headings and lead lines sit on the page's centre line.
   Two-column splits, cards, people and the legal pages keep their own alignment,
   and running body copy stays left-aligned so it is comfortable to read. */
section .wrap > .eyebrow,
section .wrap > h2,
section .wrap > .narrow > .eyebrow,
section .wrap > .narrow > h2,
section .wrap > .narrow > .lead,
section .wrap > .narrow.mid > p:only-of-type{
  text-align:center; margin-left:auto; margin-right:auto;
}
section .wrap > .narrow{margin-left:auto;margin-right:auto}
.legal .wrap > h2,.legal .wrap > .eyebrow,
.split .tx .eyebrow,.split .tx h2,
.card h3,.person h3,.paper h3,.tm blockquote{text-align:left}
.split .tx h2{margin-left:0;margin-right:0}

.vicon{width:14px;height:14px;vertical-align:-2px;margin-right:8px;color:var(--sand)}

/* ---- Tara video slots ---- */
/* two across rather than three, so each clip is roughly half again as wide;
   the third sits centred on its own row at exactly the same size */
.vids.tara{grid-template-columns:repeat(2,1fr);gap:38px 32px;max-width:1180px;margin:34px auto 0}
.vids.tara .vid:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 16px);
 margin-left:auto;margin-right:auto;width:100%}
@media(max-width:820px){
  .vids.tara{grid-template-columns:1fr;max-width:620px}
  .vids.tara .vid:last-child:nth-child(odd){max-width:none}
}
.tara-one{max-width:760px;margin:34px auto 0}
.vidph{aspect-ratio:16/9;background:#DCD9D4;border:1px solid var(--rule);
  display:grid;place-items:center;text-align:center;padding:14px}
.vidph span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8C8880;line-height:1.9}
.vcap{font-size:13px;color:var(--body);margin:10px 0 0;text-align:left}
.vids.tara .vcap,.tara-one .vcap{text-align:center}

/* a lone consultant on the last row sits in the middle, not hard left */
.team .tm:last-child:nth-child(3n+1){grid-column:2}
@media(max-width:940px){.team .tm:last-child:nth-child(3n+1){grid-column:auto}}

/* ---- 18 Sept: tighter rhythm between stacked sections so the page keeps moving ---- */
section.tight + section.tight{padding-top:56px}
section.tight{padding-top:64px;padding-bottom:64px}
@media(max-width:900px){section.tight{padding-top:48px;padding-bottom:48px}}

/* ---- Events page ---- */
.evcard{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--rule);
 background:#fff;margin:34px 0 0}
.evcard .evimg{margin:0}
.evcard .evimg img{display:block;width:100%;height:100%;object-fit:cover;min-height:260px}
.evcard .evtx{padding:38px 40px}
.evcard .evtx h3{margin:6px 0 14px;font-size:27px}
.evmeta{list-style:none;margin:0 0 18px;padding:0}
.evmeta li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:16px}
.evmeta li:last-child{border-bottom:0}
.evmeta b{min-width:92px;color:var(--navy);font-weight:600}
.evtbd{color:#7A828B;font-style:italic}
@media(max-width:820px){.evcard{grid-template-columns:1fr}.evcard .evtx{padding:30px 26px}}
.evlater{background:var(--paper);border:1px solid var(--rule);padding:30px 34px;margin-top:40px}
.evlater p{margin:0}

/* select and checkbox for the events register-interest form */
.form select{font-family:inherit;font-size:17px;color:var(--ink);background:#fff;
 border:1px solid var(--rule);padding:15px 16px;width:100%;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
 background-position:calc(100% - 22px) 26px,calc(100% - 16px) 26px;
 background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.form select:focus{border-color:var(--navy);outline:none}
.form .rowcheck label{display:flex;align-items:center;gap:10px;text-transform:none;
 letter-spacing:0;font-size:16px;font-weight:400;color:var(--body);cursor:pointer}
.form .rowcheck input{width:auto;padding:0;accent-color:var(--navy)}
.evcard .evimg img{max-height:430px}

/* events: programme dates and sponsorship tiers */
.stgdate{margin-top:6px !important;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--sand);font-weight:700}
.tierprice{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
 font-size:34px;color:var(--navy);line-height:1;margin:0 0 8px !important}
.tiernote{font-size:15px !important;color:var(--body);margin:0 0 20px !important;
 padding-bottom:18px;border-bottom:1px solid var(--rule)}
.tierlist{list-style:none;margin:0;padding:0}
.tierlist li{position:relative;padding-left:20px;margin-bottom:11px;font-size:16px;
 line-height:1.55;color:var(--body)}
.tierlist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
 background:var(--sand-lite)}
.tierlist li:last-child{margin-bottom:0}
/* Netlify fills this with the reCAPTCHA widget at deploy time; before that it collapses */
.cap{margin:0 0 26px}
.cap:empty{display:none}

/* research: the listen control sits beside download / read the paper */
.paper{grid-template-columns:124px 1fr 290px}
.paper .dl{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px 20px}
/* a proper rectangular button rather than an underlined word */
.listen{font-family:inherit;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
 font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--navy);
 padding:9px 20px;cursor:pointer;white-space:nowrap;transition:.15s}
.listen:hover{background:var(--navy);color:#fff}
.listen.soon{color:#A9B0B8;background:#fff;border-color:#D9DDE1;cursor:default}
.listen.soon:hover{background:#fff;color:#A9B0B8}
@media(max-width:820px){
  .paper{grid-template-columns:1fr}
  .paper .dl{justify-content:flex-start}
}

/* social icons: footer and the contact block */
.fsocial,.csocial{display:flex;gap:18px;margin:0 0 14px}
.fsocial{justify-content:center}
.csocial{margin:26px 0 0}
.sico{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
 border:1px solid rgba(255,255,255,.28);border-radius:50%}
.sico svg{width:17px;height:17px;fill:currentColor}
.foot .sico{color:rgba(255,255,255,.72)}
.foot a.sico:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.csocial .sico{color:var(--navy);border-color:var(--rule)}
.csocial a.sico:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* the four new photographs are deliberately portrait, so the shots still to come
   are obvious at a glance against the old landscape ones */
.person.tall img.ph{aspect-ratio:1/1;object-position:center 18%}

/* the recording sits under its own paper, full width of the row */
.audiobar{grid-column:1/-1;margin:16px 0 2px;padding:18px 20px;background:#fff;
 border:1px solid var(--rule)}
.audiobar audio{width:100%;display:block}
.acap{margin:12px 0 0;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
 color:#98A0A9}
@media(max-width:820px){.audiobar{margin-top:14px}}

/* the home page can carry two intros side by side */
.vids.tara-two{grid-template-columns:repeat(2,1fr);gap:30px 26px;max-width:1080px;margin:32px auto 0}
@media(max-width:820px){.vids.tara-two{grid-template-columns:1fr;max-width:600px}}
.tara-two .vcap{text-align:center}

/* the private-event notice on the events page */
.private{border:1px solid var(--sand-lite);border-left:3px solid var(--sand);
 background:#EEF5FB;padding:26px 30px;margin:0}
.private .ptitle{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
 font-size:19px;color:var(--navy);margin:0 0 10px}
.private p{margin:0;font-size:16.5px}

@media(max-width:600px){.hero{min-height:360px}}

/* ---------- RESEARCH BRIEFINGS, listed rather than tiled ----------
   Three side-by-side players made the headings sit at different depths
   whenever one wrapped to a second line. As a list each row starts at the
   same place, and the video opens underneath on demand. */
.briefs{border-top:1px solid var(--rule)}
.brief{display:grid;grid-template-columns:156px 1fr;gap:0 24px;
 padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.brief[hidden]{display:none}
.bthumb{position:relative;display:block;padding:0;border:0;background:#18212B;
 cursor:pointer;width:100%;overflow:hidden}
.bthumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
 transition:opacity .18s ease}
.bthumb:hover img{opacity:.78}
.tplay{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.tplay svg{width:30px;height:30px;border-radius:50%;background:rgba(24,33,43,.55);
 padding:7px;box-sizing:content-box;transition:background .18s ease}
.bthumb:hover .tplay svg{background:var(--sand)}
.brief.playing .bthumb img{opacity:.5}
.btx{min-width:0}
.bmeta{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#98A0A9;
 margin:0 0 8px;display:flex;align-items:center}
.bmeta .vicon{width:13px;height:13px;margin-right:9px;flex:none}
.brief h3{font-size:19px;margin:0 0 7px;line-height:1.3}
.bpaper{font-size:15px;margin:0;color:#7C858E}
.bpaper a{color:inherit;font-weight:400;text-decoration:none;border-bottom:1px solid transparent}
.bpaper a:hover{color:var(--navy);border-bottom-color:var(--rule)}
.bvideo{grid-column:1/-1;margin:22px 0 2px}
.bvideo .vwrap{margin:0}
@media(max-width:760px){
  .brief{grid-template-columns:1fr;gap:14px}
  .bthumb{max-width:260px}
}

/* the briefings carry the same subject menu as the papers, so the gaps show */
.btags{margin:0 0 6px}
.bempty{font-size:16px;color:#98A0A9;font-style:italic;padding:26px 0 4px;margin:0;
 border-top:1px solid var(--rule)}

/* ---------- THE SHIFT ---------- */
/* The same seven stages, with where the effort goes running straight down
   the two columns beside them. */
.shiftgrid{margin-top:40px;border-top:1px solid var(--rule)}
.sghead,.sgfoot{display:grid;grid-template-columns:1fr 215px 215px;align-items:center}
.sghead span,.sgfoot span{padding:14px 0}
.sghead .h1c,.sghead .h2c,.sgfoot span:nth-child(2),.sgfoot span:nth-child(3){text-align:center}
.sghead .h1c,.sghead .h2c{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
 font-weight:700;color:var(--navy);line-height:1.3}
.sghead .h2c{color:var(--sand)}
.sgbody{display:grid;grid-template-columns:1fr 215px 215px;border-top:1px solid var(--rule)}
.sgcell{display:grid;grid-template-columns:66px 1fr;gap:22px;align-items:start;min-width:0;
 padding:26px 30px 26px 0;border-bottom:1px solid var(--rule)}
.sgn{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:26px;color:var(--sand-lite);line-height:1}
.sgcell h3{margin:0 0 6px;font-size:22px;overflow-wrap:break-word;hyphens:auto}
.sgcell > div{min-width:0}
.sgcell p{margin:0;font-size:16px}
.sgv{display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--rule);
 border-left:1px solid var(--rule);background:#fff}
.sgv b{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:40px;font-weight:400;color:var(--navy);letter-spacing:-.015em;line-height:1}
.sgv.mp{background:#E6F1FA}
.sgv.mp b{color:var(--sand)}
.sgv.grp b{font-size:58px}
.sgfoot{border-top:1px solid var(--ink)}
.sgfoot span{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--body)}
.sfoot{max-width:var(--measure);margin:30px 0 0;font-size:17px}
@media(max-width:820px){
  .sghead,.sgfoot,.sgbody{grid-template-columns:minmax(0,1fr) 84px 84px}
  .sgcell{grid-template-columns:30px 1fr;gap:10px;padding:16px 12px 16px 0}
  .sgcell h3{font-size:15.5px;letter-spacing:-.005em} .sgcell p{font-size:14.5px}
  .sgn{font-size:21px}
  .sgv b{font-size:25px} .sgv.grp b{font-size:32px}
  .sghead .h1c,.sghead .h2c{font-size:10.5px;letter-spacing:.08em}
}

/* Five Tara films: three live, two still to record. */
.vids.tara5{grid-template-columns:repeat(3,1fr);gap:40px 30px;max-width:1180px;margin:34px auto 0}
.vids.tara5 .vcap{text-align:center}
.vids.tara5 .vid.soon .vwrap img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vids.tara5 .vid.soon .vcap{color:#98A0A9}
@media(max-width:980px){.vids.tara5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.vids.tara5{grid-template-columns:1fr;max-width:620px}}

/* Events: the line that sits under the painting, and the empty past-events note. */
.lede{font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--navy);margin:0;text-align:center}
.empty{font-size:16.5px;color:#98A0A9;font-style:italic}



/* sheet "Sub-heading" rows that sit under a section heading */
.subh{font-size:21px;line-height:1.35;color:var(--navy);margin:0 0 22px;max-width:40ch}
.subh.narrow{max-width:46ch}

/* Five Tara films: centre the incomplete last row (2 under 3 on desktop, 1 under 2 on tablet).
   Flex instead of grid so the leftover films sit in the middle, same size as the ones above. */
.vids.tara5{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 30px}
.vids.tara5>.vid{flex:0 0 calc((100% - 60px)/3);min-width:0}
@media(max-width:980px){.vids.tara5>.vid{flex-basis:calc((100% - 30px)/2)}}
@media(max-width:640px){.vids.tara5>.vid{flex-basis:100%}}

/* ===== 25 Sep review ===== */
/* Home title: keep each half together; on phones split each half evenly so no word is left alone */
.h1home .mbr{display:none}
@media(max-width:560px){.h1home .mbr{display:inline}}

/* Get in touch heading on one line where there is room */
.formsec h2.oneline{max-width:none;white-space:nowrap}
@media(max-width:720px){.formsec h2.oneline{white-space:normal;text-wrap:balance}}

/* Consultant and expert cards, one format: photo, name, line, quote */
.tmname{margin:0 0 16px;padding:0 0 12px;border-top:0;border-bottom:1px solid var(--rule);
 font-size:16px;font-weight:700;color:var(--navy)}
.person .who{border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:16px}
.person .who h3{margin:0;font-family:inherit;font-size:16px;font-weight:700;color:var(--navy);letter-spacing:normal;line-height:1.35}
.person .who .spec{margin:6px 0 0;font-size:11.5px}
.tm blockquote,.person blockquote{margin:0;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-style:normal;font-size:17px;line-height:1.55;color:var(--ink);border-left:2px solid var(--sand-lite);padding-left:18px}
/* expert without a current photo: a quiet initials tile at the same size */
.person .ph.mono{background:#ECE8E1;border:1px solid var(--rule);color:#9A958C;
 font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 font-size:46px;letter-spacing:.08em;text-transform:none}

/* Our Vision: the note now sits above the table, across its width */
.sfoot.above{max-width:none;margin:0 0 34px}

/* Events: the chess programme, folded away inside the chess section */
/* Chess: the two confirmed dates, shown large under the heading */
.chessdates{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 28px}
.chessdates div{flex:1 1 200px;background:var(--paper);border-left:3px solid var(--sand);padding:14px 18px}
.chessdates b{display:block;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.15;color:var(--navy)}
.chessdates span{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.chessprog{margin:30px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chessprog summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;
 font-size:15px;font-weight:700;color:var(--navy)}
.chessprog summary::-webkit-details-marker{display:none}
.chessprog summary span{font-weight:400;color:#7C858E;margin-left:10px;font-size:14px}
.chessprog summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:20px;font-weight:400;color:var(--sand)}
.chessprog[open] summary::after{content:"\2212"}
.chessprog ul{list-style:none;margin:0;padding:0 0 12px}
.chessprog li{display:grid;grid-template-columns:170px 1fr;gap:2px 18px;padding:10px 0;border-top:1px solid #EFECE6;font-size:14.5px;line-height:1.5}
.chessprog .cpn{font-weight:700;color:var(--navy);grid-row:span 2}
.chessprog .cpd{color:var(--body)}
.chessprog .cpw{color:#98A0A9;font-size:13px}
@media(max-width:560px){.chessprog li{grid-template-columns:1fr}.chessprog .cpn{grid-row:auto}}

/* more air between rows so each name reads with its own photo */
.team,.people{row-gap:60px}
@media(max-width:640px){.team,.people{row-gap:48px}}

/* The Experts: the four with current photos fill the photo grid; the two awaiting new photos
   sit beside the fourth as text cards stacked across the remaining two columns, so the grid stays full. */
.people-text{grid-column:2 / span 2;display:flex;flex-direction:column;gap:30px}
.people-text .person.noimg{flex:1}
@media(max-width:940px){.people-text{grid-column:1 / -1}}
.person.noimg{background:#fff;border:1px solid var(--rule);padding:32px 40px 34px;position:relative;
 display:flex;flex-direction:column;justify-content:center}
.person.noimg::before{content:"\201C";position:absolute;top:18px;right:30px;font-family:Georgia,"Times New Roman",serif;
 font-size:76px;line-height:1;color:var(--sand-lite)}
.person.noimg .who{padding-right:60px}
@media(max-width:640px){.person.noimg{padding:26px 24px 28px}}

/* No stray single words: headings share their words evenly across lines,
   and body text avoids leaving one word alone on the last line. */
h1,h2,h3,h4,.lede,.eyebrow,summary,.ptitle,.subh,.who h3,.tmname{text-wrap:balance}
p,blockquote,li,.vcap,.acap,figcaption{text-wrap:pretty}

/* The Shift: intro, step question and sign-off (28 Sep wording) */
.shiftintro{max-width:var(--measure);font-size:18px;margin:6px auto 0}
.sgcell p.sq{font-style:italic;color:var(--navy);margin:0 0 6px}
.shiftsign{margin:38px auto 0;text-align:center;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:22px;font-weight:600;color:var(--navy);text-wrap:balance}
@media (max-width:640px){.shiftintro{font-size:16.5px}.shiftsign{font-size:18px;margin-top:28px}}
.sgcell p{text-wrap:pretty}
@media(max-width:560px){
  .sghead,.sgfoot,.sgbody{grid-template-columns:minmax(0,1fr) 68px 68px}
  .sgcell{grid-template-columns:1fr;gap:4px;padding:16px 12px 16px 0}
  .sgn{font-size:17px}
  .sgv b{font-size:21px} .sgv.grp b{font-size:25px}
  .sghead .h1c,.sghead .h2c{font-size:9px;letter-spacing:.04em}
}

/* ---------- Case studies (Home capsule + Case Studies page) ---------- */
/* Home: three cards in the Why-us style, each topped by a detail of the same abstract painting. */
.cscards .cscard{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:0 0 30px;overflow:hidden;transition:background .2s}
.cscards .cscard:hover{background:#FDFCFA}
.cscards .cscard:hover h3{color:var(--navy)}
.cscard img{display:block;width:100%;aspect-ratio:12/5;object-fit:cover;margin:0 0 28px}
.cscard .n,.cscard h3,.cscard p,.cscard .cschips,.cscard .more{margin-left:34px;margin-right:34px}
.cscard h3{margin-top:0;margin-bottom:12px;font-size:21px;line-height:1.3}
.cscard p{color:var(--body)}
.cschips{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:20px}
.cschips span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.cscard .more{padding-top:18px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.cscard .more::after{content:" \2192";color:var(--sand)}
.csall{text-align:center;margin:36px 0 0}
/* Recent clients: quiet monochrome logos in white circles, so they sit in the palette. */
.clients.inline{margin-top:72px;padding-top:56px;border-top:1px solid var(--rule)}
.logos{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
.logos .lg{width:138px;height:138px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
.logos img{max-width:92px;max-height:48px;width:auto;height:auto;display:block}
.logos li:nth-child(2) img{max-width:104px}
.logos li:nth-child(3) img{max-height:56px}
section.clients{padding-top:70px;padding-bottom:96px}
/* Case Studies page: compact layout, header row then three columns, so each case reads at a glance. */
.casenav-sec{padding-bottom:34px}
.csintro{max-width:60ch;margin:0 auto 30px;text-align:center;font-size:18px;line-height:1.6;color:var(--body)}
.casenav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.casenav a{background:#fff;padding:18px 22px;text-decoration:none;color:var(--ink);font-size:15.5px;line-height:1.4;display:flex;justify-content:center;text-align:center;transition:background .2s}
.casenav a:hover{background:var(--paper)}
.case{padding-top:56px;padding-bottom:60px;scroll-margin-top:72px}
.casetop{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:36px;align-items:center}
.casethumb{margin:0}
.casethumb img{display:block;width:220px;aspect-ratio:3/2;object-fit:cover}
.casenum{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--sand);margin-bottom:10px}
.case h2{font-size:clamp(22px,2.2vw,28px);line-height:1.25;margin:0 0 12px;text-align:left;max-width:30ch}
.csclient{font-size:15.5px;line-height:1.55;color:var(--body);margin:0;max-width:60ch}
.csclient span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--navy);margin-right:6px}
.csstats{display:flex;gap:30px;padding-left:34px;border-left:1px solid var(--rule)}
.csstat b{display:block;font-family:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:38px;font-weight:400;color:var(--navy);line-height:1;letter-spacing:-.015em;white-space:nowrap}
.csstat span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);font-weight:700;margin-top:8px;line-height:1.45;max-width:16ch}
.case3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;align-items:start}
.case3 h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--navy);margin:0 0 12px;text-align:left}
.case3 p{font-size:15.5px;line-height:1.6;margin:0 0 10px}
.case3 > div > h3 + p{margin-top:0}
.case3 .csresult + h3{margin-top:24px}
.cslist{list-style:none;margin:0;padding:0}
.cslist li{position:relative;padding:0 0 0 18px;margin:0 0 8px;font-size:15.5px;line-height:1.55}
.cslist li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--sand)}
.cslist li b{color:var(--ink);font-weight:700}
.shiftlist li b{color:var(--navy)}
.csresult{padding:20px 22px;background:#fff;border-left:3px solid var(--sand)}
.case:not([style]) .csresult{background:var(--paper)}
.csresult h3{margin-top:0}
.csresult p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.csresult p b{font-weight:700;color:var(--navy)}
@media(max-width:1100px){
  .casetop{grid-template-columns:180px minmax(0,1fr)}
  .casethumb img{width:180px}
  .csstats{grid-column:1/-1;padding-left:0;border-left:0}
  .case3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case3 > div:last-child{grid-column:1/-1}
}
@media(max-width:700px){
  .casenav{grid-template-columns:1fr}
  .casetop{grid-template-columns:1fr;gap:18px}
  .casethumb img{width:100%;aspect-ratio:5/2}
  .case3{grid-template-columns:1fr;gap:26px}
  .case{padding-top:44px;padding-bottom:48px}
  .csstat b{font-size:32px}
  .logos .lg{width:112px;height:112px}
  .logos img{max-width:74px;max-height:40px}
  .logos li:nth-child(2) img{max-width:84px}
  .logos{gap:18px}
}
/* Home case studies: always three across until phone width; narrower columns get tighter padding. */
.cards.c3.cscards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){
  .cscard .n,.cscard h3,.cscard p,.cscard .cschips,.cscard .more{margin-left:24px;margin-right:24px}
  .cscard h3{font-size:19px}
  .cscard p{font-size:15.5px}
  .cscard img{margin-bottom:22px}
}
@media(max-width:820px){
  .cscard .n,.cscard h3,.cscard p,.cscard .cschips,.cscard .more{margin-left:18px;margin-right:18px}
  .cscard h3{font-size:17px}
  .cscard p{font-size:14.5px}
  .cschips span,.cscard .more{font-size:11px;letter-spacing:.1em}
}
@media(max-width:640px){.cards.c3.cscards{grid-template-columns:1fr}
  .cscard .n,.cscard h3,.cscard p,.cscard .cschips,.cscard .more{margin-left:26px;margin-right:26px}
  .cscard h3{font-size:19px}.cscard p{font-size:16px}}
/* Case studies: details collapsed behind a "read" control, so the page scales to many cases. */
.csmore{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0 256px;padding:10px 0;background:none;border:0;border-bottom:2px solid var(--sand-lite);font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy);cursor:pointer}
.csmore::after{content:"";width:8px;height:8px;border-right:2px solid var(--sand);border-bottom:2px solid var(--sand);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.csmore[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.csmore:hover{border-bottom-color:var(--sand)}
.csmore:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.case3{margin-top:30px;padding-top:30px;border-top:1px solid var(--rule)}
.case{padding-top:48px;padding-bottom:48px}
.csintro{margin-bottom:0}
@media(max-width:1100px){.csmore{margin-left:216px}}
@media(max-width:700px){.csmore{margin-left:0}}
.case3[hidden]{display:none!important}
/* Home: tighter vertical rhythm between sections, in line with Who We Are. */
body.home main section:not(.formsec),.page[data-p="home"] section:not(.formsec){padding-top:64px;padding-bottom:64px}
body.home .clients.inline,.page[data-p="home"] .clients.inline{margin-top:48px;padding-top:40px}
@media(max-width:700px){body.home main section:not(.formsec),.page[data-p="home"] section:not(.formsec){padding-top:48px;padding-bottom:48px}}

/* =====================================================================
   V2: bolder, livelier, outcome-led. Everything below overrides the
   original design; delete this block to return to it.
   Concept: a gallery with a pulse. Big confident type, the paintings
   framed as arches and circles, results that move.
   ===================================================================== */
:root{
  --display:'Bricolage','Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --deep:#1B2836; --glow:#9FD0F5; --sky:#9FD0F5; --sky-pale:#EAF4FC; --ease:cubic-bezier(.2,.8,.2,1);
}
h1,h2{font-family:var(--display)}
h2{font-weight:700;font-size:clamp(36px,4.6vw,66px);line-height:1.02;letter-spacing:-.025em;font-stretch:92%;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:28px;height:2px;margin:-2px 12px 0 0;background:currentColor;transform-origin:left;transition:transform .8s var(--ease)}

/* scroll progress */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sand),var(--glow));transform:scaleX(0);transform-origin:left}

/* ---------- HERO: type left, the painting as an arch on the right ---------- */
.hero.hx{background:var(--navy);min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
 align-items:center;gap:40px 64px;padding:72px 54px 84px;overflow:hidden;isolation:isolate}
.hero.hx::before{content:"";position:absolute;width:62vmax;height:62vmax;right:-22vmax;top:-30vmax;border-radius:50%;
 background:radial-gradient(circle at 40% 60%,rgba(47,116,181,.28),rgba(47,116,181,0) 62%);z-index:-1;animation:drift 18s ease-in-out infinite alternate}
.hero.hx .in{max-width:none}
.hero.hx h1{font-weight:800;font-size:clamp(52px,8.6vw,138px);line-height:.94;letter-spacing:-.035em;font-stretch:88%;margin:0;color:#fff;text-wrap:balance}
.hero.hx h1.h1home{font-size:clamp(52px,8vw,128px)}
.hero.hx .eyebrow{color:var(--sand-lite);margin-bottom:26px}
.hx .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .02em .1em;margin:0 -.02em -.1em}
.hx .w>span{display:inline-block}
.hx .w.hl>span{color:var(--glow);background:linear-gradient(var(--glow),var(--glow)) no-repeat 0 92%/100% .07em}
.js .hx .w.hl>span{background-size:0 .07em;transition:background-size .9s var(--ease) 1.3s}
.js .hx.go .w.hl>span{background-size:100% .07em}
.hxart{position:relative;margin:0;justify-self:end;width:min(100%,470px);aspect-ratio:4/5;transform:rotate(2.5deg)}
.hxart::before{content:"";position:absolute;inset:9% -8% -7% 12%;background:var(--sky);transform:rotate(-6deg);z-index:0}
.hxart .hxim{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;
 transform:translateY(var(--py,0px)) scale(1.06);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hxart{overflow:visible}
.badge{position:absolute;z-index:2;left:-52px;bottom:40px;width:136px;height:136px;border-radius:50%;background:#fff;
 animation:spin 22s linear infinite;box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.badge text{font-family:Inter,Aptos,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;fill:#1B2836}
.badge .bst{fill:#1B2836}

/* ---------- TICKER: the results, moving ---------- */
.ticker{background:var(--sky);color:var(--deep);overflow:hidden;border-block:1px solid rgba(27,40,54,.18)}
.tk{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
.tkg{display:flex;align-items:center;gap:28px;padding:18px 14px}
.tkg a{display:inline-flex;align-items:baseline;gap:10px;color:inherit;text-decoration:none;white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:.01em}
.tkg a b{font-family:var(--display);font-size:40px;font-weight:750;letter-spacing:-.02em;font-stretch:90%}
.tkg a:hover{color:#fff}
.tkg{padding:22px 16px}
.tks{width:16px;height:16px;fill:var(--deep);flex:none;opacity:.7}

/* ---------- the ¾ / ¼ bar ---------- */
.quarter{margin:40px 0 44px}
.qbar{display:flex;height:132px;border-radius:22px;overflow:hidden;background:var(--rule)}
.qbar>span{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 20px;color:#fff;min-width:0}
.qhave{flex:0 0 75%;background:var(--navy)}
.qneed{flex:1 1 auto;background:var(--sky);color:var(--deep)!important}
.qbar b{font-family:var(--display);font-size:54px;line-height:.9;font-weight:700}
.qbar em{font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:8px}
.quarter figcaption{font-size:13px;color:#8A929B;margin-top:10px;text-align:left}
.js .quarter.rv .qhave{flex-basis:50%;transition:flex-basis 1.4s var(--ease) .2s}
.js .quarter.seen .qhave{flex-basis:75%}

/* ---------- paintings: arches, circles and stickers ---------- */
.split .art{position:relative;margin:0}
.split .art img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:100%;display:block;box-shadow:22px 22px 0 var(--sky);
 transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.split .art:hover img{transform:rotate(-2deg) scale(1.02);box-shadow:-22px 22px 0 var(--sky)}
section:nth-of-type(even) .split .art img{border-radius:48% 52% 44% 56%/54% 46% 54% 46%;aspect-ratio:1/1;box-shadow:none;animation:blob 14s ease-in-out infinite alternate}
section:nth-of-type(even) .split .art::before{content:"";position:absolute;inset:6% -5% -5% 6%;border-radius:50%;background:var(--sky);z-index:-1}
.split .art{isolation:isolate}
.split .art figcaption{position:absolute;left:-10px;bottom:22px;background:var(--sky);color:var(--deep);font-size:11px;letter-spacing:.14em;
 text-transform:uppercase;font-weight:700;padding:9px 16px;border-radius:999px;transform:rotate(-5deg);box-shadow:0 10px 24px -12px rgba(0,0,0,.5);max-width:92%;line-height:1.4}
.bandart{height:360px}
.bandart>img{transform:translateY(var(--py,0px)) scale(1.15)}
.bw{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;pointer-events:none}
.bw span{white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(64px,11vw,170px);letter-spacing:-.03em;
 color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);animation:marquee 38s linear infinite;padding-left:4vw}
.bandart .plate{display:none}

/* ---------- cards ---------- */
.cards{background:none;border:0;gap:18px}
.card{border:1px solid var(--rule);border-radius:22px;position:relative;overflow:hidden;
 transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--sand);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(27,40,54,.45);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card .n{font-family:var(--display);font-size:104px;line-height:1;font-weight:800;letter-spacing:-.04em;color:transparent;
 -webkit-text-stroke:1.5px var(--sand);margin-bottom:18px;transition:color .4s}
.card:hover .n{color:var(--sand)}
.cscards .cscard{padding:0 0 30px;border-radius:26px}
.cscard img{aspect-ratio:16/9;border-radius:0;margin:0 0 18px;transition:transform .9s var(--ease)}
.cscard:hover img{transform:scale(1.04)}
.cnum{display:block;margin:0 34px 14px}
.cnum b,.cnum span{display:block}
.cnum span{margin-top:6px}
.cnum b{font-family:var(--display);font-size:64px;font-weight:800;line-height:.95;letter-spacing:-.035em;color:var(--navy);font-stretch:88%}
.cnum span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.cscards .cscard:hover{background:#fff}
.logos .lg{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.logos li:hover .lg{transform:translateY(-6px) rotate(-4deg);box-shadow:0 18px 30px -18px rgba(27,40,54,.45)}

/* ---------- people: arches with a tilt ---------- */
.tm img,.person img.ph{border-radius:50%;transition:transform .7s var(--ease),border-radius .7s var(--ease)}
.tm img,.person img.ph{box-shadow:10px 10px 0 var(--sky)}
.tm:hover img,.person:hover img.ph{transform:rotate(-2deg) scale(1.02)}

/* ---------- case studies page ---------- */
.casethumb img{border-radius:6px;box-shadow:10px 10px 0 var(--sky);transition:transform .8s var(--ease)}
.case:hover .casethumb img{transform:rotate(-3deg) scale(1.03)}
.csstat b{font-family:var(--display);font-weight:800;font-size:68px;letter-spacing:-.035em;font-stretch:88%}


/* ---------- research, vision, events ---------- */
.paper{transition:background .35s,padding .35s var(--ease);border-radius:16px}
.paper:hover{background:#fff;padding-left:16px;padding-right:16px}
.sgcell{transition:background .35s}
.sgcell:hover{background:#EAF4FC}
.sgn{font-family:var(--display);font-weight:800}
.vwrap video,.vwrap img{border-radius:22px}
.vwrap{border-radius:22px;overflow:hidden}

/* ---------- buttons ---------- */
.btn,button.btn{border-radius:999px;padding-left:30px;padding-right:30px;transition:transform .3s var(--ease),background .3s}
.btn::after{content:" \2192";display:inline-block;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(5px)}

/* ---------- bigger closing questions ---------- */
section.tight .narrow.mid>h2:first-child{font-size:clamp(46px,8vw,124px);line-height:.95;letter-spacing:-.04em}
.formsec h2.oneline{font-size:clamp(40px,6.2vw,96px);line-height:.98;letter-spacing:-.04em;white-space:normal;max-width:15ch}
section.tight .narrow.mid{max-width:1100px}

/* ---------- motion ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drift{to{transform:translate(-8vmax,10vmax) scale(1.15)}}
@keyframes blob{50%{border-radius:56% 44% 58% 42%/44% 56% 44% 56%}100%{border-radius:42% 58% 46% 54%/58% 42% 52% 48%}}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes zoomin{from{transform:scale(1.22)}}
@media (prefers-reduced-motion:no-preference){
  .js .hx .w>span{transform:translateY(108%);animation:rise .95s var(--ease) forwards;animation-delay:calc(var(--i)*55ms + 120ms)}
  .js .hxart .hxim{animation:zoomin 1.8s var(--ease) both}
  .js .hxart{animation:fadeup 1.1s var(--ease) .25s both}
  .js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
  .js .rv.seen{opacity:1;transform:none}
  .js .card.rv.seen:hover{transform:translateY(-6px)}
  .js .eyebrow.rv::before{transform:scaleX(0)}
  .js .eyebrow.rv.seen::before{transform:scaleX(1)}
}
@keyframes fadeup{from{opacity:0;transform:translateY(40px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){
  .tk,.bw span{animation:none}
  .tk{flex-wrap:wrap;width:auto}
  .tkg[aria-hidden]{display:none}
  .badge,.hero.hx::before,section:nth-of-type(even) .split .art img{animation:none}
}

/* ---------- small screens ---------- */
@media(max-width:900px){
  .hero.hx{grid-template-columns:1fr;padding:48px 24px 56px;gap:36px}
  .hxart{justify-self:center;width:min(78vw,380px)}
  .badge{left:-18px;bottom:18px;width:104px;height:104px}
  .bandart{height:260px}
}
@media(max-width:640px){
  .hero.hx h1,.hero.hx h1.h1home{font-size:clamp(44px,13vw,66px)}
  .qbar{height:124px}
  .qbar>span{padding:12px}
  .qbar b{font-size:36px}
  .qbar em{font-size:9.5px;letter-spacing:.06em;line-height:1.3}
  .tkg a b{font-size:24px}
  .cnum b{font-size:44px}
  .split .art figcaption{left:6px}
  .card .n{font-size:54px}
}

/* ---------- V2.1: light blue, no arches, bigger and bolder ---------- */
.hero.hx::before{background:radial-gradient(circle at 40% 60%,rgba(159,208,245,.22),rgba(159,208,245,0) 62%)}
.hero.hx{padding-top:84px;padding-bottom:96px}
.hx .w.hl>span{color:var(--sky)}
.eyebrow{font-size:13px}
/* the big results list on Home */
.bigcases{border-top:3px solid var(--ink);margin-top:10px}
.bc{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:10px 44px;align-items:center;
 padding:34px 10px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;overflow:hidden;isolation:isolate}
.bc::before{content:"";position:absolute;inset:0;background:var(--sky);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.bc:hover::before{transform:scaleY(1)}
.bcn b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(72px,11.5vw,180px);line-height:.85;letter-spacing:-.05em;
 color:var(--navy);font-stretch:85%;white-space:nowrap;transition:transform .6s var(--ease)}
.bc:hover .bcn b{transform:translateX(14px)}
.bct{display:grid;gap:8px;min-width:0}
.bcl{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.bc:hover .bcl{color:var(--deep)}
.bct h3{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.15;color:var(--ink)}
.bcp{font-size:16px;color:var(--body)}
.bcgo{width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:24px;color:var(--ink);
 transition:transform .5s var(--ease),background .3s,color .3s}
.bcgo::before{content:"\2192"}
.bc:hover .bcgo{background:var(--ink);color:#fff;transform:rotate(-45deg)}
.bci{position:absolute;right:130px;top:50%;width:260px;aspect-ratio:4/3;object-fit:cover;border-radius:4px;pointer-events:none;
 transform:translateY(-50%) rotate(-6deg) scale(.4);opacity:0;transition:transform .6s var(--ease),opacity .4s;box-shadow:0 24px 50px -20px rgba(0,0,0,.5);z-index:2}
.bc:hover .bci{opacity:1;transform:translateY(-50%) rotate(-6deg) scale(1)}
@media(max-width:900px){.bc{grid-template-columns:1fr auto}.bct{grid-column:1/-1;grid-row:2}.bci{display:none}.bcgo{width:52px;height:52px}}
/* headlines that assemble word by word */
.kin .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.kin .w>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .kin .w>span{transform:translateY(106%);transition:transform .9s var(--ease) calc(var(--i)*45ms)}
  .js .kin.seen .w>span{transform:none}
}
/* a giant word to close every page */
.fgiant{margin:0 0 30px;font-family:var(--display);font-weight:800;font-size:clamp(90px,21vw,340px);line-height:.8;letter-spacing:-.06em;
 color:transparent;-webkit-text-stroke:2px rgba(159,208,245,.7);white-space:nowrap;overflow:hidden;text-align:center;user-select:none}
.foot{padding-top:70px}
/* focus headline on Home, massive */
.split .tx h2{font-size:clamp(40px,5.4vw,84px);line-height:.95;letter-spacing:-.04em}

/* ---------- replaying animations ---------- */
.mp-reset .rv,.mp-reset .kin .w>span,.mp-reset .hx .w.hl>span,.mp-reset .quarter .qhave{transition:none!important}

/* ---------- SERVICES AND PRICING ---------- */
.svtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:34px 0 28px}
.svtabs [role=tab]{font:inherit;text-align:left;cursor:pointer;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:18px;
 padding:18px 20px 20px;display:grid;gap:4px;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),color .35s}
.svtabs [role=tab]::before{content:"";position:absolute;inset:0;background:var(--navy);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.svtabs [role=tab]:hover{transform:translateY(-3px)}
.svtabs [role=tab][aria-selected=true]{color:#fff}
.svtabs [role=tab][aria-selected=true]::before{transform:none}
.svtabs .tn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--sand)}
.svtabs [aria-selected=true] .tn{color:var(--sky)}
.svtabs b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.1vw,30px);line-height:1.02;letter-spacing:-.02em}
.svtabs em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7}
.svgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}

/* the Shift map: which steps each offer covers */
.shiftmap{background:var(--navy);border-radius:26px;padding:26px;color:#fff}
.smhead,.smrow{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:8px;align-items:center}
.smhead span{font-family:var(--display);font-weight:700;font-size:clamp(11px,1.05vw,15px);text-align:center;color:var(--sky);padding-bottom:6px;letter-spacing:-.01em}
.smrow{padding:6px 0;cursor:pointer;transition:opacity .4s}
.smn{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.2vw,17px);line-height:1.1}
.smrow i{display:block;height:58px;border-radius:12px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.smrow i::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease)}
.smrow i:nth-of-type(2)::after{transition-delay:.08s}.smrow i:nth-of-type(3)::after{transition-delay:.16s}
.smrow i:nth-of-type(4)::after{transition-delay:.24s}.smrow i:nth-of-type(5)::after{transition-delay:.32s}
.smrow i.f::after{background:var(--sky)}
.smrow i.s::after{background:repeating-linear-gradient(135deg,var(--sky) 0 6px,transparent 6px 12px)}
.smrow i.t::after{background:radial-gradient(circle,var(--sky) 2.2px,transparent 2.6px) 0 0/11px 11px;border:2px solid var(--sky)}
.shiftmap .smrow i.f::after,.shiftmap .smrow i.s::after,.shiftmap .smrow i.t::after{transform:scaleX(1)}
.shiftmap[data-on] .smrow{opacity:.32}
.shiftmap[data-on="verdict"] .smrow[data-k="verdict"],.shiftmap[data-on="green"] .smrow[data-k="green"],
.shiftmap[data-on="allin"] .smrow[data-k="allin"],.shiftmap[data-on="box"] .smrow[data-k="box"]{opacity:1}
.smrow.play i::after{animation:fillx .8s var(--ease) both}
.smrow.play i:nth-of-type(2)::after{animation-delay:.08s}.smrow.play i:nth-of-type(3)::after{animation-delay:.16s}
.smrow.play i:nth-of-type(4)::after{animation-delay:.24s}.smrow.play i:nth-of-type(5)::after{animation-delay:.32s}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.smkey{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:13px;color:rgba(255,255,255,.8)}
.smkey span{display:inline-flex;align-items:center;gap:8px}
.smkey i{display:inline-block;width:22px;height:14px;border-radius:4px;position:relative;overflow:hidden}
.smkey i.f{background:var(--sky)}
.smkey i.s{background:repeating-linear-gradient(135deg,var(--sky) 0 4px,transparent 4px 8px)}
.smkey i.t{border:1.5px solid var(--sky);background:radial-gradient(circle,var(--sky) 1.5px,transparent 1.9px) 0 0/6px 6px}

/* the chosen offer */
.svp{display:grid;gap:0}
.svsteps{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand);margin:0 0 14px}
.svprice{margin:0 0 18px;display:grid;gap:6px}
.svprice b{font-family:var(--display);font-weight:800;font-size:clamp(76px,9vw,150px);line-height:.82;letter-spacing:-.05em;color:var(--navy);font-stretch:85%}
.svprice span{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.svp h3{font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:6px 0 12px;color:var(--ink)}
.svp p{font-size:17px}
.svlist{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.svlist li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink)}
.svlist li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--sky);box-shadow:inset 0 0 0 5px #fff,0 0 0 2px var(--sky)}
.svaddon{background:var(--sky-pale);border-left:4px solid var(--sky);padding:14px 16px;border-radius:0 12px 12px 0;font-size:15px!important;color:var(--ink)}
.svp .btn{justify-self:start}
.svp.play>*{animation:panelin .6s var(--ease) both}
.svp.play>*:nth-child(2){animation-delay:.05s}.svp.play>*:nth-child(3){animation-delay:.1s}.svp.play>*:nth-child(4){animation-delay:.15s}
.svp.play>*:nth-child(5){animation-delay:.2s}.svp.play>*:nth-child(6){animation-delay:.25s}.svp.play>*:nth-child(7){animation-delay:.3s}
@keyframes panelin{from{opacity:0;transform:translateY(22px)}}

/* Shift in a Box */
.boxsec{background:var(--navy);color:rgba(255,255,255,.86);overflow:hidden}
.boxsec h2{color:#fff}
.boxsec .eyebrow{color:var(--sky)}
.boxgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.venn{position:relative;aspect-ratio:1/1;width:min(100%,480px);justify-self:center}
.vc{position:absolute;width:58%;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;
 font-size:clamp(22px,2.6vw,36px);letter-spacing:-.02em;mix-blend-mode:screen;transition:transform 1.2s var(--ease)}
.v1{left:0;top:0;background:rgba(159,208,245,.55);place-items:start center;padding-top:22%}
.v2{right:0;top:0;background:rgba(47,116,181,.75);place-items:start center;padding-top:22%}
.v3{left:21%;bottom:0;background:rgba(255,255,255,.28);place-items:end center;padding-bottom:20%}
.vcore{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--navy);background:#fff;padding:8px 14px;border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  .js .venn.rv .v1{transform:translate(-22%,-18%)}.js .venn.rv .v2{transform:translate(22%,-18%)}.js .venn.rv .v3{transform:translate(0,24%)}
  .js .venn.rv.seen .vc{transform:none}
}

/* the rules */
.rules3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:3px solid var(--ink)}
.r3{display:grid;gap:10px;padding:28px 26px 10px 0}
.r3+.r3{padding-left:26px;border-left:1px solid var(--rule)}
.r3 b{font-family:var(--display);font-weight:800;font-size:clamp(52px,6.4vw,104px);line-height:.85;letter-spacing:-.05em;color:var(--navy)}
.r3 span{font-size:17px;color:var(--ink);max-width:28ch}

@media(max-width:980px){
  .svtabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svgrid,.boxgrid{grid-template-columns:1fr}
  .rules3{grid-template-columns:1fr}
  .r3+.r3{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
}
@media(max-width:560px){
  .shiftmap{padding:16px;border-radius:18px}
  .smhead,.smrow{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));gap:4px}
  .smhead span{font-size:9.5px}
  .smn{font-size:11.5px}
  .smrow i{height:40px;border-radius:8px}
  .svtabs b{font-size:18px}
}
.svp[hidden]{display:none!important}
.hero.hx h1.hbig{font-size:clamp(64px,11.5vw,190px);line-height:.86}
@media(max-width:640px){.hero.hx h1.hbig{font-size:clamp(56px,17vw,90px)}}
/* highlighted title words: colour only, no underline */
.hx .w.hl>span,.js .hx .w.hl>span,.js .hx.go .w.hl>span{background:none!important}
.r3 b{font-size:clamp(40px,4.6vw,76px)}

/* =====================================================================
   V3 MERGE: the original site's typeface and full-width paintings,
   with the new graphics and motion on top.
   ===================================================================== */
:root{--display:'Aptos Display',Aptos,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
h1,h2,h3{font-stretch:normal}
h2{font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.015em}
h3{font-weight:500;letter-spacing:0}
.split .tx h2{font-size:clamp(36px,4.4vw,64px);line-height:1.04;letter-spacing:-.02em}
section.tight .narrow.mid>h2:first-child{font-size:clamp(42px,6.4vw,96px);line-height:1.02;letter-spacing:-.025em}
.formsec h2.oneline{font-size:clamp(38px,5.4vw,80px);letter-spacing:-.025em}

/* hero: back to the full-width painting, title over it */
.hero.hx{display:flex;align-items:flex-end;min-height:clamp(480px,72vh,680px);padding:64px 54px;gap:0;background:#1B2836}
.hero.hx::before{display:none}
.hero.hx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(100deg,rgba(20,28,38,.86) 0%,rgba(20,28,38,.6) 46%,rgba(20,28,38,.14) 100%)}
.hero.hx .in{position:relative;z-index:2;max-width:980px}
.hxart{position:absolute;inset:0;width:auto;aspect-ratio:auto;margin:0;transform:none;z-index:0;overflow:hidden;justify-self:auto}
.hxart::before{display:none}
.hxart::after{content:"From the Marceau Partners collection";position:absolute;right:0;bottom:0;z-index:3;font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(18,26,36,.55);padding:8px 18px}
.hxart .hxim{width:100%;height:100%;border-radius:0;box-shadow:none;transform:translateY(var(--py,0px)) scale(1.1)}
.hero.hx h1{font-weight:500;font-size:clamp(46px,6.8vw,104px);line-height:1.02;letter-spacing:-.022em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero.hx h1.h1home{font-size:clamp(46px,6.4vw,98px)}
.hero.hx h1.hbig{font-size:clamp(60px,10vw,160px);line-height:.95}
.hx .w{padding-bottom:.12em;margin-bottom:-.12em}

/* big graphic numbers in the original face */
.tkg a b,.qbar b,.card .n,.cnum b,.csstat b,.bcn b,.svprice b,.r3 b,.fgiant,.bw span,.svtabs b,.smn,.smhead span,.sgn,.vc,.vcore{font-family:var(--display);font-stretch:normal}
.bcn b,.svprice b{font-weight:600;letter-spacing:-.035em;line-height:.9}
.tkg a b,.cnum b,.csstat b,.qbar b{font-weight:600;letter-spacing:-.02em}
.r3 b{font-weight:600;letter-spacing:-.03em;line-height:.95}
.card .n{font-weight:300;-webkit-text-stroke:0;color:var(--sand);letter-spacing:-.03em}
.card:hover .n{color:var(--navy)}
.fgiant,.bw span{font-weight:600;letter-spacing:-.03em}
.svtabs b{font-weight:600;letter-spacing:-.01em}
.vc{font-weight:600}

/* paintings and photographs framed as on the original site */
.split .art img,section:nth-of-type(even) .split .art img{border-radius:0;box-shadow:none;aspect-ratio:auto;animation:none;transition:transform 1.2s var(--ease)}
.split .art{overflow:hidden}
.split .art:hover img{transform:scale(1.03);box-shadow:none;border-radius:0}
section:nth-of-type(even) .split .art::before{display:none}
.split .art figcaption{position:static;background:none;color:#98A0A9;transform:none;box-shadow:none;padding:12px 0 0;border-radius:0;max-width:none;
 font-size:11px;letter-spacing:.14em;font-weight:400}
.tm img,.person img.ph{border-radius:0;box-shadow:none}
.tm:hover img,.person:hover img.ph{transform:translateY(-4px)}
.casethumb img{border-radius:0;box-shadow:none}
.case:hover .casethumb img{transform:scale(1.03)}

@media(max-width:900px){
  .hero.hx{padding:40px 24px;min-height:480px}
  .hero.hx::after{background:linear-gradient(180deg,rgba(20,28,38,.25) 0%,rgba(20,28,38,.85) 70%)}
  .hxart{width:auto}
}
@media(max-width:640px){
  .hero.hx h1,.hero.hx h1.h1home{font-size:clamp(40px,11vw,58px)}
  .hero.hx h1.hbig{font-size:clamp(52px,15vw,80px)}
}
/* case study rows: numbers sized to their column, painting opens underneath the row */
.bc{grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;column-gap:40px}
.bcn{min-width:0}
.bcn b{font-size:clamp(56px,6.6vw,104px)}
.bci{position:static;grid-column:1/-1;width:100%;height:0;aspect-ratio:auto;border-radius:0;opacity:0;transform:none;box-shadow:none;
 margin-top:-10px;transition:height .7s var(--ease),opacity .5s,margin .7s var(--ease)}
.bc:hover .bci,.bc:focus-visible .bci{height:260px;opacity:1;transform:none;margin-top:14px}
@media(max-width:900px){.bc{grid-template-columns:1fr auto}.bcn b{font-size:clamp(52px,15vw,84px)}}
/* Home headline on two lines */
.hero.hx h1.h1home{font-size:clamp(38px,5.3vw,84px);line-height:1.06}
.hero.hx .in:has(.h1home){max-width:none}
@media(min-width:901px){.h1home br.mbr{display:none}}
/* "need to do." larger than the rest of the Home headline */
.hero.hx h1.h1home .w.hl{font-size:1.5em;font-weight:600;letter-spacing:-.03em;line-height:.9;vertical-align:baseline}
@media(max-width:640px){.hero.hx h1.h1home .w.hl{font-size:1.3em}}
.hero.hx h1.h1home .w{vertical-align:bottom}
.hero.hx h1.h1home .w.hl{margin-bottom:-.2em}
/* light-blue title words: BIG, but never wider than the screen */
.hero.hx h1 .w{vertical-align:bottom}
.hero.hx h1 .w.hl{font-weight:600;letter-spacing:-.03em;line-height:.88;margin-bottom:-.2em;
 font-size:min(1.9em, calc((100vw - 120px) / (var(--n) * .56)))}
.hero.hx h1.h1home .w.hl{font-size:min(2.1em, calc((100vw - 120px) / 18))}
.hero.hx h1.hbig .w.hl{font-size:min(1.6em, calc((100vw - 120px) / (var(--n) * .56)))}
@media(max-width:640px){
  .hero.hx h1 .w.hl,.hero.hx h1.hbig .w.hl{font-size:min(1.9em, calc((100vw - 56px) / (var(--n) * .58)))}
  .hero.hx h1.h1home .w.hl{font-size:min(1.9em, calc((100vw - 56px) / 6.4))}
}
@media(max-width:640px){.csstats{flex-wrap:wrap;gap:18px 26px}.csstat b{font-size:44px}.casetop{min-width:0}.casetop>*{min-width:0}}
.hero.hx h1.h1home .w.hl{font-size:min(2.1em, calc(10.4vw - 20px))}
@media(max-width:640px){.hero.hx h1.h1home .w.hl{font-size:min(1.9em, calc((100vw - 56px) / 6.4))}}

/* ---------- THE SHIFT, as a picture ---------- */
.shift2{margin-top:34px;display:grid;gap:26px}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:var(--rule);z-index:0}
.steps [role=tab]{position:relative;z-index:1;font:inherit;text-align:left;cursor:pointer;background:#fff;color:var(--ink);border:2px solid var(--navy);
 border-radius:20px;padding:18px 18px 20px;display:grid;gap:6px;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),color .4s}
.steps [role=tab]::before{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.steps [role=tab]:hover{transform:translateY(-4px)}
.steps [aria-selected=true]{color:#fff}
.steps [aria-selected=true]::before{transform:none}
.steps .stn{font-family:var(--display);font-size:clamp(34px,4vw,60px);font-weight:300;line-height:.9;color:var(--sand);letter-spacing:-.03em}
.steps [aria-selected=true] .stn{color:var(--sky)}
.steps b{font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,28px);letter-spacing:-.01em}
.steps em{font-style:normal;font-size:13px;opacity:.75}
.stpanels{background:var(--navy);color:rgba(255,255,255,.88);border-radius:26px;padding:36px 40px;min-height:220px}
.stp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start}
.stp[hidden]{display:none}
.stbig{font-family:var(--display);font-weight:600;font-size:clamp(90px,12vw,190px);line-height:.8;letter-spacing:-.05em;color:var(--sky)}
.stp h3{color:#fff;font-size:clamp(28px,3vw,42px);margin:4px 0 8px}
.stp .sq{font-style:italic;color:var(--sky);margin:0 0 12px;font-size:18px}
.stp p{font-size:17px;max-width:70ch;margin:0}
.stp.play .stbig{animation:stbig .7s var(--ease) both}
.stp.play>div>*{animation:panelin .6s var(--ease) both}
.stp.play>div>*:nth-child(2){animation-delay:.06s}.stp.play>div>*:nth-child(3){animation-delay:.12s}
@keyframes stbig{from{opacity:0;transform:translateY(30px) scale(.8)}}
.effort{display:grid;gap:14px;margin-top:10px}
.effort .sfoot{margin:0 0 6px;max-width:75ch;font-size:17px}
.eflabel{margin:0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--body)}
.efrow{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:center}
.efname{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.efrow.mp .efname{color:var(--sand)}
.efbar{display:flex;height:78px;border-radius:16px;overflow:hidden;background:var(--rule);gap:3px}
.efbar i{flex:0 0 var(--w);display:flex;flex-direction:column;justify-content:center;padding:0 14px;min-width:0;overflow:hidden;white-space:nowrap;font-style:normal}
.efbar i b{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,34px);line-height:1}
.efbar i small{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.8;margin-top:4px}
.e1{background:#B9C8D6;color:var(--ink)}
.e2{background:var(--sky);color:var(--ink)}
.e3{background:var(--navy);color:#fff}
.efrow.mp .e1{background:#D5E0EA}
.efkey{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;color:var(--body);margin-top:4px}
.efkey span{display:inline-flex;align-items:center;gap:8px}
.efkey i{width:22px;height:14px;border-radius:4px;display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .effort.rv .efbar i{flex-basis:0;transition:flex-basis 1.3s var(--ease) .25s}
  .js .effort.rv.seen .efbar i{flex-basis:var(--w)}
  .js .effort.rv .efrow.mp .efbar i{transition-delay:.55s}
}
.mp-reset .effort .efbar i{transition:none!important}
@media(max-width:900px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .steps [role=tab]{padding:12px 8px;border-radius:14px}
  .steps em{display:none}
  .steps b{font-size:14px}
  .steps .stn{font-size:26px}
  .stpanels{padding:24px 20px}
  .stp{grid-template-columns:1fr;gap:6px}
  .stbig{font-size:84px}
  .efrow{grid-template-columns:1fr;gap:6px}
  .efbar{height:62px}
  .efbar i{padding:0 8px}
  .efbar i small{display:none}
}
@media(max-width:560px){.steps [role=tab]{padding:10px 6px}.steps b{font-size:clamp(10.5px,3vw,13px);letter-spacing:-.02em}.steps .stn{font-size:22px}}
/* light-blue title words: three times the white text, on their own line, never wider than the screen */
.hero.hx h1 .w.hl,.hero.hx h1.h1home .w.hl,.hero.hx h1.hbig .w.hl{
 font-size:min(3em, calc((100vw - 120px) / (var(--n) * .56)));line-height:.84;margin-bottom:-.14em;font-weight:600;letter-spacing:-.035em}
.hero.hx h1 .hlbr{display:inline}
.hero.hx .in:has(.w.hl){max-width:none}
@media(max-width:640px){
  .hero.hx h1 .w.hl,.hero.hx h1.h1home .w.hl,.hero.hx h1.hbig .w.hl{font-size:min(3em, calc((100vw - 56px) / (var(--n) * .58)))}
}
/* space between the big blue words */
.hero.hx h1 .w.hl{margin-right:.14em}

/* ---------- case studies, more movement ---------- */
.bcn b{transform:translateX(calc(var(--dx,0px) + var(--hx,0px)));transition:transform .5s var(--ease)}
.bc:hover .bcn b{--hx:14px;transform:translateX(calc(var(--dx,0px) + var(--hx,0px)))}
.bc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--sky);transform:scaleX(0);transform-origin:left;
 transition:transform 1.2s var(--ease) .35s}
.bc.seen::after,.bc:not(.rv)::after{transform:scaleX(1)}
.bcgo{transition:transform .5s var(--ease),background .3s,color .3s}
@media (prefers-reduced-motion:no-preference){
  .js .bc.rv{transform:translateX(-70px)}
  .js .bc.rv.seen{transform:none}
  .js .bc.rv .bcgo{transform:scale(0) rotate(-90deg);transition:transform .7s var(--ease) .5s}
  .js .bc.rv.seen .bcgo{transform:none}
  .js .bc.rv.seen:hover .bcgo{transform:rotate(-45deg)}
  .js .case.rv .casethumb img{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) .15s,transform .8s var(--ease)}
  .js .case.rv.seen .casethumb img{clip-path:inset(0 0 0 0)}
  .js .case.rv .casehd h2,.js .case.rv .csclient{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
  .js .case.rv.seen .casehd h2,.js .case.rv.seen .csclient{opacity:1;transform:none}
  .case3:not([hidden])>div{animation:panelin .7s var(--ease) both}
  .case3:not([hidden])>div:nth-child(2){animation-delay:.12s}
  .case3:not([hidden])>div:nth-child(3){animation-delay:.24s}
}
.csstat b{display:inline-block;transform:translateX(var(--dx,0px));transition:transform .5s var(--ease)}
.mp-reset .bc,.mp-reset .bc::after,.mp-reset .case .casethumb img,.mp-reset .case .casehd h2,.mp-reset .case .csclient,.mp-reset .bc .bcgo{transition:none!important}
.csstat b{transform:none}

/* ---------- EVENTS: padel rackets and chess pieces cut from the paintings ---------- */
.evstage{position:relative;margin:0 auto 34px;max-width:560px;pointer-events:auto}
.evpadel{height:260px}
.racket{position:absolute;top:10px;width:120px;height:222px;overflow:visible;filter:drop-shadow(0 16px 20px rgba(27,40,54,.28))}
.racket.rl{left:8%;transform:rotate(-16deg);transform-origin:50% 90%}
.racket.rr{right:8%;transform:rotate(16deg);transform-origin:50% 90%}
.ballx{position:absolute;left:50%;top:60px;width:0;height:0}
.bally{position:absolute;left:-17px;top:0}
.ball{width:34px;height:34px;display:block}
.evchess{height:190px;display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:0 4%}
.board{position:absolute;left:0;right:0;bottom:0;height:34px;border-radius:8px;
 background:repeating-conic-gradient(var(--navy) 0 25%,#DFE6EE 0 50%) 0 0/34px 34px;opacity:.9}
.piece{position:relative;width:15%;max-width:84px;height:auto;margin-bottom:14px;overflow:visible;filter:drop-shadow(0 12px 14px rgba(27,40,54,.3));
 transition:transform .4s var(--ease)}
.piece:hover{transform:translateY(-12px) rotate(-6deg)}
.p-king{width:17%;max-width:96px}
@media (prefers-reduced-motion:no-preference){
  .js .evstage.rv{opacity:1;transform:none}
  .js .evpadel.rv .racket{opacity:0;transition:transform 1s cubic-bezier(.34,1.56,.64,1),opacity .5s}
  .js .evpadel.rv .rl{transform:translateX(-80px) rotate(-70deg) scale(.4)}
  .js .evpadel.rv .rr{transform:translateX(80px) rotate(70deg) scale(.4);transition-delay:.12s}
  .js .evpadel.rv.seen .racket{opacity:1}
  .js .evpadel.rv.seen .rl{transform:rotate(-16deg);animation:swingl 2.6s ease-in-out 1.1s infinite}
  .js .evpadel.rv.seen .rr{transform:rotate(16deg);animation:swingr 2.6s ease-in-out 1.1s infinite}
  .js .evpadel.rv .ballx{opacity:0;transition:opacity .4s .9s}
  .js .evpadel.rv.seen .ballx{opacity:1;animation:ballx 2.6s ease-in-out 1.1s infinite}
  .js .evpadel.rv.seen .bally{animation:bally 1.3s ease-in-out 1.1s infinite}
  .js .evpadel.rv.seen .ball{animation:spin 1.3s linear infinite}
  .js .evchess.rv .piece{opacity:0;transform:translateY(80px) scale(.6);transition:transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*.12s),opacity .4s calc(var(--i)*.12s)}
  .js .evchess.rv.seen .piece{opacity:1;transform:none}
  .js .evchess.rv.seen .piece:hover{transform:translateY(-12px) rotate(-6deg)}
  .js .evchess.rv.seen .p-knight{animation:knight 5s var(--ease) 1.6s infinite}
  .js .evchess.rv .board{transform:scaleX(0);transition:transform 1s var(--ease)}
  .js .evchess.rv.seen .board{transform:none}
}
@keyframes swingl{0%,100%{transform:rotate(-16deg)}45%{transform:rotate(-2deg)}55%{transform:rotate(-24deg)}}
@keyframes swingr{0%,100%{transform:rotate(16deg)}45%{transform:rotate(24deg)}55%{transform:rotate(2deg)}}
@keyframes ballx{0%,100%{transform:translateX(-150px)}50%{transform:translateX(150px)}}
@keyframes bally{0%,100%{transform:translateY(40px)}50%{transform:translateY(-40px)}}
@keyframes knight{0%,70%,100%{transform:none}78%{transform:translate(0,-60px) rotate(-10deg)}86%{transform:translate(40px,-40px) rotate(8deg)}94%{transform:none}}
.mp-reset .evstage *{transition:none!important}
@media(max-width:560px){
  .evpadel{height:200px}
  .racket{width:90px;height:166px}
  .racket.rl{left:2%}.racket.rr{right:2%}
  @keyframes ballx{0%,100%{transform:translateX(-95px)}50%{transform:translateX(95px)}}
  .evchess{height:150px}
}
/* flush left edge for the big light-blue words */
.hero.hx h1 .hlbr + .w.hl{margin-left:-.045em}
/* chess pieces a little larger */
.evchess{height:240px}.piece{max-width:104px}.p-king{max-width:118px}
@media(max-width:560px){.evchess{height:170px}}
/* blue words back on the same line as the rest of the title */
.hero.hx h1 .hlbr{display:none!important}
.hero.hx h1 .hlbr + .w.hl{margin-left:0}
.hero.hx .in{flex:1 1 auto;width:100%;min-width:0}
.hero.hx h1{text-wrap:wrap}
.hero.hx h1 .w.hl{margin-right:0}
.hero.hx h1 .w.hl + .w.hl{margin-left:.12em}
.hero.hx h1.hl-own .hlbr{display:inline!important}

/* ---------- moving Shift banner at the foot of every page ---------- */
.foot{padding-top:0}
.footband{position:relative;display:block;height:clamp(180px,24vw,300px);overflow:hidden;width:100vw;margin:0 calc(50% - 50vw) 46px}
.footband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(var(--py,0px)) scale(1.18)}
.footband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,40,54,.1),rgba(27,40,54,.55))}
.footband .bw{z-index:2}

/* ---------- consultants and experts: lean, lift and drift ---------- */
.tm,.person{transition:transform .6s var(--ease)}
.tm img,.person img.ph{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tm.tilt,.js .tm.rv.seen.tilt,.person.tilt,.js .person.rv.seen.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)}
.tm.tilt img,.person.tilt img.ph{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.03);
 box-shadow:calc(var(--mx,0px) * -1) calc(var(--my,0px) * -1 + 14px) 0 var(--sky)}
.tm.tilt .tmname,.person.tilt h3{color:var(--sand)}
.tm blockquote,.person blockquote{transition:transform .6s var(--ease)}
.tm.tilt blockquote,.person.tilt blockquote{transform:translateX(6px)}
@media (prefers-reduced-motion:no-preference){
  .js .tm.rv:nth-child(odd),.js .person.rv:nth-child(odd){transform:translateY(40px) rotate(-3deg)}
  .js .tm.rv:nth-child(even),.js .person.rv:nth-child(even){transform:translateY(60px) rotate(3deg)}
  .js .tm.rv.seen,.js .person.rv.seen{transform:none}
  .tm img,.person img.ph{animation:bob 5s ease-in-out infinite}
  .tm:nth-child(2n) img,.person:nth-child(2n) img.ph{animation-delay:-1.6s}
  .tm:nth-child(3n) img,.person:nth-child(3n) img.ph{animation-delay:-3.1s}
  .tm.tilt img,.person.tilt img.ph{animation-play-state:paused}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ---------- CASE STUDIES page: each case as a poster ---------- */
main{counter-reset:cs}
.case{counter-increment:cs}
.case .casetop{grid-template-columns:minmax(0,1fr);gap:0;position:relative;align-items:stretch}
.case .casethumb{grid-area:1/1;position:relative;overflow:hidden;border-radius:26px 26px 0 0;margin:0}
.case .casethumb img{width:100%!important;aspect-ratio:21/8;object-fit:cover;display:block;transform:translateY(var(--py,0px)) scale(1.12)}
.case .casethumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,28,38,.9) 0%,rgba(20,28,38,.35) 55%,rgba(20,28,38,.05) 100%)}
.case .csstats{grid-area:1/1;align-self:end;justify-self:start;z-index:2;border-left:0;padding:0 40px 30px;gap:56px;flex-wrap:wrap}
.case .csstat b{color:#fff;font-size:clamp(64px,9.4vw,156px);font-weight:600;letter-spacing:-.045em;line-height:.85;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.case .csstat span{color:var(--sky);font-size:13px;max-width:26ch;margin-top:12px}
.case .casehd{grid-area:2/1;background:#fff;border-radius:0 0 26px 26px;padding:30px 40px 34px 40px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;align-items:start;
 box-shadow:0 30px 60px -40px rgba(27,40,54,.5)}
.case .casehd::before{content:counter(cs,decimal-leading-zero);grid-row:1/4;font-family:var(--display);font-weight:300;font-size:clamp(70px,8vw,120px);line-height:.85;color:var(--sky);letter-spacing:-.04em}
.case .casehd>*{grid-column:2}
.case h2{font-size:clamp(26px,2.8vw,40px);max-width:none}
.case .csmore{margin-top:26px}
.case:hover .casethumb img{transform:translateY(var(--py,0px)) scale(1.18);transition:transform 1.4s var(--ease)}
.case .casethumb img{transition:transform 1.4s var(--ease),clip-path 1.2s var(--ease) .15s}
@media (prefers-reduced-motion:no-preference){
  .js .case.rv .csstat{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s}
  .js .case.rv .csstat+.csstat{transition-delay:.7s}
  .js .case.rv.seen .csstat{opacity:1;transform:none}
  .js .case.rv .casehd::before{opacity:0;transform:scale(.4);display:block;transition:opacity .6s .4s,transform .9s cubic-bezier(.34,1.56,.64,1) .4s}
  .js .case.rv.seen .casehd::before{opacity:1;transform:none}
}
.mp-reset .case .csstat,.mp-reset .case .casehd::before{transition:none!important}
@media(max-width:760px){
  .case .casethumb img{aspect-ratio:4/3}
  .case .csstats{padding:0 20px 20px;gap:22px}
  .case .csstat b{font-size:clamp(46px,14vw,70px)}
  .case .casehd{padding:22px 20px 26px;grid-template-columns:1fr}
  .case .casehd::before{grid-row:auto;font-size:56px;margin-bottom:6px}
  .case .casehd>*{grid-column:1}
}

/* ---------- padel rally: ball meets each racket face exactly as it swings ---------- */
.evpadel{--reach:128px;--rally:2.2s}
.ballx{top:60px}
@media (prefers-reduced-motion:no-preference){
  .js .evpadel.rv.seen .rl{animation:hitl var(--rally) linear 1.1s infinite}
  .js .evpadel.rv.seen .rr{animation:hitr var(--rally) linear 1.1s infinite}
  .js .evpadel.rv.seen .ballx{animation:rallyx var(--rally) linear 1.1s infinite}
  .js .evpadel.rv.seen .bally{animation:rallyy calc(var(--rally) / 2) linear 1.1s infinite}
  .js .evpadel.rv.seen .ball{animation:spin calc(var(--rally) / 2) linear 1.1s infinite}
}
@keyframes rallyx{0%{transform:translateX(calc(var(--reach) * -1))}50%{transform:translateX(var(--reach))}100%{transform:translateX(calc(var(--reach) * -1))}}
@keyframes rallyy{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.6,.5,1)}50%{transform:translateY(-78px);animation-timing-function:cubic-bezier(.5,0,.7,.4)}100%{transform:translateY(0)}}
/* left racket strikes at 0% (and 100%), right racket at 50% */
@keyframes hitl{0%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 14%{transform:rotate(-18deg)}70%{transform:rotate(-20deg);animation-timing-function:ease-in}
 88%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}100%{transform:rotate(-2deg)}}
@keyframes hitr{0%{transform:rotate(18deg)}20%{transform:rotate(20deg);animation-timing-function:ease-in}
 38%{transform:rotate(30deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}50%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 64%{transform:rotate(18deg)}100%{transform:rotate(18deg)}}
@media(max-width:560px){.evpadel{--reach:60px}.ballx{top:42px}}
.evpadel{--reach:113px}
@media(max-width:560px){.evpadel{--reach:38px}.ball{width:28px;height:28px}.bally{left:-14px}}
/* ball meets the centre of each racket face */
.ballx{top:78px}
@media(max-width:560px){.ballx{top:54px}}
.ballx{top:75px}@media(max-width:560px){.ballx{top:54px}}

/* =====================================================================
   V4
   ===================================================================== */

/* ---------- top bar: bigger, name centred over the menu, Contact at the side ---------- */
@media(min-width:701px){
  .nav{flex-direction:column;align-items:center;justify-content:center;padding:26px 54px 0;gap:0}
  .brand{margin:0 0 16px;font-size:clamp(30px,2.8vw,40px);border-bottom:0!important;padding-bottom:0}
  .navlinks{justify-content:center;gap:34px;padding-bottom:16px}
  .nav a.navcta{position:absolute;right:54px;top:30px;margin:0}
}
@media(min-width:701px) and (max-width:1060px){.nav a.navcta{right:26px;top:24px}.navlinks{gap:22px}}
@media(max-width:700px){
  .nav{justify-content:center;position:sticky}
  .brand{margin:0 auto;font-size:24px}
  .navtoggle{position:absolute;right:18px;top:14px}
  .navlinks{order:3}
}

/* ---------- page titles: smaller and to the left, same blue-to-white ratio ---------- */
.hero.hx{min-height:clamp(380px,56vh,560px);padding-top:52px;padding-bottom:56px}
.hero.hx h1,.hero.hx h1.h1home,.hero.hx h1.hbig{font-size:clamp(32px,3.9vw,58px);line-height:1.06}
@media(max-width:640px){.hero.hx h1,.hero.hx h1.h1home,.hero.hx h1.hbig{font-size:clamp(30px,8.4vw,40px)}}

/* ---------- image fully behind the text ---------- */
section.bgsec{position:relative;padding:0!important;background:#1B2836!important;overflow:hidden}
.bgsec .wrap{max-width:none}
.bgsec .split,.bgsec .split.rev{display:block;position:relative;min-height:min(92vh,860px)}
.bgsec .split .art{position:absolute;inset:0;margin:0;overflow:hidden;z-index:0}
.bgsec .split .art img,.bgsec section:nth-of-type(even) .split .art img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;box-shadow:none;animation:none;
 transform:translateY(var(--py,0px)) scale(1.18)}
.bgsec .split .art:hover img{transform:translateY(var(--py,0px)) scale(1.18)}
.bgsec .split .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,28,38,.92) 0%,rgba(20,28,38,.78) 42%,rgba(20,28,38,.2) 100%)}
.bgsec .split .art figcaption{position:absolute;right:18px;bottom:14px;z-index:2;color:rgba(255,255,255,.7);padding:0}
.bgsec .split .tx{position:relative;z-index:2;max-width:640px;padding:110px 0;margin-left:max(54px,calc((100vw - 1180px) / 2));color:rgba(255,255,255,.86)}
.bgsec .split .tx h2{color:#fff}
.bgsec .split .tx strong{color:#fff}
.bgsec .split .tx .eyebrow{color:var(--sky)}
.bgsec .split .tx p[style]{color:#fff!important;border-left-color:var(--sky)!important}
.bgsec .split .tx a{color:var(--sky)}
.js .bgsec .split .art.rv{opacity:1;transform:none}
@media(max-width:760px){
  .bgsec .split .tx{padding:80px 24px;margin-left:0}
  .bgsec .split .art::after{background:linear-gradient(180deg,rgba(20,28,38,.7),rgba(20,28,38,.9))}
}

/* ---------- text, then the painting grows to fill the screen ---------- */
section.xsec{padding-bottom:0!important;overflow:hidden}
.xsec .split,.xsec .split.rev{display:block}
.xsec .split .tx{max-width:760px;margin:0 auto 56px}
.xsec .split .art{position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);height:min(88vh,860px);overflow:hidden;
 clip-path:inset(0 calc((1 - var(--xp,0)) * 16%) round calc((1 - var(--xp,0)) * 28px))}
.xsec .split .art img,.xsec section:nth-of-type(even) .split .art img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;box-shadow:none;animation:none;
 transform:scale(calc(1.22 - var(--xp,0) * .22));transition:none}
.xsec .split .art:hover img{transform:scale(calc(1.22 - var(--xp,0) * .22))}
.xsec .split .art figcaption{position:absolute;left:max(24px,calc((100vw - 1180px) / 2));bottom:20px;color:rgba(255,255,255,.85);padding:0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.js .xsec .split .art.rv{opacity:1;transform:none}

/* ---------- consultants and experts: frames stay still, the picture moves inside ---------- */
.tm img,.person img.ph,.tm:nth-child(2n) img,.tm:nth-child(3n) img,.person:nth-child(2n) img.ph,.person:nth-child(3n) img.ph{animation:none!important;translate:none}
.tm.tilt,.person.tilt,.js .tm.rv.seen.tilt,.js .person.rv.seen.tilt{transform:none}
.js .tm.rv:nth-child(odd),.js .person.rv:nth-child(odd),.js .tm.rv:nth-child(even),.js .person.rv:nth-child(even){transform:translateY(24px)}
.js .tm.rv.seen,.js .person.rv.seen{transform:none}
.phw{display:block;position:relative;overflow:hidden;margin-bottom:20px}
.phw img,.person .phw img.ph{display:block;width:100%;margin:0!important;box-shadow:none!important;transition:transform .9s var(--ease),filter .6s}
.phw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.phw:hover::after{transform:scaleX(1)}
.phw.live img,.phw:hover img{transform:scale(1.12) translate(var(--mx,0px),var(--my,0px))!important;filter:contrast(1.08)}
.tm:hover .tmname,.person:hover h3{color:var(--sand)}

/* ---------- Our people: the roles as a picture ---------- */
.roles{list-style:none;margin:26px auto 40px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:980px}
.roles li{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,24px);padding:12px 22px;border-radius:999px;border:2px solid var(--navy);color:var(--navy);background:#fff;
 transition:transform .4s var(--ease),background .3s,color .3s}
.roles li:nth-child(3n+1){background:var(--navy);color:#fff}
.roles li:nth-child(3n+2){background:var(--sky);border-color:var(--sky);color:var(--deep)}
.roles li:hover{transform:translateY(-5px) rotate(-2deg)}
@media (prefers-reduced-motion:no-preference){
  .js .roles.rv{opacity:1;transform:none}
  .js .roles.rv li{opacity:0;transform:translateY(24px) scale(.8);transition:opacity .5s calc(var(--i) * 70ms),transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 70ms)}
  .js .roles.rv.seen li{opacity:1;transform:none}
  .js .roles.rv.seen li:hover{transform:translateY(-5px) rotate(-2deg)}
}

/* ---------- Our purpose: human and people ---------- */
.purpose h2 em.blue{font-style:normal;color:var(--sand)}
.hpwords{display:grid;gap:0;margin:0 0 30px;overflow:hidden;pointer-events:none;user-select:none}
.hpwords span{font-family:var(--display);font-weight:600;font-size:clamp(90px,17vw,250px);line-height:.86;letter-spacing:-.05em;white-space:nowrap}
.hw1{color:var(--sky);transform:translateX(calc(var(--sx,0vw) * -1))}
.hw2{color:transparent;-webkit-text-stroke:2px var(--navy);justify-self:end;transform:translateX(var(--sx,0vw))}
.js .hpwords.rv{opacity:1;transform:none}

/* ---------- Tara, big on Home ---------- */
.home .vids.tara-one,.page[data-p="home"] .vids.tara-one{width:min(1180px,calc(100vw - 48px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin-top:46px}
.home .vids.tara-one .vid,.page[data-p="home"] .vids.tara-one .vid{max-width:none}
.home .vids.tara-one .vwrap,.page[data-p="home"] .vids.tara-one .vwrap{border-radius:26px}
.home .vids.tara-one .vcap,.page[data-p="home"] .vids.tara-one .vcap{font-size:16px}

/* ---------- more client logos ---------- */
.logos .lg-eu img{max-width:72px;max-height:72px;border-radius:6px}
.logos img[src*="aeltc"]{max-height:92px;max-width:92px}
.logos img[src*="davidlloyd"]{max-width:104px}
@media(max-width:640px){.logos img[src*="aeltc"]{max-height:74px}.logos .lg-eu img{max-width:60px}}
.xsec .split,.xsec .split.rev{display:flex;flex-direction:column}
.xsec .split .tx{order:0}.xsec .split .art{order:1}
.xsec .split .art{align-self:flex-start}.xsec .split .tx{align-self:center;width:100%}
.bgsec .split .tx h3,.bgsec .split .tx .subh{color:var(--sky)}
/* "Tools that stay when we leave": text centred in the section, painting evenly darkened behind */
.bgsec.bgcentre .split,.bgsec.bgcentre .split.rev{display:flex;align-items:center;justify-content:center}
.bgsec.bgcentre .split .tx{margin:0 auto;max-width:780px;text-align:center;padding:110px 24px}
.bgsec.bgcentre .split .tx h2,.bgsec.bgcentre .split .tx h3,.bgsec.bgcentre .split .tx p{margin-left:auto;margin-right:auto}
.bgsec.bgcentre .split .art::after{background:radial-gradient(ellipse at center,rgba(20,28,38,.86) 0%,rgba(20,28,38,.72) 60%,rgba(20,28,38,.55) 100%)}
@media(max-width:900px){.bgsec.bgcentre .split .tx{padding:80px 24px}}
.bgsec.bgcentre .split .tx h2,.bgsec.bgcentre .split .tx h3{text-align:center!important}
.bgsec.bgcentre .split .art figcaption{left:auto!important;right:18px!important;text-align:right}
@media(min-width:701px){.nav a.brand{font-size:clamp(30px,2.7vw,40px);opacity:1;border-bottom:0;padding-bottom:0}}
@media(max-width:700px){.nav a.brand{font-size:24px}}
@media(max-width:700px){.nav{padding-left:92px;padding-right:92px}.nav a.brand{font-size:20px}.navtoggle{right:16px;top:12px;padding:8px 12px}.navlinks.open{margin-left:-76px;margin-right:-76px;width:calc(100% + 152px)}}
/* page titles a size smaller again, blue-to-white proportion kept */
.hero.hx h1,.hero.hx h1.h1home,.hero.hx h1.hbig{font-size:clamp(26px,2.8vw,42px)}
@media(max-width:640px){.hero.hx h1,.hero.hx h1.h1home,.hero.hx h1.hbig{font-size:clamp(24px,6.6vw,32px)}}
@media(max-width:900px){.hero.hx .in{max-width:76%}}

/* tennis painting: the whole picture, uncropped, over a soft wash of itself */
.xsec .split .art.full{background:#cfd6dc}
.xsec .split .art.full img.fullbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(38px) saturate(1.15);transform:scale(1.2);opacity:.85}
.xsec .split .art.full img.fullim,.xsec .split .art.full:hover img.fullim{position:relative;display:block;width:100%;height:100%;object-fit:contain;
 transform:scale(calc(1.06 - var(--xp,0) * .06));filter:drop-shadow(0 24px 48px rgba(10,24,48,.28))}
@media(max-width:700px){.xsec .split .art.full{height:auto;aspect-ratio:9/10}}

/* ---------- footer band: the painting lives inside the moving letters ---------- */
.footband{background:#22303E;height:clamp(150px,19vw,260px)}
.footband::after{display:none}
.footband .bw span{color:transparent;-webkit-text-stroke:0;font-weight:800;letter-spacing:-.035em;
 background:url(../img/hero-cases.jpg) 0 50%/auto 150% repeat-x;-webkit-background-clip:text;background-clip:text;
 filter:saturate(1.3) contrast(1.05)}

/* ---------- "Disagree with us? Good. Tell us." a size smaller ---------- */
.formsec h2.oneline{font-size:clamp(28px,3.3vw,50px);letter-spacing:-.02em;line-height:1.05}

/* ---------- services: the five steps, explained ---------- */
.steps5sec{background:var(--paper)}
.steps5sec h2{max-width:22ch}
.s5intro{max-width:60ch;font-size:18px;color:var(--body);margin:0 0 34px}
.steps5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:none}
.steps5 li{position:relative;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:6px;
 transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.steps5 li::before{content:"";position:absolute;left:20px;right:20px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--sky);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease)}
.steps5.seen li::before{transform:scaleX(1)}
.steps5 li:nth-child(2)::before{transition-delay:.08s}.steps5 li:nth-child(3)::before{transition-delay:.16s}.steps5 li:nth-child(4)::before{transition-delay:.24s}.steps5 li:nth-child(5)::before{transition-delay:.32s}
.steps5 li:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(24,33,43,.45);background:var(--navy)}
.steps5 li:hover b,.steps5 li:hover .s5d{color:#fff}.steps5 li:hover em{color:var(--sky)}
.s5n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--sand);letter-spacing:.08em}
.steps5 b{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.steps5 em{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.s5d{font-size:15px;line-height:1.5;color:var(--body);margin-top:6px}
@media(max-width:1000px){.steps5{grid-template-columns:repeat(2,minmax(0,1fr))}.steps5 li:last-child{grid-column:1/-1}}
@media(max-width:560px){.steps5{grid-template-columns:1fr}}

/* ---------- services: all four side by side ---------- */
.cmpsec{background:var(--paper)}
.cmpwrap{overflow-x:auto;margin-top:30px;border-radius:24px;background:#fff;border:1px solid var(--rule)}
.cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:15.5px;line-height:1.45}
.cmp th,.cmp td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em;padding:22px 20px}
.cmp thead th:last-child{background:#22303E;color:var(--sky)}
.cmp tbody th{width:16%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);font-weight:700}
.cmp td{color:var(--ink);width:21%}
.cmp td b{font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.cmp small{display:block;font-size:13px;color:var(--body);margin-top:8px}
.cmp tbody tr{transition:background .3s}.cmp tbody tr:hover{background:#F7FAFD}
.cmpills{display:flex;gap:4px}
.cmpills i{flex:1;height:14px;border-radius:5px;background:var(--rule)}
.cmpills i.f{background:var(--sky)}
.cmpills i.s{background:repeating-linear-gradient(135deg,var(--sky) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--sky)}
.cmpills i.t{background:radial-gradient(circle,#2F74B5 1.6px,transparent 2px) 0 0/7px 7px;box-shadow:inset 0 0 0 1.5px #2F74B5}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:640px){.cmp{font-size:14.5px}.cmp th,.cmp td{padding:14px}}
.steps5sec .s5intro{margin:0 auto 34px;text-align:center}
.steps5sec h2,.cmpsec h2{margin-left:auto;margin-right:auto}
.formsec h2.oneline{max-width:none}
@media(max-width:700px){
  .cmpwrap{overflow:visible;background:none;border:0;border-radius:0}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto;min-width:0}
  .cmp thead{display:none}
  .cmp tbody tr{background:#fff;border:1px solid var(--rule);border-radius:18px;margin-bottom:12px;padding:6px 0;display:grid;grid-template-columns:1fr 1fr}
  .cmp tbody th{grid-column:1/-1;border-bottom:1px solid var(--rule);padding:12px 14px}
  .cmp td{border-bottom:0;padding:12px 14px}
  .cmp td::before{content:attr(data-l);display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);margin-bottom:4px}
  .cmp td[data-l="Software"]::before{color:#2F74B5}
}
@media(max-width:700px){.cmp tbody th,.cmp td{width:auto}}

/* ---------- Our Vision: Tara, two videos, nice and big ---------- */
.vids.tarabig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;width:min(1400px,calc(100vw - 48px));max-width:none;
 position:relative;left:50%;transform:translateX(-50%);margin:46px 0 0}
.vids.tarabig .vcap{text-align:center;font-size:16px}
@media(max-width:900px){.vids.tarabig{grid-template-columns:1fr;width:min(760px,calc(100vw - 32px))}}
.vids.tarabig.one{grid-template-columns:1fr;width:min(1240px,calc(100vw - 48px))}
.vids.tarabig.one .vwrap{border-radius:26px}
@media(max-width:900px){.vids.tarabig.one{width:calc(100vw - 32px)}.bcn b{font-size:clamp(44px,12vw,72px)!important;transform:none!important}}
/* ball strikes the very centre of each racket face (measured) */
.evpadel{--reach:180px}.ballx{top:59px;z-index:3}
@media(max-width:560px){.evpadel{--reach:94px}.ballx{top:45px}}
/* keep the ball's arc inside the stage now it strikes the racket centres */
@keyframes rallyy{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.6,.5,1)}50%{transform:translateY(-52px);animation-timing-function:cubic-bezier(.5,0,.7,.4)}100%{transform:translateY(0)}}
@media(max-width:560px){@keyframes rallyy{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.6,.5,1)}50%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.5,0,.7,.4)}100%{transform:translateY(0)}}}

/* Standard+ on the Shift map: the three steps, plus tools built for the client */
.smrow .smplus{grid-area:1/5/2/7;align-self:stretch;display:flex;align-items:center;justify-content:center;border:2px dashed var(--sky);border-radius:12px;
 color:var(--sky);font-family:var(--display);font-weight:700;font-size:clamp(12px,1.1vw,15px);letter-spacing:.02em;z-index:1;background:rgba(159,208,245,.08)}
.smrow i{grid-row:1}
/* Software section: a plain, bold statement now the Venn has gone */
.boxgrid.solo{grid-template-columns:1fr;max-width:860px;margin:0 auto;text-align:center}
.boxgrid.solo h2{font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;margin-left:auto;margin-right:auto}
.boxgrid.solo p:not(.eyebrow){max-width:56ch;margin-left:auto;margin-right:auto;font-size:18px}
.smrow .smn{grid-area:1/1/2/2}
.smrow i:nth-of-type(1){grid-column:2}.smrow i:nth-of-type(2){grid-column:3}.smrow i:nth-of-type(3){grid-column:4}.smrow i:nth-of-type(4){grid-column:5}.smrow i:nth-of-type(5){grid-column:6}

/* ---------- closing questions ("What change do you keep putting off?", "Make the shift.") at normal heading size ---------- */
section.tight .narrow.mid>h2:first-child{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.015em}

/* ---------- Who We Are: what we measure people by, set as type rather than boxes ---------- */
.values{list-style:none;margin:38px auto 36px;padding:0;max-width:900px;border-top:1px solid var(--rule)}
.values li{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 16px;padding:20px 8px;border-bottom:1px solid var(--rule);
 position:relative;transition:background .4s var(--ease)}
.values .vn{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;font-size:13px;color:var(--sand);letter-spacing:.08em}
.values b{font-family:'Bricolage',var(--display);font-weight:800;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.035em;color:var(--navy);
 font-variation-settings:"wdth" 85;transition:color .4s,letter-spacing .5s var(--ease)}
.values em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(19px,2vw,28px);color:#2F74B5;line-height:1.2}
.values li:nth-child(even) b{color:transparent;-webkit-text-stroke:1.6px var(--navy)}
.values li:hover{background:linear-gradient(90deg,transparent,rgba(159,208,245,.28),transparent)}
.values li:hover b{color:#2F74B5;-webkit-text-stroke:0;letter-spacing:-.015em}
@media(max-width:640px){.values .vn{position:static;transform:none;width:100%;text-align:center}.values li{padding:16px 4px}}
@media(prefers-reduced-motion:no-preference){
  .js .values.rv li{opacity:0;transform:translateX(-40px);transition:opacity .6s var(--ease),transform .8s var(--ease),background .4s}
  .js .values.rv li:nth-child(even){transform:translateX(40px)}
  .js .values.rv.seen li{opacity:1;transform:none}
  .js .values.rv.seen li:nth-child(2){transition-delay:.08s}.js .values.rv.seen li:nth-child(3){transition-delay:.16s}
  .js .values.rv.seen li:nth-child(4){transition-delay:.24s}.js .values.rv.seen li:nth-child(5){transition-delay:.32s}
}

/* ---------- Our Vision: why the change that matters keeps waiting ---------- */
section.waitsec{background:var(--navy);color:rgba(255,255,255,.82);text-align:center}
.waitsec h2{color:#fff;margin-left:auto;margin-right:auto;max-width:18ch}
.waitsec .eyebrow{color:var(--sky)}
.waitlede{font-size:clamp(19px,1.8vw,24px);color:#fff;max-width:40ch;margin:18px auto 46px}
.waitstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left}
.ws{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;
 transition:transform .4s var(--ease),background .4s}
.ws:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
.ws b{font-family:var(--display);font-weight:700;font-size:clamp(58px,6.4vw,104px);line-height:.9;letter-spacing:-.045em;color:var(--sky)}
.ws .wsk{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:-4px}
.ws span:last-child{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.ws.hot{background:var(--sky);border-color:var(--sky)}
.ws.hot b{color:var(--navy)}.ws.hot span:last-child{color:var(--ink)}
.waitwhy{max-width:900px;margin:70px auto 0}
.waitwhy h3{color:#fff;font-family:var(--display);font-size:clamp(24px,2.4vw,34px);margin-bottom:22px}
.stalls{list-style:none;margin:0 0 40px;padding:0;counter-reset:st;text-align:left}
.stalls li{counter-increment:st;display:flex;gap:22px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);
 font-family:var(--display);font-weight:600;font-size:clamp(21px,2.3vw,32px);line-height:1.2;color:#fff;letter-spacing:-.015em}
.stalls li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.stalls li::before{content:counter(st,decimal-leading-zero);font-size:14px;font-weight:700;color:var(--sky);letter-spacing:.08em;flex:0 0 auto;transform:translateY(-4px)}
.waitbig{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em;color:var(--sky);max-width:20ch;margin:0 auto 28px}
.waitwhy p{max-width:62ch;margin-left:auto;margin-right:auto}
.waitend{color:#fff;font-weight:600;margin-bottom:0}
@media(max-width:1000px){.waitstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.waitstats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  .js .stalls.rv li{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js .stalls.rv.seen li{opacity:1;transform:none}
  .js .stalls.rv.seen li:nth-child(2){transition-delay:.1s}.js .stalls.rv.seen li:nth-child(3){transition-delay:.2s}.js .stalls.rv.seen li:nth-child(4){transition-delay:.3s}
}

/* ---------- Our Vision: "How the model works in practice", a bright blue break without the painting ---------- */
section.bluesec{background:#2F74B5;color:rgba(255,255,255,.9)}
.bluesec h2{color:#fff}
.bluesec p:last-child{color:#fff;font-weight:600;font-size:clamp(19px,1.7vw,23px);margin-bottom:0}

/* no rule before the small section labels */
.eyebrow::before{content:none!important;display:none!important}


.rd{font:inherit;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
background:none;color:inherit;border:1px solid currentColor;border-radius:2px;padding:.5em .9em}
.rd:hover{background:#A97829;border-color:#A97829;color:#fff}
#rdr{position:fixed;inset:0;z-index:900;background:rgba(24,33,43,.94);display:none;
overflow-y:auto;padding:56px 16px 64px}
#rdr.on{display:block}
#rdr .sh{max-width:820px;margin:0 auto}
#rdr img{display:block;width:100%;margin:0 auto 14px;box-shadow:0 2px 18px rgba(0,0,0,.35);background:#fff}
#rdrx{position:fixed;top:12px;right:16px;z-index:910;font:inherit;font-size:.74rem;
letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#fff;color:#18212B;
border:0;border-radius:2px;padding:.62em 1.1em}
#rdrt{color:#fff;text-align:center;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
opacity:.75;margin:0 0 18px}

/* ---------- background music button ---------- */
.musicbtn{position:fixed;left:18px;bottom:18px;z-index:800;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;border-radius:999px;
 border:1px solid rgba(159,208,245,.45);background:rgba(34,48,62,.92);color:#fff;font:600 13px/1 Inter,Aptos,-apple-system,sans-serif;letter-spacing:.06em;
 text-transform:uppercase;cursor:pointer;box-shadow:0 10px 28px -12px rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.musicbtn:hover{transform:translateY(-2px);background:rgba(46,65,85,.96)}
.musicbtn:focus-visible{outline:2px solid #9FD0F5;outline-offset:3px}
.mbars{display:flex;align-items:flex-end;gap:3px;height:16px}
.mbars i{display:block;width:3px;height:4px;border-radius:2px;background:#9FD0F5;transition:height .3s}
.musicbtn.on .mbars i{animation:mbar 1s ease-in-out infinite}
.musicbtn.on .mbars i:nth-child(2){animation-delay:-.4s}.musicbtn.on .mbars i:nth-child(3){animation-delay:-.7s}.musicbtn.on .mbars i:nth-child(4){animation-delay:-.2s}
.musicbtn:not(.on) .mlabel::after{content:" off";opacity:.7}
@keyframes mbar{0%,100%{height:4px}50%{height:16px}}
@media(max-width:640px){.musicbtn{left:12px;bottom:12px;height:40px;padding:0 13px}.mlabel{display:none}}
@media(prefers-reduced-motion:reduce){.musicbtn.on .mbars i{animation:none;height:12px}}

/* wordmark: the M and P as bold as the other letters, still slanted */
.wm i{font-style:normal;font-weight:inherit;display:inline-block;transform:skewX(-11deg);transform-origin:50% 85%;margin-right:.07em;margin-left:.02em}

/* page changes without a reload (keeps the music playing) */
main#main{transition:opacity .22s ease}
main#main.swapping{opacity:0}
.musicbtn.invite{animation:minvite 1.6s ease-in-out infinite}
.musicbtn.invite .mlabel{font-size:0}.musicbtn.invite .mlabel::after{content:"Play music";opacity:1;font-size:13px}
@keyframes minvite{0%,100%{box-shadow:0 10px 28px -12px rgba(0,0,0,.55),0 0 0 0 rgba(159,208,245,.55)}50%{box-shadow:0 10px 28px -12px rgba(0,0,0,.55),0 0 0 10px rgba(159,208,245,0)}}
@media(prefers-reduced-motion:reduce){.musicbtn.invite{animation:none}}
.musicnote{position:fixed;left:18px;bottom:72px;z-index:800;padding:10px 14px;border-radius:12px;background:#9FD0F5;color:#18212B;
 font:600 13.5px/1.2 Inter,Aptos,-apple-system,sans-serif;box-shadow:0 12px 30px -14px rgba(0,0,0,.5);cursor:pointer;
 opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.musicnote::after{content:"";position:absolute;left:22px;bottom:-6px;width:12px;height:12px;background:#9FD0F5;transform:rotate(45deg);border-radius:2px}
.musicnote.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:640px){.musicnote{left:12px;bottom:62px;font-size:13px}}

/* ---------- Services: the table and its words side by side on every screen; smaller duration so they sit level ---------- */
.svprice b{font-size:clamp(34px,4vw,58px)}
@media(max-width:980px){
  .svgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px}
}
@media(max-width:640px){
  .svgrid{gap:10px}
  .shiftmap{padding:10px;border-radius:14px}
  .smhead,.smrow{grid-template-columns:minmax(0,2.1fr) repeat(5,minmax(0,1fr));gap:2px}
  .smhead span{font-size:6px;padding-bottom:3px;letter-spacing:-.03em}
  .smn{font-size:8px}
  .smrow{padding:3px 0}
  .smrow i{height:22px;border-radius:5px}
  .smrow .smplus{font-size:7px;border-width:1.5px;border-radius:5px}
  .smrow i.t::after{background-size:6px 6px;border-width:1.5px}
  .smkey{gap:6px;margin-top:10px;font-size:8.5px;flex-direction:column}
  .smkey i{width:14px;height:9px}
  .svsteps{font-size:9.5px;letter-spacing:.08em;margin-bottom:8px}
  .svprice b{font-size:30px}
  .svprice span{font-size:9.5px;letter-spacing:.06em}
  .svp h3{font-size:18px}
  .svp p{font-size:14px}
  .svgrid>*,.panels,.svp,.svp>*{min-width:0}
  .svgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .svlist li{font-size:13px}
  .svp .btn{font-size:13px;padding:12px 16px}
}
/* ---------- Services, Eva 6 Oct: "Choose how much of the Shift you need", redesigned as four simple cards ---------- */
.svc .svhead{font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.05;letter-spacing:-.01em;font-stretch:normal}
.svc .svhead .w{vertical-align:bottom}
.svc .svhead .svbig .w{padding-bottom:.02em;margin-bottom:-.02em}
.svc .svhead .svbig{font-weight:600;font-size:3em;line-height:.84;letter-spacing:-.035em;color:var(--sand)}
@media(max-width:640px){.svc .svhead{font-size:22px}}
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.offer{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:24px 22px 22px;display:flex;flex-direction:column;
 transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offer:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(24,33,43,.45)}
.offer .ofn{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--sand);margin:0 0 8px}
.offer h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;line-height:1.05;color:var(--ink);margin:0}
.offer .oft{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.2vw,46px);letter-spacing:-.035em;line-height:1;color:var(--navy);margin:6px 0 18px}
.offer .ofq{font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);margin:0 0 8px}
.offer .ofd{font-size:15px;line-height:1.55;color:var(--body);margin:0 0 18px}
.offer .oflink{margin-top:auto;align-self:flex-start;font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--sky);padding-bottom:2px}
.offer .oflink::after{content:" \2192"}
.offer .oflink:hover{border-bottom-color:var(--navy)}
/* the matrix, back as the section's visual: centred above the four cards, all rows at full strength */
.mapwrap{max-width:780px;margin:44px auto 0}
.svc .shiftmap.solo{padding:26px 30px 22px;border-radius:22px}
.svc .shiftmap.solo .smhead,.svc .shiftmap.solo .smrow{grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:8px}
.svc .shiftmap.solo .smhead span{font-size:13.5px;padding-bottom:8px;letter-spacing:-.01em}
.svc .shiftmap.solo .smn{font-size:15px}
.svc .shiftmap.solo .smrow{padding:5px 0;cursor:default}
.svc .shiftmap.solo .smrow i{height:34px;border-radius:8px}
.svc .shiftmap.solo .smrow .smplus{border-radius:8px;border-width:2px;font-size:12.5px}
.svc .shiftmap.solo .smkey{margin-top:16px;font-size:12.5px;gap:8px 22px;flex-direction:row}
.svc .shiftmap.solo .smkey i{width:22px;height:13px}
.mapwrap+.offers{margin-top:28px}
@media(max-width:1000px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .mapwrap{margin-top:28px}
  .svc .shiftmap.solo{padding:14px 14px 12px;border-radius:16px}
  .svc .shiftmap.solo .smhead,.svc .shiftmap.solo .smrow{grid-template-columns:minmax(0,1.55fr) repeat(5,minmax(0,1fr));gap:4px}
  .svc .shiftmap.solo .smhead span{font-size:9px;letter-spacing:-.03em;padding-bottom:4px}
  .svc .shiftmap.solo .smn{font-size:11px}
  .svc .shiftmap.solo .smrow{padding:3px 0}
  .svc .shiftmap.solo .smrow i{height:24px;border-radius:6px}
  .svc .shiftmap.solo .smrow .smplus{font-size:9.5px;border-radius:6px;border-width:1.5px}
  .svc .shiftmap.solo .smrow i.t::after{background-size:7px 7px}
  .svc .shiftmap.solo .smkey{font-size:11px;gap:6px 16px;margin-top:10px}
  .svc .shiftmap.solo .smkey i{width:16px;height:10px}
}
@media(max-width:560px){.offers{grid-template-columns:1fr;gap:12px;margin-top:28px}.offer{padding:20px 18px}}

/* ---------- What we do: the five step cards stay in one row, as on a full-size screen ---------- */
@media(max-width:1000px){
  .steps5{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .steps5 li:last-child{grid-column:auto}
  .steps5 li{padding:16px 12px 18px;border-radius:16px}
  .steps5 li::before{left:12px;right:12px}
  .steps5 b{font-size:clamp(17px,2.4vw,24px)}
  .steps5 em{font-size:10.5px;letter-spacing:.08em}
  .s5d{font-size:13px}
}
@media(max-width:640px){
  .steps5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-right:-16px;padding-right:16px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .steps5::-webkit-scrollbar{display:none}
  .steps5 li{flex:0 0 62%;scroll-snap-align:start}
  .steps5 b{font-size:24px}
  .s5d{font-size:14px}
}