/* ============================================================
   BPG design system
   Brand Guidelines v2. Lifted from the approved mockups so the
   build matches what was signed off.

   Four of the six brand colours fail WCAG AA as small text on
   white, so each has a darkened companion used for links and
   small type. Never use the fill colour for body-size text.
   ============================================================ */

/* ============ BPG — Six Doors design system ============ */
:root{
  /* Brand Guidelines v2 */
  --purple:#772D61; --purple-dk:#531F42; --purple-lt:#A66499;
  --orange:#DF8D22; --lime:#AFBE30; --teal:#2D7C8A; --dgreen:#73B669;
  /* AA-passing variants, for small text and links on white only */
  --purple-lt-dk:#A16194; --orange-dk:#A56819; --lime-dk:#717B1F;
  --teal-dk:#1F5A66; --dgreen-dk:#51814A;
  --tint:#E6E7E8;
  --paper:#FBF7F2; --paper-2:#F3ECE4;
  --ink:#2E1B29; --ink-2:#5A4553; --rule:#E2D6D0;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --script:'Caveat',cursive;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;line-height:1.08;font-weight:700;letter-spacing:-0.015em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
/* Focus indicator.

   The orange ring measured 2.47:1 on paper, 2.63:1 on white and 1.83:1 on the
   teal band — all under the 3:1 that WCAG 1.4.11 requires of a focus
   indicator, so on most of the site it was decorative rather than visible. The
   halo that rescued it was scoped to .topbar, .hero and friends, classes the
   rebuilt Elementor pages no longer carry.

   Two rings instead, one dark and one light. On a pale ground the ink ring
   carries it (15:1 on paper); on a dark ground the white halo does (4.8:1 on
   teal, higher on the purples). One of the two is always visible, whatever a
   page is built from. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 6px #fff;}
.skip{position:absolute;left:.6rem;top:-4rem;z-index:500;background:var(--orange);
  color:#241019;font-weight:700;padding:.7rem 1.1rem;text-decoration:none;
  transition:top .14s ease;}
.skip:focus{top:.6rem;}
#main{scroll-margin-top:1rem;}
.wrap{width:min(1200px,92vw);max-width:100%;margin-inline:auto;}
/* Edge inset for full-bleed blocks. Aligning the doors to the .wrap column
   was tried and rejected — it squeezed the text on the outer cells. This is
   the door's own padding plus a small breathing space, nothing more. */
:root{--gutter:calc(1.6rem + 10px);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- ROW 1 — header / navigation ---------- */
.topbar{background:var(--purple);color:#fff;}
.topbar .wrap{display:flex;align-items:center;gap:2rem;padding:.9rem 0;}
.brand{width:190px;flex:0 0 auto;display:block;}
.nav{margin-left:auto;display:flex;gap:1.6rem;font-family:var(--cond);
     font-size:1.06rem;font-weight:600;letter-spacing:.02em;align-items:center;}
.nav a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent;}
.nav a:hover{border-color:var(--lime);}
.nav .now{border-color:var(--orange);}
.navtoggle{display:none;margin-left:auto;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45);padding:.45rem .75rem;
  align-items:center;gap:.55rem;font-family:var(--cond);font-size:1.02rem;
  font-weight:600;letter-spacing:.04em;}
.navtoggle:hover{background:rgba(255,255,255,.12);}
.navtoggle svg{width:17px;height:12px;}
.navtoggle .close{display:none;}
.topbar.open .navtoggle .open-i{display:none;}
.topbar.open .navtoggle .close{display:block;}

/* breadcrumb strip */
.crumbs{background:var(--purple-dk);color:#E3D2DF;font-size:.9rem;}
.crumbs .wrap{padding:.5rem 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.crumbs a{text-decoration:none;}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px;}
.crumbs span{opacity:.55;}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--orange);color:#241019;text-decoration:none;
     font-weight:700;padding:.72rem 1.35rem;font-size:1rem;border:none;}
.btn:hover{background:#F0A03A;}
.btn-sm{padding:.5rem 1rem;font-size:.94rem;}
.btn-w{background:#fff;color:var(--ink);}
.btn-w:hover{background:#F3ECE4;}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);
           padding:.62rem 1.2rem;}
.btn-ghost:hover{background:#fff;color:var(--c,var(--purple));}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:#4A2E42;}

/* ---------- ROW 2 — hero ---------- */
.hero{background:var(--c,var(--purple));color:#fff;padding:2.8rem 0 3rem;
      position:relative;overflow:hidden;}
.hero.on-light{color:var(--ink);}
.hero .wrap{position:relative;z-index:2;display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3.5rem;align-items:end;}
.hero .kicker{font-family:var(--cond);letter-spacing:.14em;font-size:.9rem;
              opacity:.85;margin-bottom:.5rem;}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);max-width:22ch;}
.hero .about{margin-top:1.2rem;max-width:52ch;font-size:1.1rem;opacity:.93;}
.hero .ghost{position:absolute;right:-4%;bottom:-32%;width:34%;opacity:.14;
             pointer-events:none;z-index:1;}
.hero .ghost svg{width:100%;height:auto;}
.hero .ghost svg *{fill:currentColor!important;stroke:currentColor!important;}
.getall{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);
        padding:1.4rem 1.5rem;}
.hero.on-light .getall{background:rgba(46,27,41,.08);border-color:rgba(46,27,41,.2);}
.getall h2{font-family:var(--cond);font-size:1.25rem;font-weight:600;}
.getall p{font-size:.95rem;opacity:.88;margin:.45rem 0 1rem;}
.getall .fine{margin:.85rem 0 0;font-size:.83rem;opacity:.75;}

/* module colour strip */
.strip{display:flex;height:9px;}
.strip span{flex:1;}

/* ---------- section furniture ---------- */
.sec{padding:3.4rem 0;}
.sechead{margin-bottom:1.6rem;}
.sechead h2{font-size:2rem;}
.sechead p{margin:.6rem 0 0;color:var(--ink-2);max-width:56ch;}

/* ---------- ROW 3a — accordion ---------- */
.acc{border-top:2px solid var(--c,var(--purple));}
.acc details{border-bottom:1px solid var(--rule);background:#fff;}
.acc details[open]{background:#fff;box-shadow:0 12px 26px -22px rgba(46,27,41,.5);}
.acc summary{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1.2rem;
             cursor:pointer;list-style:none;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary:hover{background:var(--paper-2);}
.acc .num{font-family:var(--cond);font-size:1.5rem;font-weight:700;
          color:var(--ct,var(--c,var(--purple)));width:2.1rem;flex:0 0 auto;line-height:1;}
.acc .t{flex:1;font-size:1.14rem;font-weight:600;line-height:1.25;}
.acc .pp{font-size:.86rem;color:var(--ink-2);white-space:nowrap;}
.acc .chev{width:14px;height:14px;flex:0 0 auto;transition:transform .18s ease;
           color:var(--ct,var(--c,var(--purple)));}
.acc details[open] .chev{transform:rotate(180deg);}
.acc .body{padding:0 1.2rem 1.4rem 4.4rem;}
.acc .body > p{color:var(--ink-2);margin:0 0 1rem;max-width:64ch;}
.acc .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.acc .rel{margin-top:1.1rem;border-top:1px dotted var(--rule);padding-top:.9rem;}
.acc .rel .lbl{font-family:var(--cond);letter-spacing:.1em;font-size:.78rem;
               color:var(--ink-2);display:block;margin-bottom:.45rem;}
.acc .rel ul{display:flex;flex-wrap:wrap;gap:.45rem;}
.acc .rel a{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--rule);
            padding:.28rem .7rem;font-size:.9rem;text-decoration:none;background:#fff;}
.acc .rel a:hover{border-color:var(--ink);}
.acc .rel .dot{width:8px;height:8px;background:var(--rc);flex:0 0 auto;}

/* ---------- ROW 3b — icon cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.card{background:#fff;border:1px solid var(--rule);border-top:7px solid var(--c);
      padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;}
.card:hover{box-shadow:0 14px 30px -22px rgba(46,27,41,.5);}
.card .ico{width:44px;height:44px;color:var(--ct,var(--c));margin-bottom:.9rem;}
.card .ico svg{width:100%;height:100%;}
.card .n{font-family:var(--cond);letter-spacing:.12em;font-size:.76rem;color:var(--ink-2);}
.card h3{font-size:1.2rem;margin-top:.25rem;}
.card p{font-size:.95rem;color:var(--ink-2);margin:.6rem 0 1.1rem;flex:1;}
.card .dl{font-weight:700;color:var(--ct,var(--c));text-decoration:none;font-size:.95rem;}
.card .dl:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- ROW 4 — how to use / CTA ---------- */
.howto{background:var(--ink);color:#fff;padding:3.2rem 0;}
.howto .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;}
.howto h2{font-size:1.9rem;max-width:20ch;}
.howto .lede{margin-top:.8rem;color:#BFAFBA;max-width:42ch;}
.uses{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.16);}
.use{background:var(--ink);padding:1.15rem 1.2rem;}
.use .k{font-family:var(--cond);letter-spacing:.1em;font-size:.78rem;color:var(--orange);}
.use strong{display:block;font-size:1.05rem;margin-top:.2rem;}
.use span{font-size:.9rem;color:#BFAFBA;}

/* ---------- ROW 5 — footer ---------- */
.funders{background:#fff;padding:1.6rem 0;border-top:6px solid var(--purple);}
.funders .wrap{display:flex;gap:2.4rem;align-items:center;flex-wrap:wrap;}
.funders .logo{width:260px;}
.funders .logo img{display:block;width:100%;height:auto;}
.funders p{font-size:.86rem;color:var(--ink-2);margin:0;max-width:50ch;}
.funders .fnav{margin-left:auto;display:flex;gap:1.1rem;font-size:.9rem;}
.copyright{background:var(--paper-2);padding:1.1rem 0;text-align:center;}
.copyright p{margin:0;font-size:.88rem;color:var(--ink-2);}
.copyright a{color:var(--purple);font-weight:600;}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .topbar{position:relative;z-index:40;}
  .navtoggle{display:inline-flex;}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin-left:0;
       flex-direction:column;align-items:stretch;text-align:left;gap:0;
       padding:.35rem 0 .5rem;background:var(--purple-dk);
       box-shadow:0 20px 34px -22px rgba(0,0,0,.7);}
  .topbar.open .nav{display:flex;}
  .nav a{padding:.8rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12);
         border-left:4px solid transparent;font-size:1.08rem;}
  .nav a:hover{background:rgba(255,255,255,.07);border-left-color:var(--lime);}
  .nav .now{border-left-color:var(--orange);}
  .hero .wrap,.howto .wrap{grid-template-columns:1fr;gap:1.8rem;}
  .hero .wrap{align-items:start;}
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .cards,.uses{grid-template-columns:1fr;}
  .topbar .wrap{gap:1rem;}
  .sec{padding:2.4rem 0;}
  .sechead h2{font-size:1.6rem;}
  .funders .wrap{gap:1.4rem;}
  .acc .body{padding-left:1.2rem;}
  .acc summary{gap:.7rem;padding:.9rem 1rem;}
  .acc .pp{display:none;}
  .funders .fnav{margin-left:0;}
}


/* ---------- theme card extras (related / resources rows) ---------- */
.card .cardrow{border-top:1px dotted var(--rule);padding-top:.6rem;margin-bottom:.7rem;}
.card .cardrow .k{font-family:var(--cond);letter-spacing:.1em;font-size:.72rem;
  color:var(--ink-2);display:block;margin-bottom:.25rem;}
.card .cardrow ul{display:flex;flex-direction:column;gap:.15rem;}
.card .cardrow a{font-size:.88rem;text-decoration:none;color:var(--ink-2);}
.card .cardrow a:hover{color:var(--ct,var(--c));text-decoration:underline;
  text-underline-offset:2px;}
.card h3 a{text-decoration:none;color:inherit;}
.card h3 a:hover{color:var(--ct,var(--c));}
.card .ico img{width:44px;height:44px;object-fit:contain;}

/* ---------- sub-section page ---------- */
.slim{background:var(--c,var(--purple));color:#fff;padding:2.2rem 0 2.4rem;}
.slim.on-light{color:var(--ink);}
.slim .k{font-family:var(--cond);letter-spacing:.13em;font-size:.85rem;opacity:.85;}
.slim h1{font-size:clamp(1.9rem,3.9vw,2.9rem);max-width:26ch;margin-top:.3rem;}
.slim .lede{margin-top:.9rem;max-width:58ch;font-size:1.08rem;opacity:.93;}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:3rem;
  padding:3rem 0;align-items:start;}
.body h2{font-size:1.45rem;margin:2rem 0 .7rem;}
.body h2:first-child{margin-top:0;}
.body p{color:var(--ink-2);max-width:64ch;}
.covers li{display:flex;gap:.8rem;padding:.5rem 0;border-bottom:1px dotted var(--rule);
  color:var(--ink-2);}
.covers li:last-child{border-bottom:none;}
.covers .b{width:7px;height:7px;background:var(--c);flex:0 0 auto;margin-top:.6rem;}
.side{position:sticky;top:1.2rem;display:flex;flex-direction:column;gap:1.2rem;}
.dlcard{background:#fff;border:2px solid var(--c);padding:1.3rem 1.4rem 1.5rem;}
.dlcard .k{font-family:var(--cond);letter-spacing:.11em;font-size:.76rem;color:var(--ink-2);}
.dlcard h3{font-size:1.2rem;margin:.2rem 0 .8rem;}
.dlcard .facts{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem;}
.dlcard .facts span{border:1px solid var(--rule);padding:.2rem .55rem;font-size:.84rem;
  color:var(--ink-2);}
.dlcard .btn{width:100%;text-align:center;}
.dlcard .ver{margin:.9rem 0 0;font-size:.82rem;color:var(--ink-2);}
.dlcard .warn{margin:.6rem 0 0;font-size:.82rem;color:#B32D2E;}
.qr{background:#fff;border:1px solid var(--rule);padding:1.1rem 1.2rem;text-align:center;}
.qr img{margin:0 auto .7rem;display:block;}
.qr p{margin:0;font-size:.85rem;color:var(--ink-2);}
.qr code{display:block;margin-top:.45rem;font-size:.8rem;}
.relbox{background:#fff;border:1px solid var(--rule);padding:1.1rem 1.2rem;}
.relbox .k{font-family:var(--cond);letter-spacing:.1em;font-size:.76rem;color:var(--ink-2);
  display:block;margin-bottom:.5rem;}
.relbox a{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;
  text-decoration:none;border-bottom:1px dotted var(--rule);font-size:.95rem;}
.relbox a:last-child{border-bottom:none;}
.relbox .dot{width:8px;height:8px;background:var(--rc);flex:0 0 auto;margin-top:.42rem;}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border-block:1px solid var(--rule);}
.pager a{background:#fff;padding:1.2rem 1.3rem;text-decoration:none;}
.pager a:hover{background:var(--paper-2);}
.pager .k{font-family:var(--cond);letter-spacing:.11em;font-size:.76rem;color:var(--ink-2);}
.pager strong{display:block;font-size:1.08rem;margin-top:.2rem;line-height:1.25;}
.pager .next{text-align:right;}

/* ---------- user focus page ---------- */
.heroimage img{width:100%;height:auto;display:block;}
.uacc details{border-left:7px solid var(--rc);}
.uacc .num,.uacc .chev{color:var(--rc);}
.uacc .theme{font-family:var(--cond);letter-spacing:.09em;font-size:.76rem;
  color:var(--ink-2);display:block;margin-bottom:.15rem;}
.groupbar{display:flex;align-items:baseline;gap:1rem;margin:2rem 0 .8rem;
  border-bottom:2px solid var(--ink);padding-bottom:.5rem;}
.groupbar h3{font-size:1.3rem;}
.groupbar span{font-size:.9rem;color:var(--ink-2);}
.rolebar{background:var(--paper-2);padding:1.1rem 0;border-bottom:1px solid var(--rule);}
.rolebar .wrap{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.rolebar .lbl{font-family:var(--cond);letter-spacing:.1em;font-size:.8rem;
  color:var(--ink-2);margin-right:.4rem;}
.rolebar a{border:1px solid var(--rule);background:#fff;padding:.35rem .85rem;
  font-size:.93rem;text-decoration:none;}
.rolebar a:hover{border-color:var(--purple);color:var(--purple);}
.rolebar a.on{background:var(--purple);color:#fff;border-color:var(--purple);}

/* ---------- case study ---------- */
.cshero{background:var(--tint);border-bottom:1px solid #D8D8DA;padding:2.4rem 0 2.6rem;
  position:relative;}
.cshero::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:var(--c);}
.cshero .k{font-family:var(--cond);letter-spacing:.13em;font-size:.82rem;color:var(--ink-2);}
.cshero h1{font-size:clamp(1.9rem,4vw,2.9rem);max-width:24ch;margin-top:.3rem;}
.cshero .lede{margin-top:.9rem;max-width:56ch;font-size:1.1rem;color:var(--ink-2);}
.cshero .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem;}
.cshero .tags span{border:1px solid #CFCFD1;background:#fff;padding:.22rem .65rem;
  font-size:.86rem;color:var(--ink-2);}
.story h2{font-size:1.4rem;margin:1.8rem 0 .6rem;}
.story h2:first-child{margin-top:0;}
.story p{color:var(--ink-2);max-width:64ch;}

/* ---------- 404 ---------- */
.four{background:var(--purple);color:#fff;padding:3.4rem 0 3.8rem;}
.four .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:3.4rem;align-items:center;}
.four .code{font-family:var(--cond);font-size:5rem;line-height:.85;color:var(--lime);}
.four h1{font-size:clamp(2rem,4.2vw,3rem);margin-top:.6rem;max-width:18ch;}
.four p{margin-top:1rem;color:#E9D9E5;max-width:46ch;font-size:1.08rem;}
.sfield{display:flex;background:#fff;border:2px solid var(--ink);margin-top:1.6rem;
  max-width:460px;}
.sfield input{flex:1;border:none;outline:none;font:inherit;font-size:1.05rem;
  padding:.8rem .95rem;color:var(--ink);background:transparent;}
.sfield button{background:var(--orange);color:#241019;border:none;font-weight:700;
  padding:0 1.3rem;cursor:pointer;}
.printed{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  padding:1.4rem 1.5rem;}
.printed .k{font-family:var(--cond);letter-spacing:.12em;font-size:.78rem;opacity:.8;}
.printed h2{font-size:1.25rem;margin-top:.25rem;}
.printed code{display:block;background:rgba(0,0,0,.22);padding:.5rem .7rem;
  margin-top:.8rem;font-size:.88rem;}
.doors{display:grid;grid-template-columns:repeat(3,1fr);}
.door{color:#fff;padding:1.5rem 1.4rem 1.6rem;text-decoration:none;
  display:flex;flex-direction:column;min-height:150px;}
.door.on-light{color:var(--ink);}
.door .n{font-family:var(--cond);letter-spacing:.12em;font-size:.76rem;opacity:.85;}
.door strong{font-size:1.2rem;margin-top:.2rem;line-height:1.2;}
.door span:last-child{margin-top:auto;font-size:.88rem;opacity:.9;}
.door:hover{filter:brightness(1.08);}

/* ---------- placeholder copy, staging only ---------- */
.bpg-placeholder{background:#FCF3E3;color:#8A5405;padding:0 .25em;font-style:italic;}

/* ---------- nav list resets, since WordPress supplies a <ul> ---------- */
.nav-list,.fnav-list{display:flex;gap:1.6rem;align-items:center;margin:0;padding:0;
  list-style:none;}
.fnav-list{gap:1.1rem;}
.nav-list a,.fnav-list a{text-decoration:none;}

@media(max-width:1000px){
  .cols{grid-template-columns:1fr;gap:2rem;}
  .side{position:static;}
  .pager,.four .wrap{grid-template-columns:1fr;}
  .pager .next{text-align:left;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%;}
}


/* ---------- home page ---------- */
.homehero{background:var(--purple);color:#fff;padding:3.6rem 0 4rem;}
.homehero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:3.4rem;align-items:center;}
.homehero .kicker{font-family:var(--cond);letter-spacing:.14em;font-size:.9rem;
  color:#E3D2DF;margin-bottom:.6rem;}
.homehero h1{font-size:clamp(2.3rem,5vw,3.6rem);max-width:15ch;line-height:1.05;}
.homehero p{margin-top:1.2rem;color:#E9D9E5;max-width:44ch;font-size:1.1rem;}
.homehero .getall{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);
  padding:1.5rem 1.6rem;}
.homehero .getall h2{font-family:var(--cond);font-size:1.3rem;font-weight:600;}
.homehero .getall p{margin:.45rem 0 1rem;font-size:.95rem;max-width:none;}
.homehero .getall .fine{font-size:.83rem;opacity:.8;margin-top:.85rem;}

.doors{display:grid;grid-template-columns:repeat(3,1fr);}
.doors .door{padding:1.8rem 1.6rem 1.9rem;min-height:210px;}
.doors .door .blurb{margin-top:.6rem;font-size:.95rem;opacity:.92;line-height:1.5;}
.doors .door .count{margin-top:auto;padding-top:1rem;font-size:.92rem;font-weight:600;
  border-top:1px solid currentColor;opacity:.85;}
.doors .door:nth-child(3n+1){padding-left:var(--gutter);}
.doors .door:nth-child(3n){padding-right:var(--gutter);}

.rolestrip{padding:3.2rem 0;}
/* Elementor's own wrap runs full width; ours must not. Removing .wrap from
   this rule is what brings "Start from where you sit" back into the column. */
.rolestrip .elementor-widget-wrap{width:100%;}
.rolestrip > .wrap{width:min(1200px,92vw);max-width:100%;margin-inline:auto;}
.rolestrip h2{font-size:1.9rem;}
.rolestrip .sub{color:var(--ink-2);margin:.5rem 0 1.5rem;}
.rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);}
.rolecard{background:#fff;padding:1.1rem 1.2rem;text-decoration:none;display:block;}
.rolecard:hover{background:var(--paper-2);}
.rolecard strong{display:block;font-size:1.08rem;color:var(--ink);}
.rolecard span{display:block;font-size:.9rem;color:var(--ink-2);margin-top:.2rem;}

.homefoot{background:var(--purple-dk);color:#fff;padding:3.2rem 0;}
.homefoot .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;}
.homefoot h2{font-size:1.7rem;}
.homefoot p{margin-top:.8rem;color:#DCC7D7;max-width:40ch;}
.homefoot .btn{margin-top:1.2rem;}

@media(max-width:1000px){
  .homehero .wrap,.homefoot .wrap{grid-template-columns:1fr;gap:2rem;}
  .doors,.rolegrid{grid-template-columns:repeat(2,1fr);}
  /* Two up: the 3n cells are no longer the edge cells. */
  .doors .door:nth-child(3n+1),.doors .door:nth-child(3n){padding-left:1.4rem;padding-right:1.4rem;}
  .doors .door:nth-child(2n+1){padding-left:var(--gutter);}
  .doors .door:nth-child(2n){padding-right:var(--gutter);}
}
@media(max-width:640px){
  .doors,.rolegrid{grid-template-columns:1fr;}
  .doors .door,
  .doors .door:nth-child(3n+1),.doors .door:nth-child(3n),
  .doors .door:nth-child(2n+1),.doors .door:nth-child(2n){
    padding-left:var(--gutter);padding-right:var(--gutter);}
  .doors .door{min-height:0;padding-top:1.4rem;padding-bottom:1.5rem;}
  .rolestrip{padding:2.2rem 0;}
  .rolestrip h2{font-size:1.6rem;}
  .homehero{padding:2.4rem 0 2.8rem;}
  .homefoot{padding:2.4rem 0;}
}


/* ============================================================
   Guards against theme-level colour and sizing rules.

   The design system sets a colour once on a coloured surface and
   lets everything inside inherit it. Astra colours headings and
   links explicitly, and an element selector beats inheritance no
   matter how dark the background is — so white-on-purple headings
   came out in Astra's ink. Re-asserting inheritance fixes it for
   every surface at once, and keeps the on-light variants working
   rather than hardcoding white.
   ============================================================ */
.topbar h1,.topbar h2,.topbar h3,
.hero h1,.hero h2,.hero h3,.hero p,
.homehero h1,.homehero h2,.homehero h3,.homehero p,
.slim h1,.slim h2,.slim p,
.cshero h1,.cshero h2,
.four h1,.four h2,.four p,
.ty h1,.ty h2,.ty h3,
.howto h1,.howto h2,.howto h3,
.homefoot h1,.homefoot h2,
.getall h2,.getall p,
.printed h2,.printed p,
.door strong,.door .n,.door .blurb,.door .count,
.use strong,.use span,
.rolestrip h2,
.sechead h2,
.groupbar h3{color:inherit;}

/* Links inside surfaces we own inherit their colour too.
   Note .door and .rolecard are deliberately NOT in this list: they are
   themselves the coloured surface, so inheriting would pull the page's
   ink colour up and undo the thing this block exists to fix. Their own
   class selectors already outrank Astra's element-level link rule. */
.topbar a,.topbar a:hover,
.crumbs a,.crumbs a:hover,
.funders .fnav a,.card h3 a,.pager a,.relbox a{color:inherit;}

.door,.door:hover,.door:visited{color:#fff;}
.door.on-light,.door.on-light:hover,.door.on-light:visited{color:var(--ink);}
.rolecard,.rolecard:hover,.rolecard:visited{color:var(--ink);}

/* The header logo is an <img> inside a fixed-width link. Without an
   explicit size it collapses when the host's lazy-loader swaps in a
   zero-dimension placeholder, which reads as "the logo is missing". */
.brand img{display:block;width:100%;height:auto;}
.brand-text{font-family:var(--cond);font-weight:700;font-size:1.15rem;
  letter-spacing:.01em;color:inherit;}
.funders .logo img{display:block;width:100%;height:auto;}


/* ---------- contents view (Downloads page) ---------- */
.contents{border-top:2px solid var(--ink);}
.cgroup{border-bottom:1px solid var(--rule);background:#fff;}
.cgroup summary{display:flex;align-items:center;gap:1rem;padding:.95rem 1.1rem;
  cursor:pointer;list-style:none;}
.cgroup summary::-webkit-details-marker{display:none;}
.cgroup summary:hover{background:var(--paper-2);}
.cgroup .sw{width:9px;height:30px;background:var(--c);flex:0 0 auto;}
.cgroup .t{flex:1;font-size:1.15rem;font-weight:600;line-height:1.25;}
.cgroup .m{font-size:.88rem;color:var(--ink-2);white-space:nowrap;}
.cgroup .chev{width:14px;height:14px;flex:0 0 auto;color:var(--ct,var(--c));
  transition:transform .18s ease;}
.cgroup[open] .chev{transform:rotate(180deg);}
.cgroup ol{list-style:none;margin:0;padding:0 1.1rem 1rem 2.4rem;}
.cgroup li{display:flex;align-items:center;gap:.9rem;padding:.5rem 0;
  border-top:1px dotted var(--rule);font-size:.97rem;}
.cgroup li .n{font-family:var(--cond);font-weight:700;color:var(--ct,var(--c));
  width:1.5rem;flex:0 0 auto;}
.cgroup li a.t{flex:1;text-decoration:none;color:var(--ink);font-weight:400;
  font-size:.97rem;}
.cgroup li a.t:hover{color:var(--ct,var(--c));text-decoration:underline;
  text-underline-offset:3px;}
.cgroup li .pp{font-size:.85rem;color:var(--ink-2);white-space:nowrap;}
.cgroup li .dl{font-size:.85rem;font-weight:700;color:var(--ct,var(--c));
  text-decoration:none;white-space:nowrap;}

/* ---------- download tables ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;min-width:520px;border-collapse:collapse;background:#fff;
  border:1px solid var(--rule);}
.tbl th{text-align:left;font-family:var(--cond);letter-spacing:.09em;font-size:.82rem;
  color:var(--ink-2);padding:.7rem .9rem;border-bottom:2px solid var(--ink);
  font-weight:600;}
.tbl td{padding:.7rem .9rem;border-bottom:1px solid var(--rule);font-size:1rem;
  vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--paper-2);}
.tbl .sw{display:inline-block;width:9px;height:26px;background:var(--rc);
  vertical-align:middle;margin-right:.7rem;}
.tbl .nm{font-weight:600;}
.tbl .num{white-space:nowrap;color:var(--ink-2);font-size:.92rem;}
.tbl .act{text-align:right;white-space:nowrap;}
.tbl a.dl{font-weight:700;color:var(--purple);text-decoration:none;font-size:.94rem;}
.tbl a.dl:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- the complete Guide card ---------- */
.bigfile{background:#fff;border:2px solid var(--ink);display:grid;
  grid-template-columns:minmax(0,1fr) 20rem;gap:2.5rem;padding:2rem 2.1rem;
  align-items:center;}
.bigfile h3{font-size:1.7rem;}
.bigfile p{margin:.6rem 0 0;color:var(--ink-2);max-width:48ch;}
.bigfile .facts{display:flex;gap:1.6rem;margin-top:1.1rem;flex-wrap:wrap;}
.bigfile .fact strong{display:block;font-family:var(--cond);font-size:1.5rem;
  line-height:1;color:var(--purple);}
.bigfile .fact span{font-size:.85rem;color:var(--ink-2);}
.bigfile .side .fine{font-size:.84rem;color:var(--ink-2);margin:.8rem 0 0;}

.hardcopy{background:var(--teal);color:#fff;padding:2.4rem 0;}
.hardcopy .wrap{display:flex;gap:2.4rem;align-items:center;flex-wrap:wrap;}
.hardcopy h3{font-size:1.6rem;max-width:26ch;color:inherit;}
.hardcopy p{margin:.5rem 0 0;color:#D3E5E9;max-width:44ch;}
.hardcopy .r{margin-left:auto;}

@media(max-width:1000px){
  .bigfile{grid-template-columns:1fr;gap:1.4rem;}
  .hardcopy .r{margin-left:0;}
}
@media(max-width:640px){
  .cgroup .m{display:none;}
  .cgroup li .pp{display:none;}
  .tbl .num{display:none;}
}


/* ---------- contact page ---------- */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.2rem;}
.formcard{background:#fff;border:1px solid var(--rule);padding:1.8rem 1.8rem 2rem;}
.formcard h3{font-size:1.4rem;}
.formcard .note{color:var(--ink-2);font-size:.96rem;margin:.5rem 0 1.4rem;}
.sidehead{font-size:1.4rem;margin-bottom:.9rem;}

.direct{border-top:2px solid var(--ink);}
.direct .row{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 0;
  border-bottom:1px solid var(--rule);}
.direct strong{display:block;font-size:1.08rem;}
.direct p{margin:.25rem 0 0;font-size:.95rem;color:var(--ink-2);}
.direct a.em{font-weight:600;color:var(--purple);text-decoration:none;}
.direct a.em:hover{text-decoration:underline;text-underline-offset:3px;}

.faqs{margin-top:2.4rem;}
.faqs details{background:#fff;border:1px solid var(--rule);margin-bottom:.6rem;}
.faqs summary{padding:.85rem 1.1rem;cursor:pointer;font-weight:600;font-size:1.03rem;
  display:flex;align-items:center;gap:.9rem;list-style:none;}
.faqs summary::-webkit-details-marker{display:none;}
.faqs summary:hover{background:var(--paper-2);}
.faqs .q{flex:1;}
.faqs .chev{width:13px;height:13px;color:var(--purple);transition:transform .18s ease;
  flex:0 0 auto;}
.faqs details[open] .chev{transform:rotate(180deg);}
.faqs .a{padding:0 1.1rem 1.1rem;color:var(--ink-2);font-size:.97rem;margin:0;}
.faqs .a a{color:var(--purple);font-weight:600;}

/* ---------- WPForms, brought into the design system ---------- */
.wpforms-container{margin:0;}
.wpforms-container .wpforms-field{padding:0 0 .9rem;}
.wpforms-container .wpforms-field-label{font-family:var(--font);font-size:.9rem;font-weight:400;
  color:var(--ink-2);margin-bottom:.3rem;}
.wpforms-container .wpforms-required-label{color:var(--orange);}
.wpforms-container .wpforms-field-sublabel{font-size:.8rem;color:var(--ink-2);}
.wpforms-container input[type=text],.wpforms-container input[type=email],
.wpforms-container select,.wpforms-container textarea{
  font-family:var(--font)!important;font-size:1rem!important;color:var(--ink)!important;
  background-color:#fff!important;border:1px solid var(--rule)!important;border-radius:0!important;
  padding:.6rem .75rem!important;width:100%!important;box-shadow:none!important;}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{
  border-color:var(--purple)!important;outline:2px solid var(--purple)!important;
  outline-offset:1px;}
.wpforms-container textarea{min-height:130px!important;}
.wpforms-container .wpforms-field-checkbox label{font-size:.9rem;color:var(--ink-2);}
.wpforms-container .wpforms-submit{
  background:var(--orange)!important;color:#241019!important;border:none!important;
  border-radius:0!important;font-family:var(--font)!important;font-size:1rem!important;
  font-weight:700!important;padding:.72rem 1.35rem!important;cursor:pointer;}
.wpforms-container .wpforms-submit:hover{background:#F0A03A!important;}
.wpforms-container .wpforms-error{color:#B32D2E;font-size:.86rem;}
.wpforms-container .wpforms-confirmation-container{background:#EDFAEF;border:1px solid #B8E6C4;
  color:#00733B;padding:1rem 1.2rem;}

/* WPForms' modern render caps field widths with max-width (60% for medium,
   80% for small). width:100% cannot beat max-width, which is why the card
   came out ragged — set both. */
.wpforms-container .wpforms-field-small,
.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field-large{max-width:100%!important;width:100%!important;}

/* The first/last name row rides on WPForms' own half-width floats, so its
   gutter never matched the rest of the card. Own it. */
.wpforms-container .wpforms-field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;
  max-width:100%!important;width:100%!important;}
.wpforms-container .wpforms-field-row-block{width:auto!important;max-width:none!important;
  margin:0!important;padding:0!important;float:none!important;}

/* Selects need their own chevron back — see the background-color note above.
   Data URI, so no outbound request. */
.wpforms-container select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23772D61' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right .8rem center!important;
  background-size:12px 8px!important;padding-right:2.4rem!important;}

/* Choices the width rule above must not catch. */
.wpforms-container input[type=checkbox],.wpforms-container input[type=radio]{width:auto!important;
  max-width:none!important;margin-right:.5rem;}
.wpforms-container .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0;}
.wpforms-container .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:.15rem;}
.wpforms-container .wpforms-field-label-inline{font-size:.9rem;color:var(--ink-2);}

/* Submit sits tight under the last field, not floating. */
.wpforms-container .wpforms-submit-container{padding:.4rem 0 0;}

@media(max-width:560px){.wpforms-container .wpforms-field-row{grid-template-columns:1fr;}}

@media(max-width:1000px){.contactgrid{grid-template-columns:1fr;gap:2.2rem;}}


/* ============================================================
   Small-screen pass — 0.1.7
   ============================================================ */
@media(max-width:480px){
  .brand{width:150px;}
  .navtoggle{padding:.45rem .6rem;}
  body{font-size:16px;}
  .formcard{padding:1.2rem 1.1rem 1.4rem;}
  .four .code{font-size:3.4rem;}
  .groupbar{flex-wrap:wrap;gap:.35rem;}
  .pager a{padding:1rem 1.1rem;}
  .dlcard,.relbox,.qr{padding:1.1rem 1rem;}
}

/* Long URLs and short links must not push the page sideways. */
.printed code,.qr code,.direct a.em,.body a{overflow-wrap:anywhere;}

/* Logos never exceed their column on a phone. */
.funders .logo{width:min(260px,100%);}

/* Touch targets. Fingers are not mouse pointers — 44px is the floor. */
@media(pointer:coarse){
  .nav a,.rolebar a,.acc .rel a,.fnav-list a,.crumbs a{
    min-height:44px;display:inline-flex;align-items:center;}
  .acc summary,.faqs summary,.cgroup summary{min-height:48px;}
}


/* ============================================================
   Elementor header helpers — 0.1.9

   For a Theme Builder header. Put the class in the widget's
   Advanced → CSS Classes field. Nothing here fires unless an
   Elementor header is published, so the coded bar is unaffected.
   ============================================================ */
.bpg-header{background:var(--purple);color:#fff;}
.bpg-header a,.bpg-header a:hover,.bpg-header a:visited{color:#fff;}
.bpg-logo img{width:190px;height:auto;max-width:100%;display:block;}
.bpg-nav .elementor-item{font-family:var(--cond);font-weight:600;font-size:1.06rem;
  letter-spacing:.02em;}
@media(max-width:480px){.bpg-logo img{width:150px;}}


/* ============================================================
   Elementor nav menu — safety net, 0.2.1

   The mobile panel defaults to a white background. If a widget
   setting is ever cleared, white items on white is the result,
   which is what happened once. No !important anywhere: Elementor's
   own rules are more specific, so a deliberate setting in the
   panel still wins. This only catches the empty case.
   ============================================================ */
.bpg-nav .elementor-nav-menu--dropdown{background-color:var(--purple-dk);}
.bpg-nav .elementor-nav-menu--dropdown a,
.bpg-nav .elementor-nav-menu--dropdown a:hover,
.bpg-nav .elementor-nav-menu--dropdown a:focus,
.bpg-nav .elementor-nav-menu--dropdown a.elementor-item-active{color:#fff;}
.bpg-nav .elementor-nav-menu--dropdown a:hover,
.bpg-nav .elementor-nav-menu--dropdown a.elementor-item-active{background-color:var(--purple);}
.bpg-nav .elementor-menu-toggle{color:#fff;}
.bpg-nav .elementor-nav-menu--dropdown .elementor-item{
  font-family:var(--cond);font-weight:600;min-height:48px;display:flex;align-items:center;}


/* ============================================================
   Download gate — 0.2.3
   ============================================================ */
.gate{background:var(--paper);padding:3rem 0 3.6rem;}
.gatecard{background:#fff;border:1px solid var(--rule);max-width:560px;margin-inline:auto;
  padding:2rem 2rem 2.2rem;}
.gatecard .k{font-family:var(--cond);letter-spacing:.13em;font-size:.8rem;color:var(--ink-2);
  margin:0 0 .3rem;}
.gatecard h1{font-size:1.7rem;line-height:1.2;}
.gatefacts{color:var(--ink-2);font-size:.92rem;margin:.5rem 0 1.4rem;}
.gateerror{background:#FCF0F1;border-left:4px solid #B32D2E;color:#8A2226;
  padding:.8rem 1rem;font-size:.95rem;margin:0 0 1.2rem;}
.gatecard label{display:block;font-size:.9rem;color:var(--ink-2);margin:.9rem 0 .3rem;}
.gatecard input[type=text],.gatecard input[type=email],.gatecard select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:0;padding:.6rem .75rem;}
.gatecard input:focus,.gatecard select:focus{border-color:var(--purple);
  outline:2px solid var(--purple);outline-offset:1px;}
.gatecard .req{color:var(--orange);}
.gatecheck{margin:1.2rem 0 0;}
.gatecheck label{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:.92rem;}
.gatecheck input[type=checkbox]{width:auto;margin-top:.25rem;flex:0 0 auto;}
.gatecard .btn{margin-top:1.5rem;}
.gatefine{margin:1.2rem 0 0;font-size:.84rem;color:var(--ink-2);line-height:1.5;}
.gatefine a{color:var(--purple);font-weight:600;}
@media(max-width:560px){.gatecard{padding:1.4rem 1.2rem 1.6rem;}}


/* Elementor's accordion swallows the outline on its headers. */
.elementor-accordion .elementor-tab-title:focus-visible,
.elementor-widget-button .elementor-button:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff;}


/* ============================================================
   What's Changed — 0.2.6
   ============================================================ */
.changes{max-width:760px;}
.changes-month{font-family:var(--cond);font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin:2.2rem 0 .2rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--ink);}
.changes-month:first-child{margin-top:0;}
.change{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.4rem;
  padding:1.2rem 0;border-bottom:1px solid var(--rule);}
.change-when{margin:0;font-family:var(--cond);font-weight:600;color:var(--ink-2);
  font-size:.95rem;padding-top:.15rem;}
.change-body h3{font-size:1.1rem;margin:0 0 .3rem;}
.change-body h3 a{color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--rule);}
.change-body h3 a:hover{border-color:var(--purple);color:var(--purple);}
.change-v{font-family:var(--cond);font-weight:600;color:var(--ink-2);font-size:.9rem;
  margin-left:.3rem;}
.change-flag{display:inline-block;margin:0 0 .4rem;padding:.15rem .5rem;
  background:var(--orange);color:#241019;font-family:var(--cond);font-weight:700;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;}
.change-note{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.6;}
.change-first{font-style:italic;}
.change-scope{margin:.35rem 0 0;font-size:.85rem;color:var(--ink-2);
  font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;}
.changes-empty{color:var(--ink-2);max-width:60ch;}
@media(max-width:640px){
  .change{grid-template-columns:1fr;gap:.35rem;}
  .change-when{padding-top:0;}
}


/* ============================================================
   Case study cards — 0.2.7
   Styled through classes inside the Text Editor content, not
   Elementor CSS classes: custom classes on containers written
   through the API are not emitted, but markup inside the editor
   always is.
   ============================================================ */
.csn{font-family:var(--cond);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple);font-weight:600;margin:0 0 .35rem;}
.cst{margin:0 0 .3rem;font-size:1.1rem;line-height:1.25;color:var(--ink);}
.cst strong{font-weight:700;}
.css{margin:0 0 .9rem;font-size:.95rem;color:var(--ink-2);}
.csd{margin:0 0 .7rem;font-size:.85rem;color:var(--ink-2);padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);}
.csm{margin:0 0 .2rem;font-family:var(--cond);font-size:.85rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--teal);font-weight:600;}
.csv{margin:0;font-size:.82rem;color:var(--ink-2);}


/* Further support rows */
.fsmod{font-family:var(--cond);font-size:1.25rem;font-weight:700;color:#fff;
  background:var(--purple);margin:2rem 0 0;padding:.6rem 1rem;letter-spacing:.02em;}
.fssec{margin:0;padding:.9rem 1rem;border:1px solid var(--rule);border-top:none;
  background:#fff;font-size:.98rem;color:var(--ink);}
.fssec strong{font-weight:600;}
.fslinks{display:inline-block;margin-top:.3rem;font-family:var(--cond);font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}


/* Resource tiles — posters and family factsheets */
.rcover{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.414;
  background:var(--paper);border:1px dashed var(--rule);margin:0 0 .8rem;
  font-family:var(--cond);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;padding:.5rem;}
.rname{margin:0 0 .5rem;font-size:.95rem;line-height:1.35;color:var(--ink);font-weight:600;}
.rkind{margin:0;font-family:var(--cond);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple-lt-dk);font-weight:600;}


/* Downloads page list rows */
.dlrow{margin:0;padding:.85rem 1rem;background:#fff;border:1px solid var(--rule);
  border-bottom:none;font-size:.98rem;color:var(--ink);}
.dlrow:last-child{border-bottom:1px solid var(--rule);}


/* Home module cards, role rows and footer links */
.dkn{font-family:var(--cond);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .3rem;opacity:.9;}
.dkt{font-family:var(--font);font-size:1.5rem;font-weight:700;line-height:1.15;margin:0 0 .8rem;}
.dks{font-size:.95rem;line-height:1.6;margin:0 0 1.2rem;opacity:.95;}
.dkc{margin:0;padding-top:.9rem;border-top:1px solid currentColor;font-weight:600;
  font-size:.92rem;}
.rolerow{margin:0;padding:.9rem 1rem;background:#fff;border:1px solid var(--rule);
  border-bottom:none;font-size:1rem;color:var(--ink);font-weight:600;}
.rolerow:last-child{border-bottom:1px solid var(--rule);}
.lnkt{margin:0 0 .5rem;font-size:1.4rem;font-weight:700;line-height:1.2;}
.lnkt a{color:#fff;text-decoration:none;border-bottom:3px solid var(--orange);}
.lnkt a:hover{color:var(--orange);}
.lnkd{margin:0;font-size:.95rem;line-height:1.6;}
@media(max-width:1000px){.dkt{font-size:1.3rem;}}


/* User group pages */
.ugm{margin:0;padding:.7rem 1rem;background:var(--purple);color:#fff;font-family:var(--cond);
  font-size:1.1rem;font-weight:700;letter-spacing:.02em;}
.ugs{margin:0;padding:.75rem 1rem;background:#fff;border:1px solid var(--rule);border-top:none;
  font-size:.92rem;line-height:1.5;color:var(--ink);}
.ughm{margin:1.6rem 0 .4rem;font-family:var(--cond);font-size:.95rem;letter-spacing:.1em;
  color:var(--purple);font-weight:700;}
.ughm:first-child{margin-top:0;}
.ughd{margin:0;padding-bottom:1.1rem;border-bottom:1px solid var(--rule);color:var(--ink-2);
  font-size:1rem;line-height:1.6;}


/* Home module card titles are links; inherit the card's text colour. */
.dkt a{color:inherit;text-decoration:none;border-bottom:2px solid currentColor;}
.dkt a:hover{opacity:.85;}
.rolerow a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--rule);}
.rolerow a:hover{color:var(--purple);border-color:var(--purple);}


/* ============================================================
   Card surfaces for widgets written through the API — 0.2.8

   Elementor ignores `background_background` on a widget (the
   wrapper form is `_background_background`), so the white card
   grounds on these blocks never rendered. Rather than restructure
   sixty widgets, the surface is applied here by matching the
   markup inside each one. :has() is supported by every current
   browser; where it is not, the blocks simply sit on the page
   background, which is what they do today.
   ============================================================ */
.elementor-widget-text-editor:has(> .csn),
.elementor-widget-text-editor:has(> .rcover),
.elementor-widget-text-editor:has(> .dlrow),
.elementor-widget-text-editor:has(> .ugm),
.elementor-widget-text-editor:has(> .fsmod){background:transparent;}

.elementor-widget-text-editor:has(> .csn){
  background:#fff;border:1px solid var(--rule);padding:1.25rem 1.25rem 1.4rem;}
.elementor-widget-text-editor:has(> .rcover){
  background:#fff;border:1px solid var(--rule);padding:.9rem .9rem 1rem;}
.elementor-widget-heading:has(> .elementor-heading-title){background:transparent;}


/* Short-link box when the QR image is switched off */
.qr-link-only{text-align:left;}
.qr-link-only p{margin:0 0 .4rem;font-family:var(--cond);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);}


/* ============================================================
   Colour strip and whole-card links — 0.3.0
   ============================================================ */

/* The strip's six swatches were 16.6% each, which is 99.6% — hence the sliver
   of page showing past the sixth colour. Equal flex shares land on exactly
   100% at any width. Targeted by element id, which Elementor does emit, since
   custom classes on API-written elements do not survive. */
[data-id^="hms"],[data-id^="dls"],[data-id^="ths"]{
  flex:1 1 0!important;width:auto!important;min-width:0!important;}

/* Whole module card clickable, the way the doors behave. The title stays the
   only link in the markup — the pseudo-element simply grows it to cover the
   card, so screen readers and the tab order are unchanged and there is no
   second, duplicate link to skip past. */
.e-con:has(> .elementor-widget-text-editor .dkt){position:relative;transition:filter .15s;}
.e-con:has(> .elementor-widget-text-editor .dkt):hover{filter:brightness(1.06);}
.dkt a::after{content:"";position:absolute;inset:0;z-index:1;}
.e-con:has(.dkt) .dks,
.e-con:has(.dkt) .dkc{position:relative;z-index:2;}
.dkt a:focus-visible{outline:none;}
.e-con:has(.dkt):focus-within{outline:3px solid #fff;outline-offset:-5px;}


/* ============================================================
   Resource and case study lists — 0.3.4
   ============================================================ */
.reslist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.rescard{background:#fff;border:1px solid var(--rule);padding:1rem;display:flex;
  flex-direction:column;gap:.45rem;}
.rescard .rname{margin:0;font-weight:600;font-size:.95rem;line-height:1.35;color:var(--ink);}
.rescard .rfacts{margin:0;font-family:var(--cond);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);}
.rescard .dl{margin-top:auto;align-self:flex-start;background:var(--orange);color:#241019;
  font-weight:700;text-decoration:none;padding:.45rem .8rem;font-size:.9rem;}
.rescard .soon{margin-top:auto;font-size:.82rem;font-style:italic;color:var(--ink-2);}

.cslist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.cscard{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--c);
  padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;}
.cslist .cst{margin:0;font-size:1.05rem;line-height:1.3;}
.cslist .cst a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--rule);}
.cslist .cst a:hover{color:var(--c);border-color:var(--c);}
.cslist .csn{color:var(--c);}
.cslist .csm{margin:0;font-family:var(--cond);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);}
.cscard .dl{margin-top:auto;align-self:flex-start;background:var(--orange);color:#241019;
  font-weight:700;text-decoration:none;padding:.45rem .8rem;font-size:.9rem;}
.cscard .soon{margin-top:auto;font-size:.82rem;font-style:italic;color:var(--ink-2);}
@media(max-width:1000px){.reslist{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cslist{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.reslist,.cslist{grid-template-columns:1fr;}}


/* Resource cover images */
.rescard .rcover{display:block;width:100%;height:auto;aspect-ratio:1/1.414;object-fit:cover;
  object-position:top center;border:1px solid var(--rule);background:var(--paper);margin:0 0 .2rem;}
.rescard .rcover-none{display:flex;align-items:center;justify-content:center;}
.rescard .rcover-none::after{content:"No cover yet";font-family:var(--cond);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}


/* Case study group headings */
.csgroup{font-family:var(--font);font-size:1.5rem;font-weight:700;color:var(--ink);
  margin:2.4rem 0 1rem;padding-left:.8rem;border-left:6px solid var(--c);}
.csgroup:first-child{margin-top:0;}


/* About page: what the Guide includes */
.abico{margin:0 0 .7rem;}
.abico img{width:48px;height:48px;display:block;}
.abname{margin:0;font-family:var(--cond);font-size:1.15rem;font-weight:700;line-height:1.25;
  color:var(--ink);letter-spacing:.01em;}


/* ============================================================
   Elementor columns on small screens — 0.3.8

   Widths set on a widget or a nested container are percentages of
   the row, and Elementor keeps them at every breakpoint unless a
   mobile value is set for each one individually. Four 23% cards
   stay 23% on a 390px phone, which is how "Co-designed" ends up
   one word per line. Rather than set a mobile width on every
   element, anything laid out in a row goes to one column here.
   ============================================================ */
@media (max-width:767px){
  /* nested containers used as columns */
  .e-con > .e-con,
  .e-con-inner > .e-con{
    width:100%!important;max-width:100%!important;flex-basis:auto!important;}

  /* widgets given a custom width to sit side by side */
  .e-con > .elementor-widget,
  .e-con-inner > .elementor-widget{
    width:100%!important;max-width:100%!important;
    --container-widget-width:100%!important;}

  /* the rows themselves stack */
  .e-con.e-flex,
  .e-con-inner.e-flex{flex-direction:column!important;}

  /* except the six-colour strips, which are the one row that must
     stay a row — they are the brand device, not content */
  [data-id="hm10"],[data-id="dl10"],[data-id="th05"]{flex-direction:row!important;}
  [data-id="hm10"] > .e-con,[data-id="dl10"] > .e-con,[data-id="th05"] > .e-con{
    width:16.6%!important;flex:1 1 0!important;}

  /* module cards keep their full-bleed colour but read one at a time */
  [data-id^="hd"]{width:100%!important;}
}

/* Tablet: two up rather than three, before everything stacks */
@media (min-width:768px) and (max-width:1024px){
  .e-con > .elementor-widget[style*="--width"],
  .e-con-inner > .elementor-widget{max-width:100%;}
  [data-id^="abi"]{width:48%!important;}
  [data-id^="hd"]{width:50%!important;}
}


/* ============================================================
   Role pages: module headers take the module's colour — 0.4.2
   The six columns are always in module order on every role page,
   so the colour can key off the column rather than being written
   into each page.
   ============================================================ */
[data-id="ugc01"] .ugm,[data-id="ug11"] .ugm{background:var(--orange);color:var(--ink);}
[data-id="ugc02"] .ugm,[data-id="ug12"] .ugm{background:var(--lime);color:var(--ink);}
[data-id="ugc03"] .ugm,[data-id="ug13"] .ugm{background:var(--teal);color:#fff;}
[data-id="ugc04"] .ugm,[data-id="ug14"] .ugm{background:#A16194;color:#fff;}
[data-id="ugc05"] .ugm,[data-id="ug15"] .ugm{background:var(--dgreen);color:var(--ink);}
[data-id="ugc06"] .ugm,[data-id="ug16"] .ugm{background:var(--purple);color:#fff;}

/* Section lines are links once a matching section record exists */
.ugs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);}
.ugs a:hover{color:var(--purple);border-color:var(--purple);}
.ugs:has(a){background:#fff;}


/* Section pages with no body: one column, so the download is the page rather
   than a box floating beside an empty space. */
.cols-single{display:block!important;max-width:44rem;}
.cols-single .body{display:none;}
.cols-single .side{width:100%;}


/* Role page section links: say what the file is before it is clicked */
.ugs a{display:block;}
.ugs .meta{display:block;margin-top:.25rem;font-family:var(--cond);font-size:.78rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);}
.ugs a:hover .meta{color:var(--purple);}


/* The whole-module download, where a module has no section files */
.ugs-whole{background:var(--paper);border-top:2px solid var(--purple);}
.ugs-whole a{font-weight:600;color:var(--purple);}
.ugs-whole .meta{color:var(--ink-2);}


/* Further support: while the links are being confirmed */
.fsnote{background:#fff;border-left:6px solid var(--orange);padding:1rem 1.2rem;margin:0 0 1.6rem;
  font-size:1rem;line-height:1.6;color:var(--ink);}
.fsnote a{color:var(--purple);}
.fssec{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;}
.fstag{flex:0 0 auto;font-family:var(--cond);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;background:#FCEFDC;color:#8A5A12;padding:.1rem .5rem;border-radius:2px;
  white-space:nowrap;}
@media(max-width:600px){.fssec{flex-direction:column;gap:.4rem;}}


/* ============================================================
   Build a print pack
   ============================================================ */
.pack{margin:0;}
.packmod{margin:0 0 1.4rem;border:1px solid var(--rule);background:#fff;}
.packhead{display:flex;align-items:baseline;gap:.7rem;margin:0;padding:.85rem 1.1rem;
  background:var(--c);color:#fff;font-family:var(--cond);font-size:1.18rem;font-weight:700;
  cursor:pointer;}
.packhead .f{margin-left:auto;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.95;font-weight:600;}
.packsec{display:flex;align-items:baseline;gap:.7rem;margin:0;padding:.75rem 1.1rem;
  border-top:1px solid var(--rule);font-size:.95rem;cursor:pointer;}
.packsec:hover{background:var(--paper);}
.packsec .f{margin-left:auto;flex:0 0 auto;font-family:var(--cond);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
.pack input[type=checkbox]{width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--purple);}
.packhead input[type=checkbox]{accent-color:#fff;}
.packbar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;background:var(--ink);color:#fff;padding:.9rem 1.1rem;margin-top:1.4rem;flex-wrap:wrap;}
.packcount{margin:0;font-family:var(--cond);font-size:1rem;letter-spacing:.04em;}
.packbar .btn{background:var(--orange);color:#241019;border:none;font-family:var(--font);
  font-weight:700;font-size:1rem;padding:.7rem 1.4rem;cursor:pointer;}
.packbar .btn:disabled{opacity:.45;cursor:not-allowed;}
.packwarn{background:#FBE6E6;border-left:5px solid #B32D2E;padding:1rem 1.2rem;}
@media(max-width:640px){
  .packhead,.packsec{flex-wrap:wrap;}
  .packhead .f,.packsec .f{margin-left:1.85rem;width:100%;}
}