/* Tele-Centre Assist — article pages. Shares the homepage design system. */
:root{
  --blue:#2196D8; --blue-d:#12719F; --blue-text:#006DAF; --blue-btn:#077CBE; --blue-w:#E9F4FA;
  --lime:#8CC63F; --lime-d:#5E8C25; --lime-text:#47750E; --lime-w:#F1F7E6;
  --ink:#1F2A23; --ink-2:#3A4740; --ink-3:#5E6C66; --ink-4:#5E6C66; --muted-dark:#95A29C;
  --line:#DCE4EA; --line-2:#EAEFF3;
  --paper:#FFFFFF; --paper-2:#F1F8FD; --paper-3:#E3F0F9;
  --amber:#C87A22;
  --disp:'Lato',-apple-system,'Segoe UI',Arial,sans-serif;
  --ui:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;
  --e-rise:cubic-bezier(.16,.84,.28,1);
  --e-draw:cubic-bezier(.62,.01,.2,1);
  --gut:clamp(20px,5vw,46px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink-2);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:var(--lime-w);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4);font-weight:400}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:10px;top:10px}

/* nav */
#nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand svg{width:29px;height:29px;flex-shrink:0}
.brand .wm{font-family:var(--disp);font-size:19.5px;letter-spacing:-.022em;color:var(--ink);line-height:1.02;font-weight:500}
.brand .wm i{display:block;font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.2em;color:var(--ink-4);font-weight:400;margin-top:2px}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500}
.nav-links a{position:relative;padding:5px 0}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-draw)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-tel{font-family:var(--mono);font-size:13px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;font-size:14px;font-weight:500;border-radius:1px;transition:background .35s,color .35s,border-color .35s,transform .45s var(--e-rise);white-space:nowrap;min-height:44px}
.btn-p{background:var(--ink);color:var(--paper)}
.btn-p:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-o{border:1px solid var(--line);color:var(--ink)}
.btn-o:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-l{background:var(--blue-btn);color:#fff}
.btn-l:hover{background:var(--blue-d)}
.btn-g{color:var(--paper);border:1px solid rgba(252,251,247,.34)}
.btn-g:hover{background:var(--paper);color:var(--ink)}
.m-nav{display:none;margin-left:auto}
.m-nav summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.m-nav summary::-webkit-details-marker{display:none}
.m-panel{display:none;position:absolute;left:0;right:0;top:70px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:6px var(--gut) 18px}
.m-nav[open] .m-panel{display:flex}
.m-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line-2);font-family:var(--disp);font-size:21px;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.nav-links,.nav-tel,#nav .btn{display:none}.m-nav{display:block}}

/* article */
.crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding:28px 0 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 8px;opacity:.5}
.a-head{padding:26px 0 clamp(34px,4vw,54px);border-bottom:1px solid var(--line);max-width:940px}
.a-series{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-text)}
.a-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(31px,4.6vw,58px);letter-spacing:-.026em;line-height:1.06;color:var(--ink);margin:16px 0 0}
.a-sub{font-family:var(--disp);font-style:italic;font-size:clamp(19px,2.1vw,26px);line-height:1.32;color:var(--ink-3);margin-top:18px;max-width:34ch}
.a-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.a-body{max-width:680px;padding:clamp(34px,4vw,52px) 0 0;font-size:18px;line-height:1.72}
.a-body>p{margin-bottom:22px;color:var(--ink-2)}
.a-body>p:first-of-type{font-size:20px;line-height:1.62;color:var(--ink)}
.a-body h2{font-family:var(--disp);font-weight:700;font-size:clamp(23px,2.5vw,31px);letter-spacing:-.02em;line-height:1.18;color:var(--ink);margin:44px 0 16px}
.a-body h3{font-family:var(--ui);font-weight:600;font-size:17px;color:var(--ink);margin:32px 0 12px;letter-spacing:-.005em}
.a-body blockquote{margin:32px 0;padding-left:24px;border-left:2px solid var(--lime);font-family:var(--disp);font-style:italic;font-size:clamp(20px,2.2vw,25px);line-height:1.36;color:var(--ink)}
.a-body ul,.a-body ol{margin:0 0 22px;padding-left:22px}
.a-body li{margin-bottom:10px}
.a-body strong{color:var(--ink);font-weight:600}
.a-body hr{border:0;height:1px;background:var(--line);margin:46px 0}
.a-sig{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:16px;align-items:flex-start;max-width:680px}
.a-sig .who b{display:block;font-family:var(--disp);font-size:19px;color:var(--ink);letter-spacing:-.015em;font-weight:500}
.a-sig .who span{font-size:14px;color:var(--ink-3)}

/* end-of-article CTA */
.a-cta{margin-top:clamp(48px,6vw,76px);background:var(--ink);color:var(--paper);padding:clamp(30px,4vw,50px)}
.a-cta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.a-cta h2{font-family:var(--disp);font-weight:700;font-size:clamp(25px,3.2vw,40px);letter-spacing:-.026em;line-height:1.08;color:var(--paper);margin:14px 0 0;max-width:22ch}
.a-cta p{color:rgba(252,251,247,.7);margin-top:16px;max-width:52ch;font-size:16px;line-height:1.66}
.a-cta .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* related */
.rel{padding:clamp(48px,6vw,80px) 0 0}
.rel .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:22px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0 clamp(24px,3.4vw,52px)}
.rel-grid a{padding:22px 0;border-top:1px solid var(--ink);transition:padding-left .45s var(--e-rise)}
.rel-grid a:hover{padding-left:8px}
.rel-grid .s{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.rel-grid h3{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin:10px 0 0}

/* insights index */
.idx-head{padding:clamp(40px,5vw,72px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--line)}
.idx-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,68px);letter-spacing:-.028em;line-height:1.04;color:var(--ink);margin:16px 0 0;max-width:20ch}
.idx-head p{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.58;color:var(--ink-3);max-width:58ch}
.idx-sec{padding:clamp(38px,4.5vw,60px) 0 0}
.idx-sec>h2{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4);font-weight:400;margin-bottom:6px}
.idx-list a{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line-2);transition:padding-left .4s var(--e-rise)}
.idx-list a:hover{padding-left:8px}
.idx-list h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,24px);color:var(--ink);letter-spacing:-.02em;line-height:1.22}
.idx-list p{font-size:14.5px;color:var(--ink-3);margin-top:6px;line-height:1.55;max-width:62ch}
.idx-head p a{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}
.idx-list .len{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}

/* insights videos — click-to-load */
#videos{scroll-margin-top:84px}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:36px clamp(22px,3vw,40px);margin-top:22px}
.vid-frame{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.vid-frame a,.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-rise),opacity .3s}
.vid-frame a:hover img{transform:scale(1.03);opacity:.86}
.vid-frame a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.vid-btn{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--paper);box-shadow:0 6px 24px rgba(31,42,35,.28);transition:transform .4s var(--e-rise)}
.vid-btn::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--ink)}
.vid-frame a:hover .vid-btn{transform:scale(1.08)}
.vid figcaption{padding-top:14px}
.vid .s{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.vid h3{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em;line-height:1.22;margin-top:8px}

/* footer */
footer{background:var(--ink);color:rgba(252,251,247,.56);padding:56px 0 30px;margin-top:clamp(56px,7vw,96px);font-size:13.5px}
.ft{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,50px)}
.ft .brand .wm{color:var(--paper)}
.ft .brand .wm i{color:rgba(252,251,247,.46)}
.ft-ab{margin-top:16px;line-height:1.68;max-width:32ch}
.ft h5{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(252,251,247,.4);margin:0 0 14px;font-weight:400}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.ft ul a{display:flex;align-items:center;min-height:44px}
.ft a:hover{color:var(--paper)}
.ft-bot{margin-top:42px;padding-top:24px;border-top:1px solid rgba(252,251,247,.14);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:12px;color:rgba(252,251,247,.42)}
@media(max-width:700px){.ft{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* Concept B colour (Evan + Eric, 17 Oct) */
.btn-p{background:var(--blue-btn);color:#fff}
.btn-p:hover{background:#06689F}
.btn-o{border:1.5px solid var(--lime-text);color:var(--lime-text)}
.btn-o:hover{border-color:var(--lime-text);background:var(--lime-w)}
.kicker{color:var(--blue-text)}