/* =========================================================
   SYNEXIA — LANDING REUTILIZABLE
   ========================================================= */

:root{
  --navy:#071827;
  --navy-2:#0b2033;

  --gold:#c89d54;
  --gold-2:#b78b45;

  --cream:#f7f5f1;
  --paper:#ffffff;

  --ink:#061827;
  --body:#53616d;

  --line:#dfe3e5;
  --soft:#f3f4f4;

  --radius:16px;
  --wrap:1170px;

  --shadow:
    0 12px 32px rgba(7,24,39,.07);
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
  scroll-padding-top:82px;
}


body{
  margin:0;

  color:var(--ink);
  background:#fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:16px;
  line-height:1.55;

  -webkit-font-smoothing:antialiased;
}


img{
  max-width:100%;
  display:block;
}


a{
  color:inherit;
  text-decoration:none;
}


button,
input{
  font:inherit;
}


button{
  cursor:pointer;
}


.wrap{
  width:min(
    calc(100% - 40px),
    var(--wrap)
  );

  margin-inline:auto;
}


.skip-link{
  position:absolute;

  left:-9999px;
  top:8px;

  z-index:1000;

  background:#fff;

  padding:8px 12px;
}


.skip-link:focus{
  left:8px;
}


/* =========================================================
   ANCLAS INTERNAS
   ========================================================= */

.anchor-target,
.anchor-point{
  scroll-margin-top:10px;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar{
  position:sticky;

  top:0;

  z-index:100;

  background:var(--navy);
  color:#fff;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.nav-wrap{
  min-height:78px;

  display:flex;

  align-items:center;

  gap:34px;
}


.brand{
  margin-right:auto;

  display:inline-flex;

  align-items:center;
}


.brand img{
  width:92px;

  height:auto;

  max-height:62px;

  object-fit:contain;
}


.desktop-nav,
.nav-cta{
  display:none;
}


.menu-button{
  width:40px;
  height:40px;

  border:0;

  background:transparent;

  display:grid;

  place-content:center;

  gap:6px;
}


.menu-button span{
  width:22px;
  height:1px;

  display:block;

  background:#fff;
}


.mobile-nav{
  padding:8px 20px 20px;

  border-top:
    1px solid rgba(255,255,255,.07);
}


.mobile-nav > a:not(.pill){
  display:block;

  padding:14px 0;

  color:rgba(255,255,255,.9);

  border-bottom:
    1px solid rgba(255,255,255,.06);

  font-size:1rem;
}


.mobile-nav .pill{
  margin-top:15px;
}


/* =========================================================
   TAG
   ========================================================= */

.microtag{
  min-height:26px;

  padding:5px 10px;

  display:inline-flex;

  align-items:center;

  border:1px solid #cdd3d6;

  border-radius:999px;

  background:#fff;

  color:var(--ink);

  text-transform:uppercase;

  letter-spacing:.08em;

  font-size:.64rem;

  font-weight:700;
}


.dark-tag{
  color:#fff;

  border-color:
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.02);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
p{
  margin-top:0;
}


h1{
  margin:16px 0 20px;

  font-size:
    clamp(
      2.55rem,
      7vw,
      4.5rem
    );

  line-height:.98;

  letter-spacing:-.045em;
}


h2{
  margin:10px 0 16px;

  font-size:
    clamp(
      2rem,
      5vw,
      3.1rem
    );

  line-height:1.04;

  letter-spacing:-.035em;
}


h3{
  font-size:1rem;

  line-height:1.3;
}


em{
  font-style:normal;

  color:var(--gold);
}


.lead{
  max-width:690px;

  color:var(--body);

  font-size:1.2rem;

  line-height:1.55;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.pill{
  min-height:48px;

  padding:10px 18px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  border:1px solid transparent;

  border-radius:999px;

  text-align:center;

  font-size:.88rem;

  font-weight:700;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}


.pill:hover{
  transform:translateY(-1px);
}


.pill-gold{
  background:var(--gold);

  color:#fff;
}


.pill-gold:hover{
  background:var(--gold-2);
}


.pill-outline{
  background:#fff;

  border-color:var(--ink);

  color:var(--ink);
}


.full{
  width:100%;
}


.nav-cta{
  padding-inline:27px;

  font-size:.92rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  background:#fff;
}


.hero-grid{
  display:grid;

  gap:30px;

  padding:38px 0 0;
}


.hero-copy{
  padding:10px 0 4px;
}


.hero-copy .lead{
  margin-bottom:0;
}


.hero-facts{
  margin:24px 0 20px;

  display:flex;

  flex-wrap:nowrap;

  align-items:center;

  gap:18px;

  color:var(--ink);

  font-size:.84rem;

  font-weight:700;
}


.hero-fact{
  display:inline-flex;

  align-items:center;

  gap:8px;

  white-space:nowrap;
}


.fact-icon{
  width:20px;
  height:20px;

  flex:0 0 20px;

  object-fit:contain;
}


.hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


.button-icon{
  width:19px;
  height:19px;

  flex:0 0 19px;

  object-fit:contain;
}


.hero-primary .button-icon{
  width:20px;
  height:20px;
}


.hero-secondary .button-icon{
  filter:
    brightness(0)
    saturate(100%)
    invert(8%)
    sepia(23%)
    saturate(1757%)
    hue-rotate(164deg)
    brightness(91%)
    contrast(101%);
}


.hero-art{
  height:660px;

  min-height:660px;

  margin:0;

  overflow:hidden;

  background:#fff;

  display:flex;

  align-items:center;

  justify-content:center;
}


.hero-art img{
  width:100%;
  height:100%;

  object-fit:contain;

  object-position:center center;

  transform:scale(1.28);

  transform-origin:center center;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
  padding:72px 0;
}


.learn-section{
  background:#f8f8f7;
}


.center-heading{
  max-width:760px;

  margin:0 auto 40px;

  text-align:center;
}


.center-heading p{
  max-width:650px;

  margin:0 auto;

  color:var(--body);

  font-size:.95rem;

  line-height:1.6;
}


/* =========================================================
   ACADEMIC CARDS
   ========================================================= */

.cards-grid{
  display:grid;

  grid-template-columns:1fr;

  gap:16px;
}


.info-card{
  min-width:0;

  padding:26px;

  display:flex;

  flex-direction:column;

  gap:18px;

  border:1px solid #dfe3e5;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 6px 18px rgba(7,24,39,.03);
}


.card-heading{
  width:100%;

  display:flex;

  align-items:center;

  gap:14px;

  min-width:0;
}


.card-icon{
  width:40px;
  height:40px;

  flex:0 0 40px;

  margin:0;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(200,157,84,.68);

  border-radius:8px;

  color:var(--gold-2);

  font-size:.72rem;

  font-weight:700;
}


.card-heading h3{
  min-width:0;

  margin:0;

  color:var(--ink);

  font-size:.96rem;

  line-height:1.35;

  font-weight:700;
}


.info-card > p{
  width:100%;

  margin:0;

  color:var(--body);

  font-size:.94rem;

  line-height:1.6;
}


/* =========================================================
   METHODOLOGY
   ========================================================= */

.split-section{
  display:grid;

  background:#fff;
}


.split-media{
  min-height:560px;

  background:#fff;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;
}


.split-media img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;

  object-position:center center;

  background:#fff;
}


.split-copy{
  display:flex;

  align-items:center;
}


.split-copy-inner{
  width:min(100%,600px);

  padding:54px 20px;
}


.split-copy-inner > p{
  max-width:650px;

  color:var(--body);

  font-size:1.12rem;

  line-height:1.6;
}


.feature-lines{
  margin-top:28px;

  display:grid;

  gap:10px;
}


.feature-lines div{
  min-height:68px;

  padding:15px 20px;

  display:grid;

  grid-template-columns:48px 1fr;

  align-items:center;

  gap:12px;

  border:1px solid #e6e6e3;

  border-radius:10px;

  background:#fafafa;
}


.feature-lines span{
  color:var(--gold-2);

  font-size:.9rem;

  font-weight:700;
}


.feature-lines strong{
  color:var(--ink);

  font-size:1rem;

  line-height:1.4;
}


/* =========================================================
   REGISTRATION
   ========================================================= */

.registration{
  padding-top:48px;
  padding-bottom:48px;

  background:#fff;
}


.registration-heading{
  margin-bottom:18px;
}


.registration-grid{
  display:grid;

  gap:34px;

  align-items:start;
}


.event-card{
  padding:4px 0;
}


.event-card h3{
  margin:14px 0 12px;

  font-size:1.5rem;

  line-height:1.2;
}


.event-card > p{
  max-width:520px;

  color:var(--body);

  font-size:.95rem;

  line-height:1.6;
}


.event-details{
  margin:25px 0 20px;

  display:grid;

  gap:13px;
}


.event-details div{
  display:grid;

  grid-template-columns:130px 1fr;

  gap:14px;
}


.event-details dt{
  color:var(--gold-2);

  font-size:.82rem;

  font-weight:700;
}


.event-details dd{
  margin:0;

  color:var(--ink);

  font-size:.9rem;

  font-weight:700;
}


.notice{
  padding:18px;

  border-top:
    1px solid var(--gold);

  border-bottom:
    1px solid var(--gold);

  color:var(--body);

  font-size:.92rem;

  line-height:1.65;
}


/* =========================================================
   FORM
   ========================================================= */

.form-box{
  width:100%;

  max-width:500px;

  padding:20px 22px;

  background:#f7f7f6;

  border:1px solid #e4e5e4;

  border-radius:12px;
}


.form-eyebrow{
  display:block;

  margin-bottom:3px;

  color:var(--gold-2);

  text-transform:uppercase;

  letter-spacing:.08em;

  font-size:.66rem;

  font-weight:700;
}


.form-box h3{
  margin-bottom:5px;

  font-size:1.2rem;
}


.form-intro{
  margin-bottom:14px;

  color:var(--body);

  font-size:.8rem;

  line-height:1.4;
}


.field{
  margin-bottom:9px;
}


.field label{
  display:block;

  margin-bottom:4px;

  font-size:.74rem;

  font-weight:700;
}


.optional{
  color:var(--body);

  font-weight:400;
}


.field input{
  width:100%;

  min-height:39px;

  padding:7px 10px;

  border:1px solid #cfd5d8;

  border-radius:5px;

  background:#fff;

  color:var(--ink);

  font-size:.85rem;
}


.field input:focus{
  outline:
    2px solid rgba(200,157,84,.25);

  border-color:var(--gold);
}


.field input.invalid{
  border-color:#a13c3c;
}


.error{
  min-height:14px;

  margin-top:3px;

  display:block;

  color:#a13c3c;

  font-size:.65rem;

  line-height:1.4;
}


.consent-field{
  margin:2px 0 10px;
}


.consent-label{
  display:grid;

  grid-template-columns:16px 1fr;

  gap:8px;

  align-items:start;

  cursor:pointer;
}


.consent-label input{
  width:15px;
  height:15px;

  margin-top:2px;

  accent-color:var(--gold-2);

  cursor:pointer;
}


.consent-label span{
  color:var(--body);

  font-size:.64rem;

  line-height:1.35;
}


.registration-button{
  min-height:42px;

  padding:8px 16px;

  font-size:.82rem;
}


/* =========================================================
   ADVISOR
   ========================================================= */

.advisor-contact{
  margin-top:8px;
}


.advisor-divider{
  position:relative;

  margin:7px 0;

  text-align:center;

  color:#8a9298;

  font-size:.7rem;
}


.advisor-divider::before{
  content:"";

  position:absolute;

  left:0;
  right:0;

  top:50%;

  height:1px;

  background:#dedfdf;
}


.advisor-divider span{
  position:relative;

  z-index:1;

  padding:0 10px;

  background:#f7f7f6;
}


.advisor-button{
  min-height:42px;

  padding:8px 16px;

  border:1px solid var(--navy);

  background:transparent;

  color:var(--navy);

  font-size:.8rem;

  font-weight:700;
}


.advisor-button:hover{
  background:var(--navy);

  color:#fff;
}


.advisor-icon{
  width:17px;
  height:17px;

  object-fit:contain;
}


.advisor-hours{
  margin:6px 0 0;

  text-align:center;

  color:var(--body);

  font-size:.61rem;

  line-height:1.4;
}


.advisor-hours strong{
  color:var(--ink);
}


.advisor-status{
  margin:3px 0 0;

  text-align:center;

  color:var(--gold-2);

  font-size:.61rem;

  font-weight:600;
}


.form-result{
  margin-top:8px;

  font-size:.7rem;

  line-height:1.4;
}


.form-result.success{
  padding:10px;

  border:1px solid #cfe0ca;

  border-radius:6px;

  background:#eef4ec;

  color:#285e2c;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-section{
  background:#f8f8f7;
}


.faq-grid{
  display:grid;

  gap:24px;
}


.accordion{
  border-top:1px solid var(--line);
}


.acc-item{
  border-bottom:1px solid var(--line);
}


.acc-trigger{
  width:100%;

  padding:19px 0;

  border:0;

  background:transparent;

  color:inherit;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  text-align:left;

  font-size:1rem;

  line-height:1.45;

  font-weight:700;
}


.acc-trigger span{
  flex:1;
}


.acc-trigger i{
  width:22px;
  height:22px;

  display:grid;

  place-items:center;

  border:1px solid currentColor;

  border-radius:4px;

  color:var(--gold);

  font-style:normal;

  font-weight:400;
}


.acc-panel{
  padding:0 38px 20px 0;
}


.acc-panel p{
  margin:0;

  color:var(--body);

  font-size:.95rem;

  line-height:1.65;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta{
  padding:48px 0;

  background:var(--navy);

  color:#fff;
}


.final-cta-wrap{
  display:grid;

  gap:22px;

  align-items:center;
}


.final-cta h2{
  margin-bottom:0;

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.7rem
    );
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  padding:40px 0;

  background:#05131f;

  color:rgba(255,255,255,.62);
}


.footer-grid{
  display:grid;

  gap:22px;
}


.footer-brand{
  display:inline-flex;

  align-items:center;

  gap:10px;

  color:var(--gold);

  font-size:.68rem;

  letter-spacing:.2em;
}


.footer-brand img{
  width:30px;
  height:30px;

  object-fit:contain;
}


.footer strong{
  display:block;

  color:#fff;

  font-size:.67rem;

  text-transform:uppercase;

  letter-spacing:.08em;
}


.footer p{
  margin:4px 0 0;

  font-size:.68rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:700px){

  .wrap{
    width:min(
      calc(100% - 64px),
      var(--wrap)
    );
  }


  .cards-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:16px;
  }


  .info-card{
    min-height:205px;
  }


  .registration-grid{
    grid-template-columns:
      1fr
      1fr;

    gap:42px;
  }


  .faq-grid{
    grid-template-columns:
      .7fr
      1.3fr;

    gap:60px;
  }


  .final-cta-wrap{
    grid-template-columns:
      1fr
      auto;
  }


  .footer-grid{
    grid-template-columns:
      1.2fr
      1fr
      1fr
      1fr;
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:920px){

  html{
    scroll-padding-top:82px;
  }


  .desktop-nav{
    display:flex;

    align-items:center;

    gap:34px;

    font-size:.95rem;

    font-weight:500;
  }


  .desktop-nav a{
    color:rgba(255,255,255,.92);
  }


  .desktop-nav a:hover{
    color:var(--gold);
  }


  .nav-cta{
    display:inline-flex;
  }


  .menu-button,
  .mobile-nav{
    display:none !important;
  }


  .hero-grid{
    grid-template-columns:
      1.02fr
      .98fr;

    gap:0;

    min-height:660px;

    padding:0;
  }


  .hero-copy{
    padding:
      76px
      68px
      76px
      0;

    align-self:center;
  }


  .section{
    padding:90px 0;
  }


  .cards-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:16px;
  }


  .info-card{
    min-height:190px;

    padding:26px;
  }


  .split-section{
    grid-template-columns:
      1fr
      1fr;

    min-height:560px;
  }


  .split-media{
    height:560px;

    min-height:560px;
  }


  .split-copy-inner{
    padding:70px 60px;
  }


  .registration-grid{
    grid-template-columns:
      1fr
      .88fr;

    gap:70px;
  }


  .form-box{
    justify-self:end;

    transform:translateY(-100px);
  }


  .final-cta{
    padding:56px 0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:699px){

  html{
    scroll-padding-top:68px;
  }


  .anchor-target,
  .anchor-point{
    scroll-margin-top:6px;
  }


  .wrap{
    width:min(
      calc(100% - 28px),
      var(--wrap)
    );
  }


  .nav-wrap{
    min-height:64px;
  }


  .brand img{
    width:68px;

    max-height:50px;
  }


  .menu-button{
    width:32px;
    height:32px;
  }


  /* HERO */

  .hero-grid{
    grid-template-columns:1fr;

    gap:24px;

    padding-top:24px;
  }


  h1{
    font-size:2.15rem;
  }


  .hero-copy .lead{
    font-size:1rem;
  }


  .hero-facts{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;

    margin:22px 0 18px;

    font-size:.86rem;
  }


  .fact-icon{
    width:19px;
    height:19px;
  }


  .hero-actions{
    flex-direction:column;

    gap:9px;
  }


  .hero-actions .pill{
    width:100%;

    min-height:48px;

    padding:10px 16px;

    font-size:.88rem;
  }


  .hero-art{
    height:420px;

    min-height:420px;
  }


  .hero-art img{
    transform:scale(1.16);
  }


  /* CONTENT */

  .section{
    padding:54px 0;
  }


  .center-heading{
    margin-bottom:26px;
  }


  .center-heading h2{
    font-size:1.75rem;
  }


  .center-heading p{
    font-size:.82rem;
  }


  .cards-grid{
    grid-template-columns:1fr;

    gap:12px;
  }


  .info-card{
    min-height:0;

    padding:20px;

    gap:14px;
  }


  .card-heading{
    display:flex;

    flex-direction:row;

    align-items:center;

    gap:12px;

    width:100%;
  }


  .card-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    margin:0;

    font-size:.7rem;
  }


  .card-heading h3{
    flex:1;

    margin:0;

    font-size:.92rem;

    line-height:1.35;
  }


  .info-card > p{
    margin:0;

    font-size:.88rem;

    line-height:1.55;
  }


  /* METHODOLOGY */

  .split-media{
    min-height:0;

    height:auto;
  }


  .split-media img{
    width:100%;
    height:auto;
  }


  .split-copy-inner{
    padding:44px 14px;
  }


  .split-copy-inner h2{
    font-size:1.75rem;
  }


  .split-copy-inner > p{
    font-size:1rem;
  }


  .feature-lines{
    margin-top:20px;
  }


  .feature-lines div{
    min-height:62px;

    padding:14px 16px;

    grid-template-columns:
      42px
      1fr;
  }


  .feature-lines span{
    font-size:.85rem;
  }


  .feature-lines strong{
    font-size:.95rem;
  }


  /* REGISTRATION */

  .registration-heading h2{
    font-size:1.8rem;
  }


  .registration-grid{
    grid-template-columns:1fr;

    gap:32px;
  }


  .event-card h3{
    font-size:1.25rem;
  }


  .event-details div{
    grid-template-columns:
      105px
      1fr;
  }


  .form-box{
    max-width:none;

    padding:20px 18px;

    transform:none;
  }


  .advisor-button{
    width:100%;
  }


  /* FAQ */

  .faq-grid h2{
    font-size:1.75rem;
  }


  .acc-trigger{
    font-size:.95rem;

    line-height:1.4;
  }


  .acc-panel p{
    font-size:.9rem;

    line-height:1.6;
  }


  .final-cta-wrap .pill{
    width:100%;
  }


  .footer-grid{
    gap:18px;
  }

}
/* Product-specific display: crop approved brochure visual inside image containers. */
.hero-art img{object-fit:cover;object-position:76% 8%;transform:none;}
.split-media img{object-fit:cover;object-position:74% 10%;}
@media (max-width:699px){.hero-art img{object-fit:cover;object-position:78% 8%;transform:none;} .split-media img{object-fit:cover;object-position:75% 10%;}}