/* MPG Ledger — base styles. All colours/sizes come from CSS variables set by the Style Guide, sections and blocks. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.mpg-body{margin:0;background:var(--s-dark-bg,#101216);color:var(--s-dark-fg,#f4eee1);font-family:var(--font-body);font-size:var(--base-size,20px);line-height:var(--base-line,1.85);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sel-bg,#c39a4e);color:var(--sel-fg,#101216)}
a{color:var(--acc,#c39a4e);text-decoration:none;transition:color .25s,background .3s,border-color .3s}
a:hover{color:var(--acc-hover,#e2c07c)}
img{max-width:100%}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:var(--h-weight,400)}

/* Section */
.mpg-sec{position:relative;overflow:hidden}
.mpg-sec__inner{position:relative;margin:0 auto;width:100%}
.mpg-sec--split .mpg-sec__inner{display:flex;flex-direction:column}
.mpg-row,.mpg-panel{display:flex;flex-wrap:wrap;column-gap:var(--gap,28px);row-gap:var(--rgap,0px);min-width:0}
.mpg-split{display:grid}
.mpg-sec--split .mpg-sec__inner.mpg-split{display:grid}
.mpg-panel{position:relative;align-content:flex-start;min-width:0}
.mpg-panel--clip{overflow:hidden}
.mpg-deco{position:absolute;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.mpg-ring{position:absolute;border:1px solid;border-radius:50%;pointer-events:none;z-index:0}
.mpg-row,.mpg-panel>.mpg-blk{position:relative;z-index:1}

/* Blocks — 12 column widths that account for the column gap */
.mpg-blk{position:relative;min-width:0;flex:0 0 100%;max-width:100%}
.mpg-w-1{flex-basis:calc((100% + var(--gap,28px)) * 1/12 - var(--gap,28px))}
.mpg-w-2{flex-basis:calc((100% + var(--gap,28px)) * 2/12 - var(--gap,28px))}
.mpg-w-3{flex-basis:calc((100% + var(--gap,28px)) * 3/12 - var(--gap,28px))}
.mpg-w-4{flex-basis:calc((100% + var(--gap,28px)) * 4/12 - var(--gap,28px))}
.mpg-w-5{flex-basis:calc((100% + var(--gap,28px)) * 5/12 - var(--gap,28px))}
.mpg-w-6{flex-basis:calc((100% + var(--gap,28px)) * 6/12 - var(--gap,28px))}
.mpg-w-7{flex-basis:calc((100% + var(--gap,28px)) * 7/12 - var(--gap,28px))}
.mpg-w-8{flex-basis:calc((100% + var(--gap,28px)) * 8/12 - var(--gap,28px))}
.mpg-w-9{flex-basis:calc((100% + var(--gap,28px)) * 9/12 - var(--gap,28px))}
.mpg-w-10{flex-basis:calc((100% + var(--gap,28px)) * 10/12 - var(--gap,28px))}
.mpg-w-11{flex-basis:calc((100% + var(--gap,28px)) * 11/12 - var(--gap,28px))}
.mpg-w-12{flex-basis:100%}
.mpg-blk--fit{flex:0 0 auto;width:auto;max-width:100%}
.mpg-ah-left{text-align:left}
.mpg-ah-center{text-align:center}
.mpg-ah-right{text-align:right}
.mpg-av-start{align-self:auto}
.mpg-av-center{align-self:center}
.mpg-av-end{align-self:flex-end}
.mpg-blk__in{min-width:0}
.mpg-blk--mpg_card,.mpg-blk--mpg_card>.mpg-blk__in{display:flex;flex-direction:column}
.mpg-blk--mpg_card>.mpg-blk__in{flex:1 1 auto}
.mpg-blk--mpg_card .mpg-card{flex:1 1 auto}

/* Buttons */
.mpg-btn{display:inline-block;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s,border-color .3s}

/* Header */
.mpg-header{position:relative;z-index:50}
.mpg-header--sticky{position:sticky;top:0}
.mpg-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.mpg-header__brand{display:flex;align-items:center;gap:18px;flex:none}
.mpg-header__mark{display:flex;align-items:center;justify-content:center;letter-spacing:.08em;padding-top:2px;flex:none}
.mpg-header__logo{width:auto;display:block}
.mpg-header__name{letter-spacing:.04em;white-space:nowrap}
.mpg-header__nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.mpg-header__nav a{white-space:nowrap}
.mpg-header__cta{display:inline-block;line-height:1.2;transition:border-color .3s,background .3s}
.mpg-header__cta:hover{border-color:var(--cta-hover,#c39a4e)!important}
.mpg-drop{position:relative;padding:20px 0}
.mpg-drop__caret{font-size:.9em}
.mpg-drop__menu{display:none;position:absolute;top:100%;right:-24px;padding:16px 0;flex-direction:column;z-index:40}
.mpg-drop:hover .mpg-drop__menu,.mpg-drop.is-open .mpg-drop__menu{display:flex}
.mpg-drop__menu a{display:block;white-space:nowrap}
.mpg-drop__rule{height:1px;margin:12px 28px}
.mpg-user{display:inline-flex;gap:24px}
.mpg-header__toggle{display:none;position:relative;width:34px;height:28px;background:none;border:0;padding:0;cursor:pointer;flex:none}
.mpg-header__toggle span{position:absolute;left:5px;right:5px;top:13px;height:1px;display:block}
.mpg-header__toggle span::before,.mpg-header__toggle span::after{content:"";position:absolute;left:0;right:0;height:1px;transition:transform .25s}
.mpg-header__toggle span::before{top:-7px}
.mpg-header__toggle span::after{top:7px}
.mpg-header.is-open .mpg-header__toggle span{background:transparent}
.mpg-header.is-open .mpg-header__toggle span::before{transform:translateY(7px) rotate(45deg)}
.mpg-header.is-open .mpg-header__toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* Footer */
.mpg-footer__bar{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mpg-powered-by{text-align:center;padding:16px;font-size:12px;background:#0c0e11;color:#82807c}
.mpg-powered-by a{color:inherit}

/* Responsive */
@media (max-width:1024px){
  .mpg-w-1,.mpg-w-2,.mpg-w-3{flex-basis:calc((100% + var(--gap,28px)) * 6/12 - var(--gap,28px))}
}
@media (max-width:920px){
  .mpg-sec--split .mpg-sec__inner.mpg-split{display:flex;flex-direction:column;column-gap:0}
  .mpg-split--reverse{flex-direction:column-reverse!important}
  .mpg-panel--left,.mpg-panel--right{position:static!important;width:100%}
  .mpg-panel--right{border-left:0!important}
}
@media (max-width:760px){
  .mpg-blk{flex-basis:100%}
  .mpg-mw-6{flex-basis:calc((100% + var(--gap,28px)) * 6/12 - var(--gap,28px))}
  .mpg-mw-4{flex-basis:calc((100% + var(--gap,28px)) * 4/12 - var(--gap,28px))}
  .mpg-mw-auto{flex:0 0 auto;width:auto}
  .mpg-blk--hide-m,.mpg-hide-m{display:none!important}
  .mpg-ahm-left{text-align:left;margin-left:0;margin-right:0}
  .mpg-ahm-center{text-align:center}
  .mpg-ahm-right{text-align:right}
  [data-hide-mobile]{display:none!important}
  .mpg-card__arrow{bottom:28px!important;right:28px!important}
  .mpg-card__ghost{font-size:64px!important}
  .mpg-card--card .mpg-card__ghost:not([style]){top:20px!important;right:20px!important}
  .mpg-footer__bar{flex-direction:column;gap:12px}
  .mpg-btn{white-space:normal}
}
