/* Brainiak — static copy of www.brainiak.ca as it stood on 2026-09-30.
 *
 * The page structure comes from the live Squarespace page: sections hold rows on a 12-column
 * grid, rows hold columns, columns hold blocks (text, image, button, spacer, line). The values
 * are the computed styles measured on the live site at 1440px and 390px. Rules marked
 * "Brainiak custom CSS" are ported from the site's own custom stylesheet, re-targeted at the
 * class names used here. Generated column-width and padding classes are at the end of the file.
 */

/* ---------- fonts (self-hosted, SIL Open Font License, see /assets/fonts/OFL.txt) ----------
 * The live site gets IBM Plex Mono from Adobe Fonts, whose build sits the glyphs lower in the line
 * than the Google Fonts build used here; the overrides copy Adobe's vertical metrics. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/open-sans.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");ascent-override:112.5%;descent-override:25.4%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-700.woff2) format("woff2");ascent-override:114.3%;descent-override:26.4%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- header geometry ----------
 * The bar is 10px + logo + 0 at rest; once the page scrolls it grows to 1.8vw above and below
 * the logo (that is what Squarespace does). The first section is padded by the header height. */
:root{--hpt:10px;--hpb:0px;--logo:100px;--hh:calc(var(--hpt) + var(--logo) + var(--hpb))}
html.shrink{--hpt:1.8vw;--hpb:1.8vw}
@media (max-width:799px),(pointer:coarse) and (max-width:1024px){
  html.shrink{--hpt:min(6vw,2vmax);--hpb:min(6vw,2vmax)}
}
/* the logo shrinks at the content breakpoint, not at the burger one: 768–799px has a burger and the 100px logo */
@media only screen and (max-width:767px){:root{--logo:85px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{max-width:3000px;margin:0 auto;background:transparent;color:#fff;font-family:sans-serif}
/* as Squarespace's #siteWrapper: a page shorter than the window keeps its footer at the bottom */
body{display:flex;flex-direction:column;min-height:100vh}
body>footer{margin-top:auto}
html.menu-open body{overflow:hidden}
main,footer{font-family:"Open Sans",sans-serif;font-weight:300;font-size:16px;line-height:1.8em;overflow-wrap:break-word}
img{border:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Brainiak custom CSS: type scale */
h1,h2,h3,p{white-space:pre-wrap}
h1{margin:2rem 0;font-family:"IBM Plex Mono";font-size:4rem;font-weight:700;line-height:1.2em;color:#fff}
h2{margin:2rem 0;font-family:"IBM Plex Mono",sans-serif;font-size:1.8rem;font-weight:700;line-height:1.46em;color:#f6cfbd}
h3{margin:2rem 0;font-family:"Open Sans",sans-serif;font-size:1.4rem;font-weight:700;line-height:1.4em;color:#ec7344}
p{margin:1rem 0;font-size:1rem;font-weight:400;line-height:1.8em}
a{font-size:1rem;font-weight:400;line-height:1.8em;color:inherit}
p a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3.2px}
h2 a{color:#a3826c;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3.2px}
.center{text-align:center}
.light-accent{color:#efefee}
/* Squarespace "text highlight": an underline stroke drawn behind the text, no link underline */
.highlight{position:relative;z-index:0}
.highlight a{text-decoration:none}
.highlight::before{content:"";position:absolute;z-index:-1;left:-3px;right:-2px;bottom:2.1px;height:2.2px;background:#a3826c;pointer-events:none}

/* ---------- focus: Squarespace's ring, keyboard focus only. The carousel (a tab stop, as live)
 * gets a frame instead, and its desktop arrows an inner ring ---------- */
:focus-visible{outline:2px solid #fff;outline-offset:4px}
:focus:not(:focus-visible){outline:none}
.car-btn:focus,.car-gutter:focus{outline:none}
.car-gutter:focus-visible::after{content:'';position:absolute;inset:0;border:2px solid #fff;pointer-events:none}
.car-btn:focus-visible::after{content:'';position:absolute;inset:0;width:80%;height:80%;margin:auto;border:2px solid #fff;border-radius:50%}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-16000px;top:24px;z-index:3;padding:17.6px 29.392px;background:#504743;color:#f6cfbd;font:400 16px "Open Sans",sans-serif;letter-spacing:.32px;text-decoration:underline;border-radius:300px;transition:opacity .1s linear}
.skip:focus{left:20.8px}

/* ---------- language switcher (Brainiak custom CSS) ---------- */
.language{position:fixed;top:10px;right:10px;z-index:99999;color:#fff;font-family:sans-serif;font-size:16px;line-height:1.8em}
.language a{color:#fff;text-decoration:none}
.language a:hover{opacity:.8}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:10}
.header-bar{position:relative;z-index:2;background:#343434;padding:var(--hpt) 10% var(--hpb);transition:padding .14s ease-in-out}
.header-inner{display:flex;align-items:center;max-width:1500px;margin:0 auto}
.logo{display:block;flex:none}
.logo img{display:block;width:auto;height:auto;max-height:var(--logo)}
.nav-desktop{display:flex;align-items:center;margin-left:auto;padding-left:36px}
.nav-desktop a{display:block;padding:1.6px 0;font-family:"Open Sans",sans-serif;font-size:16px;font-weight:400;line-height:28.8px;color:#fff;text-decoration:none}
.nav-desktop a+a{margin-left:1.2vw}
.nav-desktop a:hover{opacity:.8}
.nav-desktop a[aria-current]{background-image:linear-gradient(#fff,#fff);background-size:1px 1px;background-repeat:repeat-x;background-position:0 calc(100% - 1.6px)}

.burger{display:none;margin-left:auto;padding:1px 6px;border:0;background:transparent;color:inherit;cursor:pointer}
.burger-box{position:relative;display:block;width:35px;height:35px}
.burger-box span{position:absolute;top:17px;left:0;width:35px;height:1px;background:#fff;transition:transform .25s cubic-bezier(.2,.6,.3,1),width .25s cubic-bezier(.2,.6,.3,1)}
.top-bun{transform:translateY(-5.5px)}
.patty{transform:scale(0)}
.bottom-bun{transform:translateY(5.5px)}
html.menu-open .top-bun{transform:translateX(3.5px) rotate(-135deg);background:#ec7344}
html.menu-open .bottom-bun{transform:translateX(3.5px) rotate(135deg);background:#ec7344}

.menu{position:fixed;inset:0;z-index:1;padding-top:var(--hh);visibility:hidden;opacity:0;transition:visibility .6s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1)}
html.menu-open .menu{visibility:visible;opacity:1}
.menu nav{display:flex;flex-direction:column;justify-content:center;height:100%;overflow-y:auto;background:#343434}
.menu-item{text-align:center;font-family:"Open Sans",sans-serif;font-size:16px;line-height:28.8px}
.menu-item a{display:inline-flex;align-items:center;margin-bottom:11.7px;font-family:"Open Sans",sans-serif;font-size:16px;font-weight:400;line-height:28.8px;color:#ec7344;text-decoration:none}
.menu-item a:hover{opacity:.8}

@media (max-width:799px),(pointer:coarse) and (max-width:1024px){
  .nav-desktop{display:none}
  .burger{display:block}
}

/* ---------- sections and grid ---------- */
.page-section{position:relative;display:flex;align-items:center;min-height:0}
main>article>.page-section:first-child,.system-page{padding-top:var(--hh)}
.section-bg{position:absolute;inset:0;overflow:hidden;background:#262425}
.section-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* each background reaches 1px under the next section, which paints over it: at a fractional zoom (125%, 150%)
   two boxes that only touch let a hairline of the white page show between them. The image keeps its size. */
main .section-bg{bottom:-1px}
main .section-bg img{height:calc(100% - 1px)}
.content-wrapper{position:relative;box-sizing:content-box;width:100%;max-width:1500px;margin:0 auto;padding:2.5% 10%;overflow:hidden}
.content>.row{margin:0 -17px}
.row{display:flex;align-items:flex-start}
.col{flex:none;min-width:0}

/* ---------- blocks ---------- */
.blk{padding:17px}
.blk.html>:first-child{margin-top:0}
.blk.html>:last-child{margin-bottom:0}
.sp>div{height:34px}
.sp.asp>div{height:28.8px;padding-bottom:3.6996735582154514%;box-sizing:content-box}
.sp.asp.h34>div{height:34px}
hr{height:1px;border:0;background:#000;box-sizing:content-box}

/* Squarespace "scaled text": each line is sized so that it fills the block's width */
.fit{container-type:inline-size;line-height:28.8px}
.fit-line{display:inline-block;white-space:nowrap;font-size:calc(100cqw / (.6 * var(--n)) * var(--k,1))}
.fit h1{margin:0;font-size:inherit;line-height:1;white-space:nowrap}

.iw figure{margin:0 auto}
.iw img{display:block;width:100%;height:auto}
.iw a{display:block}
.mask-ellipse::before{content:"";display:block;height:28.8px}
.mask-ellipse img{clip-path:ellipse(50% 50% at 50% 50%)}

.btn-c{display:flex;justify-content:flex-start}
.btn-c.center{justify-content:center}
.btn-c a{display:block;padding:.8em 1.8em;border-radius:300px;background:#504743;color:#f6cfbd;font-family:Poppins,sans-serif;font-size:16px;font-weight:500;letter-spacing:.32px;line-height:normal;text-decoration:none;transition:opacity .1s linear}
.btn-c a:hover{opacity:.8}

/* ---------- footer code blocks (Brainiak's own markup and CSS) ---------- */
.socialIconLinks{width:fit-content;margin:auto}
.socialIconLinks img{width:30px;height:30px}
.socialIconLinks a:not(:last-child){margin-right:15px}
.socialIconLinks a:hover{opacity:.7}
.footerMenu{list-style-type:none;overflow:hidden;width:fit-content;margin:auto;padding:0}
.footerMenu li{float:left}
.footerMenu li a{text-decoration:none}
.footerMenu li a:hover{opacity:.7}
@media only screen and (min-width:641px){.footerMenu li:not(:last-child){padding-right:25px}}
@media only screen and (max-width:640px){.footerMenu{display:flex;flex-direction:column}}
.copyright{font-size:.8rem;text-align:center}

/* ---------- Brainiak custom CSS, per section ---------- */
.home-hero .section-bg img{object-position:50% 90%}
.home-about .iw{width:90%}
@media only screen and (max-width:1180px){.home-about .iw{width:100%}}
.home-services .content-wrapper{padding:2.5% 8% 0 8%}
.home-services .iw{max-width:140px;margin:auto}
.home-services hr{max-width:72px;margin:auto}
.home-services .hr-b{padding:0}
.home-transition .content-wrapper{padding:2.5% 0;max-width:3000px;background:url(/assets/img/transition-2-min.png) center/cover;margin-top:-120px;min-height:320px}
@media only screen and (max-width:1300px){.home-transition .content-wrapper{margin-top:-80px;min-height:250px}}
@media only screen and (max-width:640px){.home-transition .content-wrapper{margin-top:-80px;min-height:180px}}
.home-partners{padding-bottom:5%}
.home-partners h2{margin:0}
.home-partners .content{background:#343434;padding:7.5% 5%}
.home-partners .col>.row:nth-child(2){margin-top:30px}
@media only screen and (max-width:767px){.home-partners figure{max-width:80% !important}}

.services-hero .content-wrapper{padding-top:10%}
.services-list .iw{max-width:280px;margin:auto}
.services-list hr{max-width:165px;margin-left:0}
@media only screen and (min-width:767px){
  .services-list .span-12>.row{display:flex;align-items:center}
  .services-list .span-12>.row:not(:last-child){margin-bottom:100px}
}
@media only screen and (max-width:767px){.services-list .span-12>.row:not(:last-child){margin-bottom:50px}}
.services-transition .content-wrapper{padding:2.5% 0;max-width:3000px;background:url(/assets/img/transition-4-min.png) center/cover;min-height:35vh}
@media only screen and (min-width:2100px){.services-transition .content-wrapper{margin-top:-5%}}
@media only screen and (max-width:640px){.services-transition .content-wrapper{min-height:25vh;margin-top:-50px}}
@media only screen and (max-width:480px){.services-transition .content-wrapper{min-height:20vh;margin-top:-60px}}
.services-conference{padding-top:2.5%;padding-bottom:2.5%}
.services-conference h2{margin-bottom:50px}
.services-conference .content{background:#343434;padding:7.5% 20%}
.services-bottom .content-wrapper,.webinars-bottom .content-wrapper{min-height:25vh}

.webinars-hero .content-wrapper{padding-top:10%;padding-bottom:15%}
.webinars-intro h2{font-size:1.4rem}
.webinars-intro .content-wrapper{max-width:700px;margin-top:-8%}

.site-footer figure{max-width:150px !important}
@media only screen and (max-width:640px){.site-footer .content-wrapper{padding-top:0;padding-bottom:0}}

/* ---------- webinar carousel ---------- */
.webinars-carousel .section-bg{background:#373737}
@media (min-width:768px){.webinars-carousel .content-wrapper{padding:2.5% 0;max-width:100%}}
.car{--gap:60px;padding:6.6vmax 0}
.car-gutter{position:relative;box-sizing:content-box;max-width:1500px;margin:0 auto;padding:0 10%}
.car-holder{position:relative}
.car-reveal{overflow:hidden;touch-action:pan-y}
.car-list{display:grid;margin:0;padding:0;list-style:none}
.car-list>li{grid-area:1/1;align-self:center;display:flex;flex-direction:column;transform:translateX(-9999px)}
.car-media{width:75%;margin:0 auto 6%}
.car-media img{display:block;width:100%;height:auto}
.car-title{max-width:65%;margin:0 auto;font-family:"Open Sans",sans-serif;font-size:1.4rem;font-weight:700;line-height:1.4em;color:#f6cfbd;text-align:center}
.car-desc{max-width:50%;margin:3% auto 0;font-size:.9rem;color:#fff;text-align:center}
.car-desc p{margin:0}
.car-live{position:absolute;pointer-events:none;opacity:0}
.car-desk{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.car-btn{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 3vw;padding:0;border:0;border-radius:50%;overflow:hidden;background:none;cursor:pointer;pointer-events:auto}
.car-btn .bg{position:absolute;inset:0;background:#4f4945;opacity:.7;transition:opacity .3s}
.car-btn:hover .bg{opacity:1}
.car-btn svg{position:relative;width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.car-mob{display:none;justify-content:center;margin-top:20px}
.car-mbtn{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.car-mbtn:first-child{margin-right:10px}
.car-mbtn .bg{position:absolute;inset:4px;border-radius:50%;background:#4f4945}
.car-mbtn svg{position:relative;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:square}
@media (max-width:575px){
  .car{--gap:20px}
  .car-desk{display:none}
  .car-mob{display:flex}
}

/* ---------- 404 ---------- */
/* Squarespace pads the page and its first child by --pagePadding: 10% of each one's containing block,
 * and caps the text at 1500px, so above ~1880px the dark block shows a white strip on each side (as live) */
.system-page{box-sizing:content-box;max-width:1500px;margin:0 auto;padding-left:10%;padding-right:10%;padding-bottom:10%;background:#262425;font-weight:300}
.system-page>:first-child{padding-top:10%}
.system-page ul{padding-left:40px}
.system-page a{color:#fff;text-decoration:none}

/* ---------- phones and small tablets ---------- */
@media only screen and (max-width:767px){
  .content-wrapper{box-sizing:border-box;padding:50px 10%}
  .row{display:block}
  .col{width:100% !important}
  .sp{display:none}
  .rev-m{display:flex;flex-direction:column-reverse}
  .row+.row{margin-top:0 !important}
  .fit-line{font-size:calc(100cqw / (.6 * var(--n)) * var(--km,1))}
}

/* ---------- generated: column widths (span of the column / span of its parent) ---------- */
.w1-7{width:14.2857%}
.w6-7{width:85.7143%}
.w1-12{width:8.3333%}
.w2-12{width:16.6667%}
.w3-12{width:25%}
.w4-12{width:33.3333%}
.w5-12{width:41.6667%}
.w6-12{width:50%}
.w7-12{width:58.3333%}
.w8-12{width:66.6667%}
.w10-12{width:83.3333%}
.w12-12{width:100%}
/* the live blocks drop their top or bottom padding on desktop only */
@media (min-width:768px){.d-pt0{padding-top:0}.d-pb0{padding-bottom:0}}