:root{
  --navy:#001F60;
  --blue:#0F8EFA;
  --lightblue:#9FC3E1;
  --grayblue:#4C6F8C;
  --orange:#EF682A;
  --peach:#FFB27A;
  --cream:#F7F4EF;
  --ink:#1B1B1F;
  --line:#ECEAE3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Nav */
.nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:22px 6%;background:#fff;border-bottom:1px solid var(--line);
}
.nav-logo img{display:block;}

/* Hero */
.hero{
  background:linear-gradient(120deg,#2a1858 0%,#4a2179 18%,#7a2a8c 40%,#a8317e 58%,#ce4468 74%,#e86b3c 100%);
  padding:64px 6% 80px;
}
.hero-grid{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;
}
.hero-image{border-radius:20px;overflow:hidden;min-height:520px;box-shadow:0 20px 50px rgba(0,0,0,0.28);}
.hero-image img{width:100%;height:100%;object-fit:cover;min-height:520px;display:block;}

.form-panel{
  position:relative;isolation:isolate;
  border:1px solid rgba(255,255,255,0.35);border-radius:20px;padding:38px 36px;
  display:flex;flex-direction:column;justify-content:center;box-shadow:0 20px 50px rgba(0,0,0,0.2);
}
/* Glass fill sits on a pseudo-element instead of .form-panel itself: an element
   with a backdrop-filter becomes the containing block for its position:fixed
   descendants, which pinned Google's invisible reCAPTCHA badge to the panel's
   bottom-right corner (its default right:-186px) on top of the submit button,
   instead of the browser viewport corner. */
.form-panel::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  border-radius:inherit;background:rgba(255,255,255,0.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.eyebrow{
  display:inline-block;background:rgba(255,255,255,0.2);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:0.8px;text-transform:uppercase;padding:7px 14px;border-radius:100px;margin-bottom:18px;width:fit-content;
}
.form-panel h1{color:#fff;font-size:30px;font-weight:700;line-height:1.25;margin:0 0 12px;}
.sub{color:rgba(255,255,255,0.88);font-size:15px;line-height:1.6;margin:0 0 10px;}
.note-box{
  background:rgba(255,255,255,0.16);border-left:3px solid #fff;border-radius:8px;padding:12px 14px;margin-bottom:22px;
}
.note-box p{color:#fff;font-size:13px;line-height:1.55;font-weight:500;margin:0;}

/* Form */
.form-panel form{display:flex;flex-direction:column;gap:12px;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-panel label{
  display:block;font-size:11.5px;color:rgba(255,255,255,0.75);margin-bottom:5px;
  font-weight:600;text-transform:uppercase;letter-spacing:0.03em;
}
.form-panel .ampfield{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,0.45);
  border-radius:0;font-family:'Poppins',sans-serif;font-size:14.5px;color:#fff;padding:6px 2px;
  outline:none;transition:border-color .15s ease;
}
.form-panel .ampfield::placeholder{color:rgba(255,255,255,0.6);}
.form-panel .ampfield:focus{border-bottom-color:#fff;}
.form-panel select.ampfield option{color:#1B1B1F;}
.form-panel fieldset{border:none;padding:0;margin:2px 0 4px;}
.submit-btn{
  margin-top:8px;background:#fff;color:var(--navy);font-weight:700;font-size:15px;padding:14px;
  border:none;border-radius:10px;cursor:pointer;font-family:'Poppins',sans-serif;width:100%;
  transition:transform .15s ease,box-shadow .15s ease;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,0.25);}
.form-fine{color:rgba(255,255,255,0.7);font-size:11px;margin-top:10px;line-height:1.5;}

/* Sessions */
.sessions{max-width:1180px;margin:0 auto;padding:76px 6% 40px;}
.sessions-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.kicker{color:var(--orange);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.sessions-head h2{font-size:32px;font-weight:700;color:var(--navy);line-height:1.3;margin:0 0 14px;}
.sessions-head p{color:#5A5A63;font-size:15px;line-height:1.6;margin:0;}

.session-card{
  display:grid;grid-template-columns:280px 1fr;gap:36px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:32px;margin-bottom:24px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.session-card:hover{box-shadow:0 16px 40px rgba(0,31,96,0.10);transform:translateY(-2px);border-color:#DFE7F0;}
.host-side{border-right:1px solid var(--line);padding-right:32px;display:flex;flex-direction:column;justify-content:center;}
.session-number{display:inline-block;color:var(--orange);font-weight:700;font-size:13px;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:10px;}
.host-side h3{font-size:20px;font-weight:700;color:var(--navy);line-height:1.35;margin:0 0 16px;}
.host-name{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:4px;}
.host-title{font-size:13px;color:var(--grayblue);font-weight:500;margin-bottom:14px;}
.host-bio{font-size:13.5px;color:#5A5A63;line-height:1.65;margin:0;}
.content-side{display:flex;flex-direction:column;justify-content:center;}
.leave-label{font-weight:600;font-size:14px;color:var(--navy);margin-bottom:12px;}
.bullets{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0;}
.bullets li{font-size:14.5px;color:var(--ink);line-height:1.55;padding-left:24px;position:relative;}
.bullets li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--orange);}

/* Footer */
.footer{
  background:var(--navy);color:rgba(255,255,255,0.75);padding:26px 6%;margin-top:48px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.flogo img{display:block;}
.flinks{display:flex;gap:20px;font-size:12px;}
.flinks a:hover{color:#fff;}
.fcopy{font-size:11px;color:rgba(255,255,255,0.5);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  /* Once the columns stack, pin the image to a short band. min-height alone was
     only a floor: the row auto-sized to the 2280x3300 portrait's own ratio
     (~1095px tall at 860px wide), pushing the form far below the fold. A
     definite height lets the img's height:100% resolve so object-fit crops to
     the tower instead. Both min-height resets clear the 520px base floors. */
  .hero-image{height:280px;min-height:0;}
  .hero-image img{min-height:0;}
  .session-card{grid-template-columns:1fr;}
  .host-side{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:24px;margin-bottom:24px;}
}