/* By page: the index of page areas (the customer's route) and a single page area.
   An area page also loads list.css for its filters and its list of principles. */
h1,h2,h3,p{margin:0}

/* Page header */
.top{background:radial-gradient(680px 420px at 78% 68%,rgba(217,255,234,.9) 0%,rgba(217,255,234,0) 70%),linear-gradient(180deg,var(--white) 0%,var(--white) 60%,var(--chalk) 100%)}
.top.plain{background:linear-gradient(180deg,var(--white) 0%,var(--white) 60%,var(--chalk) 100%)}
.top.mint{background:radial-gradient(760px 480px at 80% 46%,rgba(217,255,234,.95) 0%,rgba(217,255,234,0) 70%),linear-gradient(180deg,var(--white) 0%,var(--white) 60%,var(--chalk) 100%)}
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--grey-500)}
h1{font-size:clamp(36px,4.6vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.015em}
.sub{font-size:19px;line-height:1.65;color:var(--navy-500);max-width:540px}
.stepno{font-size:13px;font-weight:700;color:var(--mauve-500)}

/* Evidence ratings: colours for the mix bars and the rating buttons */
.r-Strong{color:var(--mint-700)}
.d-Strong{background:var(--mint-600)}
.r-Moderate{color:var(--navy-500)}
.d-Moderate{background:var(--navy-300)}
.r-Contested{color:var(--amber-text)}
.d-Contested{background:var(--amber)}
.r-Framework{color:var(--mauve-700)}
.d-Framework{background:var(--mauve-300)}
.mix{display:flex;gap:3px;height:8px;width:160px;max-width:100%}
.mix span{border-radius:999px;transition:transform .25s var(--ease)}

/* Index: heading */
.ihead{display:flex;flex-direction:column;gap:20px;padding-block:48px 96px;max-width:860px}
.ihead h1{font-size:clamp(38px,5vw,64px);line-height:1.06}
.ihead h1 .it,.lead .it{color:var(--mint-700)}
.ihead .sub{max-width:600px}
.ibody{padding-block:8px 104px;display:flex;flex-direction:column}

/* Index: the steps of the route, joined by a rail */
.vrow{display:flex;gap:28px;text-decoration:none;border-radius:24px;transition:background .2s,box-shadow .2s,transform .2s var(--ease);padding-inline:24px;margin-inline:-24px}
.vrow .rail{flex:0 0 22px;display:flex;flex-direction:column;align-items:center;padding-top:44px}
.vrow .dot{flex:none;width:16px;height:16px;border-radius:999px;background:var(--white);border:3px solid var(--navy-900);transition:background .25s,border-color .25s,transform .3s var(--ease),box-shadow .3s}
.vrow .vline{flex-grow:1;width:2px;background:var(--navy-100);margin-top:6px;transition:background .25s}
.vrow.last .dot{width:18px;height:18px;background:var(--mint-400);border-color:var(--mint-400);box-shadow:0 0 0 6px var(--mint-50)}
.vrow .in{position:relative;flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;padding-block:30px 34px}
.vrow .in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--offwhite);transition:opacity .2s}
.vrow.last .in::after{display:none}
.vrow:hover{background:var(--paper);box-shadow:var(--shadow-soft);transform:translateY(-3px);z-index:1}
.vrow:hover .in::after{opacity:0}
.vrow:hover .dot{background:var(--mint-400);border-color:var(--mint-400);transform:scale(1.25);box-shadow:0 0 0 6px var(--mint-50)}
.vrow:hover .vline{background:var(--navy-900)}
.vrow .a{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:4px}
.vrow .nm{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.01em;transition:color .2s}
.vrow:hover .nm{color:var(--mint-700)}
.vrow .ds{font-size:18px;color:var(--navy-500)}
.vrow .b{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:4px}
.vrow .b span:last-child{font-size:16px;line-height:1.5}
.vrow .c{flex:0 1 230px;display:flex;flex-direction:column;gap:8px}
.vrow .n{display:flex;align-items:baseline;gap:8px}
.vrow .n b{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.vrow .n span{font-size:14px;color:var(--navy-500)}
.vrow .mixlab{font-size:13px;color:var(--grey-500)}
.vrow .arr,.swrow .arr{font-size:22px;font-weight:700;color:var(--mint-700);transition:transform .25s var(--ease)}
.vrow:hover .arr,.swrow:hover .arr{transform:translateX(7px)}
.vrow:hover .mix span,.swrow:hover .mix span{transform:scaleY(1.5)}

/* Index: the sitewide panel, which sits outside the route */
.swrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;margin-top:56px;padding:32px 36px;background:var(--mint-50);border-radius:24px;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.swrow:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(14,157,98,.16)}
.swrow .eyebrow{color:var(--mint-700)}
.swrow .a{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:4px}
.swrow .nm{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.swrow .ds{font-size:18px;color:var(--navy-500)}
.swrow .c{flex:0 1 230px;display:flex;flex-direction:column;gap:8px}
.swrow .n{display:flex;align-items:baseline;gap:8px}
.swrow .n b{font-size:26px;font-weight:700;line-height:1}
.swrow .n span,.swrow .mixlab{font-size:14px;color:var(--navy-500)}

/* A line pointing to another way in, on both pages */
.cross{margin-top:40px;font-size:17px;color:var(--navy-500)}
.cross .textlink{font-size:17px;padding:10px 0}

/* Area page: heading and summary panel */
.ghero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:48px 72px;padding-block:48px 64px}
.gcopy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.gcopy h1{font-size:clamp(40px,5.6vw,76px);line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.lead{font-size:clamp(22px,2.4vw,30px);line-height:1.35;max-width:620px}
.intro{font-size:18px;line-height:1.7;color:var(--navy-500);max-width:600px}
.gpanel{flex:1 1 340px;min-width:0;max-width:440px;background:var(--mint-50);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:24px;box-shadow:0 30px 80px rgba(10,122,76,.16);animation:settle .8s var(--ease) both}
@keyframes settle{from{transform:translateY(14px) rotate(1.2deg)}to{transform:none}}
.gpanel .big{display:flex;align-items:baseline;gap:12px}
.gpanel .big b{font-size:56px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.gpanel .big span{font-size:18px;font-weight:600;color:var(--mint-700)}
.gpanel .lab{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mint-700)}
.gpanel .blk{display:flex;flex-direction:column;gap:10px}
.gpanel .mix{width:100%;height:10px}

/* Summary panel: rating buttons and psychology bars, which filter the list below */
.evbtns{display:flex;flex-wrap:wrap;gap:6px}
.evb{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;transition:background .2s,box-shadow .2s,transform .2s var(--ease)}
.evb:hover{background:rgba(255,255,255,.7);transform:translateY(-1px)}
.evb.on{background:var(--paper);box-shadow:0 4px 14px rgba(10,122,76,.18)}
.evb i{width:8px;height:8px;border-radius:999px}
.areas{display:flex;flex-direction:column;gap:2px;padding-top:22px;border-top:1px solid rgba(10,122,76,.25)}
.areas .lab{padding-bottom:6px}
.abar{display:flex;align-items:center;gap:12px;min-height:34px;width:calc(100% + 20px);padding:0 10px;margin-inline:-10px;border-radius:10px;transition:background .2s}
.abar .an{flex:0 0 150px;font-size:14px;font-weight:600;line-height:1.25;text-align:left}
.abar .tr{flex:1 1 0;height:8px;border-radius:999px;background:rgba(10,122,76,.16);display:flex}
.abar .fl{border-radius:999px;background:var(--mint-600);transition:background .2s,transform .25s var(--ease);transform-origin:left}
.abar.most .fl{background:var(--navy-900)}
.abar .ac{flex:0 0 20px;font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.abar:hover{background:rgba(255,255,255,.6)}
.abar:hover .fl{transform:scaleY(1.5)}
.abar.on{background:var(--paper);box-shadow:0 4px 14px rgba(10,122,76,.18)}
.abar.on .fl{background:var(--mauve-500)}
.hint{font-size:13px;color:var(--mint-700)}

/* Area page: the route in miniature, with this step marked */
.mini{display:flex;padding-bottom:80px}
.mstep{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.mstep .rail{display:flex;align-items:center;height:28px}
.mstep .dot{flex:none;width:10px;height:10px;border-radius:999px;background:var(--navy-100);transition:transform .3s var(--ease),background .25s,box-shadow .3s}
.mstep .line{flex-grow:1;height:2px;background:var(--navy-100)}
.mstep:last-child .line{display:none}
.mstep .nm{font-size:13px;font-weight:500;color:var(--grey-500);padding-right:8px;transition:color .2s}
.mstep.cur .dot{width:16px;height:16px;background:var(--mint-400);box-shadow:0 0 0 6px var(--mint-50)}
.mstep.cur .nm{font-size:14px;font-weight:700;color:var(--navy-900)}
.mstep.done .dot,.mstep.done .line{background:var(--navy-900)}
.mstep:hover .dot{transform:scale(1.5);background:var(--mint-400)}
.mstep:hover .nm{color:var(--mint-700)}

/* Area page: along the route, the step before and the step after */
.others{background:linear-gradient(180deg,var(--chalk) 0%,var(--white) 50%,var(--chalk) 100%)}
.others .wrap{padding-block:40px 112px;display:flex;flex-direction:column;gap:28px}
.others .cross{margin-top:0}
.oh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.oh-copy{display:flex;flex-direction:column;gap:12px}
.oh h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.oh .textlink{font-size:16px;padding:12px 0}
.pn{display:flex;flex-wrap:wrap;gap:24px}
.pcard{flex:1 1 320px;min-width:0;background:var(--paper);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-soft);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.pcard.next{align-items:flex-end;text-align:right}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.pcard .k{display:inline-flex;gap:8px;font-size:13px;font-weight:700;color:var(--mauve-500)}
.pcard .t{font-size:28px;font-weight:700;line-height:1.2;transition:color .2s}
.pcard:hover .t{color:var(--mint-700)}
.pcard .d{font-size:16px;color:var(--navy-500)}
.pcard .c{font-size:14px;color:var(--grey-500);padding-top:6px}
.pcard .arr{display:inline-block;transition:transform .25s var(--ease)}
.pcard.prev:hover .arr{transform:translateX(-5px)}
.pcard.next:hover .arr{transform:translateX(5px)}

@media (max-width:860px){
  .mini{overflow-x:auto;scrollbar-width:none;padding-bottom:56px}
  .mstep{flex:0 0 96px}
  .vrow{gap:16px}
  .swrow{position:relative;padding:26px 24px;gap:16px}
  .swrow .a{padding-right:28px}
  .swrow>.arr{position:absolute;top:26px;right:22px}
}