/* Elements added inside a block (inc/cms-els.php). They borrow the site's own
   type, buttons and spacing, so an added heading is the site's heading and an
   added button is the site's button - nothing here sets a font or a colour
   of its own beyond the accent the blocks already use. */
.cmel{margin:0 0 var(--space-md,24px)}
.cmel:last-child{margin-bottom:0}
.cmels--end{margin-top:var(--space-lg,40px)}
.cmels--end:empty{margin:0}
.cmel--al-left{text-align:left;margin-right:auto}
.cmel--al-center{text-align:center;margin-left:auto;margin-right:auto}
.cmel--al-right{text-align:right;margin-left:auto}
.cmel--small{font-size:.9em}

/* Photos, and the frames they can sit in */
.cmel--image{position:relative;overflow:hidden;width:100%;max-width:420px;aspect-ratio:4/3;border-radius:var(--radius-lg,22px);background:color-mix(in srgb,currentColor 8%,transparent)}
.cmel--image img{display:block;width:100%;height:100%;object-fit:cover}
.cmel--w-s{max-width:240px}
.cmel--w-l{max-width:640px}
.cmel--w-full{max-width:none}
.cmel--shape-rect{border-radius:0}
.cmel--shape-soft{border-radius:var(--radius-lg,22px)}
.cmel--shape-wide{aspect-ratio:16/9;border-radius:14px}
.cmel--shape-arch{aspect-ratio:4/5;border-radius:999px 999px 14px 14px}
.cmel--shape-pill{aspect-ratio:3/5;border-radius:999px}
.cmel--shape-circle{aspect-ratio:1/1;border-radius:50%}
.cmel--shape-pill.cmel--w-m,.cmel--shape-arch.cmel--w-m,.cmel--shape-circle.cmel--w-m{max-width:340px}
.cmel--shape-pill.cmel--w-l,.cmel--shape-arch.cmel--w-l,.cmel--shape-circle.cmel--w-l{max-width:460px}
.cmel--al-center.cmel--image,.cmel--al-center.cmel--icon,.cmel--al-center.cmel--div-short{margin-left:auto;margin-right:auto}
.cmel--al-right.cmel--image,.cmel--al-right.cmel--div-short{margin-left:auto;margin-right:0}

/* Icons */
.cmel__ico{display:inline-flex;color:var(--cyan-deep,var(--accent,currentColor))}
.cmel__ico svg{width:100%;height:100%}
.cmel--sz-s .cmel__ico{width:32px;height:32px}
.cmel--sz-m .cmel__ico{width:48px;height:48px}
.cmel--sz-l .cmel__ico{width:76px;height:76px}

/* Lists */
.cmel--list{padding-left:1.25em}
.cmel--list li+li{margin-top:.4em}
.cmel--list-check{list-style:none;padding-left:0}
.cmel--list-check li{position:relative;padding-left:1.7em}
.cmel--list-check li::before{content:"";position:absolute;left:0;top:.2em;width:1.15em;height:1.15em;border-radius:50%;
  background:var(--cyan-deep,var(--accent,#333)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.4l2.3 2.3 4.9-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.cmel--al-center.cmel--list{display:table;text-align:left}

/* Quotes */
.cmel--quote{margin-left:0;margin-right:0;padding:0}
.cmel--quote p{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.35;margin:0}
.cmel--quote p::before{content:"\201C";display:block;font-size:2.6em;line-height:.8;height:.45em;color:var(--cyan-deep,var(--accent,currentColor));opacity:.85}
.cmel--quote cite{display:block;margin-top:.8em;font-style:normal;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.cmel--quote cite:empty{display:none}

/* Video */
.cmel--video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:14px}
.cmel--video .cmsembed__v{margin:0}

/* Space and lines */
.cmel--spacer{margin:0}
.cmel--sp-s{height:16px}.cmel--sp-m{height:40px}.cmel--sp-l{height:72px}.cmel--sp-xl{height:120px}
.cmel--divider{display:flex}
.cmel--divider span{display:block}
.cmel--div-line span{width:100%;height:1px;background:currentColor;opacity:.18}
.cmel--div-short{width:64px}
.cmel--div-short span{width:64px;height:3px;border-radius:3px;background:var(--cyan-deep,var(--accent,currentColor))}
.cmel--div-dots{justify-content:center}
.cmel--div-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;box-shadow:16px 0 0 currentColor,-16px 0 0 currentColor}

/* Placed anywhere: a layer over the whole block; each piece sits where it was
   put, as a share of the block's width and height. On phones there is no
   room to float things over words, so they line up under the block. */
.cmels-host{position:relative}
.cmels--free{position:absolute;inset:0;pointer-events:none;z-index:3}
.cmels--free > *{position:absolute;margin:0;pointer-events:auto;max-width:none}
.cmels--free > .cmel--image{max-width:none}
@media (max-width:700px){
  .cmels--free{position:static;display:grid;gap:var(--space-md,24px);padding:0 20px var(--space-lg,40px);justify-items:start}
  .cmels--free:empty{display:none}
  .cmels--free > *{position:static;width:auto!important;max-width:100%}
  .cmels--free > .cmel--image{width:min(100%,420px)!important}
}

/* Button shapes (the site's own button, re-cornered) */
.cmel--bs-pill .btn{border-radius:999px}
.cmel--bs-soft .btn{border-radius:12px}
.cmel--bs-square .btn{border-radius:2px}
/* a stretched button fills the width it was given */
.cmel--button[style*="width"] .btn{width:100%;justify-content:center}
/* Icon badges: the icon sits on a tinted shape */
.cmel--bg-circle .cmel__ico,.cmel--bg-soft .cmel__ico,.cmel--bg-square .cmel__ico{box-sizing:content-box;padding:.42em;background:color-mix(in srgb,var(--cyan-deep,var(--accent,#1f7a93)) 13%,transparent)}
.cmel--bg-circle .cmel__ico{border-radius:50%}
.cmel--bg-soft .cmel__ico{border-radius:22%}
.cmel--bg-square .cmel__ico{border-radius:3px}

/* The block's own words, restyled from the editor (data.fs) */
.cmf--al-left{text-align:left;margin-right:auto}
.cmf--al-center{text-align:center;margin-left:auto;margin-right:auto}
.cmf--al-right{text-align:right;margin-left:auto}
h1.cmf--sz-s,h2.cmf--sz-s,h3.cmf--sz-s{font-size:clamp(1.25rem,1rem + .9vw,1.6rem)}
h1.cmf--sz-m,h2.cmf--sz-m,h3.cmf--sz-m{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem)}
h1.cmf--sz-l,h2.cmf--sz-l,h3.cmf--sz-l{font-size:clamp(2.1rem,1.5rem + 3vw,3.5rem)}
h1.cmf--sz-xl,h2.cmf--sz-xl,h3.cmf--sz-xl{font-size:clamp(2.6rem,1.6rem + 5vw,5.2rem);line-height:1.02}
p.cmf--sz-s,div.cmf--sz-s{font-size:.9rem}
p.cmf--sz-m,div.cmf--sz-m{font-size:1.05rem}
p.cmf--sz-l,div.cmf--sz-l{font-size:1.25rem}
p.cmf--sz-xl,div.cmf--sz-xl{font-size:1.5rem}

/* A blank block: just the room for its pieces */
.cmels-blank .cmels--end{margin-top:0}

/* ---------- a block's own look (set from Block style) ---------- */
.cs-blk.cs-bbg{background:var(--cs-bbg)!important;background-image:none!important}
.cs-blk.cs-bbg::before,.cs-blk.cs-bbg::after{opacity:0}
.cs-blk.cs-bcl,.cs-blk.cs-bcl :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,cite,figcaption,.eyebrow,.lead){color:var(--cs-bcl)!important}
.cs-blk.cs-bpt{padding-top:var(--cs-bpt)!important}
.cs-blk.cs-bpb{padding-bottom:var(--cs-bpb)!important}

/* ---------- a piece's own look (set from Style) ----------
   Doubled classes so a piece's own choice beats its block's. */
.cmsty.cs-c.cs-c,.cmsty.cs-c.cs-c :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,cite,em,strong,span,a:not(.btn)),.cmsty.cs-c.cs-c .btn,.cmsty.cs-c.cs-c .cmel__ico{color:var(--cs-c)!important}
.cmsty.cs-bg.cs-bg:not(.cmel--button):not(.cmel--icon){background:var(--cs-bg)!important}
.cmel--button.cs-bg .btn{background:var(--cs-bg)!important;border-color:var(--cs-bg)!important;box-shadow:none}
.cmel--icon.cs-bg .cmel__ico{background:var(--cs-bg)!important}
.cmel--icon.cs-bg:not([class*="cmel--bg-"]) .cmel__ico{padding:.3em;border-radius:16px}
.cmsty.cs-fs.cs-fs,.cmsty.cs-fs.cs-fs :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,a,span:not(.arrow)){font-size:var(--cs-fs)!important}
.cmsty.cs-fs.cs-fs cite{font-size:max(12px,calc(var(--cs-fs) * .5))!important}
.cmel--icon.cs-fs .cmel__ico{width:var(--cs-fs)!important;height:var(--cs-fs)!important}
.cmsty.cs-fw.cs-fw,.cmsty.cs-fw.cs-fw :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,a,span){font-weight:var(--cs-fw)!important}
.cmsty.cs-lh.cs-lh,.cmsty.cs-lh.cs-lh :is(h1,h2,h3,h4,h5,h6,p,li,blockquote){line-height:var(--cs-lh)!important}
.cmsty.cs-ls.cs-ls,.cmsty.cs-ls.cs-ls :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,a,span){letter-spacing:var(--cs-ls)!important}
.cmsty.cs-ff.cs-ff,.cmsty.cs-ff.cs-ff :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,cite,a,span){font-family:var(--cs-ff)!important}
.cs-tt-up.cs-tt-up,.cs-tt-up.cs-tt-up :is(h1,h2,h3,h4,p,li,a,span){text-transform:uppercase!important}
.cs-tt-none.cs-tt-none,.cs-tt-none.cs-tt-none :is(h1,h2,h3,h4,p,li,a,span){text-transform:none!important}
.cmsty.cs-pad:not(.cmel--button){padding:var(--cs-pad)!important}
.cmel--button.cs-pad .btn{padding:calc(var(--cs-pad) * .55) var(--cs-pad)!important}
.cmsty.cs-rad:not(.cmel--button):not(.cmel--icon){border-radius:var(--cs-rad)!important}
.cmel--button.cs-rad .btn,.cmel--icon.cs-rad .cmel__ico{border-radius:var(--cs-rad)!important}
.cmsty.cs-bw:not(.cmel--button){border:var(--cs-bw) solid var(--cs-bc,currentColor)!important}
.cmsty.cs-bc:not(.cs-bw):not(.cmel--button){border:1px solid var(--cs-bc)!important}
.cmel--button.cs-bw .btn{border:var(--cs-bw) solid var(--cs-bc,currentColor)!important}
.cmel--button.cs-bc:not(.cs-bw) .btn{border:1px solid var(--cs-bc)!important}
.cs-sh-s:not(.cmel--button),.cmel--button.cs-sh-s .btn{box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px -4px rgba(0,0,0,.14)!important}
.cs-sh-m:not(.cmel--button),.cmel--button.cs-sh-m .btn{box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 34px -10px rgba(0,0,0,.24)!important}
.cs-sh-l:not(.cmel--button),.cmel--button.cs-sh-l .btn{box-shadow:0 4px 8px rgba(0,0,0,.05),0 32px 64px -18px rgba(0,0,0,.38)!important}
.cmsty.cs-op{opacity:var(--cs-op)}
.cmel--image.cs-rad img{border-radius:inherit}
.cmel.lead{display:block}