@charset "UTF-8";
/* ==========================================================================
   EMC 2027 Homepage — built to Figma "2027-Edits" (frame 1:3, 1920x6269)
   All values below are the exact Figma values at the 1920px reference width.
   Scoped to #emc-home so nothing from Divi can override it.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/opensans-400.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/opensans-400i.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/opensans-600.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/opensans-700.woff2) format('woff2')}

/* ---------- Tokens (exact Figma values) ---------- */
#emc-home{
  --purple:#832973; --indigo:#374091; --crimson:#c61b57; --btn:#cc1c55;
  --orange:#ee6e2e; --gold:#f7ae14;

  --grad-why:linear-gradient(90deg,#832973 0%,#374091 100%);
  --grad-speakers:linear-gradient(90deg,#ee6e2e 0%,#c61b57 100%);
  --grad-news:linear-gradient(90deg,#f7ae14 0%,#ee6e2e 100%);
  --grad-hero:linear-gradient(90deg,#374091 10%,#832973 30%,#c61b57 50%,#ee6e2e 70%,#f7ae14 90%);

  --ff-head:'Poppins',system-ui,-apple-system,sans-serif;
  --ff-body:'Open Sans',system-ui,-apple-system,sans-serif;

  --gutter:150px;
  --fs-h2:60px;   --lh-h2:60px;
  --fs-card:36px; --lh-card:36px;
  --fs-body:18px; --lh-body:1.2;
  --fs-eyebrow:18px; --ls-eyebrow:1.8px;
  --r-media:60px; --r-btn:30px;
}

/* ---------- Base ---------- */
body.emc2027-home{margin:0;padding:0;background:#fff;overflow-x:hidden}
#emc-home,#emc-home *,#emc-home *::before,#emc-home *::after{box-sizing:border-box}
#emc-home{font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);color:#000;-webkit-font-smoothing:antialiased}
#emc-home img,#emc-home video{display:block;max-width:100%}
#emc-home a{color:inherit;text-decoration:none}
#emc-home p{margin:0}
#emc-home h1,#emc-home h2,#emc-home h3{margin:0;font-family:var(--ff-head);font-weight:700;text-transform:uppercase;letter-spacing:0}
#emc-home ul{list-style:none;margin:0;padding:0}
#emc-home address{font-style:normal}

#emc-home .container{width:100%;max-width:1920px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- Type ---------- */
#emc-home .eyebrow{
  font-family:var(--ff-head);font-weight:700;font-size:var(--fs-eyebrow);line-height:24px;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin:0 0 8px;color:var(--crimson);
}
#emc-home .h2{font-size:var(--fs-h2);line-height:var(--lh-h2);color:#000;margin:0 0 41px}
#emc-home .lead{font-size:var(--fs-body);line-height:var(--lh-body);color:#000}
#emc-home .lead p{margin:0 0 1.2em}
#emc-home .lead p:last-child{margin-bottom:0}
#emc-home .lead strong,#emc-home .lead b{font-weight:700}

/* ---------- Buttons (Figma: 18px Open Sans Bold, ls 3.6px, pad 20/30, r30, h53) ---------- */
#emc-home .btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-body);font-weight:700;font-size:18px;line-height:1;
  letter-spacing:3.6px;text-transform:uppercase;white-space:nowrap;
  /* Figma: 53px tall, 30px side padding. The right padding is reduced by the
     trailing letter-space so the label optically centres and the pill width matches. */
  height:53px;padding-inline:30px 26.4px;
  border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,background-color .3s,color .3s;
  will-change:transform;
}
#emc-home .btn--crimson{background:var(--btn);color:#fff;border-color:var(--btn)}
#emc-home .btn--crimson:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(198,27,87,.75)}
#emc-home .btn--white{background:#fff;color:#000;border-color:#fff}
#emc-home .btn--white:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(0,0,0,.5)}
#emc-home .btn--outline{background:transparent;color:#fff;border-color:#fff}
#emc-home .btn--outline:hover{background:#fff;color:#000;transform:translateY(-3px)}

/* ---------- Header (Figma: h130, black; logo 301x60 @30,35; nav 16px bold, gap 50) ---------- */
#emc-home .site-header{position:sticky;top:0;z-index:60;background:#000;transition:box-shadow .35s ease}
#emc-home .site-header.is-stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.95)}
#emc-home .bar{
  height:130px;display:flex;align-items:center;gap:24px;
  width:100%;max-width:1920px;margin:0 auto;padding-inline:30px;
  transition:height .35s ease;
}
#emc-home .site-header.is-stuck .bar{height:96px}
#emc-home .brand{flex:0 0 auto;display:block}
#emc-home .brand img{width:301px;height:60px;object-fit:contain;transition:width .35s ease,height .35s ease}
#emc-home .site-header.is-stuck .brand img{width:236px;height:47px}
#emc-home .nav{
  display:flex;align-items:center;gap:50px;margin-inline:auto;
  font-family:var(--ff-body);font-weight:700;font-size:16px;line-height:1.2;
  letter-spacing:0;text-transform:uppercase;
}
#emc-home .nav a{color:#fff;position:relative;padding:4px 0;white-space:nowrap}
#emc-home .nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--gold));transition:right .35s ease;
}
#emc-home .nav a:hover::after{right:0}
#emc-home .header-cta{flex:0 0 auto;display:flex;gap:20px}
#emc-home .menu-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px;margin-inline-start:auto}
#emc-home .menu-toggle svg{width:30px;height:30px;display:block}

/* ---------- Hero (Figma: h850; video fill + 90deg brand gradient @70%) ---------- */
#emc-home .hero{position:relative;isolation:isolate;overflow:hidden;background:#1a1030}
#emc-home .hero__bg{position:absolute;inset:0;z-index:0}
#emc-home .hero__bg img,#emc-home .hero__bg video{width:100%;height:100%;object-fit:cover}
#emc-home .hero__overlay{position:absolute;inset:0;z-index:1;background:var(--grad-hero);opacity:.7}
/* when the pre-composited Figma still is used, the gradient is already baked in */
#emc-home .hero.is-baked .hero__overlay{display:none}
#emc-home .hero .container{position:relative;z-index:2;padding-block:138px}
#emc-home .hero__inner{max-width:786px}
#emc-home .hero .eyebrow{color:#fff;margin-bottom:8px}
#emc-home .hero h1{font-size:60px;line-height:60px;color:#fff;max-width:786px;margin:0 0 41px}
#emc-home .hero__body{max-width:368px;color:#fff;font-size:18px;line-height:1.2}
#emc-home .hero__body p{margin:0 0 1.2em}
#emc-home .hero__body p:last-child{margin-bottom:0}
#emc-home .hero__body strong{font-weight:700}
#emc-home .hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:30px;margin-top:30px}

/* ---------- Split sections ---------- */
#emc-home .section{padding-block:106px}
#emc-home .split{
  display:grid;grid-template-columns:minmax(0,786fr) minmax(0,686fr);column-gap:100px;align-items:center;
  max-width:1572px;
}
#emc-home .media{border-radius:var(--r-media);overflow:hidden;aspect-ratio:786/442}
#emc-home .media img,#emc-home .media video{width:100%;height:100%;object-fit:cover}

/* ---------- Why attend (purple gradient — white text) ---------- */
#emc-home .why{background:var(--grad-why);padding-top:131px;padding-bottom:102px}
#emc-home .why .eyebrow{color:#fff;text-align:center;margin:0 0 50px}
#emc-home .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:74px;max-width:1598px}
#emc-home .card{
  border:1px solid #fff;border-radius:60px;background:transparent;
  /* Figma height is 468px, but the longest card's copy then sits only 48px off the
     bottom edge. Per Greg's review: min-height keeps the Figma proportion while the
     grid row grows to fit the longest card, and the deeper bottom padding keeps the
     copy off the rounded corner. All four cards stay equal height (grid stretch). */
  min-height:468px;padding:53px 50px 70px;display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .5s;
}
#emc-home .card:hover{transform:translateY(-8px);background:rgba(255,255,255,.07)}
#emc-home .card__num{font-family:var(--ff-head);font-weight:700;font-size:60px;line-height:60px;color:#fff;text-transform:uppercase}
#emc-home .card__title{font-size:var(--fs-card);line-height:var(--lh-card);color:#fff;margin:11px 0 0;min-height:122px}
#emc-home .card__body{font-size:18px;line-height:1.2;color:#fff;margin:0}

/* ---------- Speakers (orange gradient — BLACK text, crimson button) ---------- */
#emc-home .speakers{background:var(--grad-speakers);padding-block:100px}
#emc-home .speakers .split{grid-template-columns:minmax(0,686fr) minmax(0,786fr);column-gap:98px;max-width:1620px;padding-left:50px}
#emc-home .speakers .eyebrow{color:#000}
#emc-home .speakers .h2,#emc-home .speakers .lead{color:#000}
#emc-home .speakers .btn{margin-top:50px}

/* ---------- Relive (white, centered; video 1203x676) ---------- */
#emc-home .relive{padding-block:100px;text-align:center}
#emc-home .relive .eyebrow{max-width:786px;margin:0 auto 8px}
#emc-home .relive .h2{max-width:786px;margin:0 auto 41px}
#emc-home .relive .lead{max-width:786px;margin:0 auto}
#emc-home .relive .btn{margin-top:46px}
#emc-home .video{
  position:relative;margin:50px auto 0;max-width:1203px;
  border-radius:var(--r-media);overflow:hidden;aspect-ratio:1203/676;background:#000;cursor:pointer;
}
#emc-home .video img,#emc-home .video video{width:100%;height:100%;object-fit:cover}
#emc-home .video__poster{position:absolute;inset:0;transition:opacity .5s}
#emc-home .video__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  border:0;background:none;cursor:pointer;padding:0;
}
#emc-home .video__play svg{width:122.53px;height:122.53px;display:block;transition:transform .4s}
#emc-home .video:hover .video__play svg{transform:scale(1.07)}
#emc-home .video.is-playing .video__poster,#emc-home .video.is-playing .video__play{opacity:0;pointer-events:none}

/* ---------- Newsletter (gold gradient — BLACK text) ---------- */
#emc-home .news{background:var(--grad-news);padding-block:106px}
#emc-home .news .split{grid-template-columns:minmax(0,786fr) minmax(0,736fr);column-gap:100px;max-width:1620px}
#emc-home .news .eyebrow{color:#000}
#emc-home .news .h2{color:#000;margin-bottom:41px}
#emc-home .news__body{color:#000;max-width:686px;font-size:18px;line-height:1.2}
#emc-home .signup{
  display:flex;align-items:stretch;background:#fff;border-radius:60px;
  max-width:736px;height:53px;margin-top:30px;overflow:hidden;
}
#emc-home .signup input{
  flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font-family:var(--ff-body);font-size:18px;line-height:1.2;color:#000;padding:0 30px;
}
#emc-home .signup input::placeholder{color:#000;opacity:1}
/* Chrome/Safari paint their own background on autofilled fields, which showed as a
   pale box inside the white pill. background-color cannot be overridden on an
   autofilled field, so repaint it with a large inset shadow instead. */
#emc-home .signup input:autofill,
#emc-home .signup input:-webkit-autofill,
#emc-home .signup input:-webkit-autofill:hover,
#emc-home .signup input:-webkit-autofill:active{
  box-shadow:inset 0 0 0 100vmax #fff;
  -webkit-text-fill-color:#000;caret-color:#000;
}
/* keep a visible focus indicator once the autofill styling is replaced */
#emc-home .signup input:focus-visible{outline:2px solid var(--crimson);outline-offset:-4px;border-radius:60px}
#emc-home .signup .btn{flex:0 0 auto;height:53px;border-radius:60px}
#emc-home .news__social{margin-top:50px;color:#000;font-size:18px;line-height:1.2}
#emc-home .social-row{display:flex;align-items:center;gap:40px;margin-top:30px}
#emc-home .social-row a{width:36px;height:36px;display:grid;place-items:center;transition:transform .3s,opacity .3s}
#emc-home .social-row a:hover{transform:translateY(-3px);opacity:.75}
#emc-home .social-row svg{width:36px;height:36px;display:block}
#emc-home .news .social-row svg{fill:#000}

/* ---------- Footer info (white) ---------- */
#emc-home .finfo{padding-top:100px;padding-bottom:100px}
#emc-home .finfo .split{grid-template-columns:minmax(0,686fr) minmax(0,686fr);column-gap:150px;max-width:1572px;padding-left:50px;align-items:start}
#emc-home .finfo .h2{margin-bottom:41px}
#emc-home .finfo address{font-size:18px;line-height:1.2;color:#000}
#emc-home .finfo address strong{font-weight:700}
#emc-home .finfo address a{color:var(--crimson)}
#emc-home .finfo address a:hover{text-decoration:underline}
#emc-home .finfo .btn{margin-top:46px}
/* Figma nudges the left column's button 4px lower than the right */
#emc-home .finfo .split__text:first-child .btn{margin-top:50px}

/* ---------- Footer bar (black, h150; icons left, copy centre, legal right) ---------- */
#emc-home .fbar{background:#000;padding-block:57px}
#emc-home .fbar .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
#emc-home .fbar .social-row{margin:0}
#emc-home .fbar .social-row svg{fill:#fff}
#emc-home .fbar__copy{font-size:18px;line-height:1.2;color:#fff;text-align:center;white-space:nowrap}
#emc-home .fbar__legal{font-size:18px;line-height:1.2;color:#fff;text-align:right}
#emc-home .fbar__legal a{text-decoration:underline;text-underline-position:from-font}
#emc-home .fbar__legal a:hover{opacity:.75}

/* ---------- Mobile menu ---------- */
#emc-home .mobile-menu{
  display:none;position:fixed;inset:0;z-index:80;background:rgba(6,4,12,.98);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:24px;
}
#emc-home .mobile-menu.is-open{display:flex}
#emc-home .mobile-menu ul{display:flex;flex-direction:column;gap:24px;align-items:center}
#emc-home .mobile-menu a{color:#fff;font-family:var(--ff-head);font-weight:700;text-transform:uppercase;font-size:24px;letter-spacing:.02em}
#emc-home .mobile-menu .btn{min-width:240px}
#emc-home .mobile-menu__close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}

/* ---------- GSAP reveal ---------- */
html.emc-anim #emc-home .reveal{opacity:0}

/* ==========================================================================
   Responsive — proportional step-down from the 1920 reference
   ========================================================================== */
@media (max-width:1700px){
  #emc-home{--gutter:100px}
  #emc-home .bar{padding-inline:30px}
  #emc-home .cards{gap:48px}
  #emc-home .finfo .split,#emc-home .speakers .split{padding-left:0}
}
@media (max-width:1500px){
  #emc-home{--fs-h2:52px;--lh-h2:52px;--fs-card:32px;--lh-card:32px}
  #emc-home .hero h1{font-size:52px;line-height:52px}
  #emc-home .card{min-height:440px}
  #emc-home .card__title{min-height:0;margin-bottom:20px}
  #emc-home .nav{gap:34px}
  #emc-home .header-cta{gap:14px}
}
@media (max-width:1280px){
  #emc-home{--gutter:60px;--fs-h2:44px;--lh-h2:46px}
  #emc-home .hero h1{font-size:44px;line-height:46px}
  #emc-home .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:none}
  #emc-home .split,#emc-home .news .split,#emc-home .finfo .split,#emc-home .speakers .split{column-gap:56px;max-width:none}
  #emc-home .nav{display:none}
  #emc-home .header-cta{display:none}
  #emc-home .menu-toggle{display:inline-flex}
}
@media (max-width:900px){
  #emc-home{--gutter:32px;--fs-h2:36px;--lh-h2:40px;--fs-card:28px;--lh-card:32px}
  #emc-home .section,#emc-home .news,#emc-home .speakers,#emc-home .relive{padding-block:64px}
  #emc-home .why{padding-top:64px;padding-bottom:64px}
  #emc-home .finfo{padding-top:64px;padding-bottom:72px}
  #emc-home .split,#emc-home .news .split,#emc-home .finfo .split,#emc-home .speakers .split{
    grid-template-columns:1fr;row-gap:36px;
  }
  /* keep the Figma order: image above copy */
  #emc-home .split>.split__media{order:-1}
  #emc-home .speakers .split>.split__media{order:-1}
  #emc-home .hero h1{font-size:36px;line-height:40px}
  #emc-home .hero .container{padding-block:80px}
  #emc-home .hero__body{max-width:none}
  #emc-home .card{min-height:0;padding:36px 32px;border-radius:40px}
  #emc-home .media{border-radius:40px}
  #emc-home .video{border-radius:40px;margin-top:36px}
  #emc-home .fbar .container{grid-template-columns:1fr;justify-items:center;gap:20px;text-align:center}
  #emc-home .fbar__legal,#emc-home .fbar__copy{text-align:center;white-space:normal}
}
@media (max-width:600px){
  #emc-home{--fs-h2:30px;--lh-h2:34px;--fs-body:16px}
  #emc-home .hero h1{font-size:30px;line-height:34px}
  #emc-home .cards{grid-template-columns:1fr}
  #emc-home .btn{font-size:15px;letter-spacing:2.4px;height:auto;padding:17px 24px 17px 24px}
  #emc-home .signup{flex-direction:column;height:auto;border-radius:28px;padding:8px}
  #emc-home .signup input{padding:14px 18px}
  #emc-home .signup .btn{width:100%}
  #emc-home .hero__cta{gap:16px;align-self:stretch}
  #emc-home .hero__cta .btn{width:100%}
  #emc-home .brand img{width:220px;height:44px}
  #emc-home .bar{height:88px}
  #emc-home .video__play svg{width:76px;height:76px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.emc-anim #emc-home .reveal{opacity:1!important;transform:none!important}
  #emc-home .btn,#emc-home .card,#emc-home .social-row a,#emc-home .video__play svg{transition:none}
}