/* Comfort settings, back to top, article navigation, search and print. Comfort rules match justgold.net. */
.ib{width:44px;height:44px;border:1px solid currentColor;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit;transition:background .25s,color .25s}
.ib:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gnav .search-btn{border-color:var(--rule)}
.gnav .search-btn:hover{border-color:var(--ink)}
@media(max-width:1100px){.gnav .search-btn{display:none}}
.cmf{position:relative}
.cmf-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.cmf-btn:hover,.cmf-btn[aria-expanded=true]{border-color:var(--ink)}
.cmf-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cmf-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--ink);padding:20px;z-index:60;box-shadow:0 12px 40px #0000001f}
.cmf-h{font-size:17px;font-weight:600;margin:0}
.cmf-d{font-size:14px;color:var(--ink-2);margin:6px 0 14px}
.cmf-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cmf-panel [role=switch]{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:10px 6px;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer}
.cmf-panel [role=switch]:hover{background:var(--wash)}
.cmf-panel [role=switch]:focus-visible{outline:3px solid var(--focus);outline-offset:0}
.cmf-panel b{display:block;font-size:15px;font-weight:500}
.cmf-panel small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.sw{flex:none;position:relative;width:40px;height:22px;border:1.5px solid var(--ink);margin-top:1px}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;background:var(--ink);transition:transform .2s}
[aria-checked=true] .sw{background:var(--ink)}
[aria-checked=true] .sw:after{background:#fff700;transform:translate(18px)}
.cmf-reset{margin-top:12px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink)}
@media(max-width:900px){.cmf-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cmf-btn{width:40px;justify-content:center;padding:0;gap:0}}
html.c-motion *,html.c-motion *:before,html.c-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.c-motion .lg-anim .lg-p{stroke-dashoffset:0!important}
html.c-motion .lg-anim .lg-word{opacity:1!important}
html.c-motion .lg-anim .lg-fill{fill:transparent!important}
html.c-text body{zoom:1.125}
html.c-contrast{--ink-2:#2B2B2B;--rule:#8A8A8A;--wash:#ECECEA}
html.c-contrast .label,html.c-contrast .rt,html.c-contrast small{color:#2b2b2b!important}
html.c-read main p,html.c-read main li,html.c-read main dd{line-height:1.85!important;letter-spacing:.02em;word-spacing:.08em;text-align:left!important}
html.c-read .prose{max-width:62ch}
@media(max-width:900px){.cmf-panel{position:fixed;left:16px;right:16px;top:calc(var(--navh) + 8px);width:auto;max-height:calc(100svh - var(--navh) - 24px);overflow:auto}}

/* Pride in Business: comfort settings also settle the triangle marks */
html.c-motion .t-wait .t-p,html.c-motion .t-p{stroke-dashoffset:0!important}
html.c-motion .t-wait .t-fill{fill:var(--pink)!important}

/* Header: Just Gold link, search shown in the mobile menu only */
.l1 .ext{display:inline-block;width:11px;height:11px;margin-left:-2px;vertical-align:baseline}
.l1 .l1-m{display:none}
.gnav .right{gap:10px}
.gnav .right .ib.search-btn{width:40px;height:40px}
@media(max-width:1100px){.l1.open .l1-m{display:block}.l1.open .l1-jg a{justify-content:flex-start;gap:6px}}

/* Back to top */
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 6px 24px #00000014;transition:opacity .25s,transform .25s}
.totop svg{width:18px;height:18px}
.totop:hover{background:var(--ink);color:var(--paper)}
.totop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.totop.off{opacity:0;transform:translateY(8px);pointer-events:none}
@media(max-width:620px){.totop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.totop{width:44px;padding:0;justify-content:center}}

/* Explainers: On this page */
.art-side .otp ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;border-left:1px solid var(--rule)}
.art-side .otp a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--ink-2);line-height:1.35}
.art-side .otp a:hover,.art-side .otp a.on{color:var(--ink);border-left-color:var(--ink)}
.prose h2[id],.srcs h2{scroll-margin-top:calc(var(--navh) + 24px)}

/* End of article: keep reading */
.artnav{margin-top:56px;border-top:1px solid var(--ink);padding-top:28px}
.artnav .pn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.artnav .pn a{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--rule);text-decoration:none;color:var(--ink);min-height:100%}
.artnav .pn a:hover{border-color:var(--ink)}
.artnav .pn-next{text-align:right}
.artnav .pn-k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.artnav .pn-prev .pn-k:before{content:"\2190\00a0"}
.artnav .pn-next .pn-k:after{content:"\00a0\2192"}
.artnav .pn-t{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.artnav .artlinks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px}
.artnav .artlinks a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.artnav .artlinks span{color:var(--ink-2)}
.prose .artnav .artlinks li{padding:0;margin:0}
.prose .artnav .artlinks li:before{display:none}
@media(max-width:620px){.artnav .pn{grid-template-columns:1fr}.artnav .pn-next{text-align:left}}

/* Impact page timeline and Just Gold links */
.tline{list-style:none;margin:28px 0;padding:0;display:grid;gap:0;border-left:1px solid var(--rule)}
.tline li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:20px;padding:0 0 28px 24px;position:relative}
.tline li:before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;background:var(--ink)}
.tline .tl-y{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.tline h3{font-size:19px;line-height:1.25;margin:0 0 6px}
.tline p{margin:0}
@media(max-width:620px){.tline li{grid-template-columns:1fr;gap:4px}}
.jg-links{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.prose .jg-links li{padding-left:24px}
.jg-links a{text-decoration:underline;text-underline-offset:3px}

/* Search page */
.pf-wrap{max-width:820px;--pagefind-ui-scale:1;--pagefind-ui-primary:#111111;--pagefind-ui-text:#111111;--pagefind-ui-background:#ffffff;--pagefind-ui-border:#111111;--pagefind-ui-tag:#f3f3f1;--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:0;--pagefind-ui-font:inherit}
.pf-wrap .pagefind-ui__result-link{text-decoration:underline;text-underline-offset:3px}
.pf-alt{margin-top:32px;font-size:15px;color:var(--ink-2)}
.pf-alt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Print: the article and its sources, nothing else */
@media print{
  .gnav,.foot,.totop,.skip,.cta,.pmedia,.vid-toggle,video,.sqband,.artnav,.art-side .otp,.block.wash,.fsign,.cmf,.acts,.pib-hero,.vhero .bg{display:none!important}
  body{font-size:11.5pt;line-height:1.5;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  .art-body{display:block;padding:0}
  .art-side{position:static;display:flex;flex-wrap:wrap;gap:6px 24px;margin:12pt 0;font-size:9.5pt}
  .phero{padding:0!important}
  h1{font-size:22pt}h2{font-size:15pt;break-after:avoid}h3{break-after:avoid}
  p,li{orphans:3;widows:3}
  .prose a[href^="http"]:after,.srcs a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all;color:#333}
  .prose{max-width:none}
  @page{margin:18mm 16mm}
}
.l1 a{white-space:nowrap}
/* Header fits the extra controls: accessibility label shown from 901px, menu button below 1400px */
.gnav .wrap{gap:28px}
/* First visit pointer to the accessibility settings */
.cmf-hint{position:absolute;right:0;top:calc(100% + 12px);width:max-content;max-width:min(280px,calc(100vw - 32px));display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;background:var(--ink);color:#fff;font-size:14px;line-height:1.4;z-index:59;box-shadow:0 10px 30px #0000002e}
.cmf-hint:before{content:"";position:absolute;right:14px;top:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.cmf-hint b{display:block;font-weight:600}
.cmf-hint button{flex:none;width:28px;height:28px;margin:-4px -4px 0 0;display:grid;place-items:center;background:none;border:0;color:#fff;cursor:pointer}
.cmf-hint button:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media(max-width:900px){.cmf-hint{position:fixed;right:16px;top:calc(var(--navh) + 8px)}.cmf-hint:before{right:68px}}
@media(max-width:1399px){.l1{display:none}.burger{display:block}.l1.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);height:auto;padding:8px max(16px,env(safe-area-inset-left,0px)) 20px;border-bottom:1px solid var(--rule);gap:0}.l1.open a{width:100%;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--rule);font-size:18px}.l1.open .l1-m{display:block}.l1.open .l1-jg a{justify-content:flex-start;gap:6px}}
@media(max-width:1100px){.gnav .search-btn{display:none}}
.pf-wrap .pagefind-ui__search-input{font-weight:400;font-family:inherit}.pf-wrap .pagefind-ui__search-clear{font-family:inherit}

/* Pride in Business lockup: the approved logo, drawn like a sibling of the Just Gold square */
.pib-lockup{display:inline-flex;align-items:center;flex:none}
.lk{display:block;width:auto;overflow:visible}
.gnav .lk-head{height:40px}
.foot .lk-foot{height:52px}
@media(max-width:620px){.gnav .lk-head{height:32px}.foot .lk-foot{height:40px}}
.lk .t-p{stroke-dasharray:1 1;stroke-dashoffset:0}
.lk .lk-word{transform-box:fill-box}
.lk.t-wait .t-p,.lk-first .gnav .lk .t-p{stroke-dashoffset:1}
.lk.t-wait .lk-word,.lk-first .gnav .lk .lk-word{opacity:0}
.lk.t-wait .t-fill,.lk-first .gnav .lk .t-fill{fill:transparent}
/* Same timing as the current triangle: outline, then the two inner lines, then the pink flickers on; the words follow */
.lk.t-play .t-p1{animation:tdraw .8s cubic-bezier(.6,0,.2,1) both}
.lk.t-play .t-p2{animation:tdraw .35s cubic-bezier(.6,0,.2,1) .7s both}
.lk.t-play .t-p3{animation:tdraw .45s cubic-bezier(.6,0,.2,1) .95s both}
.lk.t-play .t-fill{animation:tneon 1.6s ease 1.3s both}
.lk.t-play .lk-word{animation:lgword .575s ease 1.2s both}
@media(prefers-reduced-motion:reduce){.lk .t-p,.lk .lk-word,.lk .t-fill{animation:none!important}.lk .t-p{stroke-dashoffset:0!important}.lk .lk-word{opacity:1!important}.lk .t-fill{fill:#ff2e8a!important}}
html.c-motion .lk .t-p{stroke-dashoffset:0!important}
html.c-motion .lk .lk-word{opacity:1!important}
html.c-motion .lk .t-fill{fill:#ff2e8a!important}

/* Footer: Pride in Business first, then Just Gold and its certification, on one line at the top */
.foot .top>.foot-jgc{grid-column:1/-1;order:-1;border-top:0;border-bottom:1px solid var(--rule);padding-top:0;padding-bottom:36px;margin:0 0 8px;gap:56px}
.foot .foot-jgc .jgc-st{margin-left:auto}
@media(max-width:900px){.foot .top>.foot-jgc{flex-wrap:wrap;gap:24px 40px}.foot .foot-jgc .jgc-st{margin-left:0;flex-basis:100%}}
@media(max-width:620px){.foot .lk-foot{height:32px}.foot .foot-jgc .lg{--h:34px!important}.foot .top>.foot-jgc{gap:20px 28px}}

/* Footer brand row, aligned to the column grid below: the two lockups as a pair over the first four columns,
   the certification over the Just Gold and Contact columns */
.foot .top>.foot-jgc{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));column-gap:28px;row-gap:24px;align-items:center;flex-wrap:nowrap}
.foot .foot-jgc .cobrand{grid-column:1/5;display:flex;align-items:center;gap:28px}
.foot .foot-jgc .cb-div{width:1px;height:52px;background:var(--ink);opacity:.25;flex:none}
.foot .foot-jgc .jgc-st{grid-column:5/7;margin-left:0}
.foot .top>div:not(.foot-jgc) p:first-child{margin-top:0}
@media(max-width:1100px){.foot .top>.foot-jgc{grid-template-columns:1fr}.foot .foot-jgc .cobrand,.foot .foot-jgc .jgc-st{grid-column:1/-1}}
@media(max-width:620px){.foot .foot-jgc .cobrand{gap:18px}.foot .foot-jgc .cb-div{height:34px}}

/* Footer: one slot. Pride in Business draws in, its mark re-routes as one continuous line into the Just Gold square
   while the letters shuffle, and Just Gold stays. Without script or with reduced motion, the static pair shows instead. */
.foot .foot-jgc .morph{display:none;grid-column:1/5;grid-template-areas:"m";align-items:start;justify-items:start}
.foot .foot-jgc.has-morph .morph{display:grid}
.foot .foot-jgc.has-morph .cobrand{display:none}
.foot .morph>*{grid-area:m}
.foot .morph .m-pib,.foot .morph .m-tx{height:52px;width:auto;display:block;overflow:visible}
.foot .morph .m-tx{visibility:hidden;opacity:1;transition:opacity .24s ease}
.foot .morph .m-ch{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;fill:#111;letter-spacing:-.02em}
.foot .morph .m-jg{display:block;visibility:hidden;opacity:0;transition:opacity .24s ease}
.foot .morph.tx-on .m-tx{visibility:visible}
.foot .morph.tx-on .m-pib{visibility:hidden}
.foot .morph.to-jg .m-pib{visibility:hidden}
.foot .morph.to-jg .m-tx{opacity:0}
.foot .morph.to-jg .m-jg{visibility:visible;opacity:1}
.foot .morph .m-jgl.fill-play .lg-fill{animation:lgneon 6.2s ease-in-out both,lgrest .8s ease 6.2s forwards}
.foot .lk-foot-static{height:52px;width:auto;display:block}
@media(max-width:1100px){.foot .foot-jgc .morph{grid-column:1/-1}}
@media(max-width:620px){.foot .morph .m-pib,.foot .morph .m-tx,.foot .lk-foot-static{height:40px}.foot .morph .m-jgl{--h:40px!important}}

/* Brand row: logo, then a line, then the certification right beside it. While Pride in Business shows,
   the line and certification wait; they fade in as Just Gold lands, because the certification is Just Gold's. */
.foot .top>.foot-jgc{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.foot .foot-jgc .cobrand,.foot .foot-jgc .jgc-st{grid-column:auto}
.foot .foot-jgc .jgc-st{margin-left:0;flex:0 1 auto}
.foot .foot-jgc .jgc-st p{max-width:30em}
.foot .foot-jgc .morph{width:calc(52px * 2208 / 978);flex:none}
.foot .foot-jgc.has-morph .cb-cert,.foot .foot-jgc.has-morph .jgc-st{opacity:0;transition:opacity .5s ease .1s}
.foot .foot-jgc.has-morph .morph.to-jg~.cb-cert,.foot .foot-jgc.has-morph .morph.to-jg~.jgc-st{opacity:1}
@media(max-width:620px){.foot .foot-jgc .morph{width:calc(40px * 2208 / 978)}.foot .foot-jgc .cb-cert{display:none}.foot .foot-jgc .jgc-st{flex-basis:100%}}
.foot .foot-jgc .cb-div{opacity:1;background:#c9c9c9}

/* Footer: the opening draw of Pride in Business runs a little slower than the header's; it plays once, no loop */
.foot .morph .m-pib.t-play .t-p1{animation:tdraw 1.05s cubic-bezier(.6,0,.2,1) both}
.foot .morph .m-pib.t-play .t-p2{animation:tdraw .45s cubic-bezier(.6,0,.2,1) .95s both}
.foot .morph .m-pib.t-play .t-p3{animation:tdraw .55s cubic-bezier(.6,0,.2,1) 1.25s both}
.foot .morph .m-pib.t-play .t-fill{animation:tneon 2s ease 1.7s both}
.foot .morph .m-pib.t-play .lk-word{animation:lgword .75s ease 1.55s both}
@keyframes lgrest{0%{fill:#fff700}to{fill:transparent}}

/* Header: the approved one line logo, with "A Just Gold publication" set as live type at a readable size,
   aligned under the wordmark as in the artwork */
.gnav .lk-headwrap{flex-direction:column;align-items:flex-start;gap:5px}
.gnav .lk-head{height:30px}
.gnav .lk-tag{display:block;padding-left:calc(30px * 272.3 / 204);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#5a5a5a;line-height:1;white-space:nowrap}
@media(max-width:620px){.gnav .lk-head{height:26px}.gnav .lk-tag{padding-left:calc(26px * 272.3 / 204);font-size:10.5px}}

/* Header tagline sits directly under "Pride in Business", spanning the wordmark from the P to the final s */
.gnav .lk-headwrap{position:relative;display:block;flex:none;--lh:36px}
.gnav .lk-headwrap .lk-head{height:var(--lh)}
.gnav .lk-headwrap .lk-tag{position:absolute;left:calc(var(--lh) * 274.3 / 204);top:calc(var(--lh) * .63);padding:0;font-size:calc(var(--lh) * .3336);letter-spacing:.08em;line-height:1}
@media(max-width:620px){.gnav .lk-headwrap{--lh:30px}}
