@charset "utf-8";
/* HERO IMAGES, Pages: training/workshops 
------------------------------------------------------------------------------*/
.hero-administration {background:url("/career/Images/administration.png")}
.hero-compare {background:url("/about/images/compare.png")}
.hero-customers {background:url("/about/images/customers.png")}
.hero-history {background:url("/about/images/history.png")}
.hero-measures {background:url("/career/Images/measures.png");}
.hero-ordering {background:url("/career/Images/ordering.png")}
.hero-research {background:url("/about/images/research.png")}
.hero-workshops {background:url("/training/Images/workshop.png")}

.hero-administration,
.hero-compare,
.hero-customers,
.hero-history,
.hero-measures,
.hero-ordering,
.hero-research,
.hero-workshops {
background-size: contain;
background-repeat:no-repeat; 
background-position:center bottom;
height: 600px;
}
/* FORM, Pages: contact/questions, contact/new_account, career/login, career/forgot-password, career/account-forgot-password
--------------------------------------------------------------------------------------------------------*/
.flagship-page {
  margin: 3rem auto 5rem;
}
.form-flagship-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 620px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}
.form-flagship-content {
  max-width: 620px;
}
.form-flagship-content .callout-card:first-child {
  margin-top: 0;
}
.section-lead {
  max-width: 42rem;
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
  line-height: 1.65;
}
.form-flagship-content h2 {
  margin: 0 0 1rem;
}
.form-flagship-content p {
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.login-access {
  background: var(--bg-light-green);
  border-color: #cfe3c8;
}
.callout-card {
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}
.callout-card p:last-child {
  margin-bottom: 0;
}
.callout-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}
.callout-card p {
  font-size: 1rem;
}
.callout-card a {
  font-weight: 400;
  text-decoration: none;
}
.contact-info {
margin-top: 28px;
padding: 18px 20px;
max-width: 420px;
background: #fff;
border: 1px solid #ccd9e2;
border-radius: 10px;
}
.contact-info h3 {
margin: 0 0 .5rem;
font-weight: 500;
font-size: 1.2rem;
}
.contact-info p {
margin: 0 0 8px;
font-size: 1.05rem;
}

.form-flagship-card {
  border: 1px solid var(--wowi-green);
  border-radius: 10px;
  padding: clamp(1rem, 3vw, 1.25rem) 
	       clamp(1.5rem, 3vw, 3rem);
  background: #fff;
}
.form-flagship label {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  margin: .8rem 0 .3rem;
}
.form-flagship input,
.form-flagship select,
.form-flagship textarea {
  width: 100%;
}
.form-radio-group {
  border: 0;
  padding: 0;
  margin: 1.25rem 0 0;
}
.form-radio-group legend {
  font-weight: 400;
  line-height: 1.35;
  margin: 1.25rem 0 .55rem;
  font-size: 1.15rem;
}
.radio-options {
  display: flex;
  gap: 1.25rem;
  margin-bottom: .75rem;
}
.radio-options .radio-option {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: 1.05rem;
}
.radio-option input[type="radio"] {
  width: auto;
  accent-color: var(--wowi-blue);
}
.form-flagship textarea {
  min-height: 11rem;
  resize: vertical;
}
#counter_text {
  margin-top: .4rem;
  font-size: .95rem;
  color: var(--text-muted);
}
.form-flagship .form-btn {
  width: 100%;
  max-width: 100%;
  margin: 1em 0 1em 0;
}
.form-flagship .formCounter,
.form-flagship #counter_text {
  width: 100%;
  margin-top: .4rem;
  font-size: .95rem;
  color: var(--text-muted);
}
.hp-field {
display: none !important;
}
.confirmation-message {
  max-width: 720px;
  margin: 3rem auto 5rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--bg-light-green);
  border: 1px solid #cfe3c8;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.confirmation-message h2 {
font-size: 2rem;
margin: 0 0 1em 0;
color: var(--wowi-blue);
}
.confirmation-message p {
font-size: 1.15rem;
line-height: 1.4;
margin: 0;
}
/* Success */
.contact-message .success {
background: #fff;
border: 1px solid var(--wowi-green);
color: var(--wowi-blue);
}
.contact-message .error {
background: #fdf2f2;
border: 1px solid #e0a1a1;
color: #7a2e2e;
}

/* LOGIN - Page: career/login 
------------------------------------------------------------------------------*/
.login-error {
background: #fff4f4;
border-left: 4px solid #d13525;
padding: .75rem 1rem;
margin-bottom: 1rem;
border-radius: 6px;
color: #d13525;
font-size: 1rem;
line-height: 1.45;
}
.login-note {
font-size: .9rem;
color: #6c7a86;
margin-top: .35em;
margin-bottom: .75em;
}
.help-note {
margin-top: 1rem;
font-size: .95rem;
line-height: 1.45;
color: var(--neutral-dark);
}
.login-help-panel {
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top:1px solid var(--border-light);
}
.login-help-title {
margin:0 0 .1rem;
font-size:1rem;
font-weight:700;
color:var(--wowi-blue, #2e4857);
}
.login-help-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:.75rem;
}
.login-help-btn {
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:.75rem 1rem;
border:1px solid var(--wowi-border, #D6E2E8);
border-radius:6px;
background:#fff;
color:var(--wowi-blue, #2e4857);
font-size:.95rem;
font-weight:700;
text-align:center;
text-decoration:none;
transition:.2s ease;
}
.login-help-btn:hover,
.login-help-btn:focus {
border-color:var(--wowi-green, #98C683);
background:#F7FBF5;
}

/* PASSWORD RESET, Pages: career/forgot-password
------------------------------------------------------------------------------*/
.password-reset-page {
display: grid;
place-items: start center;
padding: 3rem 1rem 2rem;
}
.password-reset-card {
width: 100%;
max-width: 600px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 2em 3em;
}
.password-reset-card h1 {
margin: 0 0 .75rem 0;
font-size: 2.25rem;
color: var(--wowi-blue);
text-align: left;
}
.login-help-copy {
font-size: .95rem;
color: var(--text-muted);
margin: 0 0 1rem;
}
.password-reset-form {
margin-top: 1.5rem;
}
.password-reset-form label {
display: block;
margin-bottom: .35rem;
font-weight: 600;
}
.password-reset-form input[type=email], 
.password-reset-form input[type=password] {
width: 100%;
max-width: none;
}
.password-reset-form input[type=password] {
margin-bottom: 1rem;
}
.password-reset-card .form-btn,
.password-reset-card .opaque {
margin: 1.25rem 0 1rem 0;
width: 100%;
}

/* INTRO & TESTIMONIAL, Pages: about/customers, about/comparison-chart, career/accessibility, 
                               training/leaders, training/workshop
----------------------------------------------------------------------------------------------*/
.intro {
padding-block: clamp(2.5rem, 4vw, 3rem);
}
.intro-grid {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
.intro-copy h2 {
font-size: clamp(2rem, 3.2vw, 2.6rem);
max-width: 22ch;
line-height: 1.08;
letter-spacing: -.02em;
margin: 0 0 1.5rem;
color: var(--wowi-blue);
}
.intro-copy p {
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.6;
margin: 0 0 1rem;
max-width: 62ch;
color: #173447;
}
.intro-copy p:last-child {
margin-bottom: 0;
}
.testimonial-card {
position: relative;
background: #90BE7B;
border-radius: 18px;
padding: clamp(2rem, 4vw, 3.25rem);
box-shadow: 0 18px 38px rgba(46, 72, 87, 0.12);
color: #fff;
align-self: start;
}
.testimonial-card::before {
content: "“";
position: absolute;
top: 1rem;
left: 1.5rem;
opacity: .55;
font-size: 4.5rem;
line-height: 1;
color: rgba(255, 255, 255, 0.28);
font-family: Georgia, serif;
}
.testimonial-card blockquote {
position: relative;
z-index: 1;
margin: 0;
}
.testimonial-card p {
margin: 0 0 1.35rem;
font-size: clamp(1.2rem, 1.7vw, 1.55rem);
line-height: 1.4;
font-weight: 600;
max-width: 760px;
max-width: 26ch;
}
.testimonial-card.is-long p {
max-width: 42ch;
}
.testimonial-card cite {
display: block;
margin-bottom: 2rem;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: clamp(.95rem, 1.1vw, 1.05rem);
line-height: 1.45;
color: rgba(255, 255, 255, 0.95);
max-width: 58ch;
opacity: .95;	
}
.testimonial-card .testimonial-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .85rem 1.75rem;
min-width: 220px;
border: 2px solid rgba(255,255,255,.92);
border-radius: 10px;
background: transparent;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
transition:
background .18s ease,
transform .18s ease,
border-color .18s ease;
}
.testimonial-card .testimonial-btn:hover {
background: rgba(255,255,255,.12);
transform: translateY(-2px);
}
.testimonial-card .testimonial-btn:focus-visible {
outline: 3px solid rgba(255,255,255,.45);
outline-offset: 3px;
}

/* WORKSHOPS, Pages: training/workshops
------------------------------------------------------------------------------*/
.workshop-section {
padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.proof, .options {
max-width: 1180px;
margin: 0 auto;
}
.benefits {
background: #fff;
}
.workshop-section-heading {
max-width: 760px;
margin-bottom: 2.5rem;
}
.section-kicker {
  display:inline-block;
  margin-bottom:.65rem;
  color:var(--wowi-blue);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.86rem;
}
/* Proof */
.proof-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.25rem;
  margin-bottom:1.25rem;
}
.proof-card {
  background:var(--wowi-blue);
  color:#fff;
  border-radius:24px;
  padding:1.75rem;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow: 0 14px 34px rgba(46,72,87,.14);
}
.proof-card.light {
  background:#fff;
  color:#263943;
  border:1px solid var(--border-light);
}
.proof-number {
  display:block;
  font-family:'Roboto', Arial, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height:.95;
  color:var(--wowi-green);
  margin-bottom:.8rem;
}
.proof-card.light .proof-number { color:var(--wowi-blue); }
.proof-card h3 {
  font-size: 1.25rem;
  margin-bottom:.5rem;
  color:inherit;
}
.proof-card p {
  margin:0;
  color:inherit;
  line-height:1.5;
  font-size:1rem;
}
/* OPTIONS */
.options-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1.5rem;
}
.option-card {
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:24px;
  padding:clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.option-card.featured {
  border-top:6px solid var(--wowi-green);
}
.option-label {
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:1rem;
  padding:.35rem .75rem;
  border-radius:999px;
  background:var(--bg-light-blue);
  color:var(--wowi-blue);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.option-card h3 {
  color:var(--wowi-blue);
  margin-bottom:.8rem;
}
.option-card p { color:#324854; }
.option-list {
  display:grid;
  gap:.7rem;
  margin: .25rem 0 1.4rem;
  padding:0;
  list-style:none;
}
.option-list li {
  position:relative;
  padding-left:1.55rem;
  line-height:1.5;
  color:#324854;
}
.option-list li::before {
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--wowi-blue);
  font-weight:700;
}
.capacity-note {
  margin-top:auto;
  padding:1rem;
  border-radius:16px;
  background:var(--bg-light-green);
  border:1px solid #d7e8d0;
}
.capacity-note p {
  margin:0;
  font-size:1rem;
  line-height:1.5;
}
.option-actions { margin-top:1.3rem; }

/* LEVELS */
.levels {
padding: 0 clamp(2.5rem, 4vw, 3rem);
}
.level-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}
.level-card {
background: #fff;
border: 1px solid var(--border-light);
border-radius: 22px;
padding: 1.6rem;
}
.level-number {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--wowi-blue);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
margin-bottom: 1rem;
}
.objectives-link {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}
.leaders-link {
margin-top: clamp(2rem, 4vw, 3rem);
text-align: left;
}
.leaders-link a {
font-size: 1rem;
font-weight: 600;
color: var(--wowi-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s ease;
}
.leaders-link a:hover {
border-color: currentColor;
}
/* SCHEDULE */
.schedule {
background: #fff;
}
.workshop-list {
display: grid;
gap: 1.25rem;
}
.workshop-card {
border: 1px solid var(--border-light);
border-radius: 24px;
padding: clamp(1.5rem, 3vw, 2rem);
display: grid;
grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
gap: 2rem;
align-items: start;
}
.tag {
display: inline-block;
margin-bottom: .75rem;
padding: .25rem .7rem;
border-radius: 999px;
background: var(--bg-light-blue);
color: var(--wowi-blue);
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.date-line {
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 700;
color: var(--wowi-blue);
margin-bottom: .75rem;
}
.time-grid {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: 1rem 0;
}
.time-pill {
border: 1px solid var(--wowi-blue);
border-radius: 8px;
padding: .55rem .75rem;
font-size: .9rem;
}
.time-pill strong {
display: block;
}
/* Workshop CTA */
.workshop-cta {
text-align: center;
background: #fff;
}
.workshop-cta p {
max-width: 680px;
margin-left: auto;
margin-right: auto;
}

/* =============================================================================
  MOBILE and SMALL TABLET
================================================================================ */
@media screen and (max-width: 767px) {
  .flagship-page {
    margin: 2rem auto 4rem;
  }
  .form-flagship-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .form-flagship-content {
    max-width: none;
  }
  .section-lead {
    font-size: 1.05rem;
  }
  .callout-card,
  .contact-info {
    max-width: none;
    margin-top: 1.25rem;
  }
  .form-flagship-card {
    padding: 1.25rem;
  }
  .radio-options {
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
  }
  .login-help-actions {
    grid-template-columns: 1fr;
  }
  .confirmation-message {
    margin: 2rem auto 4rem;
    padding: 1.5rem;
  }
}


/* =============================================================================
  TABLET and UP
================================================================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .form-flagship-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .form-flagship-content {
    max-width: 720px;
  }

  .form-flagship-card {
    max-width: 680px;
  }
}


/* =============================================================================
  SMALL DESKTOP
================================================================================ */
@media screen and (min-width: 1024px) and (max-width: 1365px) {

  .form-flagship-grid {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
    gap: clamp(3rem, 6vw, 5rem);
  }
}


/* =============================================================================
  DESKTOP
================================================================================ */ 
@media screen and (min-width: 1366px) {
  .form-flagship-grid {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 620px);
  }
}


/* =============================================================================
  DESKTOP - LARGE
================================================================================ */ 
@media screen and (min-width: 1920px) {
  .form-flagship-grid {
    gap: 9rem;
  }
}


/* =============================================================================
  PRINT
================================================================================ */ 
@media print {

  header,
  nav,
  footer,
  .sign-in,
  .hamburger-menu,
  .menu-overlay,
  .form-btn,
  .login-help-panel,
  .login-note-help,
  .hp-field {
    display: none !important;
  }
  .flagship-page {
    margin: 0 !important;
  }
  .form-flagship-grid {
    display: block;
  }
  .form-flagship-content,
  .form-flagship-card,
  .confirmation-message {
    max-width: none;
    box-shadow: none !important;
  }
  .callout-card,
  .contact-info,
  .form-flagship-card,
  .confirmation-message {
    border: 1px solid #999 !important;
    background: #fff !important;
  }
  .form-flagship input,
  .form-flagship select,
  .form-flagship textarea {
    border: 1px solid #999 !important;
    background: #fff !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }
}