:root {
  --na-navy: #071542;
  --na-deep: #001f49;
  --na-green: #08743b;
  --na-green-2: #008847;
  --na-purple: #5527b3;
  --na-orange: #ff5b0a;
  --na-line: #dce2ec;
  --na-soft: #f7f9fc;
  --na-text: #071542;
  --na-muted: #34405d;
  --na-radius: 16px;

    --na-contact-navy: #07184b;
  --na-contact-navy-2: #001f49;
  --na-contact-green: #006a3d;
  --na-contact-green-dark: #005934;
  --na-contact-light: #ffffff;
  --na-contact-line: #dfe5ef;
  --na-contact-muted: #07184bcc;
  --na-contact-soft: #f8fafc;
  --na-contact-radius: 16px;
  --na-contact-shadow: 0 18px 42px rgba(3, 20, 58, 0.08);

  --nd3-navy: #061b43;
    --nd3-green: #006838;
    --nd3-muted: #536174;
    --nd3-line: rgba(6, 27, 67, 0.28);
    --nd3-white: #ffffff;
      --cp-navy: #061a46;
  --cp-green: #0d6f45;
  --cp-soft-green: #f3fbf6;
  --cp-border: #d8e5e3;
  --cp-muted: #5d6a78;
  --cp-blue-soft: #f7f9ff;
  --cp-lavender: #eeebff;
  --cp-purple: #7d62d9;
  --cp-shadow: 0 12px 28px rgba(6, 26, 70, 0.06);
    --stemds-navy: #06164d;
  --stemds-navy-2: #001f61;
  --stemds-green: #087d44;
  --stemds-green-2: #0a9a5a;
  --stemds-soft: #f8fbff;
  --stemds-border: #dce3f0;
  --stemds-text: #071542;
  --stemds-muted: #4b5878;
  --stemds-purple: #7c39ef;
  --stemds-pink: #f1398d;
  --stemds-blue: #1e73ff;
  --stemds-orange: #ff6a1a;
  --stemds-teal: #08a4a4;

    --stemm-navy: #06184f;
  --stemm-navy-2: #001f61;
  --stemm-green: #067a43;
  --stemm-green-2: #0b9b59;
  --stemm-blue: #1267e8;
  --stemm-purple: #5b20b9;
  --stemm-border: #dce3ee;
  --stemm-muted: #465276;
  --stemm-soft: #f8fbff;

    --stemws-navy: #051a57;
  --stemws-navy-2: #00174d;
  --stemws-green: #087341;
  --stemws-green-2: #0a8a4b;
  --stemws-blue: #3568ff;
  --stemws-purple: #7b58db;
  --stemws-orange: #ff7b1f;
  --stemws-pink: #ef5a98;
  --stemws-border: #dde4ef;
  --stemws-text: #071542;

    --stemvu-navy: #06184f;
  --stemvu-navy-2: #001f61;
  --stemvu-green: #087b44;
  --stemvu-green-2: #0a9556;
  --stemvu-border: #dfe6ef;
  --stemvu-muted: #4a5676;
  --stemvu-soft: #f7fbf8;

    --stemtp-navy: #061044;
  --stemtp-navy-2: #071b5d;
  --stemtp-green: #006b37;
  --stemtp-green-dark: #004e2b;
  --stemtp-blue: #005eb8;
  --stemtp-orange: #ff5a13;
  --stemtp-purple: #6743b9;
  --stemtp-soft: #f6faf6;
  --stemtp-border: #dfe5ef;
  --stemtp-muted: #23305f;
  --stemtp-shadow: 0 16px 44px rgba(7, 16, 68, 0.08);


}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--na-text);
  background: #fff;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.na-container {
  max-width: 1440px;
  margin: 0 auto;
  /* padding-left: 52px;
  padding-right: 52px; */
}

.na-header {
  background: #fff;
  border-bottom: 1px solid #edf0f5;
  position: relative;
  z-index: 50;
}

.na-navbar {
  min-height: 92px;
  padding: 0;
}

.na-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-right: 18px;
  min-width: 400px;
}

.na-brand-main {
  width: 332px;
  height: auto;
  display: block;
}

.na-brand-divider {
  height: 63px;
  width: 1px;
  background: #9098aa;
  display: block;
}

.na-stem-logo {
  display: flex;
  flex-direction: column;
  line-height: .88;
  color: var(--na-green);
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: .02em;
}

.na-stem-logo strong {
  font-size: 39px;
  font-weight: 900;
  color: var(--na-green);
}

.na-stem-logo small {
  font-size: 14px;
  font-weight: 900;
  color: #071542;
  margin-top: 7px;
  letter-spacing: .06em;
}

.na-menu-list {
  gap: 18px;
  align-items: center;
}

.na-menu-list .nav-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--na-navy);
  padding: 36px 0 31px;
  position: relative;
  white-space: nowrap;
}

.na-menu-list .nav-link.active,
.na-menu-list .nav-link:hover {
  color: var(--na-green);
}

.na-menu-list .nav-link.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 2px;
  background: var(--na-green);
  border-radius: 20px;
}

.na-menu-list .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 0.15em;
}

.na-dropdown-menu {
  border: 1px solid #edf0f5;
  border-radius: 10px;
  padding: 8px 0;
  margin-top: 0;
  box-shadow: 0 12px 28px rgba(7, 21, 66, 0.1);
}

.na-dropdown-menu .dropdown-item {
  font-size: 13px;
  font-weight: 700;
  color: var(--na-navy);
  padding: 10px 18px;
}

.na-dropdown-menu .dropdown-item:hover,
.na-dropdown-menu .dropdown-item:focus {
  color: var(--na-green);
  background: #f4fbf7;
}

.na-dropdown-menu .dropdown-item.active,
.na-dropdown-menu .dropdown-item:active {
  color: var(--na-green);
  background: #eef8f2;
}

@media (min-width: 1200px) {
  .na-menu-list .dropdown:hover .dropdown-menu {
    display: block;
  }
}

@media (max-width: 1199.98px) {
  .na-menu-list .nav-link {
    padding: 12px 0;
  }

  .na-menu-list .nav-link.active:after {
    bottom: 6px;
  }

  .na-menu-list .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
    background: transparent;
  }
}

.na-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.na-login-btn,
.na-book-btn {
  font-size: 14px;
  font-weight: 800;
  border-radius: 8px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.na-login-btn {
  border: 1.6px solid var(--na-navy);
  color: var(--na-navy);
  background: #fff;
}

.na-book-btn {
  background: var(--na-green);
  color: #fff;
  border: 1.6px solid var(--na-green);
  box-shadow: 0 10px 18px rgba(0, 117, 64, .13);
}

.na-book-btn:hover {
  color: #fff;
  background: #005c2e;
}

.na-toggler {
  border: 1px solid #d4dae6;
  padding: 8px 10px;
}

.na-hero {
  position: relative;
  min-height: 532px;
  border-bottom: 1px solid #dfe4ee;
  background: #fff;
  overflow: hidden;
  background: url(../images/home-hero.png) center center / cover no-repeat;
}

.na-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('../images/home-hero.png') left top/cover no-repeat;
  z-index: 1;
}

.na-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .68) 47%, rgba(255, 255, 255, 0) 57%);
  z-index: 2;
  pointer-events: none;
}

.na-hero-container {
  position: relative;
  z-index: 3;
  min-height: 972px;
  padding: 0px;
}

.na-hero-copy-col {
  min-height: 972px;
  display: flex;
  align-items: center;
}

.na-hero-copy {
  max-width: 500px;
  padding: 45px 0 24px;
  position: relative;
  z-index: 4;
}

.na-kicker {
  margin: 0 0 12px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1c167a;
  position: relative;
}

.na-kicker span {
  color: #064b33;
}

.na-kicker b {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  position: relative;
  top: 1px;
}

.na-kicker b:before,
.na-kicker b:after {
  content: "";
  position: absolute;
  background: #ff5b0a;
  border-radius: 5px;
}

.na-kicker b:before {
  width: 12px;
  height: 3px;
  transform: rotate(-38deg);
  top: 5px;
}

.na-kicker b:after {
  width: 4px;
  height: 4px;
  right: 1px;
  top: 0;
  background: #04a15f;
}

.na-hero-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-style: italic;
    font-weight: 900;
    line-height: 70px;
    letter-spacing: .025em;
    margin: 0;
    text-transform: uppercase;
    color: var(--na-navy);
    font-size: clamp(42px, 5.3vw, 59px);
}

.na-hero-title span,
.na-hero-title strong {
  display: block;
}

.na-hero-title strong {
  color: var(--na-green);
  font-size: 1.02em;
}

.na-hero-title .na-hero-success {
  font-size: 1.19em;
  letter-spacing: .03em;
}

.na-brush {
  display: inline-block;
  margin: 7px 0 17px;
  padding: 4px 18px 5px 18px;
  line-height: 1;
  background: #071542;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 23px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .045em;
  position: relative;
  text-transform: uppercase;
  box-shadow: inset 0 -9px 0 rgba(255, 255, 255, .04);
}

.na-brush:before,
.na-brush:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  background: #071542;
}

.na-brush:before {
  right: 100%;
  clip-path: polygon(18% 0, 100% 8%, 100% 92%, 0 100%, 22% 56%, 0 15%);
}

.na-brush:after {
  left: 100%;
  clip-path: polygon(0 9%, 100% 0, 78% 42%, 100% 93%, 0 100%);
}

.na-hero-text {
  font-size: 17px;
  line-height: 1.35;
  max-width: 438px;
  color: #071542;
  margin: 0 0 18px;
  font-weight: 500;
}

.na-outcomes {
  max-width: 460px;
  margin-bottom: 20px;
}

.na-outcome {
  min-height: 64px;
  padding: 0 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border-right: 1px solid #aab2c3;
}

.na-outcome:first-child {
  padding-left: 0;
}

.na-outcome:last-child {
  border-right: 0;
}

.na-outcome img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.na-outcome span {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.08;
}

.na-hero-actions {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.na-primary-btn,
.na-outline-btn {
  height: 46px;
  padding: 0 26px;
  border-radius: 8px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: .2s ease;
}

.na-primary-btn {
  background: var(--na-green);
  color: #fff;
  box-shadow: 0 12px 22px rgba(0, 111, 63, .15);
}

.na-primary-btn span {
  font-size: 30px;
  font-weight: 500;
  margin-left: 22px;
  line-height: 0;
}

.na-primary-btn:hover {
  background: #005e31;
  color: #fff;
  transform: translateY(-1px);
}

.na-outline-btn {
  border: 1.6px solid var(--na-green);
  color: #071542;
  background: #fff;
  min-width: 210px;
}

.na-outline-btn:hover {
  color: #fff;
  background: var(--na-green);
}

.na-hosted {
  position: absolute;
  right: 54px;
  bottom: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
}

.na-hosted span {
  font-size: 16px;
  color: #071542;
  font-weight: 500;
}

.na-hosted img {
  width: 136px;
  height: auto;
}

.na-hero-mobile-img {
  display: none;
}

.na-benefit-strip {
  background: #fff;
  border-bottom: 1px solid #dfe5ee;
}

.na-benefit-grid {
  height: 75px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}

.na-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  border-right: 1px solid #aab2c3;
}

.na-benefit:last-child {
  border-right: 0;
}

.na-benefit img {
  width: 45px;
  height: 45px;
}

.na-benefit span {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.na-section {
  padding: 17px 0 0;
}

.na-section-heading {
  text-align: center;
  margin-bottom: 7px;
}

.na-section-heading h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--na-navy);
  margin: 0;
  text-transform: uppercase;
}

.na-section-heading p {
  font-size: 14px;
  font-weight: 800;
  margin: 4px 0 0;
}

.na-section-heading em {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 0;
}

.na-section-heading em:before,
.na-section-heading em:after {
  content: "";
  position: absolute;
  background: #ff5b0a;
  border-radius: 5px;
}

.na-section-heading em:before {
  width: 13px;
  height: 3px;
  top: 7px;
  left: 0;
  transform: rotate(-35deg);
}

.na-section-heading em:after {
  width: 4px;
  height: 4px;
  top: 0;
  right: 0;
  background: #03a25c;
}

.na-workshop-row {
  align-items: stretch;
}

.na-work-card,
.na-audience-card,
.na-plan-card,
.na-members-card {
  height: 100%;
  border: 1px solid var(--na-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .025);
}

.na-work-card {
  min-height: 234px;
}

.na-card-img {
  height: 108px;
  overflow: hidden;
  background: #f1f4f7;
}

.na-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.na-card-body {
  position: relative;
  padding: 16px 22px 18px 76px;
}

.na-card-badge {
  position: absolute;
  left: 22px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  box-shadow: 0 8px 14px rgba(0, 0, 0, .11);
}

.na-card-badge img {
  width: 34px;
  height: 34px;
}

.na-purple-card .na-card-badge {
  background: var(--na-purple);
}

.na-green-card .na-card-badge {
  background: var(--na-green-2);
}

.na-orange-card .na-card-badge {
  background: var(--na-orange);
}

.na-work-card h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.02;
  font-weight: 900;
  margin: 0 0 7px;
  color: #071542;
}

.na-green-card h3 {
  color: var(--na-green);
}

.na-orange-card h3 {
  color: #071542;
}

.na-work-card p {
  font-size: 12.5px;
  line-height: 1.25;
  margin: 0 0 11px;
  font-weight: 600;
  color: #071542;
}

.na-small-btn {
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 8px 21px;
  display: inline-flex;
  align-items: center;
}

.na-small-btn:hover {
  color: #fff;
  opacity: .9;
}

.na-btn-purple {
  background: var(--na-purple);
}

.na-btn-green {
  background: var(--na-green-2);
}

.na-btn-orange {
  background: var(--na-orange);
}

.na-audience-card {
  background: linear-gradient(135deg, #052963, #000d2e);
  border: 0;
  border-radius: 10px;
  color: #fff;
  min-height: 236px;
  padding: 26px 26px 22px;
  box-shadow: 0 12px 24px rgba(3, 30, 80, .16);
}

.na-audience-card h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 23px;
  line-height: 1.12;
  font-weight: 900;
  margin: 0 0 16px;
}

.na-audience-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.na-audience-card li {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 13px;
  position: relative;
  padding-left: 24px;
}

.na-audience-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: 900;
}

.na-light-btn {
  height: 42px;
  border-radius: 6px;
  background: #fff;
  color: var(--na-green);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 203px;
}

.na-light-btn:hover {
  background: #eaf2ee;
  color: var(--na-green);
}

.na-memberships {
  padding-top: 9px;
}

.na-membership-heading {
  margin-bottom: 10px;
}

.na-plan-card {
  min-height: 224px;
  padding: 18px 26px 18px;
}

.na-plan-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.na-plan-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
}

.na-plan-icon img {
  width: 37px;
  height: 37px;
}

.na-plan-purple .na-plan-icon,
.na-plan-purple .na-plan-btn {
  background: var(--na-purple);
}

.na-plan-green .na-plan-icon,
.na-plan-green .na-plan-btn {
  background: var(--na-green-2);
}

.na-plan-orange .na-plan-icon,
.na-plan-orange .na-plan-btn {
  background: var(--na-orange);
}

.na-plan-card h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  margin: 6px 0 6px;
}

.na-plan-purple h3 {
  color: var(--na-purple);
}

.na-plan-green h3 {
  color: var(--na-green-2);
}

.na-plan-orange h3 {
  color: var(--na-orange);
}

.na-plan-card p {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

.na-price {
  margin: 14px 0 7px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.na-price strong {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #071542;
}

.na-price span {
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 3px;
}

.na-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 17px;
}

.na-check-list li {
  font-size: 12.7px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;
  position: relative;
  padding-left: 19px;
}

.na-check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: #071542;
  font-weight: 900;
}

.na-plan-btn {
  height: 34px;
  border-radius: 5px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  width: 100%;
  margin-top: auto;
}

.na-plan-btn:hover {
  color: #fff;
  filter: brightness(.93);
}

.na-members-card {
  background: #f0e8fb;
  padding: 18px 22px;
  min-height: 224px;
}

.na-members-card img {
  width: 100%;
  height: 107px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.na-members-card h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  margin: 0 0 13px;
}

.na-compare-btn {
  height: 35px;
  font-size: 14px;
  min-width: 0;
  width: 100%;
  border-color: #071542;
  color: #071542;
}

.na-more-services {
  padding: 10px 0 14px;
}

.na-services-heading {
  margin-bottom: 8px;
}

.na-service-strip {
  border: 1px solid var(--na-line);
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 12px 21px;
  background: #fff;
  gap: 12px;
}

.na-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: #071542;
}

.na-service-item strong {
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 900;
}

.na-service-icon {
  width: 43px;
  height: 43px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
}

.na-service-icon img {
  width: 28px;
  height: 28px;
}

.na-bg-purple {
  background: #efe1ff;
}

.na-bg-green {
  background: #9ef2be;
}

.na-bg-gold {
  background: #fff0bd;
}

.na-bg-pink {
  background: #ffcfed;
}

.na-bg-orange {
  background: #ffd7ca;
}

.na-bg-blue {
  background: #dff0ff;
}

.na-bg-purple img,
.na-bg-green img {
  filter: none;
}

.na-footer {
  background: linear-gradient(120deg, #04153b 0%, #00275a 52%, #00224c 100%);
  color: #fff;
  padding: 24px 0 12px;
}

.na-footer .row>div:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .15);
}

.na-footer-logo {
  width: 200px;
  height: auto;
  margin-bottom: 10px;
}

.na-footer-col {
  padding-left: 28px;
  padding-right: 36px;
}

.na-footer p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
  color: #f5f8ff;
}

.na-footer h4 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 8px 0 9px;
}

.na-socials {
  display: flex;
  gap: 14px;
}

.na-socials a {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1.4px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.na-contact-list,
.na-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.na-contact-list li {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 8px;
  position: relative;
  padding-left: 28px;
}

.na-contact-list li:before {
  content: "◎";
  position: absolute;
  left: 0;
  color: #fff;
}

.na-footer-links a {
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

.na-footer-links a:hover {
  text-decoration: underline;
}

.na-newsletter {
  display: flex;
  gap: 10px;
  max-width: 363px;
}

.na-newsletter input {
  height: 39px;
  border: 0;
  border-radius: 5px;
  padding: 0 17px;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}

.na-newsletter button {
  border: 0;
  border-radius: 5px;
  background: var(--na-green-2);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 0 22px;
}

.na-copyright {
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  color: #fff;
}

@media (max-width:1275px) {
  .na-container {
    padding-left: 42px;
    padding-right: 42px;
  }

  .na-brand {
    min-width: 345px;
    gap: 16px;
  }

  .na-brand-main {
    width: 210px;
  }

  .na-stem-logo strong {
    font-size: 34px;
  }

  .na-menu-list {
    gap: 14px;
  }

  .na-menu-list .nav-link {
    font-size: 12px;
  }

  .na-login-btn,
  .na-book-btn {
    padding: 12px 14px;
    font-size: 12px;
  }

  .na-hero-title {
    font-size: clamp(42px, 5.15vw, 60px);
  }

  .na-brush {
    font-size: 21px;
  }

  .na-card-body {
    padding-left: 70px;
  }

  .na-work-card h3 {
    font-size: 15.5px;
  }

  .na-plan-card {
    padding-left: 20px;
    padding-right: 20px;
  }

}

@media (max-width:1199.98px) {
  .na-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  .na-navbar {
    min-height: auto;
    padding: 10px 0;
  }

  .na-brand {
    min-width: auto;
  }

  .na-collapse {
    padding: 18px 0 10px;
    background: #fff;
  }

  .na-menu-list {
    align-items: flex-start;
    gap: 0;
  }

  .na-menu-list .nav-link {
    padding: 9px 0;
  }

  .na-menu-list .nav-link.active:after {
    bottom: 5px;
  }

  .na-nav-actions {
    margin-left: 0;
    margin-top: 12px;
  }

  .na-hero-bg {
    width: 60%;
    opacity: .92;
  }

  .na-hero:after {
    background: linear-gradient(90deg, #fff 0%, #fff 46%, rgba(255, 255, 255, .58) 58%, rgba(255, 255, 255, 0) 70%);
  }

  .na-benefit-grid {
    grid-template-columns: repeat(3, 1fr);
    height: auto;
  }

  .na-benefit {
    min-height: 76px;
    border-bottom: 1px solid #dce2ec;
  }

  .na-benefit:nth-child(3) {
    border-right: 0;
  }

  .na-benefit:nth-child(n+4) {
    border-bottom: 0;
  }

  .na-service-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .na-footer .row>div:not(:last-child) {
    border-right: 0;
  }

  .na-footer-col {
    padding-left: 12px;
    padding-right: 12px;
  }

}

@media (max-width:991.98px) {
  .na-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .na-hero {
    min-height: 0;
    background-size: 0px;
  }

  .na-hero-bg {
    display: none;
  }

  .na-hero:after {
    display: none;
  }

  .na-hero-container {
    min-height: auto;
  }

  .na-hero-copy-col {
    min-height: auto;
  }

  .na-hero-copy {
    max-width: 100%;
    padding: 35px 0 18px;
    text-align: center;
    margin: 0 auto;
  }

  .na-hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .na-outcomes {
    margin-left: auto;
    margin-right: auto;
  }

  .na-hero-actions {
    justify-content: center;
  }

  .na-hero-media-col {
    display: block;
  }

  .na-hero-mobile-img {
    display: block;
    margin: 0 auto 58px;
    max-width: 660px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(7, 21, 66, .12);
  }

  .na-hero-mobile-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .na-hosted {
    right: 50%;
    transform: translateX(50%);
    bottom: 7px;
    background: rgba(255, 255, 255, .88);
    border-radius: 10px;
    padding: 2px 10px;
  }

  .na-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .na-benefit {
    border-right: 0;
    border-bottom: 1px solid #dce2ec;
  }

  .na-benefit:nth-child(odd) {
    border-right: 1px solid #dce2ec;
  }

  .na-benefit:nth-child(n) {
    border-bottom: 1px solid #dce2ec;
  }

  .na-benefit:last-child {
    grid-column: 1/-1;
    border-right: 0;
    border-bottom: 0;
  }

  .na-section {
    padding-top: 24px;
  }

  .na-work-card,
  .na-audience-card,
  .na-plan-card,
  .na-members-card {
    max-width: 480px;
    margin: 0 auto;
  }

  .na-card-img {
    height: 150px;
  }

  .na-members-card img {
    height: 150px;
  }

  .na-service-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .na-newsletter {
    max-width: 100%;
  }

}

@media (max-width:767.98px) {
  .na-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .na-brand {
    gap: 10px;
  }

  .na-brand-main {
    width: 165px;
  }

  .na-brand-divider {
    height: 44px;
  }

  .na-stem-logo strong {
    font-size: 25px;
  }

  .na-stem-logo small {
    font-size: 10px;
    margin-top: 5px;
  }

  .na-nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .na-login-btn,
  .na-book-btn {
    justify-content: center;
  }

  .na-hero-copy {
    padding-top: 28px;
  }

  .na-kicker {
    font-size: 12px;
  }

  .na-hero-title {
    font-size: clamp(38px, 11vw, 54px);
  }

  .na-brush {
    font-size: 17px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .na-hero-text {
    font-size: 15px;
  }

  .na-outcome {
    border-right: 0;
    margin-bottom: 14px;
  }

  .na-outcome:nth-child(odd) {
    border-right: 1px solid #aab2c3;
  }

  .na-hero-actions {
    gap: 12px;
  }

  .na-primary-btn,
  .na-outline-btn {
    width: 100%;
    max-width: 310px;
  }

  .na-benefit-grid {
    grid-template-columns: 1fr;
  }

  .na-benefit:nth-child(odd),
  .na-benefit {
    border-right: 0;
  }

  .na-benefit:last-child {
    grid-column: auto;
  }

  .na-section-heading h2 {
    font-size: 19px;
    letter-spacing: .14em;
  }

  .na-audience-card {
    padding: 24px;
  }

  .na-service-strip {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .na-footer {
    text-align: left;
  }

  .na-newsletter {
    flex-direction: column;
  }

  .na-newsletter button {
    height: 39px;
  }

  .na-copyright {
    margin-top: 22px;
  }

}

@media (max-width:420px) {
  .na-brand-main {
    width: 140px;
  }

  .na-stem-logo strong {
    font-size: 21px;
  }

  .na-stem-logo small {
    font-size: 9px;
  }

  .na-brand-divider {
    height: 37px;
  }

  .na-hero-title {
    font-size: 36px;
  }

  .na-brush {
    font-size: 14px;
  }

  .na-hosted img {
    width: 126px;
  }

  .na-hosted span {
    font-size: 12px;
  }

  .na-plan-top {
    gap: 10px;
  }

  .na-plan-card {
    padding: 18px;
  }

  .na-price strong {
    font-size: 30px;
  }

}












/* About Us */


.na-about-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 28%, rgba(8, 116, 59, 0.045), transparent 26%),
    radial-gradient(circle at 94% 60%, rgba(85, 39, 179, 0.035), transparent 22%),
    #fff;
}

.na-about-container {
  width: min(100% - 76px, 1440px);
  margin-inline: auto;
}

.na-about-breadcrumb {
  padding: 18px 0 13px;
  font-size: 12px;
  line-height: 1;
  color: var(--na-muted);
}

.na-about-breadcrumb a {
  color: var(--na-deep);
  text-decoration: none;
  font-weight: 700;
}

.na-about-breadcrumb span {
  color: #97a0b5;
  margin-inline: 9px;
}

.na-about-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    isolation: isolate;
    border-bottom: 1px solid rgba(220, 226, 236, 0.9);
    background-image: linear-gradient(90deg, #fff 0%, #fff 35%, rgba(255, 255, 255, 0.9) 44%, rgba(255, 255, 255, 0.36) 55%, rgba(255, 255, 255, 0.02) 68%), url(../images/about-hero-stem-studio.jpg);
    background-size: 100% 100%, 69% 100%;
    background-repeat: no-repeat;
    background-position: center, right center;
}

.na-about-hero-content {
  max-width: 475px;
  padding: 38px 0 44px;
}

.na-about-kicker-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 5px;
  color: var(--na-navy);
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 0.94;
  letter-spacing: -2px;
  font-weight: 700;
}

.na-about-kicker-title .na-about-green {
  color: var(--na-green);
}

.na-about-spark {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
  flex: 0 0 25px;
}

.na-about-spark::before,
.na-about-spark::after {
  content: "";
  position: absolute;
  background: var(--na-orange);
  border-radius: 20px;
}

.na-about-spark::before {
  width: 4px;
  height: 15px;
  left: 6px;
  top: 0;
  transform: rotate(22deg);
}

.na-about-spark::after {
  width: 16px;
  height: 4px;
  right: 0;
  bottom: 6px;
  transform: rotate(-25deg);
}

.na-about-spark i {
  position: absolute;
  width: 4px;
  height: 12px;
  right: 5px;
  top: 2px;
  background: var(--na-green-2);
  border-radius: 20px;
  transform: rotate(54deg);
}

.na-about-hero-subtitle {
  margin: 0 0 20px;
  color: var(--na-navy);
  font-size: clamp(22px, 2.45vw, 31px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.na-about-hero-copy {
  margin: 0;
  max-width: 440px;
  color: var(--na-text);
  font-size: 17px;
  line-height: 1.58;
  font-weight: 600;
}

.na-about-script-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: "Caveat", cursive;
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1;
  font-weight: 400;
}

.na-about-script-row .create { color: var(--na-green); }
.na-about-script-row .collab { color: var(--na-orange); }
.na-about-script-row .grow { color: #113ca6; }
.na-about-script-row .dot { color: var(--na-navy); font-family: "Nunito Sans", Arial, sans-serif; font-size: 17px; }

.na-about-content {
  padding: 27px 0 8px;
}

.na-about-section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  font-size: 21px;
  line-height: 1.2;
  color: var(--na-navy);
  font-weight: 900;
  letter-spacing: -0.25px;
  text-transform: uppercase;
}

.na-about-section-title::after {
  content: "";
  width: 22px;
  height: 19px;
  display: inline-block;
  background:
    linear-gradient(var(--na-orange), var(--na-orange)) 2px 2px / 3px 10px no-repeat,
    linear-gradient(var(--na-green-2), var(--na-green-2)) 10px 13px / 9px 3px no-repeat,
    linear-gradient(#0d37a6, #0d37a6) 15px 3px / 3px 8px no-repeat;
  transform: rotate(25deg);
  border-radius: 8px;
}

.na-about-section-copy {
  color: var(--na-text);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 600;
  margin: 0 0 20px;
}

.na-about-story-gallery {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  box-shadow: 0 12px 28px rgba(7, 21, 66, 0.07);
}

.na-about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.na-about-gallery-grid img {
  width: 100%;
  height: 245px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.na-about-pill-card {
  margin-top: 31px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  box-shadow: 0 14px 35px rgba(7, 21, 66, 0.06);
  overflow: hidden;
}

.na-about-value-col {
  padding: 27px 27px 25px;
  min-height: 190px;
}

.na-about-value-col + .na-about-value-col {
  border-left: 1px solid var(--na-line);
}

.na-about-icon-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}

.na-about-icon-title svg {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
}

.na-about-icon-title h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  color: currentColor;
}

.na-about-value-col.na-about-mission { color: var(--na-green); }
.na-about-value-col.na-about-vision { color: #103eb2; }
.na-about-value-col.na-about-values { color: var(--na-orange); }

.na-about-value-col p,
.na-about-value-list {
  color: var(--na-text);
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 600;
  margin: 0;
}

.na-about-value-list {
  padding: 0;
  list-style: none;
}

.na-about-value-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 7px;
}

.na-about-value-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--na-orange);
  border: 2px solid var(--na-orange);
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.na-about-exist-row {
  margin-top: 30px;
  align-items: stretch;
}

.na-about-stat-card {
  height: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  box-shadow: 0 14px 35px rgba(7, 21, 66, 0.055);
  padding: 21px 17px;
}

.na-about-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

.na-about-stat-item {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
}

.na-about-stat-item + .na-about-stat-item {
  border-left: 1px solid var(--na-line);
}

.na-about-stat-item svg {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
}

.na-about-stat-number {
  color: var(--na-navy);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

.na-about-stat-label {
  min-height: 28px;
  color: var(--na-navy);
  font-size: 12.5px;
  line-height: 1.18;
  font-weight: 800;
}

.na-about-learn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 9px 23px;
  border: 1.5px solid var(--na-green);
  color: var(--na-green);
  background: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  transition: 0.2s ease;
}

.na-about-learn-btn:hover {
  color: #fff;
  background: var(--na-green);
}

.na-about-parent-card {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) 1fr;
  align-items: center;
  gap: 30px;
  padding: 31px 36px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  box-shadow: 0 14px 35px rgba(7, 21, 66, 0.055);
}

.na-about-parent-logo {
  width: min(100%, 330px);
  height: auto;
  display: block;
}

.na-about-parent-list {
  margin: 0;
  padding: 0 0 0 48px;
  list-style: none;
  border-left: 1px solid var(--na-line);
}

.na-about-parent-list li {
  position: relative;
  margin-bottom: 13px;
  color: var(--na-navy);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.na-about-parent-list li:last-child { margin-bottom: 0; }

.na-about-parent-list li::before {
  content: "✓";
  position: absolute;
  left: -25px;
  top: 1px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--na-green);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.na-about-cta {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: 72px minmax(250px, 1fr) auto auto 170px;
  gap: 20px;
  align-items: center;
  margin: 31px 0 10px;
  padding: 28px 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 4% 50%, rgba(8, 116, 59, 0.42), transparent 13%),
    linear-gradient(105deg, var(--na-deep), #071542 54%, #001335 100%);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 31, 73, 0.18);
}

.na-about-cta-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(8, 116, 59, 0.26);
  color: #bde3ca;
}

.na-about-cta h2 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 900;
  text-transform: uppercase;
}

.na-about-cta p {
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.na-about-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 42px;
  padding: 11px 22px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: 0.2s ease;
}

.na-about-cta-btn.na-about-book {
  color: #fff;
  background: var(--na-green-2);
  border: 1px solid var(--na-green-2);
}

.na-about-cta-btn.na-about-contact {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.82);
}

.na-about-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.16);
}

.na-about-plane {
  position: relative;
  min-height: 58px;
}

.na-about-plane svg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 164px;
  height: 58px;
  opacity: 0.95;
}

.na-about-icon-green { color: var(--na-green); }
.na-about-icon-orange { color: var(--na-orange); }
.na-about-icon-blue { color: #184bbf; }
.na-about-icon-purple { color: var(--na-purple); }

@media (max-width: 1199.98px) {
  .na-about-container {
    width: min(100% - 44px, 960px);
  }

  .na-about-hero {
    min-height: 342px;
    background-size: 100% 100%, 72% 100%;
  }

  .na-about-gallery-grid img {
    height: 210px;
  }

  .na-about-cta {
    grid-template-columns: 64px 1fr auto auto;
  }

  .na-about-plane {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .na-about-container {
    width: min(100% - 34px, 720px);
  }

  .na-about-hero {
    min-height: auto;
    align-items: flex-end;
    padding-top: 250px;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.1) 40%, #fff 90%),
      url('../images/about-hero-stem-studio.jpg');
    background-size: 100% 315px;
    background-position: top center;
  }

  .na-about-hero-content {
    max-width: 100%;
    padding: 28px 0 32px;
  }

  .na-about-section-copy {
    margin-bottom: 15px;
  }

  .na-about-story-gallery {
    margin-top: 12px;
  }

  .na-about-value-col + .na-about-value-col {
    border-left: 0;
    border-top: 1px solid var(--na-line);
  }

  .na-about-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .na-about-stat-item + .na-about-stat-item {
    border-left: 0;
  }

  .na-about-stat-item:nth-child(3n+2),
  .na-about-stat-item:nth-child(3n+3) {
    border-left: 1px solid var(--na-line);
  }

  .na-about-stat-item:nth-child(n+4) {
    border-top: 1px solid var(--na-line);
  }

  .na-about-parent-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px;
  }

  .na-about-parent-list {
    border-left: 0;
    padding-left: 28px;
  }

  .na-about-cta {
    grid-template-columns: 58px 1fr;
  }

  .na-about-cta .na-about-cta-btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .na-about-container {
    width: min(100% - 26px, 540px);
  }

  .na-about-breadcrumb {
    padding: 14px 0 10px;
  }

  .na-about-hero {
    padding-top: 225px;
    background-size: 100% 285px;
  }

  .na-about-kicker-title {
    letter-spacing: -1.5px;
  }

  .na-about-hero-copy,
  .na-about-section-copy {
    font-size: 15.5px;
  }

  .na-about-gallery-grid {
    grid-template-columns: 1fr;
  }

  .na-about-gallery-grid img {
    height: 245px;
  }

  .na-about-pill-card,
  .na-about-exist-row,
  .na-about-cta {
    margin-top: 23px;
  }

  .na-about-value-col {
    padding: 23px 22px;
  }

  .na-about-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .na-about-stat-item:nth-child(n) {
    border-left: 0;
    border-top: 0;
  }

  .na-about-stat-item:nth-child(even) {
    border-left: 1px solid var(--na-line);
  }

  .na-about-stat-item:nth-child(n+3) {
    border-top: 1px solid var(--na-line);
  }

  .na-about-cta {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 24px 20px;
  }

  .na-about-cta-icon {
    margin-bottom: -4px;
  }
}

@media (max-width: 480px) {
  .na-about-container {
    width: min(100% - 22px, 100%);
  }

  .na-about-hero {
    padding-top: 205px;
    background-size: 100% 250px;
  }

  .na-about-spark {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .na-about-script-row {
    gap: 7px;
  }

  .na-about-gallery-grid img {
    height: 215px;
  }

  .na-about-stat-card {
    padding: 15px 12px;
  }

  .na-about-stat-item {
    min-height: 116px;
    padding: 0 9px;
  }

  .na-about-stat-number {
    font-size: 25px;
  }

  .na-about-stat-label {
    font-size: 11.8px;
  }
}









/* contact Us */

.na-contact-sprite {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.na-contact-page {
  background: #fff;
  overflow: hidden;
}

.na-contact-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* HERO */
.na-contact-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  background: #fff;
}

.na-contact-hero__image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 56%;
  background-image: url("../images/contact-hero-studio.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -2;
}

.na-contact-hero__fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #fff 0%, #fff 37%, rgba(255,255,255,0.96) 43%, rgba(255,255,255,0.55) 51%, rgba(255,255,255,0.08) 62%, rgba(255,255,255,0) 100%);
}

.na-contact-hero__row {
  min-height: 480px;
}

.na-contact-hero__copy {
  padding-top: 52px;
  padding-bottom: 42px;
}

.na-contact-hero__title {
  margin: 0;
  color: var(--na-contact-navy);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.35vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.na-contact-hero__title span {
  color: var(--na-contact-green);
}

.na-contact-hero__text {
  max-width: 415px;
  margin: 20px 0 66px;
  color: var(--na-contact-navy);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.62;
}

.na-contact-quick-row {
  max-width: 490px;
  margin-left: -8px;
  margin-right: -8px;
}

.na-contact-quick-item {
  min-height: 112px;
  padding: 0 14px;
  text-align: center;
  border-right: 1px solid var(--na-contact-line);
}

.na-contact-quick-item:last-child {
  border-right: 0;
}

.na-contact-quick-item svg {
  width: 38px;
  height: 38px;
  margin-bottom: 9px;
  color: var(--na-contact-navy);
}

.na-contact-quick-item h3 {
  margin: 0 0 5px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--na-contact-navy);
}

.na-contact-quick-item p {
  margin: 0;
  color: var(--na-contact-navy);
  font-size: 0.7rem;
  line-height: 1.45;
  font-weight: 500;
}

/* FORM + CONTACT PANELS */
.na-contact-main-section {
  padding: 24px 0 28px;
}

.na-contact-card-row {
  align-items: stretch;
}

.na-contact-panel {
  background: #fff;
  border: 1px solid var(--na-contact-line);
  border-radius: var(--na-contact-radius);
  box-shadow: 0 12px 35px rgba(7, 24, 75, 0.04);
}

.na-contact-form-panel {
  padding: 28px 28px 30px;
}

.na-contact-info-panel {
  padding: 28px 28px 0;
  overflow: hidden;
}

.na-contact-panel h2 {
  margin: 0 0 12px;
  color: var(--na-contact-green-dark);
  font-size: 1.15rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.na-contact-panel__intro {
  margin: 0 0 18px;
  color: var(--na-contact-navy);
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
}

.na-contact-form .row {
  margin-bottom: 18px;
}

.na-contact-input {
  width: 100%;
  min-height: 43px;
  padding: 12px 13px;
  border: 1px solid #d7dde8;
  border-radius: 7px;
  color: var(--na-contact-navy);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: none !important;
}

.na-contact-input::placeholder,
.na-newsletter-form input::placeholder {
  color: rgba(7, 24, 75, 0.75);
}

.na-contact-input:focus,
.na-newsletter-form input:focus {
  border-color: var(--na-contact-green);
  outline: 0;
  box-shadow: 0 0 0 0.18rem rgba(0, 106, 61, 0.12) !important;
}

.na-contact-textarea {
  min-height: 144px !important;
  resize: vertical;
}

.na-contact-check {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 4px 0 22px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--na-contact-navy);
  cursor: pointer;
}

.na-contact-check .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #aeb8c8;
  box-shadow: none;
}

.na-contact-check .form-check-input:checked {
  background-color: var(--na-contact-green);
  border-color: var(--na-contact-green);
}

.na-contact-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 250px;
  min-height: 54px;
  padding: 14px 28px;
  color: #fff;
  background: linear-gradient(135deg, #006938 0%, #008646 100%);
  border: 0;
  border-radius: 7px;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 14px 28px rgba(0, 105, 56, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.na-contact-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(0, 105, 56, 0.24);
}

.na-contact-send-btn svg {
  width: 22px;
  height: 22px;
}

.na-contact-info-list {
  display: grid;
  gap: 18px;
  margin-top: 14px;
  margin-bottom: 20px;
}

.na-contact-info-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
}

.na-contact-info-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--na-contact-navy);
  border-radius: 50%;
  color: var(--na-contact-navy);
}

.na-contact-info-icon--green {
  border-color: var(--na-contact-green);
  color: var(--na-contact-green);
}

.na-contact-info-icon svg {
  width: 27px;
  height: 27px;
}

.na-contact-info-item h3 {
  margin: 4px 0 5px;
  color: var(--na-contact-navy);
  font-size: 0.83rem;
  line-height: 1.1;
  font-weight: 900;
}

.na-contact-info-item p {
  margin: 0;
  color: var(--na-contact-navy);
  font-size: 0.82rem;
  line-height: 1.38;
  font-weight: 500;
}

.na-contact-map-wrap {
  margin: 8px -18px 0;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid #e1e5ee;
}

.na-contact-map-wrap img {
  display: block;
  width: 100%;
  min-height: 166px;
  object-fit: cover;
}

/* OTHER WAYS */
.na-connect-section {
  padding: 10px 0 16px;
}

.na-connect-panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--na-contact-line);
  border-radius: var(--na-contact-radius);
  box-shadow: 0 10px 30px rgba(7, 24, 75, 0.04);
  padding: 44px 16px 22px;
}

.na-connect-heading-wrap {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: min(370px, calc(100% - 48px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  text-align: center;
}

.na-connect-heading-wrap::before,
.na-connect-heading-wrap::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--na-contact-line);
}

.na-connect-heading-wrap::after {
  position: relative;
}

.na-connect-heading-wrap h2 {
  margin: 0;
  color: var(--na-contact-green-dark);
  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.na-connect-card-row {
  align-items: stretch;
}

.na-connect-card {
  text-align: center;
  padding: 10px 30px 10px;
  min-height: 190px;
  border-right: 1px solid var(--na-contact-line);
}

.na-connect-card:last-child {
  border-right: 0;
}

.na-connect-icon {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--na-contact-navy);
}

.na-connect-icon--mint {
  background: #dff5e9;
}

.na-connect-icon--lavender {
  background: #eee9ff;
}

.na-connect-icon--cream {
  background: #ffedc5;
}

.na-connect-icon--blue {
  background: #dcecff;
}

.na-connect-icon svg {
  width: 34px;
  height: 34px;
}

.na-connect-card h3 {
  margin: 0 0 8px;
  color: var(--na-contact-green-dark);
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 900;
}

.na-connect-card:nth-child(2) h3,
.na-connect-card:nth-child(4) h3 {
  color: var(--na-contact-navy);
}

.na-connect-card p {
  max-width: 192px;
  margin: 0 auto 18px;
  color: var(--na-contact-navy);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 500;
}

.na-connect-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--na-contact-green-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.na-connect-card a svg {
  width: 18px;
  height: 18px;
}

/* NEWSLETTER */
.na-newsletter-section {
  padding: 0 0 14px;
}

.na-newsletter-bar {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 80px 28px 88px;
  color: #fff;
  background: linear-gradient(135deg, #051b54 0%, #002d6f 58%, #031850 100%);
  border-radius: 12px;
  overflow: hidden;
}

.na-newsletter-left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.na-newsletter-icon {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  color: #fff;
}

.na-newsletter-icon svg {
  width: 45px;
  height: 45px;
}

.na-newsletter-left h2 {
  margin: 0 0 7px;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.na-newsletter-left p {
  max-width: 410px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 500;
}

.na-newsletter-form {
  display: grid;
  grid-template-columns: minmax(240px, 290px) 132px;
  gap: 18px;
  align-items: center;
}

.na-newsletter-form input {
  height: 50px;
  border: 1px solid #ccd4e2;
  border-radius: 7px;
  padding: 0 17px;
  font-size: 0.9rem;
  font-weight: 500;
}

.na-newsletter-form button {
  height: 50px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #007d45;
  font-weight: 800;
  font-size: 0.92rem;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.na-newsletter-form button:hover {
  background: #008b50;
  transform: translateY(-1px);
}

@media (max-width: 1199.98px) {
  .na-contact-container {
    max-width: 100%;
    padding-left: 46px;
    padding-right: 46px;
  }

  .na-contact-hero__image {
    width: 54%;
  }

  .na-contact-hero__title {
    font-size: clamp(2.7rem, 5vw, 4.15rem);
  }

  .na-newsletter-bar {
    padding-left: 72px;
    padding-right: 72px;
  }
}

@media (max-width: 991.98px) {
  .na-contact-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  .na-contact-hero {
    min-height: auto;
    padding-top: 0;
  }

  .na-contact-hero__image {
    position: relative;
    order: 2;
    inset: auto;
    width: calc(100% - 56px);
    min-height: 360px;
    margin: 0 auto 24px;
    border-radius: 16px;
    background-position: center center;
    box-shadow: var(--na-contact-shadow);
  }

  .na-contact-hero {
    display: flex;
    flex-direction: column;
  }

  .na-contact-hero__fade {
    display: none;
  }

  .na-contact-hero__row {
    min-height: auto;
  }

  .na-contact-hero__copy {
    padding-top: 42px;
    padding-bottom: 26px;
  }

  .na-contact-hero__text {
    max-width: 760px;
    margin-bottom: 32px;
  }

  .na-contact-quick-row {
    max-width: 100%;
  }

  .na-contact-main-section {
    padding-top: 10px;
  }

  .na-connect-card:nth-child(2) {
    border-right: 0;
  }

  .na-connect-card:nth-child(1),
  .na-connect-card:nth-child(2) {
    border-bottom: 1px solid var(--na-contact-line);
    padding-bottom: 28px;
    margin-bottom: 18px;
  }

  .na-newsletter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 28px;
  }

  .na-newsletter-form {
    grid-template-columns: 1fr 140px;
  }
}

@media (max-width: 767.98px) {
  .na-contact-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .na-contact-hero__copy {
    padding-top: 34px;
  }

  .na-contact-hero__title {
    font-size: clamp(2.3rem, 11vw, 3.6rem);
  }

  .na-contact-hero__text {
    font-size: 0.98rem;
  }

  .na-contact-hero__image {
    width: calc(100% - 36px);
    min-height: 300px;
  }

  .na-contact-quick-item {
    border-right: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .na-contact-quick-item:nth-child(odd) {
    border-right: 1px solid var(--na-contact-line);
  }

  .na-contact-quick-item:nth-child(1),
  .na-contact-quick-item:nth-child(2) {
    border-bottom: 1px solid var(--na-contact-line);
  }

  .na-contact-form-panel,
  .na-contact-info-panel {
    padding: 24px 20px 24px;
  }

  .na-contact-info-panel {
    padding-bottom: 0;
  }

  .na-contact-send-btn {
    width: 100%;
    min-width: 0;
  }

  .na-contact-info-item {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
  }

  .na-contact-info-icon {
    width: 42px;
    height: 42px;
  }

  .na-contact-info-icon svg {
    width: 23px;
    height: 23px;
  }

  .na-contact-map-wrap {
    margin-left: -10px;
    margin-right: -10px;
  }

  .na-connect-panel {
    padding: 40px 0 10px;
  }

  .na-connect-heading-wrap {
    width: calc(100% - 24px);
  }

  .na-connect-heading-wrap::before,
  .na-connect-heading-wrap::after {
    display: none;
  }

  .na-connect-heading-wrap h2 {
    font-size: 0.98rem;
  }

  .na-connect-card,
  .na-connect-card:nth-child(2),
  .na-connect-card:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--na-contact-line);
    margin-bottom: 0;
    padding: 22px 24px;
  }

  .na-connect-card:last-child {
    border-bottom: 0;
  }

  .na-connect-card p {
    max-width: 260px;
  }

  .na-newsletter-left {
    gap: 16px;
    align-items: flex-start;
  }

  .na-newsletter-icon {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .na-newsletter-icon svg {
    width: 36px;
    height: 36px;
  }

  .na-newsletter-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .na-newsletter-form button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .na-contact-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .na-contact-hero__image {
    width: calc(100% - 28px);
    min-height: 245px;
  }

  .na-contact-quick-item {
    padding-left: 10px;
    padding-right: 10px;
  }

  .na-contact-panel h2,
  .na-newsletter-left h2 {
    font-size: 1.05rem;
  }

  .na-newsletter-bar {
    padding: 24px 18px;
  }
}








/* 3D Printing Services */

/* Main Section */
.nd3-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(90deg, #fff 0%, #fff 39%, rgba(255,255,255,0.94) 45%, rgba(255,255,255,0.35) 56%, rgba(255,255,255,0) 70%);
}

/* Right side image */
.nd3-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.nd3-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.32) 15%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 30%);
}

.nd3-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content container */
.nd3-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0px;
}

.nd3-hero-row {
  min-height: 402px;
}

.nd3-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Breadcrumb */
.nd3-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #758195;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.nd3-breadcrumb a,
.nd3-breadcrumb span {
  color: #758195;
  text-decoration: none;
  font-weight: 500;
}

.nd3-breadcrumb a:hover {
  color: var(--nd3-green);
}

/* Heading */
.nd3-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.nd3-title span,
.nd3-title strong {
  display: block;
  font-size: clamp(42px, 5.15vw, 61px);
  font-weight: 900;
}

.nd3-title span {
  color: var(--nd3-navy);
}

.nd3-title strong {
  color: var(--nd3-green);
}

/* Description */
.nd3-desc {
  max-width: 390px;
  margin: 0 0 24px;
  color: var(--nd3-navy);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.nd3-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.nd3-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.nd3-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--nd3-line);
}

.nd3-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--nd3-navy);
}

.nd3-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nd3-icon circle[fill],
.nd3-icon path[fill] {
  fill: none;
}

.nd3-feature p {
  margin: 0;
  color: var(--nd3-navy);
  font-size: 10.2px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.nd3-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.nd3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 24px 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nd3-btn-primary {
  color: #fff;
  border: 1px solid var(--nd3-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.nd3-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.nd3-btn-outline {
  color: var(--nd3-navy);
  border: 1px solid var(--nd3-navy);
  background: rgba(255,255,255,0.82);
}

.nd3-btn-outline:hover {
  color: #fff;
  background: var(--nd3-navy);
}

/* Large screens */
@media (min-width: 1200px) {
  .nd3-hero-section {
    min-height: 650px;
  }

  .nd3-container,
  .nd3-hero-row {
    min-height: 600px;
  }

  .nd3-left-col {
    padding-top: 38px;
  }

  .nd3-hero-bg {
    width: 50%;
  }
}

/* Laptop / tablet landscape */
@media (max-width: 1199.98px) {
  .nd3-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .nd3-hero-bg {
    width: 61%;
  }

  .nd3-title span,
  .nd3-title strong {
    font-size: 52px;
  }

  .nd3-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .nd3-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .nd3-hero-section {
    min-height: auto;
    background: #fff;
  }

  .nd3-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .nd3-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .nd3-container,
  .nd3-hero-row {
    min-height: auto;
  }

  .nd3-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .nd3-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .nd3-desc {
    max-width: 500px;
  }

  .nd3-feature-row {
    max-width: 560px;
  }

  .nd3-hero-section {
    display: flex;
    flex-direction: column;
  }
}

/* Small tablet */
@media (max-width: 767.98px) {
  .nd3-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .nd3-title span,
  .nd3-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .nd3-desc {
    font-size: 15px;
  }

  .nd3-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .nd3-feature:nth-child(2)::after {
    display: none;
  }

  .nd3-feature:not(:last-child)::after {
    height: 58px;
  }

  .nd3-buttons {
    gap: 12px;
  }

  .nd3-btn {
    min-width: 150px;
  }

  .nd3-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .nd3-left-col {
    padding-top: 24px;
  }

  .nd3-breadcrumb {
    gap: 6px;
    font-size: 10px;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .nd3-title {
    margin-bottom: 13px;
  }

  .nd3-title span,
  .nd3-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .nd3-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .nd3-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .nd3-feature {
    padding: 0 8px;
  }

  .nd3-feature p {
    font-size: 10px;
  }

  .nd3-icon {
    width: 33px;
    height: 33px;
  }

  .nd3-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nd3-btn {
    width: 100%;
    height: 40px;
  }

  .nd3-hero-bg {
    height: 265px;
  }

  .nd3-hero-img {
    object-position: center center;
  }
}

/* Extra small 320px devices */
@media (max-width: 360px) {
  .nd3-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .nd3-title span,
  .nd3-title strong {
    font-size: 34px;
  }

  .nd3-feature-row {
    gap: 15px 0;
  }

  .nd3-feature p {
    font-size: 9.4px;
  }

  .nd3-hero-bg {
    height: 235px;
  }
}






.g3dp-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 5%, rgba(0, 122, 61, 0.05), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(85, 60, 255, 0.04), transparent 22%),
    #fbfdfc;
}

.g3dp-section {
  padding: 18px 18px 22px;
}

.g3dp-container {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: 0px;
}

.g3dp-card {
  overflow: hidden;
  border: 1px solid var(--g3dp-border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 38px rgba(8, 28, 62, 0.055);
}

.g3dp-card-heading h2,
.g3dp-perfect-card h2,
.g3dp-process-title h2,
.g3dp-file-block h2,
.g3dp-cta h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 850;
  line-height: 1.1;
  color: var(--g3dp-navy);
}

.g3dp-card-heading h2,
.g3dp-perfect-card h2 {
  font-size: clamp(18px, 1.55vw, 23px);
}

.g3dp-card-heading p,
.g3dp-perfect-card p,
.g3dp-process-step p,
.g3dp-material-item p,
.g3dp-file-block p,
.g3dp-cta p {
  margin: 0;
  color: var(--g3dp-muted);
}

.g3dp-print-card { padding: 20px 22px 18px; }

.g3dp-card-heading p {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 620;
}

.g3dp-card-heading-sm p {
  max-width: 320px;
  font-size: 12px;
  line-height: 1.45;
}

.g3dp-spark {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 20px;
  margin-left: 5px;
  vertical-align: -1px;
}

.g3dp-spark::before,
.g3dp-spark::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 9px;
  border-radius: 999px;
  background: #ff8b1a;
  transform: rotate(38deg);
  top: 1px;
  left: 7px;
}

.g3dp-spark::after {
  height: 7px;
  background: #0eb763;
  transform: rotate(86deg);
  top: 10px;
  left: 14px;
}

.g3dp-print-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}

.g3dp-print-item {
  min-width: 0;
  text-align: center;
}

.g3dp-print-img {
  display: grid;
  place-items: center;
  height: 122px;
  overflow: hidden;
  border-radius: 9px;
  background: #eef0f2;
}

.g3dp-print-img img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.g3dp-print-item h3 {
  margin: 11px auto 0;
  max-width: 132px;
  min-height: 35px;
  color: var(--g3dp-navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}

.g3dp-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 19px;
  color: var(--g3dp-green);
  font-size: 13px;
  font-weight: 850;
}

.g3dp-gallery-link:hover { color: var(--g3dp-green-2); }

.g3dp-perfect-card {
  padding: 20px 18px 17px;
  border-color: #a9cbc0;
  background: linear-gradient(180deg, #f4fbf8 0%, #ffffff 100%);
}

.g3dp-perfect-card h2 { color: #0b6d3f; }

.g3dp-check-list {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.g3dp-check-list li {
  position: relative;
  padding-left: 25px;
  color: var(--g3dp-navy);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
}

.g3dp-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid #068241;
  border-radius: 50%;
  color: #068241;
  font-size: 10px;
  font-weight: 900;
}

.g3dp-help-box {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 15px 12px;
  border: 1px solid #bcd7cf;
  border-radius: 12px;
  background: #f8fffb;
}

.g3dp-help-icon,
.g3dp-note-icon,
.g3dp-file-icon,
.g3dp-headset {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.g3dp-help-icon {
  width: 44px;
  height: 44px;
  color: #0a7a45;
}

.g3dp-help-icon svg,
.g3dp-note-icon svg,
.g3dp-file-icon svg,
.g3dp-headset svg,
.g3dp-process-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g3dp-help-box strong {
  display: block;
  color: var(--g3dp-navy);
  font-size: 12px;
  line-height: 1.2;
}

.g3dp-help-box p {
  margin-top: 3px;
  color: var(--g3dp-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.g3dp-process-wrap {
  padding: 15px 0 12px;
}

.g3dp-process-title {
  text-align: center;
}

.g3dp-process-title h2 {
  font-size: clamp(17px, 1.35vw, 21px);
}

.g3dp-process-track {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 34px minmax(120px, 1fr) 34px minmax(120px, 1fr) 34px minmax(120px, 1fr) 34px minmax(120px, 1fr);
  align-items: start;
  gap: 6px;
  margin-top: 16px;
}

.g3dp-process-step {
  text-align: center;
}

.g3dp-process-icon {
  display: grid;
  place-items: center;
  width: 73px;
  height: 73px;
  margin: 0 auto 9px;
  padding: 16px;
  border: 1.7px solid #bac7dd;
  border-radius: 50%;
  background: #ffffff;
  color: var(--g3dp-navy);
  box-shadow: 0 10px 22px rgba(5, 23, 61, 0.045);
  font-size: 31px;
}

.g3dp-process-step h3 {
  margin: 0;
  text-transform: uppercase;
  color: var(--g3dp-navy);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.18;
}

.g3dp-process-step p {
  max-width: 158px;
  margin: 5px auto 0;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.26;
}

.g3dp-step-arrow {
  margin-top: 26px;
  color: #0d274e;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.g3dp-material-card,
.g3dp-colors-card,
.g3dp-price-card {
  padding: 18px 20px;
}

.g3dp-material-card h2,
.g3dp-colors-card h2,
.g3dp-price-card h2,
.g3dp-file-block h2 {
  font-size: clamp(15px, 1.1vw, 18px);
}

.g3dp-material-card h2,
.g3dp-colors-card h2,
.g3dp-price-card h2 { color: #0d6a3b; }

.g3dp-material-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.g3dp-material-item {
  min-width: 0;
  text-align: center;
}

.g3dp-material-item img {
  display: block;
  width: min(70px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto;
}

.g3dp-material-item h3 {
  margin: 6px 0 2px;
  color: var(--g3dp-navy);
  font-size: 11px;
  font-weight: 900;
}

.g3dp-material-item p {
  color: #23324e;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.18;
}

.g3dp-chat-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--g3dp-navy);
  font-size: 11px;
  font-weight: 750;
}

.g3dp-color-dots {
  display: grid;
  grid-template-columns: repeat(7, 31px);
  gap: 12px 15px;
  margin-top: 22px;
}

.g3dp-color-dots span {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(5, 23, 61, 0.12);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.42), 0 4px 9px rgba(5, 23, 61, 0.06);
}

.g3dp-color-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
}

.g3dp-note-icon {
  width: 40px;
  height: 40px;
  color: #117756;
}

.g3dp-color-note p {
  max-width: 230px;
  color: var(--g3dp-navy);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.g3dp-price-card {
  display: flex;
  flex-direction: column;
}

.g3dp-price-list {
  gap: 10px;
  margin-top: 12px;
}

.g3dp-price-list li {
  padding-left: 22px;
  font-size: 11px;
  font-weight: 720;
}

.g3dp-price-list li::before {
  width: auto;
  height: auto;
  border: 0;
  color: #0c8d48;
  font-size: 13px;
}

.g3dp-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  margin-top: auto;
  border: 1.5px solid #0e8048;
  border-radius: 6px;
  color: #0b6138;
  background: #fbfffd;
  font-size: 12px;
  font-weight: 900;
  transition: 0.2s ease;
}

.g3dp-quote-btn:hover {
  color: #ffffff;
  background: var(--g3dp-green);
}

.g3dp-file-panel {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 28px;
  margin-top: 16px;
  padding: 16px 34px;
  border-radius: 12px;
  background: linear-gradient(90deg, #edf0ff 0%, #f8f9ff 48%, #edf0ff 100%);
}

.g3dp-file-block {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.g3dp-file-divider {
  width: 1px;
  height: 54px;
  background: #a7acd5;
}

.g3dp-file-icon {
  width: 50px;
  height: 50px;
  color: var(--g3dp-purple);
}

.g3dp-file-block h2 {
  margin-bottom: 5px;
}

.g3dp-file-block p {
  font-size: 12px;
  font-weight: 740;
  line-height: 1.38;
}

.g3dp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  padding: 20px 50px 20px 32px;
  border-radius: 10px;
  background: linear-gradient(90deg, #06173d 0%, #08235a 52%, #06265e 100%);
  box-shadow: 0 16px 28px rgba(5, 23, 61, 0.16);
}

.g3dp-cta-text {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.g3dp-headset {
  width: 55px;
  height: 55px;
  color: #ffffff;
  opacity: 0.96;
}

.g3dp-cta h2 {
  color: #ffffff;
  font-size: clamp(18px, 1.5vw, 24px);
}

.g3dp-cta p {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 650;
}

.g3dp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}

.g3dp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 174px;
  min-height: 40px;
  padding: 10px 22px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  transition: 0.2s ease;
}

.g3dp-cta-btn-outline {
  border: 1.3px solid rgba(255, 255, 255, 0.72);
  background: transparent;
}

.g3dp-cta-btn-outline:hover {
  color: #06173d;
  background: #ffffff;
}

.g3dp-cta-btn-green {
  border: 1.3px solid #006838;
  background: #006838;
}

.g3dp-cta-btn-green:hover {
  color: #ffffff;
  background: #079d51;
}

@media (max-width: 1199.98px) {
  .g3dp-process-track {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 14px;
  }
  .g3dp-step-arrow { display: none; }
  .g3dp-color-dots { grid-template-columns: repeat(8, 31px); }
}

@media (max-width: 991.98px) {
  .g3dp-section { padding: 14px; }
  .g3dp-print-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g3dp-process-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g3dp-file-panel {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 18px 20px;
  }
  .g3dp-file-divider {
    width: 100%;
    height: 1px;
  }
  .g3dp-cta {
    padding: 22px;
    flex-direction: column;
    align-items: stretch;
  }
  .g3dp-cta-actions { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
  .g3dp-print-card,
  .g3dp-perfect-card,
  .g3dp-material-card,
  .g3dp-colors-card,
  .g3dp-price-card { padding: 17px; }
  .g3dp-print-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3dp-print-img { height: 145px; }
  .g3dp-process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3dp-material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g3dp-color-dots { grid-template-columns: repeat(6, 30px); }
  .g3dp-cta-text { align-items: flex-start; }
  .g3dp-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .g3dp-cta-btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .g3dp-section { padding: 10px; }
  .g3dp-print-grid { gap: 10px; }
  .g3dp-print-img { height: 118px; }
  .g3dp-print-item h3 { font-size: 11.5px; }
  .g3dp-process-title { text-align: left; }
  .g3dp-process-track {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .g3dp-process-step {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: center;
    column-gap: 14px;
    text-align: left;
  }
  .g3dp-process-icon {
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 13px;
  }
  .g3dp-process-step p {
    max-width: none;
    margin-left: 0;
  }
  .g3dp-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3dp-material-item img { width: 76px; }
  .g3dp-color-dots {
    grid-template-columns: repeat(5, 30px);
    gap: 11px;
  }
  .g3dp-file-block { align-items: flex-start; }
  .g3dp-file-icon { width: 42px; height: 42px; }
  .g3dp-headset { width: 45px; height: 45px; }
}

@media (max-width: 379.98px) {
  .g3dp-print-grid { grid-template-columns: 1fr; }
  .g3dp-print-img { height: 160px; }
  .g3dp-color-dots { grid-template-columns: repeat(4, 30px); }
}







/* Cricut Printing CSS */




/* Main Section */
.cpcc-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.35) 56%,
      rgba(255,255,255,0) 70%
    );
}

/* Right Side Image */
.cpcc-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.cpcc-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.32) 15%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 30%
    );
}

.cpcc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content Container */
.cpcc-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0;
}

.cpcc-hero-row {
  min-height: 402px;
}

.cpcc-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Heading */
.cpcc-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.cpcc-title span,
.cpcc-title strong {
  display: block;
  font-size: clamp(42px, 5.15vw, 61px);
  font-weight: 900;
}

.cpcc-title span {
  color: var(--cpcc-navy);
}

.cpcc-title strong {
  color: var(--cpcc-green);
}

/* Description */
.cpcc-desc {
  max-width: 390px;
  margin: 0 0 24px;
  color: var(--cpcc-navy);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.cpcc-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.cpcc-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.cpcc-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--cpcc-line);
}

.cpcc-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--cpcc-navy);
}

.cpcc-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cpcc-feature p {
  margin: 0;
  color: var(--cpcc-navy);
  font-size: 10.2px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.cpcc-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cpcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 24px 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cpcc-btn-primary {
  color: #fff;
  border: 1px solid var(--cpcc-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.cpcc-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.cpcc-btn-outline {
    color: var(--cpx-navy);
    border: 1px solid var(--cpx-navy);
    background: rgba(255, 255, 255, 0.82);
}

.cpcc-btn-outline:hover {
    color: #fff;
    background: var(--cpx-navy);
}


/* Large Screens */
@media (min-width: 1200px) {
  .cpcc-hero-section {
    min-height: 650px;
  }

  .cpcc-container,
  .cpcc-hero-row {
    min-height: 600px;
  }

  .cpcc-left-col {
    padding-top: 38px;
  }

  .cpcc-hero-bg {
    width: 50%;
  }
}

/* Laptop / Tablet Landscape */
@media (max-width: 1199.98px) {
  .cpcc-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .cpcc-hero-bg {
    width: 61%;
  }

  .cpcc-title span,
  .cpcc-title strong {
    font-size: 52px;
  }

  .cpcc-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .cpcc-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .cpcc-hero-section {
    min-height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .cpcc-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .cpcc-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .cpcc-container,
  .cpcc-hero-row {
    min-height: auto;
  }

  .cpcc-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .cpcc-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .cpcc-desc {
    max-width: 500px;
  }

  .cpcc-feature-row {
    max-width: 560px;
  }
}

/* Small Tablet */
@media (max-width: 767.98px) {
  .cpcc-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cpcc-title span,
  .cpcc-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .cpcc-desc {
    font-size: 15px;
  }

  .cpcc-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .cpcc-feature:nth-child(2)::after {
    display: none;
  }

  .cpcc-feature:not(:last-child)::after {
    height: 58px;
  }

  .cpcc-buttons {
    gap: 12px;
  }

  .cpcc-btn {
    min-width: 150px;
  }

  .cpcc-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .cpcc-left-col {
    padding-top: 24px;
  }

  .cpcc-title {
    margin-bottom: 13px;
  }

  .cpcc-title span,
  .cpcc-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .cpcc-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .cpcc-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .cpcc-feature {
    padding: 0 8px;
  }

  .cpcc-feature p {
    font-size: 10px;
  }

  .cpcc-icon {
    width: 33px;
    height: 33px;
  }

  .cpcc-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cpcc-btn {
    width: 100%;
    height: 40px;
  }

  .cpcc-hero-bg {
    height: 265px;
  }

  .cpcc-hero-img {
    object-position: center center;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .cpcc-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .cpcc-title span,
  .cpcc-title strong {
    font-size: 34px;
  }

  .cpcc-feature-row {
    gap: 15px 0;
  }

  .cpcc-feature p {
    font-size: 9.4px;
  }

  .cpcc-hero-bg {
    height: 235px;
  }
}



.cp-shell {
  max-width: 1440px;
      margin-top: 30px;
      padding: 0px;
}

.cp-card {
  background: #ffffff;
  border: 1px solid var(--cp-border);
  border-radius: 13px;
  box-shadow: var(--cp-shadow);
  padding: 16px;
}

.cp-card-head,
.cp-section-title,
.cp-popular-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-card h2,
.cp-section-title h2,
.cp-popular-head h2 {
  margin: 0;
  color: var(--cp-navy);
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.cp-spark {
  position: relative;
  width: 21px;
  height: 18px;
  display: inline-block;
}

.cp-spark::before,
.cp-spark::after {
  content: "";
  position: absolute;
  border-radius: 50px;
  transform: rotate(25deg);
}

.cp-spark::before {
  width: 11px;
  height: 3px;
  right: 3px;
  top: 2px;
  background: #ff7a31;
}

.cp-spark::after {
  width: 7px;
  height: 3px;
  right: 10px;
  bottom: 3px;
  background: #12a66a;
}

.cp-intro,
.cp-option-subtitle {
  margin: 9px 0 15px;
  color: #152b55;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.cp-product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.cp-product-item,
.cp-popular-item {
  text-align: center;
}

.cp-product-item img {
  width: 100%;
  aspect-ratio: 1 / 0.82;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #edf1f5;
}

.cp-product-item h3,
.cp-popular-item h3 {
  margin: 9px 0 0;
  color: var(--cp-navy);
  font-size: 13px;
  line-height: 1.18;
  font-weight: 900;
}

.cp-perfect-card {
  background: linear-gradient(180deg, #f6fff9 0%, #ffffff 100%);
  padding: 18px 16px;
}

.cp-perfect-card h2 {
  color: var(--cp-green);
  font-size: 16px;
  margin-bottom: 15px;
}

.cp-check-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.cp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--cp-navy);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.cp-check-list i {
  color: var(--cp-green);
  font-size: 13px;
  line-height: 1;
  margin-top: 0px;
}

.cp-help-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #d5e8df;
  background: rgba(255,255,255,0.75);
  border-radius: 10px;
}

.cp-help-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #c8dfd6;
  border-radius: 50%;
  color: var(--cp-green);
  background: #fff;
}

.cp-help-icon i {
  font-size: 22px;
}

.cp-help-mini strong {
  display: block;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}

.cp-help-mini p {
  margin: 4px 0 0;
  color: #2c405e;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
}

.cp-process-wrap {
  padding: 18px 0 14px;
}

.cp-section-title {
  justify-content: center;
  margin-bottom: 14px;
}

.cp-section-title h2 {
  font-size: 18px;
}

.cp-process-grid {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items: start;
  gap: 8px;
}

.cp-step {
  text-align: center;
}

.cp-step-icon {
  display: grid;
  place-items: center;
  width: 63px;
  height: 63px;
  margin: 0 auto 9px;
  color: var(--cp-navy);
  background: #ffffff;
  border: 1px solid #bcc8da;
  border-radius: 50%;
}

.cp-step-icon i {
  font-size: 31px;
}

.cp-arrow {
  color: var(--cp-navy);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  padding-top: 21px;
  opacity: .88;
}

.cp-step h3 {
  margin: 0 0 5px;
  color: var(--cp-navy);
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 900;
}

.cp-step p {
  max-width: 138px;
  margin: 0 auto;
  color: #34435c;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
}

.cp-options-row {
  margin-top: 2px;
}

.cp-option-card h2 {
  color: var(--cp-green);
  font-size: 16px;
}

.cp-material-grid,
.cp-addon-grid {
  display: grid;
  align-items: start;
  gap: 11px;
}

.cp-material-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-addon-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 20px;
}

.cp-material-item,
.cp-addon-item {
  min-width: 0;
  text-align: center;
}

.cp-material-art {
  position: relative;
  display: block;
  width: 55px;
  height: 43px;
  margin: 0 auto 8px;
  transform: rotate(-9deg);
}

.cp-material-art::before,
.cp-material-art::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 7px 14px rgba(6,26,70,.12);
}

.cp-material-art::before {
  inset: 8px 10px 6px 10px;
  background: linear-gradient(135deg, #27365f 0 40%, #ee644d 40% 64%, #ffd35d 64%);
}

.cp-material-art::after {
  inset: 0 18px 13px 0;
  background: rgba(255,255,255,.72);
  transform: rotate(18deg);
}

.cp-vinyl::before {
  background: linear-gradient(135deg, #182c62 0 38%, #ec5c43 38% 64%, #ffcc45 64%);
}

.cp-htv::before {
  background: linear-gradient(135deg, #0f6d62 0 34%, #f65c65 34% 63%, #f8d24c 63%);
}

.cp-cardstock::before {
  background: linear-gradient(135deg, #1a4f91 0 38%, #f0983a 38% 63%, #ffe26b 63%);
}

.cp-printable::before {
  background: linear-gradient(135deg, #e8efff 0 42%, #dbe4ea 42% 64%, #ffffff 64%);
}

.cp-paper::before {
  background: linear-gradient(135deg, #dcebe9 0 35%, #ffffff 35% 68%, #d6e2f6 68%);
}

.cp-material-item h3,
.cp-addon-item h3 {
  margin-top: 10px;
  color: var(--cp-navy);
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 900;
}

section.cp-card.cp-option-card.h-100 img.img-fluid {
    width: 50%;
}

.cp-addon-item i {
  display: block;
  color: var(--cp-navy);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 9px;
}

.cp-note-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #152b55;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
}

.cp-note-line i {
  color: var(--cp-green);
  font-size: 19px;
}

.cp-popular-wrap {
  padding-top: 19px;
}

.cp-popular-head {
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
}

.cp-popular-head h2 {
  font-size: 18px;
}

.cp-popular-head a {
  position: absolute;
  right: 0;
  color: var(--cp-green);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
}

.cp-popular-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.cp-popular-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #edf1f5;
  background: #f3f4f6;
}

.cp-popular-item h3 {
  font-size: 13px;
}

.cp-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 22px 120px 22px 120px;
  background: var(--cp-lavender);
  border-radius: 12px;
  margin-bottom: 12px;
}

.cp-cta-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cp-cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  color: #ffffff;
  background: var(--cp-purple);
  border-radius: 50%;
}

.cp-cta-icon i {
  font-size: 23px;
}

.cp-cta-left h2 {
  margin: 0 0 4px;
  color: var(--cp-navy);
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
}

.cp-cta-left p {
  margin: 0;
  color: #2c405e;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
}

.cp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 175px;
  min-height: 39px;
  padding: 9px 18px;
  color: #ffffff;
  background: var(--cp-navy);
  border: 1px solid var(--cp-navy);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cp-cta-btn:hover {
  color: #ffffff;
  background: #0a255d;
  box-shadow: 0 8px 16px rgba(6,26,70,.18);
  transform: translateY(-1px);
}

@media (max-width: 1199.98px) {
  .cp-product-grid,
  .cp-popular-grid {
    gap: 9px;
  }

  .cp-cta-bar {
    padding-left: 65px;
    padding-right: 65px;
  }
}

@media (max-width: 991.98px) {
  .cp-card {
    padding: 15px;
  }

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

  .cp-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .cp-arrow {
    display: none;
  }

  .cp-step p {
    max-width: 180px;
  }

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

  .cp-cta-bar {
    padding: 14px 22px;
  }
}

@media (max-width: 767.98px) {
  .cp-card h2,
  .cp-section-title h2,
  .cp-popular-head h2 {
    font-size: 16px;
  }

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

  .cp-product-item h3,
  .cp-popular-item h3,
  .cp-material-item h3,
  .cp-addon-item h3 {
    font-size: 11px;
  }

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

  .cp-step-icon {
    width: 58px;
    height: 58px;
  }

  .cp-step-icon i {
    font-size: 28px;
  }

  .cp-material-grid,
  .cp-addon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .cp-popular-head {
    justify-content: flex-start;
  }

  .cp-popular-head a {
    position: static;
    margin-left: auto;
    white-space: nowrap;
  }

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

  .cp-cta-bar,
  .cp-cta-left {
    align-items: flex-start;
  }

  .cp-cta-bar {
    flex-direction: column;
  }

  .cp-cta-btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .cp-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cp-card {
    border-radius: 12px;
    padding: 13px;
  }

  .cp-intro,
  .cp-option-subtitle {
    font-size: 11.5px;
  }

  /* .cp-process-grid,
  .cp-product-grid,
  .cp-popular-grid {
    grid-template-columns: 1fr;
  } */

  .cp-product-item img,
  .cp-popular-item img {
    max-height: 230px;
  }

  .cp-process-wrap {
    padding-top: 17px;
  }

  .cp-step {
    padding: 12px;
    border: 1px solid #e5ebf3;
    border-radius: 12px;
    background: #ffffff;
  }

  .cp-material-grid,
  .cp-addon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-note-line {
    align-items: flex-start;
  }

  .cp-popular-head {
    display: block;
    text-align: center;
  }

  .cp-popular-head a {
    display: inline-block;
    margin-top: 10px;
  }

  .cp-cta-left {
    gap: 11px;
  }

  .cp-cta-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}








/* Design Services */


:root {
  --cpx-navy: #07183D;
  --cpx-green: #007d42;
  --cpx-line: rgba(7, 24, 61, 0.22);
}

/* Main Section */
.cpx-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.35) 56%,
      rgba(255,255,255,0) 70%
    );
}

/* Right Side Image */
.cpx-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.cpx-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.32) 15%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 30%
    );
}

.cpx-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content Container */
.cpx-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0;
}

.cpx-hero-row {
  min-height: 402px;
}

.cpx-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Heading */
.cpx-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.cpx-title span,
.cpx-title strong {
  display: block;
  font-size: clamp(42px, 5.15vw, 61px);
  font-weight: 900;
}

.cpx-title span {
  color: var(--cpx-navy);
}

.cpx-title strong {
  color: var(--cpx-green);
}

/* Description */
.cpx-desc {
  max-width: 390px;
  margin: 0 0 24px;
  color: var(--cpx-navy);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.cpx-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.cpx-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.cpx-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--cpx-line);
}

.cpx-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--cpx-navy);
}

.cpx-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cpx-feature p {
  margin: 0;
  color: var(--cpx-navy);
  font-size: 10.2px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.cpx-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cpx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 24px 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cpx-btn-primary {
  color: #fff;
  border: 1px solid var(--cpx-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.cpx-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.cpx-btn-outline {
  color: var(--cpx-navy);
  border: 1px solid var(--cpx-navy);
  background: rgba(255,255,255,0.82);
}

.cpx-btn-outline:hover {
  color: #fff;
  background: var(--cpx-navy);
}

/* Large Screens */
@media (min-width: 1200px) {
  .cpx-hero-section {
    min-height: 650px;
  }

  .cpx-container,
  .cpx-hero-row {
    min-height: 600px;
  }

  .cpx-left-col {
    padding-top: 38px;
  }

  .cpx-hero-bg {
    width: 50%;
  }
}

/* Laptop / Tablet Landscape */
@media (max-width: 1199.98px) {
  .cpx-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .cpx-hero-bg {
    width: 61%;
  }

  .cpx-title span,
  .cpx-title strong {
    font-size: 52px;
  }

  .cpx-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .cpx-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .cpx-hero-section {
    min-height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .cpx-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .cpx-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .cpx-container,
  .cpx-hero-row {
    min-height: auto;
  }

  .cpx-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .cpx-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .cpx-desc {
    max-width: 500px;
  }

  .cpx-feature-row {
    max-width: 560px;
  }
}

/* Small Tablet */
@media (max-width: 767.98px) {
  .cpx-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cpx-title span,
  .cpx-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .cpx-desc {
    font-size: 15px;
  }

  .cpx-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .cpx-feature:nth-child(2)::after {
    display: none;
  }

  .cpx-feature:not(:last-child)::after {
    height: 58px;
  }

  .cpx-buttons {
    gap: 12px;
  }

  .cpx-btn {
    min-width: 150px;
  }

  .cpx-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .cpx-left-col {
    padding-top: 24px;
  }

  .cpx-title {
    margin-bottom: 13px;
  }

  .cpx-title span,
  .cpx-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .cpx-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .cpx-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .cpx-feature {
    padding: 0 8px;
  }

  .cpx-feature p {
    font-size: 10px;
  }

  .cpx-icon {
    width: 33px;
    height: 33px;
  }

  .cpx-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cpx-btn {
    width: 100%;
    height: 40px;
  }

  .cpx-hero-bg {
    height: 265px;
  }

  .cpx-hero-img {
    object-position: center center;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .cpx-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .cpx-title span,
  .cpx-title strong {
    font-size: 34px;
  }

  .cpx-feature-row {
    gap: 15px 0;
  }

  .cpx-feature p {
    font-size: 9.4px;
  }

  .cpx-hero-bg {
    height: 235px;
  }
}


.stemds-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0px;
}

.stemds-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  font-size: 12px;
  font-weight: 700;
  color: #9aa4b8;
}

.stemds-breadcrumbs a {
  color: #4c5874;
  text-decoration: none;
}

.stemds-breadcrumbs a:hover { color: var(--stemds-green); }

.stemds-hero-section {
  border-top: 1px solid #e9edf5;
  border-bottom: 1px solid #dde4ee;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 44%, #f7faf9 44%, #fff6ec 100%);
}

.stemds-hero-row {
  min-height: 446px;
}

.stemds-hero-copy-col {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 72%, rgba(255,255,255,.72) 100%);
}

.stemds-hero-copy {
  max-width: 520px;
  padding: 45px 10px 18px 0;
}

.stemds-main-title {
  position: relative;
  display: inline-block;
  margin: 0 0 12px;
  color: var(--stemds-navy);
  font-size: clamp(42px, 5vw, 64px);
  line-height: .93;
  letter-spacing: -2px;
  font-weight: 900;
}

.stemds-main-title span { color: var(--stemds-green); }

.stemds-sprinkle {
  position: absolute;
  right: -36px;
  top: 6px;
  width: 31px;
  height: 31px;
  background:
    linear-gradient(var(--stemds-orange), var(--stemds-orange)) center top/4px 12px no-repeat,
    linear-gradient(var(--stemds-green), var(--stemds-green)) left 63%/13px 4px no-repeat,
    linear-gradient(#ffb000, #ffb000) right 34%/12px 4px no-repeat;
  transform: rotate(18deg);
}

.stemds-sprinkle::before,
.stemds-sprinkle::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.stemds-sprinkle::before {
  width: 5px;
  height: 5px;
  background: #ffb000;
  left: 3px;
  top: 3px;
}

.stemds-sprinkle::after {
  width: 5px;
  height: 5px;
  background: #0ba85a;
  right: 3px;
  bottom: 5px;
}

.stemds-sprinkle-small {
  position: relative;
  display: inline-block;
  right: auto;
  top: auto;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  vertical-align: middle;
}

.stemds-main-subtitle {
  margin: 0 0 24px;
  color: var(--stemds-navy);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.25;
  font-weight: 900;
}

.stemds-main-text {
  max-width: 425px;
  margin: 0 0 34px;
  color: var(--stemds-navy);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
}

.stemds-feature-row {
  max-width: 470px;
  margin-bottom: 26px;
}

.stemds-feature-item {
  min-height: 92px;
  padding: 0 13px;
  text-align: center;
  border-right: 1px solid #e4e9f1;
}

.stemds-feature-item:first-child { padding-left: 0; }
.stemds-feature-item:last-child { border-right: 0; }

.stemds-feature-item strong {
  display: block;
  color: var(--stemds-navy);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 900;
}

.stemds-mini-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  color: var(--stemds-navy);
}

.stemds-mini-icon i {
  font-size: 31px;
}

.stemds-mini-icon i,
.stemds-card-icon i,
.stemds-help-icon i,
.stemds-process-icon i,
.stemds-why-icon i,
.stemds-final-icon i {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  font-style: normal;
}

.stemds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.stemds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.stemds-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(6, 22, 77, .12);
}

.stemds-btn-fill {
  min-width: 242px;
  color: #fff;
  background: linear-gradient(135deg, var(--stemds-green), #0b8b4b);
  border: 1px solid var(--stemds-green);
}

.stemds-btn-outline {
  min-width: 205px;
  color: var(--stemds-navy);
  background: #fff;
  border: 1px solid var(--stemds-navy);
}

.stemds-hero-image-col {
  position: relative;
  min-height: 446px;
  overflow: hidden;
}

.stemds-hero-img {
  width: 100%;
  height: 100%;
  min-height: 446px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.stemds-design-section,
.stemds-process-section,
.stemds-examples-section,
.stemds-why-section,
.stemds-final-cta-section {
  background: #fff;
}

.stemds-design-section { padding: 20px 0 9px; }
.stemds-process-section { padding: 15px 0 16px; }
.stemds-examples-section { padding: 8px 0 12px; }
.stemds-why-section { padding: 4px 0 22px; }
.stemds-final-cta-section { padding: 0 0 10px; }

.stemds-section-head { margin-bottom: 20px; }

.stemds-section-head h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0 6px;
  color: var(--stemds-navy);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.4px;
}

.stemds-section-head p {
  margin: 0;
  color: var(--stemds-navy);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.stemds-design-grid {
  margin-inline: auto;
}

.stemds-design-card {
  height: 100%;
  min-height: 214px;
  padding: 26px 16px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 14px;
  box-shadow: 0 9px 24px rgba(7, 21, 66, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.stemds-design-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(7, 21, 66, .12);
}

.stemds-card-icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 5px;
    color: currentColor;
}

.stemds-card-icon i {
  font-size: 40px;
}

.stemds-card-icon::before { display: none; }

.stemds-card-purple { color: var(--stemds-purple); }
.stemds-card-pink { color: var(--stemds-pink); }
.stemds-card-green { color: var(--stemds-green); }
.stemds-card-blue { color: var(--stemds-blue); }
.stemds-card-orange { color: var(--stemds-orange); }
.stemds-card-teal { color: var(--stemds-teal); }

.stemds-design-card h3 {
  margin: 0 0 13px;
  color: var(--stemds-navy);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 900;
}

.stemds-design-card p {
  margin: 0 auto;
  max-width: 165px;
  color: var(--stemds-navy);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.stemds-help-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px auto 0;
  padding: 14px 86px 14px 107px;
  border-radius: 11px;
  background: linear-gradient(90deg, #f0efff 0%, #f8f6ff 42%, #f1efff 100%);
}

.stemds-help-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #7d74d5;
  border-radius: 0;
  background: transparent;
}

.stemds-help-icon i {
  font-size: 54px;
}


.stemds-help-copy { flex: 1 1 auto; }

.stemds-help-copy h3 {
  margin: 0 0 4px;
  color: var(--stemds-navy);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 900;
}

.stemds-help-copy p {
  margin: 0;
  color: var(--stemds-navy);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.stemds-btn-help {
  min-width: 214px;
  color: var(--stemds-navy);
  border: 1px solid var(--stemds-navy);
  background: #fff;
}

.stemds-process-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 22px;
  margin: 2px auto 0;
}

.stemds-process-step { text-align: center; }

.stemds-process-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  padding: 0;
  color: var(--stemds-navy);
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.stemds-process-icon i {
    font-size: 31px;
    display: grid;
    place-items: center;
    width: 63px;
    height: 63px;
    margin: 0 auto 9px;
    color: var(--cp-navy);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 3px 3px 8px #0000004a;
}


.stemds-process-step h3 {
  margin: 0 0 8px;
  color: var(--stemds-navy);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.stemds-process-step p {
  margin: 0 auto;
  max-width: 170px;
  color: var(--stemds-navy);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}

.stemds-process-arrow {
  display: block;
  margin-top: 25px;
  min-width: 57px;
  color: #9fa8bc;
  font-size: 42px;
  line-height: 1;
  font-weight: 300;
}

.stemds-examples-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-bottom: 12px;
}

.stemds-gallery-link {
  justify-self: end;
  color: var(--stemds-green);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.stemds-gallery-link span {
  margin-left: 9px;
  font-size: 18px;
  vertical-align: -1px;
}

.stemds-example-card {
  margin: 0;
  text-align: center;
}

.stemds-example-card img {
  width: 100%;
  aspect-ratio: 1.08/1;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(7, 21, 66, .08);
}

.stemds-example-card figcaption {
  margin-top: 11px;
  color: var(--stemds-navy);
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
}

.stemds-why-panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-inline: auto;
  padding: 22px 0;
  background: #fff;
  border: 1px solid #e5e9f1;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(7, 21, 66, .06);
}

.stemds-why-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 82px;
  padding: 0 28px;
  border-right: 1px solid #e5e9f1;
}

.stemds-why-item:last-child { border-right: 0; }

.stemds-why-icon {
  width: 44px;
  height: 44px;
  color: currentColor;
}

.stemds-why-icon i {
  font-size: 35px;
}


.stemds-why-green { color: #0b9c58; }
.stemds-why-purple { color: #5036ff; }
.stemds-why-orange { color: #ff681c; }
.stemds-why-blue { color: #3868ff; }
.stemds-why-violet { color: #8b2bff; }

.stemds-why-item h3 {
  margin: 0 0 6px;
  color: var(--stemds-navy);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}

.stemds-why-item p {
  margin: 0;
  color: var(--stemds-navy);
  font-size: 12px;
  line-height: 1.42;
  font-weight: 700;
}

.stemds-final-cta {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 86px;
  padding: 18px 38px 18px 28px;
  color: #fff;
  border-radius: 7px;
  background: linear-gradient(135deg, #001547 0%, #06296f 50%, #00134a 100%);
}

.stemds-final-icon {
  width: 52px;
  height: 52px;
  color: #fff;
}

.stemds-final-icon i {
  font-size: 42px;
}

.stemds-final-copy h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  font-weight: 900;
}

.stemds-final-copy p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.stemds-final-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.stemds-btn-light {
  min-width: 180px;
  color: var(--stemds-navy);
  background: #fff;
  border: 1px solid #fff;
}

.stemds-btn-dark-outline {
  min-width: 180px;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
}

.stemds-btn-dark-outline:hover { color: var(--stemds-navy); background: #fff; }

@media (max-width: 1199.98px) {
  .stemds-container { padding-inline: 34px; }
  .stemds-hero-copy { padding-top: 38px; }
  .stemds-main-title { font-size: 52px; }
  .stemds-main-text { font-size: 15px; }
  .stemds-help-strip { padding-inline: 42px; }
  .stemds-process-line { gap: 12px; }
  .stemds-process-arrow { min-width: 32px; }
  .stemds-why-panel { grid-template-columns: repeat(2, 1fr); }
  .stemds-why-item { border-right: 0; border-bottom: 1px solid #e5e9f1; padding: 18px 24px; }
  .stemds-why-item:nth-last-child(-n+1) { border-bottom: 0; }
}

@media (max-width: 991.98px) {
  .stemds-hero-section { background: #fff; }
  .stemds-hero-row { min-height: auto; }
  .stemds-hero-copy-col { background: #fff; }
  .stemds-hero-copy { max-width: none; padding: 28px 0 30px; }
  .stemds-hero-image-col { min-height: 360px; border-radius: 14px; }
  .stemds-hero-img { min-height: 360px; border-radius: 14px; }
  .stemds-feature-row { max-width: 100%; }
  .stemds-process-line {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .stemds-process-arrow { display: none; }
  .stemds-process-step p { max-width: 155px; }
  .stemds-examples-head {
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: center;
  }
  .stemds-examples-head > div:first-child { display: none; }
  .stemds-gallery-link { justify-self: center; }
  .stemds-final-cta {
    grid-template-columns: 58px 1fr;
    padding: 24px;
  }
  .stemds-final-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .stemds-container { padding-inline: 20px; }
  .stemds-breadcrumbs { min-height: 44px; font-size: 11px; }
  .stemds-main-title { letter-spacing: -1px; }
  .stemds-sprinkle { right: -28px; }
  .stemds-feature-item { border-right: 0; border-bottom: 1px solid #e4e9f1; padding-block: 12px; }
  .stemds-feature-item:nth-last-child(-n+2) { border-bottom: 0; }
  .stemds-hero-actions { flex-direction: column; gap: 12px; }
  .stemds-btn,
  .stemds-btn-fill,
  .stemds-btn-outline,
  .stemds-btn-help,
  .stemds-btn-light,
  .stemds-btn-dark-outline { width: 100%; min-width: 0; }
  .stemds-design-section { padding-top: 26px; }
  .stemds-help-strip {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px;
    gap: 12px;
  }
  .stemds-process-line { grid-template-columns: 1fr; }
  .stemds-process-step {
    max-width: 340px;
    margin-inline: auto;
    padding-bottom: 8px;
  }
  .stemds-process-step p { max-width: 240px; }
  .stemds-why-panel { grid-template-columns: 1fr; padding: 0; }
  .stemds-why-item { border-bottom: 1px solid #e5e9f1; }
  .stemds-why-item:last-child { border-bottom: 0; }
  .stemds-final-cta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .stemds-final-actions { width: 100%; flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  .stemds-container { padding-inline: 15px; }
  .stemds-main-title { font-size: 39px; }
  .stemds-main-subtitle { font-size: 17px; }
  .stemds-main-text { font-size: 14px; }
  .stemds-hero-image-col,
  .stemds-hero-img { min-height: 285px; }
  .stemds-design-card { min-height: auto; padding: 24px 14px; }
  .stemds-card-icon { width: 64px; height: 64px; }
  .stemds-card-icon i { font-size: 46px; }
  .stemds-section-head h2 { font-size: 18px; }
}











/* Membership Section */

:root {
  --crxv-navy: #07183D;
  --crxv-green: #007d42;
  --crxv-line: rgba(7, 24, 61, 0.22);
}

/* Main Section */
.crxv-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.35) 56%,
      rgba(255,255,255,0) 70%
    );
}

/* Right Side Image */
.crxv-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.crxv-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.32) 15%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 30%
    );
}

.crxv-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content Container */
.crxv-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0;
}

.crxv-hero-row {
  min-height: 402px;
}

.crxv-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Heading */
.crxv-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.crxv-title span,
.crxv-title strong {
  display: block;
  font-size: clamp(42px, 5.15vw, 61px);
  font-weight: 900;
}

.crxv-title span {
  color: var(--crxv-navy);
}

.crxv-title strong {
  color: var(--crxv-green);
}

/* Description */
.crxv-desc {
  max-width: 390px;
  margin: 0 0 24px;
  color: var(--crxv-navy);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.crxv-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.crxv-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.crxv-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--crxv-line);
}

.crxv-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--crxv-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crxv-icon i {
  font-size: 38px;
  line-height: 1;
  color: var(--crxv-navy);
  display: block;
}

.crxv-feature p {
  margin: 0;
  color: var(--crxv-navy);
  font-size: 10.2px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.crxv-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.crxv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 0 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.crxv-btn-primary {
  color: #fff;
  border: 1px solid var(--crxv-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.crxv-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.crxv-btn-outline {
  color: var(--crxv-navy);
  border: 1px solid var(--crxv-navy);
  background: rgba(255,255,255,0.82);
}

.crxv-btn-outline:hover {
  color: #fff;
  background: var(--crxv-navy);
}

/* Large Screens */
@media (min-width: 1200px) {
  .crxv-hero-section {
    min-height: 650px;
  }

  .crxv-container,
  .crxv-hero-row {
    min-height: 600px;
  }

  .crxv-left-col {
    padding-top: 38px;
  }

  .crxv-hero-bg {
    width: 50%;
  }
}

/* Laptop / Tablet Landscape */
@media (max-width: 1199.98px) {
  .crxv-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .crxv-hero-bg {
    width: 61%;
  }

  .crxv-title span,
  .crxv-title strong {
    font-size: 52px;
  }

  .crxv-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .crxv-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .crxv-hero-section {
    min-height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .crxv-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .crxv-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .crxv-container,
  .crxv-hero-row {
    min-height: auto;
  }

  .crxv-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .crxv-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .crxv-desc {
    max-width: 500px;
  }

  .crxv-feature-row {
    max-width: 560px;
  }
}

/* Small Tablet */
@media (max-width: 767.98px) {
  .crxv-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .crxv-title span,
  .crxv-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .crxv-desc {
    font-size: 15px;
  }

  .crxv-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .crxv-feature:nth-child(2)::after {
    display: none;
  }

  .crxv-feature:not(:last-child)::after {
    height: 58px;
  }

  .crxv-buttons {
    gap: 12px;
  }

  .crxv-btn {
    min-width: 150px;
  }

  .crxv-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .crxv-left-col {
    padding-top: 24px;
  }

  .crxv-title {
    margin-bottom: 13px;
  }

  .crxv-title span,
  .crxv-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .crxv-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .crxv-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .crxv-feature {
    padding: 0 8px;
  }

  .crxv-feature p {
    font-size: 10px;
  }

  .crxv-icon {
    width: 33px;
    height: 33px;
  }

  .crxv-icon i {
    font-size: 29px;
  }

  .crxv-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .crxv-btn {
    width: 100%;
    height: 40px;
  }

  .crxv-hero-bg {
    height: 265px;
  }

  .crxv-hero-img {
    object-position: center center;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .crxv-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .crxv-title span,
  .crxv-title strong {
    font-size: 34px;
  }

  .crxv-feature-row {
    gap: 15px 0;
  }

  .crxv-feature p {
    font-size: 9.4px;
  }

  .crxv-icon i {
    font-size: 27px;
  }

  .crxv-hero-bg {
    height: 235px;
  }
}


.stemm-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0px;
}

/* Hero */
.stemm-hero-section {
  background: linear-gradient(90deg, #fff 0%, #fff 48%, #f7faf9 48%, #ffffff 100%);
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #dfe6ef;
}

.stemm-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  color: #8d96aa;
  font-size: 13px;
  font-weight: 700;
}

.stemm-breadcrumbs a {
  color: #768097;
  text-decoration: none;
}

.stemm-breadcrumbs a:hover {
  color: var(--stemm-green);
}

.stemm-hero-row {
  min-height: 344px;
}

.stemm-hero-content-col {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.98) 70%, rgba(255,255,255,.74) 100%);
}

.stemm-hero-content {
  max-width: 520px;
  padding: 18px 10px 22px 0;
}

.stemm-hero-content h1 {
  margin: 0 0 8px;
  color: var(--stemm-navy);
  font-size: clamp(46px, 5vw, 64px);
  line-height: .94;
  letter-spacing: -1.8px;
  font-weight: 900;
}

.stemm-hero-content h2 {
  margin: 0 0 18px;
  color: var(--stemm-green);
  font-size: clamp(30px, 3.4vw, 43px);
  line-height: 1;
  letter-spacing: -.9px;
  font-weight: 900;
}

.stemm-hero-content p {
  max-width: 500px;
  margin: 0 0 28px;
  color: var(--stemm-navy);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
}

.stemm-hero-perks {
  max-width: 560px;
}

.stemm-hero-perk {
  min-height: 86px;
  padding: 0 15px;
  text-align: center;
  border-right: 1px solid #bfc7d5;
}

.stemm-hero-perk:first-child {
  padding-left: 0;
}

.stemm-hero-perk:last-child {
  border-right: 0;
}

.stemm-hero-perk i {
  display: block;
  margin-bottom: 10px;
  color: var(--stemm-navy);
  font-size: 33px;
  line-height: 1;
}

.stemm-hero-perk strong {
  display: block;
  color: var(--stemm-navy);
  font-size: 13px;
  line-height: 1.18;
  font-weight: 900;
}

.stemm-hero-image-col {
  position: relative;
  min-height: 344px;
  overflow: hidden;
}

.stemm-hero-image-col::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.88) 24%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.stemm-hero-image {
  width: 100%;
  height: 100%;
  min-height: 344px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Shared */
.stemm-section-heading {
  margin-bottom: 20px;
}

.stemm-section-heading h2,
.stemm-title-lines h2 {
  margin: 0;
  color: var(--stemm-navy);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.1;
  letter-spacing: -.4px;
  font-weight: 900;
}

/* Plans */
.stemm-plans-section {
  padding: 20px 0 11px;
  background: #ffffff;
}

.stemm-plan-row {
  margin-inline: auto;
}

.stemm-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 474px;
  height: 100%;
  padding: 28px 36px 26px;
  color: var(--stemm-navy);
  text-align: center;
  border: 1px solid var(--stemm-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(7, 21, 66, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.stemm-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(7, 21, 66, .11);
}

.stemm-plan-popular {
  border-color: var(--stemm-purple);
  padding-top: 34px;
}

.stemm-popular-ribbon {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 178px;
  padding: 7px 16px;
  color: #ffffff;
  background: var(--stemm-navy);
  border-radius: 0 0 18px 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .4px;
  font-weight: 900;
}

.stemm-plan-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  color: #ffffff;
  border-radius: 999px;
}

.stemm-plan-green .stemm-plan-icon {
  background: var(--stemm-green);
}

.stemm-plan-blue .stemm-plan-icon {
  background: var(--stemm-blue);
}

.stemm-plan-purple .stemm-plan-icon {
  background: var(--stemm-purple);
}

.stemm-plan-icon i {
  font-size: 30px;
  line-height: 1;
}

.stemm-plan-card h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: .3px;
  font-weight: 900;
}

.stemm-plan-green h3 {
  color: var(--stemm-green);
}

.stemm-plan-blue h3 {
  color: var(--stemm-blue);
}

.stemm-plan-purple h3 {
  color: var(--stemm-purple);
}

.stemm-plan-intro {
  min-height: 48px;
  margin: 0 auto 16px;
  max-width: 230px;
  color: var(--stemm-navy);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.stemm-price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-bottom: 1px;
  color: var(--stemm-navy);
}

.stemm-price strong {
  font-size: 37px;
  line-height: .9;
  letter-spacing: -.8px;
  font-weight: 900;
}

.stemm-price span {
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
}

.stemm-billing {
  margin: 0 0 18px;
  color: var(--stemm-navy);
  font-size: 13px;
  font-weight: 700;
}

.stemm-plan-list {
  flex: 1 1 auto;
  display: grid;
  gap: 9px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.stemm-plan-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--stemm-navy);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

.stemm-plan-list i {
  color: var(--stemm-green);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.stemm-plan-purple .stemm-plan-list i {
  color: var(--stemm-purple);
}

.stemm-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  padding: 11px 20px;
  color: var(--stemm-green);
  border: 1.5px solid var(--stemm-green);
  border-radius: 4px;
  background: #ffffff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.stemm-plan-blue .stemm-plan-btn {
  color: var(--stemm-navy);
  border-color: var(--stemm-navy);
}

.stemm-plan-btn-fill {
  color: #ffffff;
  border-color: var(--stemm-purple);
  background: linear-gradient(135deg, #40129d 0%, #6d23c8 100%);
}

.stemm-plan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(7, 21, 66, .13);
}

.stemm-plan-note {
  margin: 15px 0 0;
  color: var(--stemm-navy);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

/* Included */
.stemm-included-section {
  padding: 9px 0 16px;
  background: #ffffff;
}

.stemm-title-lines {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.stemm-title-lines span {
  height: 1px;
  background: #dfe5ef;
}

.stemm-included-row {
  margin-inline: auto;
}

.stemm-included-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: start;
}

.stemm-included-item i {
  color: var(--stemm-navy);
  font-size: 42px;
  line-height: 1;
}

.stemm-included-item h3 {
  margin: 0 0 6px;
  color: var(--stemm-navy);
  font-size: 12px;
  line-height: 1.18;
  font-weight: 900;
}

.stemm-included-item p {
  margin: 0;
  color: var(--stemm-navy);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

/* Compare */
.stemm-compare-section {
  padding: 9px 0 20px;
  background: #ffffff;
}

.stemm-table-wrap {
  margin-inline: auto;
  border: 1px solid var(--stemm-border);
  border-radius: 9px;
  overflow: hidden;
  background: #ffffff;
}

.stemm-compare-table {
  min-width: 820px;
  border-color: var(--stemm-border);
}

.stemm-compare-table th,
.stemm-compare-table td {
  padding: 11px 26px;
  color: var(--stemm-navy);
  vertical-align: middle;
  
  font-size: 13px;
  line-height: 1.22;
  font-weight: 800;
  border: 1px solid var(--stemm-border);
}

.stemm-compare-table thead th {
  background: #f8fbff;
  font-size: 13px;
  font-weight: 900;
}

.stemm-compare-table th:not(:first-child),
.stemm-compare-table td:not(:first-child) {
  text-align: center;
}

.stemm-compare-table thead th:nth-child(2),
.stemm-compare-table thead th:nth-child(5) {
  background: #f2faf6;
}

.stemm-compare-table thead th:nth-child(3) {
  background: #f3f8ff;
}

.stemm-compare-table thead th:nth-child(4) {
  background: #fbf8ff;
}

.stemm-th-green,
.stemm-green-text {
  color: var(--stemm-green) !important;
}

.stemm-th-blue,
.stemm-blue-text {
  color: var(--stemm-blue) !important;
}

.stemm-th-purple,
.stemm-purple-text {
  color: var(--stemm-purple) !important;
}

.stemm-compare-table i {
  font-size: 18px;
  font-weight: 900;
}

/* CTA */
.stemm-cta-section {
  padding: 0 0 18px;
  background: #ffffff;
}

.stemm-cta-panel {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: center;
  max-width: 1300px;
  min-height: 112px;
  margin: 0 auto;
  padding: 22px 56px 22px 49px;
  color: #ffffff;
  border-radius: 10px;
  background: linear-gradient(135deg, #00144a 0%, #06276d 48%, #00134a 100%);
}

.stemm-cta-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
}

.stemm-cta-icon i {
  font-size: 45px;
  line-height: 1;
}

.stemm-cta-copy h2 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.3px;
  font-weight: 900;
}

.stemm-cta-copy p {
  max-width: 570px;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.38;
  font-weight: 700;
}

.stemm-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stemm-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 166px;
  min-height: 46px;
  padding: 13px 24px;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.stemm-cta-btn-fill {
  background: linear-gradient(135deg, var(--stemm-green) 0%, #0a8d51 100%);
  border-color: #ffffff;
}

.stemm-cta-btn-outline {
  background: transparent;
}

.stemm-cta-btn:hover {
  transform: translateY(-2px);
  color: var(--stemm-navy);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .stemm-container {
    padding-inline: 34px;
  }

  .stemm-hero-content h1 {
    font-size: 53px;
  }

  .stemm-hero-content h2 {
    font-size: 35px;
  }

  .stemm-hero-content p {
    font-size: 17px;
  }

  .stemm-plan-card {
    padding-inline: 30px;
  }

  .stemm-included-row {
    max-width: 980px;
  }

  .stemm-cta-panel {
    grid-template-columns: 82px 1fr;
  }

  .stemm-cta-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 991.98px) {
  .stemm-hero-section {
    background: #ffffff;
  }

  .stemm-hero-row {
    min-height: auto;
  }

  .stemm-hero-content-col {
    background: #ffffff;
  }

  .stemm-hero-content {
    max-width: none;
    padding: 18px 0 28px;
  }

  .stemm-hero-image-col {
    min-height: 330px;
    border-radius: 14px;
  }

  .stemm-hero-image-col::before {
    display: none;
  }

  .stemm-hero-image {
    min-height: 330px;
    border-radius: 14px;
  }

  .stemm-plan-card {
    min-height: 448px;
  }

  .stemm-title-lines {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }

  .stemm-title-lines span {
    display: none;
  }

  .stemm-included-item {
    max-width: 380px;
    margin-inline: auto;
  }

  .stemm-cta-panel {
    padding: 26px 28px;
  }
}

@media (max-width: 767.98px) {
  .stemm-container {
    padding-inline: 20px;
  }

  .stemm-breadcrumbs {
    min-height: 44px;
    font-size: 12px;
  }

  .stemm-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .stemm-hero-content h2 {
    font-size: 28px;
  }

  .stemm-hero-content p {
    font-size: 15px;
  }

  .stemm-hero-perk {
    min-height: 96px;
    padding: 14px 10px;
    border-right: 0;
    border-bottom: 1px solid #dfe5ef;
  }

  .stemm-hero-perk:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .stemm-plans-section {
    padding-top: 24px;
  }

  .stemm-plan-card {
    min-height: auto;
    padding: 28px 24px 24px;
  }

  .stemm-plan-list {
    max-width: 330px;
    margin-inline: auto;
  }

  .stemm-included-section {
    padding-top: 18px;
  }

  .stemm-included-item {
    grid-template-columns: 46px 1fr;
  }

  .stemm-included-item i {
    font-size: 36px;
  }

  .stemm-table-wrap {
    border-radius: 7px;
  }

  .stemm-compare-table th,
  .stemm-compare-table td {
    padding: 10px 16px;
    font-size: 12px;
  }

  .stemm-cta-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 28px 22px;
  }

  .stemm-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .stemm-cta-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stemm-container {
    padding-inline: 15px;
  }

  .stemm-hero-content h1 {
    font-size: 37px;
  }

  .stemm-hero-content h2 {
    font-size: 24px;
  }

  .stemm-hero-image-col,
  .stemm-hero-image {
    min-height: 245px;
  }

  .stemm-section-heading h2,
  .stemm-title-lines h2 {
    font-size: 18px;
  }

  .stemm-plan-card h3 {
    font-size: 21px;
  }

  .stemm-price strong {
    font-size: 34px;
  }
}











/* Workshops page  */

:root {
  --stmmbr-navy: #07183D;
  --stmmbr-green: #007d42;
  --stmmbr-line: rgba(7, 24, 61, 0.22);
}

/* Main Section */
.stmmbr-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.35) 56%,
      rgba(255,255,255,0) 70%
    );
}

/* Right Side Image */
.stmmbr-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.stmmbr-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.32) 15%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 30%
    );
}

.stmmbr-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content Container */
.stmmbr-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0;
}

.stmmbr-hero-row {
  min-height: 402px;
}

.stmmbr-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Heading */
.stmmbr-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.stmmbr-title span,
.stmmbr-title strong {
  display: block;
  font-size: clamp(42px, 5.15vw, 81px);
  font-weight: 900;
}

.stmmbr-title span {
  color: var(--stmmbr-navy);
}

.stmmbr-title strong {
  color: var(--stmmbr-green);
}

/* Description */
.stmmbr-desc {
  max-width: 430px;
  margin: 0 0 24px;
  color: var(--stmmbr-navy);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.stmmbr-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.stmmbr-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.stmmbr-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--stmmbr-line);
}

.stmmbr-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--stmmbr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stmmbr-icon i {
  font-size: 38px;
  line-height: 1;
  color: var(--stmmbr-navy);
  display: block;
}

.stmmbr-feature p {
  margin: 0;
  color: var(--stmmbr-navy);
  font-size: 13px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.stmmbr-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.stmmbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 0 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.stmmbr-btn-primary {
  color: #fff;
  border: 1px solid var(--stmmbr-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.stmmbr-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.stmmbr-btn-outline {
  color: var(--stmmbr-navy);
  border: 1px solid var(--stmmbr-navy);
  background: rgba(255,255,255,0.82);
}

.stmmbr-btn-outline:hover {
  color: #fff;
  background: var(--stmmbr-navy);
}

/* Large Screens */
@media (min-width: 1200px) {
  .stmmbr-hero-section {
    min-height: 650px;
  }

  .stmmbr-container,
  .stmmbr-hero-row {
    min-height: 600px;
  }

  .stmmbr-left-col {
    padding-top: 38px;
  }

  .stmmbr-hero-bg {
    width: 50%;
  }
}

/* Laptop / Tablet Landscape */
@media (max-width: 1199.98px) {
  .stmmbr-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .stmmbr-hero-bg {
    width: 61%;
  }

  .stmmbr-title span,
  .stmmbr-title strong {
    font-size: 52px;
  }

  .stmmbr-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .stmmbr-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .stmmbr-hero-section {
    min-height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .stmmbr-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .stmmbr-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .stmmbr-container,
  .stmmbr-hero-row {
    min-height: auto;
  }

  .stmmbr-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .stmmbr-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .stmmbr-desc {
    max-width: 500px;
  }

  .stmmbr-feature-row {
    max-width: 560px;
  }
}

/* Small Tablet */
@media (max-width: 767.98px) {
  .stmmbr-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .stmmbr-title span,
  .stmmbr-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .stmmbr-desc {
    font-size: 15px;
  }

  .stmmbr-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .stmmbr-feature:nth-child(2)::after {
    display: none;
  }

  .stmmbr-feature:not(:last-child)::after {
    height: 58px;
  }

  .stmmbr-buttons {
    gap: 12px;
  }

  .stmmbr-btn {
    min-width: 150px;
  }

  .stmmbr-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .stmmbr-left-col {
    padding-top: 24px;
  }

  .stmmbr-title {
    margin-bottom: 13px;
  }

  .stmmbr-title span,
  .stmmbr-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .stmmbr-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .stmmbr-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .stmmbr-feature {
    padding: 0 8px;
  }

  .stmmbr-feature p {
    font-size: 10px;
  }

  .stmmbr-icon {
    width: 33px;
    height: 33px;
  }

  .stmmbr-icon i {
    font-size: 29px;
  }

  .stmmbr-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .stmmbr-btn {
    width: 100%;
    height: 40px;
  }

  .stmmbr-hero-bg {
    height: 265px;
  }

  .stmmbr-hero-img {
    object-position: center center;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .stmmbr-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .stmmbr-title span,
  .stmmbr-title strong {
    font-size: 34px;
  }

  .stmmbr-feature-row {
    gap: 15px 0;
  }

  .stmmbr-feature p {
    font-size: 9.4px;
  }

  .stmmbr-icon i {
    font-size: 27px;
  }

  .stmmbr-hero-bg {
    height: 235px;
  }
}



.stemws-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0px;
}

.stemws-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  color: #9099ad;
  font-size: 12px;
  font-weight: 700;
}
.stemws-breadcrumbs a { color: #77819a; text-decoration: none; }
.stemws-breadcrumbs a:hover { color: var(--stemws-green); }

.stemws-hero-section {
  background: linear-gradient(90deg, #fff 0%, #fff 47%, #f8faf9 47%, #fff 100%);
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #dfe6ef;
}
.stemws-hero-row { min-height: 344px; }
.stemws-hero-copy-col {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 72%, rgba(255,255,255,.72) 100%);
}
.stemws-hero-copy {
  max-width: 510px;
  padding: 28px 10px 18px 0;
}
.stemws-kicker {
  margin: 0 0 10px;
  color: var(--stemws-green);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}
.stemws-hero-copy h1 {
  margin: 0 0 14px;
  color: var(--stemws-navy);
  font-size: clamp(48px, 5.3vw, 74px);
  line-height: .92;
  letter-spacing: -2px;
  font-weight: 900;
  font-style: italic;
}
.stemws-hero-copy h1 span { color: var(--stemws-green); }
.stemws-desc {
  max-width: 470px;
  margin: 0 0 24px;
  color: var(--stemws-navy);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}
.stemws-feature-row { max-width: 520px; }
.stemws-feature-item {
  min-height: 88px;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid #d6ddea;
}
.stemws-feature-item:first-child { padding-left: 0; }
.stemws-feature-item:last-child { border-right: 0; }
.stemws-feature-item i {
  display: block;
  margin-bottom: 10px;
  color: var(--stemws-navy);
  font-size: 32px;
  line-height: 1;
}
.stemws-feature-item strong {
  display: block;
  color: var(--stemws-navy);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}
.stemws-hero-image-col {
  position: relative;
  min-height: 344px;
  overflow: hidden;
}
.stemws-hero-image-col::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,0) 100%);
}
.stemws-hero-image {
  width: 100%;
  height: 100%;
  min-height: 344px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.stemws-search-section {
  padding: 0 0 14px;
  margin-top: -2px;
}
.stemws-search-panel {
  position: relative;
  z-index: 5;
  margin: -18px auto 0;
  padding: 18px 28px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #031855 0%, #062868 55%, #011649 100%);
  box-shadow: 0 18px 30px rgba(3, 24, 85, .14);
}
.stemws-search-panel h2 {
  margin: 0 0 16px;
  color: #fff;
  text-align: center;
  font-size: clamp(20px, 2.3vw, 24px);
  line-height: 1.1;
  font-weight: 900;
}
.stemws-select {
  min-height: 52px;
  padding-inline: 16px 38px;
  color: var(--stemws-navy);
  border: 0;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: none !important;
  font-size: 16px;
  font-weight: 700;
}
.stemws-search-inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 1200px) {
  .stemws-search-inline {
    grid-template-columns: 1fr 1.15fr;
  }
}
.stemws-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  color: #fff;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--stemws-green), #0a8d51);
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.stemws-section-head { margin-bottom: 18px; }
.stemws-section-head h2 {
  margin: 0;
  color: var(--stemws-navy);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
  letter-spacing: -.4px;
  font-weight: 900;
}

.stemws-categories-section { padding: 8px 0 16px; }
.stemws-category-row { margin-inline: auto; }
.stemws-category-card {
  height: 100%;
  min-height: 236px;
  padding: 28px 20px 22px;
  text-align: center;
  border: 1px solid var(--stemws-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(7, 21, 66, .05);
}
.stemws-category-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 999px;
  color: #fff;
}
.stemws-category-icon i { font-size: 34px; line-height: 1; }
.stemws-purple { background: linear-gradient(135deg, #8d73ef, #6e4ed2); }
.stemws-green { background: linear-gradient(135deg, #4ea95e, #2f8441); }
.stemws-orange { background: linear-gradient(135deg, #ff9b3c, #ff6f00); }
.stemws-pink { background: linear-gradient(135deg, #ff7eb5, #e14589); }
.stemws-blue { background: linear-gradient(135deg, #6f8eff, #3d64f4); }
.stemws-category-card h3 {
  margin: 0 0 10px;
  color: var(--stemws-navy);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
}
.stemws-category-card p {
  max-width: 170px;
  margin: 0 auto 18px;
  color: var(--stemws-navy);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.stemws-category-card a {
  color: #2b48de;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}
.stemws-category-card a span { margin-left: 8px; }

.stemws-featured-section { padding: 0 0 14px; }
.stemws-featured-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.stemws-view-all {
  justify-self: end;
  color: #2b48de;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}
.stemws-view-all span { margin-left: 8px; }
.stemws-card-row { margin-inline: auto; }
.stemws-workshop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--stemws-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(7, 21, 66, .05);
}
.stemws-card-image-wrap { position: relative; }
.stemws-card-image {
  width: 100%;
  aspect-ratio: 1.43 / 1;
  display: block;
  object-fit: cover;
}
.stemws-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .3px;
  font-weight: 900;
}
.stemws-badge-purple { background: #6a42c2; }
.stemws-badge-green { background: #2f9952; }
.stemws-badge-orange { background: #ff7b1f; }
.stemws-badge-blue { background: #2f59dc; }
.stemws-card-body { padding: 18px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.stemws-card-body h3 {
  margin: 0 0 10px;
  color: var(--stemws-navy);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}
.stemws-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: var(--stemws-navy);
  font-size: 12px;
  font-weight: 700;
}
.stemws-meta li { display: inline-flex; align-items: center; gap: 4px; }
.stemws-meta i { font-size: 13px; }
.stemws-card-body > p {
  margin: 0 0 18px;
  color: var(--stemws-navy);
  font-size: 15px;
  line-height: 1.48;
  font-weight: 700;
}
.stemws-card-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: auto;
  margin-bottom: 14px;
}
.stemws-date-price p {
  margin: 0;
  color: var(--stemws-navy);
  font-size: 14px;
  line-height: 1.42;
  font-weight: 800;
}
.stemws-date-price p:first-child { margin-bottom: 2px; }
.stemws-price {
  color: var(--stemws-navy);
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
}
.stemws-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 124px;
  min-height: 40px;
  padding: 10px 20px;
  color: var(--stemws-navy);
  border: 1px solid #7d8bb0;
  border-radius: 5px;
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.stemws-private-section { padding: 6px 0 16px; }
.stemws-private-panel {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 20px;
  align-items: center;
  max-width: 1308px;
  margin-inline: auto;
  padding: 18px 26px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f4f0ff 0%, #f7f5ff 45%, #f3f1ff 100%);
}
.stemws-private-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #8a65df, #6c49d1);
}
.stemws-private-icon i { font-size: 30px; }
.stemws-private-copy h3 {
  margin: 0 0 5px;
  color: var(--stemws-navy);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}
.stemws-private-copy p {
  margin: 0;
  color: var(--stemws-navy);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}
.stemws-private-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 44px;
  padding: 10px 20px;
  color: var(--stemws-navy);
  border: 1px solid #7d8bb0;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}

.stemws-benefits-section { padding: 2px 0 24px; }
.stemws-benefit-row {
  max-width: 1308px;
  margin-inline: auto;
}
.stemws-benefit-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding-right: 18px;
  border-right: 1px solid #e2e7ef;
}
.stemws-benefit-item-last { border-right: 0; }
.stemws-benefit-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--stemws-navy);
}
.stemws-benefit-icon i { font-size: 24px; }
.stemws-soft-blue { background: #e7ebff; }
.stemws-soft-pink { background: #ffe4ef; }
.stemws-soft-green { background: #e4f6e7; }
.stemws-soft-mint { background: #def7e8; }
.stemws-soft-peach { background: #ffe9d7; }
.stemws-benefit-item h3 {
  margin: 0;
  color: var(--stemws-navy);
  font-size: 14px;
  line-height: 1.28;
  font-weight: 900;
}

@media (max-width: 1199.98px) {
  .stemws-container { padding-inline: 34px; }
  .stemws-hero-copy h1 { font-size: 60px; }
  .stemws-desc { font-size: 16px; }
  .stemws-search-panel { padding-inline: 22px; }
  .stemws-private-panel { grid-template-columns: 76px 1fr; }
  .stemws-private-btn { grid-column: 1 / -1; justify-self: center; }
  .stemws-benefit-item { border-right: 0; }
}

@media (max-width: 991.98px) {
  .stemws-hero-section { background: #fff; }
  .stemws-hero-row { min-height: auto; }
  .stemws-hero-copy-col { background: #fff; }
  .stemws-hero-copy { max-width: none; padding: 22px 0 24px; }
  .stemws-hero-image-col { min-height: 340px; border-radius: 14px; }
  .stemws-hero-image-col::before { display: none; }
  .stemws-hero-image { min-height: 340px; border-radius: 14px; }
  .stemws-search-panel { margin-top: 16px; }
  .stemws-featured-head { grid-template-columns: 1fr; justify-items: center; }
  .stemws-view-all { justify-self: center; }
}

@media (max-width: 767.98px) {
  .stemws-container { padding-inline: 20px; }
  .stemws-breadcrumbs { min-height: 38px; font-size: 11px; }
  .stemws-kicker { font-size: 16px; }
  .stemws-hero-copy h1 { font-size: 44px; letter-spacing: -1px; }
  .stemws-desc { font-size: 15px; }
  .stemws-feature-item {
    padding: 12px 10px;
    border-right: 0;
    border-bottom: 1px solid #d6ddea;
  }
  .stemws-feature-item:nth-last-child(-n+2) { border-bottom: 0; }
  .stemws-search-panel {
    margin-top: 16px;
    padding: 20px 18px;
  }
  .stemws-select, .stemws-search-btn { min-height: 48px; font-size: 15px; }
  .stemws-category-card { min-height: auto; }
  .stemws-card-bottom { grid-template-columns: 1fr; }
  .stemws-price { font-size: 22px; }
  .stemws-private-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 22px;
  }
  .stemws-benefit-item {
    grid-template-columns: 52px 1fr;
    min-height: 64px;
    padding-right: 0;
  }
}

@media (max-width: 575.98px) {
  .stemws-container { padding-inline: 15px; }
  .stemws-hero-copy h1 { font-size: 38px; }
  .stemws-hero-image-col, .stemws-hero-image { min-height: 260px; }
  .stemws-private-copy h3 { font-size: 17px; }
  .stemws-benefit-item {
    border-bottom: 1px solid #e2e7ef;
    padding-bottom: 10px;
  }
  .stemws-benefit-row > div:last-child .stemws-benefit-item { border-bottom: 0; }
}












/* VISIT US PAGE */


:root {
  --mbrc-navy: #07183D;
  --mbrc-green: #007d42;
  --mbrc-line: rgba(7, 24, 61, 0.22);
}

/* Main Section */
.mbrc-hero-section {
  position: relative;
  min-height: 402px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255,255,255,0.94) 45%,
      rgba(255,255,255,0.35) 56%,
      rgba(255,255,255,0) 70%
    );
}

/* Right Side Image */
.mbrc-hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.mbrc-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.32) 15%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 30%
    );
}

.mbrc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Content Container */
.mbrc-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  min-height: 402px;
  padding: 0;
}

.mbrc-hero-row {
  min-height: 402px;
}

.mbrc-left-col {
  padding-top: 30px;
  padding-bottom: 24px;
}

/* Heading */
.mbrc-title {
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.6px;
  text-transform: uppercase;
}

.mbrc-hero-row h2 {
    max-width: 440px;
    margin: 0 0 18px;
    color: var(--stemvu-navy);
    font-size: clamp(22px, 2.4vw, 31px);
    line-height: 1.2;
    font-weight: 900;
}

.mbrc-title span,
.mbrc-title strong {
  /* display: block; */
  font-size: clamp(42px, 5.15vw, 81px);
  font-weight: 900;
}

.mbrc-title span {
  color: var(--mbrc-navy);
}

.mbrc-title strong {
  color: var(--mbrc-green);
}

/* Description */
.mbrc-desc {
  max-width: 480px;
  margin: 0 0 24px;
  color: var(--mbrc-navy);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
}

/* Features */
.mbrc-feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 470px;
  margin-bottom: 25px;
}

.mbrc-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 0 11px;
  text-align: center;
}

.mbrc-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 64px;
  background: var(--mbrc-line);
}

.mbrc-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--mbrc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mbrc-icon i {
  font-size: 38px;
  line-height: 1;
  color: var(--mbrc-navy);
  display: block;
}

.mbrc-feature p {
  margin: 0;
  color: var(--mbrc-navy);
  font-size: 10.2px;
  line-height: 1.18;
  font-weight: 800;
}

/* Buttons */
.mbrc-buttons {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.mbrc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 34px;
  padding: 0 28px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mbrc-btn-primary {
  color: #fff;
  border: 1px solid var(--mbrc-green);
  background: linear-gradient(180deg, #007d42 0%, #006136 100%);
  box-shadow: 0 8px 15px rgba(0, 104, 56, 0.18);
}

.mbrc-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.mbrc-btn-outline {
  color: var(--mbrc-navy);
  border: 1px solid var(--mbrc-navy);
  background: rgba(255,255,255,0.82);
}

.mbrc-btn-outline:hover {
  color: #fff;
  background: var(--mbrc-navy);
}

/* Large Screens */
@media (min-width: 1200px) {
  .mbrc-hero-section {
    min-height: 650px;
  }

  .mbrc-container,
  .mbrc-hero-row {
    min-height: 600px;
  }

  .mbrc-left-col {
    padding-top: 38px;
  }

  .mbrc-hero-bg {
    width: 60%;
  }
}

/* Laptop / Tablet Landscape */
@media (max-width: 1199.98px) {
  .mbrc-container {
    max-width: 1024px;
    padding-left: 55px;
  }

  .mbrc-hero-bg {
    width: 61%;
  }

  .mbrc-title span,
  .mbrc-title strong {
    font-size: 52px;
  }

  .mbrc-desc {
    max-width: 365px;
    font-size: 15px;
  }

  .mbrc-feature-row {
    max-width: 430px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .mbrc-hero-section {
    min-height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .mbrc-hero-bg {
    position: relative;
    width: 100%;
    height: 360px;
    order: 2;
  }

  .mbrc-hero-bg::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 24%),
      linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 32%);
  }

  .mbrc-container,
  .mbrc-hero-row {
    min-height: auto;
  }

  .mbrc-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .mbrc-left-col {
    width: 100%;
    max-width: 620px;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .mbrc-desc {
    max-width: 500px;
  }

  .mbrc-feature-row {
    max-width: 560px;
  }
}

/* Small Tablet */
@media (max-width: 767.98px) {
  .mbrc-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .mbrc-title span,
  .mbrc-title strong {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }

  .mbrc-desc {
    font-size: 15px;
  }

  .mbrc-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    max-width: 460px;
  }

  .mbrc-feature:nth-child(2)::after {
    display: none;
  }

  .mbrc-feature:not(:last-child)::after {
    height: 58px;
  }

  .mbrc-buttons {
    gap: 12px;
  }

  .mbrc-btn {
    min-width: 150px;
  }

  .mbrc-hero-bg {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .mbrc-left-col {
    padding-top: 24px;
  }

  .mbrc-title {
    margin-bottom: 13px;
  }

  .mbrc-title span,
  .mbrc-title strong {
    font-size: clamp(36px, 13vw, 48px);
  }

  .mbrc-desc {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .mbrc-feature-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 23px;
  }

  .mbrc-feature {
    padding: 0 8px;
  }

  .mbrc-feature p {
    font-size: 10px;
  }

  .mbrc-icon {
    width: 33px;
    height: 33px;
  }

  .mbrc-icon i {
    font-size: 29px;
  }

  .mbrc-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .mbrc-btn {
    width: 100%;
    height: 40px;
  }

  .mbrc-hero-bg {
    height: 265px;
  }

  .mbrc-hero-img {
    object-position: center center;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .mbrc-container {
    padding-left: 17px;
    padding-right: 17px;
  }

  .mbrc-title span,
  .mbrc-title strong {
    font-size: 34px;
  }

  .mbrc-feature-row {
    gap: 15px 0;
  }

  .mbrc-feature p {
    font-size: 9.4px;
  }

  .mbrc-icon i {
    font-size: 27px;
  }

  .mbrc-hero-bg {
    height: 235px;
  }
}



.stemvu-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0px;
}

/* Hero */
.stemvu-hero-section {
  background: linear-gradient(90deg, #fff 0%, #fff 39%, #f8faf8 39%, #fff 100%);
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #dfe6ef;
}

.stemvu-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  color: #9099ad;
  font-size: 12px;
  font-weight: 700;
}

.stemvu-breadcrumbs a {
  color: #77819a;
  text-decoration: none;
}

.stemvu-breadcrumbs a:hover { color: var(--stemvu-green); }

.stemvu-hero-row { min-height: 388px; }

.stemvu-hero-copy-col {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 73%, rgba(255,255,255,.72) 100%);
}

.stemvu-hero-copy {
  max-width: 500px;
  padding: 46px 10px 22px 0;
}

.stemvu-hero-copy h1 {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  color: var(--stemvu-navy);
  font-size: clamp(48px, 5.3vw, 68px);
  line-height: .92;
  letter-spacing: -2px;
  font-weight: 900;
}

.stemvu-hero-copy h1 span { color: var(--stemvu-green); }

.stemvu-spark {
  position: absolute;
  right: -42px;
  top: -4px;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(#f36a16, #f36a16) center top / 4px 13px no-repeat,
    linear-gradient(#0b9a55, #0b9a55) left 66% / 14px 4px no-repeat,
    linear-gradient(#f0b000, #f0b000) right 38% / 13px 4px no-repeat;
  transform: rotate(18deg);
}

.stemvu-spark::before,
.stemvu-spark::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
}

.stemvu-spark::before {
  top: 4px;
  left: 4px;
  background: #f0b000;
}

.stemvu-spark::after {
  right: 3px;
  bottom: 5px;
  background: #087b44;
}

.stemvu-spark-small {
  position: relative;
  display: inline-block;
  right: auto;
  top: auto;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  vertical-align: middle;
}

.stemvu-hero-copy h2 {
  max-width: 440px;
  margin: 0 0 18px;
  color: var(--stemvu-navy);
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.2;
  font-weight: 900;
}

.stemvu-hero-copy p {
  max-width: 465px;
  margin: 0 0 35px;
  color: var(--stemvu-navy);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.stemvu-hero-points { max-width: 520px; }

.stemvu-hero-point {
  min-height: 88px;
  padding: 0 13px;
  text-align: center;
  border-right: 1px solid #d7deea;
}

.stemvu-hero-point:first-child { padding-left: 0; }
.stemvu-hero-point:last-child { border-right: 0; }

.stemvu-hero-point i {
  display: block;
  margin-bottom: 10px;
  color: var(--stemvu-navy);
  font-size: 33px;
  line-height: 1;
}

.stemvu-hero-point strong {
  display: block;
  color: var(--stemvu-navy);
  font-size: 12px;
  line-height: 1.16;
  font-weight: 900;
}

.stemvu-hero-image-col {
  position: relative;
  min-height: 388px;
  overflow: hidden;
}

.stemvu-hero-image-col::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.stemvu-hero-image {
  width: 100%;
  height: 100%;
  min-height: 388px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Shared cards */
.stemvu-info-section {
  padding: 20px 0 16px;
  background: #fff;
}

.stemvu-info-row,
.stemvu-detail-row,
.stemvu-expect-row {
  /* max-width: 1328px; */
  margin-inline: auto;
}

.stemvu-info-card,
.stemvu-detail-card {
  height: 100%;
  padding: 28px 30px;
  border: 1px solid var(--stemvu-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(7, 21, 66, .045);
}

.stemvu-card-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.stemvu-card-title > i {
  color: var(--stemvu-navy);
  font-size: 31px;
  line-height: 1;
}

.stemvu-location-card .stemvu-card-title > i,
.stemvu-detail-card:first-child .stemvu-card-title > i {
  color: var(--stemvu-green);
}

.stemvu-card-title h2 {
  margin: 0;
  color: var(--stemvu-navy);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
}

.stemvu-location-card .stemvu-card-title h2 { color: var(--stemvu-green); }

.stemvu-contact-list {
  display: grid;
  gap: 22px;
  margin-bottom: 24px;
}

.stemvu-contact-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  align-items: start;
}

.stemvu-contact-item i {
  color: var(--stemvu-navy);
  font-size: 23px;
  line-height: 1.1;
}

.stemvu-contact-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--stemvu-navy);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

.stemvu-contact-item p,
.stemvu-card-intro,
.stemvu-access-text {
  margin: 0;
  color: var(--stemvu-navy);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.stemvu-outline-btn,
.stemvu-soft-btn,
.stemvu-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 26px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.stemvu-outline-btn:hover,
.stemvu-soft-btn:hover,
.stemvu-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(6, 22, 77, .12);
}

.stemvu-green-btn {
  min-width: 230px;
  color: var(--stemvu-green);
  border: 1px solid var(--stemvu-green);
  background: #fff;
}

.stemvu-feature-list {
  display: grid;
  gap: 19px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.stemvu-feature-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--stemvu-navy);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.stemvu-feature-list i {
  color: var(--stemvu-navy);
  font-size: 23px;
  line-height: 1;
}

.stemvu-hours-table {
  display: grid;
  margin-top: -4px;
}

.stemvu-hours-table div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #e3e8f0;
  color: var(--stemvu-navy);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

.stemvu-hours-table div:last-child { border-bottom: 0; }
.stemvu-hours-table strong { font-weight: 900; }

.stemvu-hours-note {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--stemvu-border);
  border-radius: 7px;
  background: #fff;
}

.stemvu-hours-note i {
  color: var(--stemvu-navy);
  font-size: 31px;
}

.stemvu-hours-note p {
  margin: 0;
  color: var(--stemvu-navy);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

/* Expect */
.stemvu-expect-section {
  padding: 13px 0 16px;
  background: #fff;
}

.stemvu-section-head { margin-bottom: 28px; }

.stemvu-section-head h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--stemvu-navy);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.12;
  font-weight: 900;
}

.stemvu-expect-icons { max-width: 620px; }

.stemvu-expect-item {
  min-height: 162px;
  padding: 0 17px;
  text-align: center;
  border-right: 1px solid #d7deea;
}

.stemvu-expect-item:last-child { border-right: 0; }

.stemvu-expect-item i {
  display: block;
  margin: 0 auto 18px;
  color: var(--stemvu-navy);
  font-size: 43px;
  line-height: 1;
}

.stemvu-expect-item h3 {
  margin: 0 0 13px;
  color: var(--stemvu-navy);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}

.stemvu-expect-item p {
  margin: 0 auto;
  color: var(--stemvu-navy);
  font-size: 13px;
  line-height: 1.48;
  font-weight: 700;
}

.stemvu-studio-image {
  width: 100%;
  aspect-ratio: 2.23 / 1;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(7, 21, 66, .08);
}

/* Details */
.stemvu-details-section {
  padding: 10px 0 20px;
  background: #fff;
}

.stemvu-detail-card {
  min-height: 246px;
  display: flex;
  flex-direction: column;
}

.stemvu-detail-card .stemvu-card-title { margin-bottom: 19px; }

.stemvu-nearby-list {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0 0 0 22px;
  color: var(--stemvu-navy);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.stemvu-nearby-list li::marker {
  color: var(--stemvu-green);
  font-size: 1.35em;
}

.stemvu-soft-btn {
  margin-top: auto;
  width: 100%;
  color: var(--stemvu-green);
  border: 1px solid #84bea0;
  background: #f5fbf7;
}

.stemvu-parking-content {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.stemvu-parking-content p {
  margin: 0;
  color: var(--stemvu-navy);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.stemvu-parking-illustration {
  position: relative;
  height: 98px;
}

.stemvu-parking-illustration > i {
  position: absolute;
  left: 5px;
  bottom: 9px;
  color: var(--stemvu-navy);
  font-size: 72px;
  line-height: 1;
}

.stemvu-parking-illustration span {
  position: absolute;
  top: 2px;
  right: 21px;
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  color: #fff;
  background: #2858c5;
  border-radius: 6px;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.stemvu-parking-illustration em {
  position: absolute;
  right: 6px;
  bottom: 10px;
  width: 24px;
  height: 58px;
  background:
    linear-gradient(45deg, transparent 43%, #087b44 45% 55%, transparent 57%) 50% 100% / 100% 45% no-repeat,
    linear-gradient(-45deg, transparent 43%, #087b44 45% 55%, transparent 57%) 50% 100% / 100% 45% no-repeat,
    linear-gradient(#087b44, #087b44) center bottom / 4px 44px no-repeat;
}

.stemvu-access-text {
  max-width: 300px;
  margin-bottom: 34px;
}

/* CTA */
.stemvu-cta-section {
  padding: 0 0 10px;
  background: #fff;
}

.stemvu-cta-panel {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: center;
  min-height: 107px;
  margin-inline: auto;
  padding: 18px 48px 18px 130px;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(135deg, #00164f 0%, #052b73 48%, #00154c 100%);
}

.stemvu-cta-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
}

.stemvu-cta-icon i {
  font-size: 42px;
  line-height: 1;
}

.stemvu-cta-copy h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  font-weight: 900;
}

.stemvu-cta-copy p {
  max-width: 575px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

.stemvu-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stemvu-cta-btn {
  min-width: 180px;
  min-height: 48px;
  color: #fff;
  border: 1px solid #fff;
}

.stemvu-cta-light {
  color: var(--stemvu-navy);
  background: #fff;
}

.stemvu-cta-outline { background: transparent; }

.stemvu-cta-outline:hover {
  color: var(--stemvu-navy);
  background: #fff;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .stemvu-container { padding-inline: 34px; }
  .stemvu-hero-copy h1 { font-size: 54px; }
  .stemvu-hero-copy h2 { font-size: 26px; }

  .stemvu-info-card,
  .stemvu-detail-card { padding: 24px; }

  .stemvu-cta-panel {
    padding-left: 48px;
    grid-template-columns: 84px 1fr;
  }

  .stemvu-cta-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 991.98px) {
  .stemvu-hero-section { background: #fff; }
  .stemvu-hero-row { min-height: auto; }
  .stemvu-hero-copy-col { background: #fff; }
  .stemvu-hero-copy { max-width: none; padding: 24px 0 28px; }

  .stemvu-hero-image-col {
    min-height: 340px;
    border-radius: 14px;
  }

  .stemvu-hero-image-col::before { display: none; }

  .stemvu-hero-image {
    min-height: 340px;
    border-radius: 14px;
  }

  .stemvu-expect-icons {
    max-width: 100%;
    margin-bottom: 18px;
  }

  .stemvu-studio-image { aspect-ratio: 1.9 / 1; }
  .stemvu-detail-card { min-height: auto; }
  .stemvu-access-text { max-width: none; }
}

@media (max-width: 767.98px) {
  .stemvu-container { padding-inline: 20px; }
  .stemvu-breadcrumbs { min-height: 42px; font-size: 11px; }
  .stemvu-hero-copy h1 { font-size: 42px; letter-spacing: -1px; }
  .stemvu-spark { right: -31px; top: -8px; }
  .stemvu-hero-copy h2 { font-size: 21px; }
  .stemvu-hero-copy p { font-size: 15px; }

  .stemvu-hero-point {
    padding: 13px 10px;
    border-right: 0;
    border-bottom: 1px solid #d7deea;
  }

  .stemvu-hero-point:nth-last-child(-n+2) { border-bottom: 0; }

  .stemvu-card-title { gap: 14px; }

  .stemvu-info-card,
  .stemvu-detail-card { padding: 22px; }

  .stemvu-hours-table div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .stemvu-expect-item {
    min-height: 156px;
    padding: 16px 12px;
    border-right: 0;
    border-bottom: 1px solid #d7deea;
  }

  .stemvu-expect-item:nth-last-child(-n+2) { border-bottom: 0; }
  .stemvu-studio-image { aspect-ratio: 1.35 / 1; }

  .stemvu-parking-content {
    grid-template-columns: 1fr;
  }

  .stemvu-parking-illustration {
    width: 150px;
    margin-inline: auto;
  }

  .stemvu-cta-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 28px 22px;
  }

  .stemvu-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .stemvu-cta-btn,
  .stemvu-green-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .stemvu-container { padding-inline: 15px; }
  .stemvu-hero-copy h1 { font-size: 38px; }

  .stemvu-hero-image-col,
  .stemvu-hero-image { min-height: 260px; }

  .stemvu-section-head h2,
  .stemvu-card-title h2 { font-size: 18px; }

  .stemvu-contact-item {
    grid-template-columns: 28px 1fr;
    gap: 13px;
  }
}











/* Team Page */



.stem-team-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  isolation: isolate;
  border-bottom: 1px solid rgba(220, 226, 236, 0.9);
  background-image:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 35%,
      rgba(255, 255, 255, 0.9) 44%,
      rgba(255, 255, 255, 0.36) 55%,
      rgba(255, 255, 255, 0.02) 68%
    ),
    url("../images/team-hero.jpg");
  background-size: 100% 100%, 69% 100%;
  background-repeat: no-repeat;
  background-position: center, right center;
}

.stem-team-container {
  width: min(100% - 60px, 1400px);
  margin: 0 auto;
}

.stem-team-content {
  max-width: 475px;
  padding: 38px 0 44px;
}

.stem-team-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 5px;
  color: #071542;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 0.94;
  letter-spacing: -2px;
  font-weight: 700;
}

.stem-team-title-accent {
  color: #08743b;
}

.stem-team-spark {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
  flex: 0 0 25px;
}

.stem-team-spark::before,
.stem-team-spark::after {
  content: "";
  position: absolute;
  background: #f58a1f;
  border-radius: 20px;
}

.stem-team-spark::before {
  width: 4px;
  height: 15px;
  left: 6px;
  top: 0;
  transform: rotate(22deg);
}

.stem-team-spark::after {
  width: 16px;
  height: 4px;
  right: 0;
  bottom: 6px;
  transform: rotate(-25deg);
}

.stem-team-spark i {
  position: absolute;
  width: 4px;
  height: 12px;
  right: 5px;
  top: 2px;
  background: #19a75b;
  border-radius: 20px;
  transform: rotate(54deg);
}

.stem-team-subtitle {
  margin: 0 0 20px;
  color: #071542;
  font-size: clamp(22px, 2.45vw, 31px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.stem-team-copy {
  margin: 0;
  max-width: 440px;
  color: #26334d;
  font-size: 17px;
  line-height: 1.58;
  font-weight: 600;
}

.stem-team-script {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: "Caveat", cursive;
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1;
  font-weight: 400;
}

.stem-team-script-create {
  color: #08743b;
}

.stem-team-script-collab {
  color: #f58a1f;
}

.stem-team-script-grow {
  color: #113ca6;
}

.stem-team-script-dot {
  color: #071542;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 17px;
}

@media (max-width: 1199.98px) {
  .stem-team-container {
    width: min(100% - 44px, 960px);
  }

  .stem-team-hero {
    min-height: 342px;
    background-size: 100% 100%, 72% 100%;
  }
}

@media (max-width: 991.98px) {
  .stem-team-container {
    width: min(100% - 34px, 720px);
  }

  .stem-team-hero {
    min-height: auto;
    align-items: flex-end;
    padding-top: 250px;
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        #ffffff 90%
      ),
      url("../images/about-hero-stem-studio.jpg");
    background-size: 100% 315px;
    background-position: top center;
  }

  .stem-team-content {
    max-width: 100%;
    padding: 28px 0 32px;
  }
}

@media (max-width: 767.98px) {
  .stem-team-container {
    width: min(100% - 26px, 540px);
  }

  .stem-team-hero {
    padding-top: 225px;
    background-size: 100% 285px;
  }

  .stem-team-title {
    letter-spacing: -1.5px;
  }

  .stem-team-copy {
    font-size: 15.5px;
  }
}

@media (max-width: 480px) {
  .stem-team-container {
    width: min(100% - 22px, 100%);
  }

  .stem-team-hero {
    padding-top: 205px;
    background-size: 100% 250px;
  }

  .stem-team-spark {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .stem-team-script {
    gap: 7px;
  }
}

.stemtp-team-page {
  background:
    radial-gradient(circle at 5% 8%, rgba(0, 107, 55, 0.04), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fbfdff 100%);
  font-size: 16px;
  line-height: 1.45;
}

.stemtp-container {
  max-width: 1400px;
}

.stemtp-hero-section {
  padding: 12px 0 18px;
}

.stemtp-hero-card {
  min-height: 360px;
  overflow: hidden;
  position: relative;
  border-radius: 0;
  background: #fff;
}

.stemtp-hero-content {
  position: relative;
  z-index: 4;
  max-width: 455px;
  padding: 22px 0 12px;
}

.stemtp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: #74809d;
  font-size: 12px;
  font-weight: 500;
}

.stemtp-breadcrumb a {
  color: #6d7897;
  text-decoration: none;
}

.stemtp-breadcrumb a:hover {
  color: var(--stemtp-green);
}

.stemtp-hero-title {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-size: clamp(3rem, 7vw, 4.9rem);
  font-weight: 900;
  color: var(--stemtp-navy);
}

.stemtp-hero-title strong {
  color: var(--stemtp-green-dark);
  font-weight: 900;
}

.stemtp-spark {
  position: absolute;
  width: 14px;
  height: 3px;
  border-radius: 99px;
  background: var(--stemtp-orange);
  transform-origin: center;
}

.stemtp-spark-one {
  right: -24px;
  top: 12px;
  transform: rotate(115deg);
}

.stemtp-spark-two {
  right: -31px;
  top: 29px;
  background: var(--stemtp-green);
  transform: rotate(18deg);
}

.stemtp-spark-three {
  right: -16px;
  top: 39px;
  background: var(--stemtp-green);
  transform: rotate(78deg);
}

.stemtp-hero-subtitle {
  max-width: 430px;
  margin: 0 0 16px;
  color: var(--stemtp-navy);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.25;
  font-weight: 800;
}

.stemtp-hero-text {
  max-width: 430px;
  margin: 0 0 21px;
  color: var(--stemtp-navy);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.65;
}

.stemtp-mantra {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.stemtp-mantra b {
  color: var(--stemtp-navy);
  font-family: Inter, Arial, sans-serif;
  font-size: 1rem;
}

.stemtp-mantra-green { color: var(--stemtp-green); }
.stemtp-mantra-orange { color: var(--stemtp-orange); }
.stemtp-mantra-blue { color: var(--stemtp-blue); }

.stemtp-hero-image-wrap {
  position: relative;
  min-height: 356px;
  height: 100%;
  overflow: hidden;
}

.stemtp-hero-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  z-index: 2;
  background: linear-gradient(90deg, #fff 8%, rgba(255,255,255,0.92) 25%, rgba(255,255,255,0.18) 70%, transparent 100%);
  pointer-events: none;
}

.stemtp-hero-image {
  width: 100%;
  height: 356px;
  object-fit: cover;
  object-position: center;
}

.stemtp-content-section {
  padding: 30px 0 36px;
}

.stemtp-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 4px 0 8px;
  color: var(--stemtp-navy);
  text-align: center;
}

.stemtp-section-heading span {
  display: block;
  width: 27px;
  height: 2px;
  background: var(--stemtp-green);
}

.stemtp-section-heading h2,
.stemtp-future-heading h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: clamp(1.22rem, 2vw, 1.48rem);
  line-height: 1;
  font-weight: 900;
}

.stemtp-heading-spaced {
  margin-top: 18px;
}

.stemtp-leader-card,
.stemtp-profile-card,
.stemtp-instructor-card {
  background: #fff;
  border: 1px solid var(--stemtp-border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(7, 16, 68, 0.04);
}

.stemtp-leadership-row {
  margin-bottom: 3px;
}

.stemtp-leader-card {
  min-height: 232px;
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 22px 32px;
}

.stemtp-leader-photo-wrap {
  width: 158px;
  height: 158px;
  flex: 0 0 158px;
  border-radius: 50%;
  padding: 6px;
  background: #fff;
  position: relative;
}

.stemtp-leader-photo-wrap::before,
.stemtp-small-photo-wrap::before,
.stemtp-instructor-photo::before,
.stemtp-future-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.stemtp-leader-photo,
.stemtp-profile-photo,
.stemtp-instructor-photo img,
.stemtp-future-photo-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.stemtp-ring-green { color: var(--stemtp-green); }
.stemtp-ring-blue { color: var(--stemtp-blue); }
.stemtp-ring-orange { color: var(--stemtp-orange); }
.stemtp-ring-purple { color: var(--stemtp-purple); }

.stemtp-leader-info h3,
.stemtp-profile-card h3,
.stemtp-instructor-card h3,
.stemtp-future-card h3 {
  margin: 0;
  color: var(--stemtp-navy);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.stemtp-leader-info h3 {
  font-size: 1.55rem;
}

.stemtp-role {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

.stemtp-green-text { color: var(--stemtp-green); }
.stemtp-blue-text { color: var(--stemtp-blue); }

.stemtp-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--stemtp-navy);
  font-weight: 650;
  font-size: 0.93rem;
}

.stemtp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}

.stemtp-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.82rem;
  line-height: 1;
}

.stemtp-check-icon::before {
  line-height: 1;
}

.stemtp-green-check .stemtp-check-icon { background: var(--stemtp-green); }
.stemtp-blue-check .stemtp-check-icon { background: var(--stemtp-blue); }

.stemtp-quote {
  position: relative;
  max-width: 280px;
  margin: 8px 0 0;
  padding-left: 32px;
  color: var(--stemtp-navy);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.42;
}

.stemtp-quote::before,
.stemtp-quote::after {
  position: absolute;
  font-size: 1.65rem;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
}

.stemtp-quote::before {
  content: "“";
  left: 0;
  top: -4px;
}

.stemtp-quote::after {
  content: "”";
  right: -15px;
  bottom: -9px;
}

.stemtp-quote-green::before,
.stemtp-quote-green::after { color: var(--stemtp-green); }
.stemtp-quote-blue::before,
.stemtp-quote-blue::after { color: var(--stemtp-blue); }

.stemtp-card-row,
.stemtp-instructor-row {
  align-items: stretch;
}

.stemtp-profile-card {
  min-height: 238px;
  position: relative;
  padding: 22px 18px 23px;
  text-align: center;
}

.stemtp-small-photo-wrap {
  position: relative;
  width: 102px;
  height: 102px;
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 4px;
  background: #fff;
}

.stemtp-floating-badge {
  position: absolute;
  left: 25px;
  top: 95px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 5px 14px rgba(7, 16, 68, 0.12);
}

.stemtp-profile-card h3 {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.08;
}

.stemtp-profile-card p,
.stemtp-instructor-card p,
.stemtp-future-card p,
.stemtp-future-intro p {
  margin: 0;
  color: var(--stemtp-navy);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

.stemtp-instructor-card {
  min-height: 170px;
  position: relative;
  padding: 16px 14px 14px;
  text-align: center;
}

.stemtp-instructor-photo {
  position: relative;
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  border-radius: 50%;
  padding: 3px;
  background: #fff;
}

.stemtp-mini-badge {
  position: absolute;
  left: 17px;
  top: 70px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(7, 16, 68, 0.12);
  font-size: 0.82rem;
  font-weight: 900;
}

.stemtp-ai-badge {
  font-size: 0.9rem;
  line-height: 1;
}

.stemtp-instructor-card h3 {
  min-height: 34px;
  margin-bottom: 6px;
  font-size: 0.98rem;
  line-height: 1.08;
}

.stemtp-instructor-card p {
  font-size: 0.77rem;
  line-height: 1.35;
}

.stemtp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}

.stemtp-icon::before {
  display: block;
  line-height: 1;
}

.stemtp-floating-badge .stemtp-icon {
  font-size: 1.08rem;
}

.stemtp-mini-badge .stemtp-icon {
  font-size: 0.94rem;
}

.stemtp-bg-green { background: var(--stemtp-green); }
.stemtp-bg-blue { background: var(--stemtp-blue); }
.stemtp-bg-orange { background: var(--stemtp-orange); }
.stemtp-bg-purple { background: var(--stemtp-purple); }

.stemtp-future-section {
  position: relative;
  margin-top: 20px;
  padding: 14px 22px 16px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 15% 20%, rgba(248, 255, 241, 0.95), transparent 38%),
    linear-gradient(90deg, #fbfff8 0%, #f2f8ef 100%);
  border: 1px solid rgba(0, 107, 55, 0.08);
  box-shadow: 0 12px 28px rgba(0, 107, 55, 0.05);
}

.stemtp-future-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 13px;
  color: var(--stemtp-green-dark);
  text-align: center;
}

.stemtp-future-heading::before,
.stemtp-future-heading::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(0, 107, 55, 0.16);
}

.stemtp-future-cap {
  width: 30px;
  height: 30px;
  color: var(--stemtp-green-dark);
  font-size: 1.72rem;
}

.stemtp-spark-orange {
  position: relative;
  width: 12px;
  height: 2px;
  top: -8px;
  right: auto;
  transform: rotate(115deg);
  display: inline-block;
}

.stemtp-future-intro {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 15px 0;
}

.stemtp-future-intro h3 {
  max-width: 265px;
  margin: 0 0 22px;
  color: var(--stemtp-green-dark);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1.06rem;
  line-height: 1.25;
  font-weight: 800;
}

.stemtp-future-intro p {
  max-width: 280px;
  font-size: 0.73rem;
  line-height: 1.85;
}

.stemtp-future-grid {
  height: 100%;
}

.stemtp-future-grid > [class*="col"] {
  border-left: 1px solid rgba(7, 16, 68, 0.15);
}

.stemtp-future-card {
  position: relative;
  min-height: 216px;
  padding: 0 12px 0 18px;
  text-align: left;
}

.stemtp-future-photo-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 8px;
  padding: 4px;
  color: var(--stemtp-green);
  border-radius: 50%;
  background: #fff;
}

.stemtp-leaf-badge {
  position: absolute;
  top: 68px;
  right: calc(50% - 48px);
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--stemtp-green);
  background: #f4fff2;
  border: 2px solid var(--stemtp-green);
  border-radius: 50%;
}

.stemtp-leaf-badge .stemtp-icon {
  font-size: 0.82rem;
}

.stemtp-future-card h3 {
  text-align: center;
  font-size: 0.94rem;
  line-height: 1.1;
}

.stemtp-future-card p {
  margin-bottom: 10px;
  color: var(--stemtp-green-dark);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
}

.stemtp-future-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stemtp-future-card li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 3px 0;
  color: var(--stemtp-navy);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
}

.stemtp-list-check {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--stemtp-green-dark);
  font-size: 0.75rem;
  line-height: 1;
}

.stemtp-list-check::before {
  line-height: 1;
}

.stemtp-values-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--stemtp-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 25px rgba(7, 16, 68, 0.04);
}

.stemtp-value-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 48px;
  padding: 0 18px;
  border-right: 1px solid rgba(7, 16, 68, 0.22);
  color: var(--stemtp-navy);
}

.stemtp-value-item-last {
  border-right: 0;
}

.stemtp-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  flex: 0 0 48px;
  color: var(--stemtp-navy);
}

.stemtp-value-icon .stemtp-icon {
  font-size: 2.45rem;
}

.stemtp-value-item strong {
  font-size: 0.94rem;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.stemtp-cta-section {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 10px;
  padding: 18px 38px;
  background:
    radial-gradient(circle at 6% 50%, rgba(0, 94, 184, 0.5), transparent 26%),
    linear-gradient(90deg, #061b58 0%, #061044 100%);
  color: #fff;
}

.stemtp-cta-copy {
  display: flex;
  align-items: center;
  gap: 28px;
}

.stemtp-cta-icon {
  display: grid;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  color: #fff;
}

.stemtp-cta-icon .stemtp-icon {
  font-size: 2.58rem;
}

.stemtp-cta-copy h2 {
  margin: 0 0 4px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1;
  font-weight: 900;
}

.stemtp-cta-copy p {
  max-width: 590px;
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
}

.stemtp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 17px;
}

.stemtp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 42px;
  padding: 11px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.stemtp-btn:hover {
  transform: translateY(-2px);
}

.stemtp-btn-green {
  color: #fff;
  background: var(--stemtp-green);
  border: 1px solid var(--stemtp-green);
}

.stemtp-btn-green:hover {
  color: #fff;
  background: #008445;
  box-shadow: 0 10px 20px rgba(0, 107, 55, 0.28);
}

.stemtp-btn-outline {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.75);
}

.stemtp-btn-outline:hover {
  color: var(--stemtp-navy);
  background: #fff;
}

.stemtp-plane {
  display: grid;
  width: 94px;
  height: 55px;
  place-items: center;
  color: #fff;
}

.stemtp-plane .stemtp-icon {
  font-size: 3.9rem;
  transform: rotate(-5deg);
}

@media (max-width: 1199.98px) {
  .stemtp-container {
    max-width: 960px;
  }

  .stemtp-leader-card {
    gap: 24px;
    padding: 22px 24px;
  }

  .stemtp-leader-photo-wrap {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }

  .stemtp-value-item {
    gap: 10px;
    padding: 0 10px;
  }

  .stemtp-value-item strong {
    font-size: 0.84rem;
  }
}

@media (max-width: 991.98px) {
  .stemtp-hero-section {
    padding-top: 20px;
  }

  .stemtp-hero-content {
    max-width: 100%;
    padding: 0 0 24px;
    text-align: left;
  }

  .stemtp-hero-subtitle,
  .stemtp-hero-text {
    max-width: 720px;
  }

  .stemtp-hero-image-wrap {
    min-height: 320px;
    border-radius: 18px;
  }

  .stemtp-hero-image-wrap::before {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent 30%);
  }

  .stemtp-hero-image {
    height: 320px;
  }

  .stemtp-leader-card {
    min-height: auto;
  }

  .stemtp-profile-card {
    min-height: 230px;
  }

  .stemtp-instructor-card {
    min-height: 185px;
  }

  .stemtp-future-section {
    padding: 18px;
  }

  .stemtp-future-intro {
    text-align: center;
    align-items: center;
  }

  .stemtp-future-intro h3 {
    max-width: none;
    margin-bottom: 10px;
  }

  .stemtp-future-intro p {
    max-width: 700px;
  }

  .stemtp-future-grid > [class*="col"] {
    border-left: 0;
    border-top: 1px solid rgba(7, 16, 68, 0.12);
    padding-top: 16px;
  }

  .stemtp-future-card {
    min-height: 220px;
  }

  .stemtp-values-strip {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
  }

  .stemtp-value-item {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid rgba(7, 16, 68, 0.12);
    padding: 8px 18px;
  }

  .stemtp-value-item:nth-last-child(-n+1) {
    border-bottom: 0;
  }

  .stemtp-cta-section {
    padding: 24px;
  }

  .stemtp-cta-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .stemtp-team-page {
    font-size: 15px;
  }

  .stemtp-hero-section {
    padding: 16px 0 14px;
  }

  .stemtp-hero-title {
    gap: 10px;
    letter-spacing: -0.05em;
  }

  .stemtp-hero-text {
    font-size: 0.9rem;
  }

  .stemtp-mantra {
    gap: 10px;
    flex-wrap: wrap;
  }

  .stemtp-hero-image-wrap {
    min-height: 250px;
  }

  .stemtp-hero-image {
    height: 250px;
  }

  .stemtp-section-heading {
    gap: 12px;
  }

  .stemtp-section-heading h2,
  .stemtp-future-heading h2 {
    font-size: 1.12rem;
  }

  .stemtp-section-heading span {
    width: 22px;
  }

  .stemtp-leader-card {
    flex-direction: column;
    gap: 18px;
    padding: 25px 22px;
    text-align: center;
  }

  .stemtp-leader-info {
    width: 100%;
  }

  .stemtp-check-list {
    display: inline-block;
    text-align: left;
  }

  .stemtp-quote {
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .stemtp-floating-badge {
    left: calc(50% - 72px);
  }

  .stemtp-mini-badge {
    left: calc(50% - 59px);
  }

  .stemtp-future-heading {
    gap: 10px;
  }

  .stemtp-future-heading::before,
  .stemtp-future-heading::after {
    display: none;
  }

  .stemtp-future-card {
    padding: 0 8px 16px;
    text-align: center;
  }

  .stemtp-future-card ul {
    display: inline-block;
    text-align: left;
  }

  .stemtp-values-strip {
    grid-template-columns: 1fr;
  }

  .stemtp-value-item {
    justify-content: center;
    text-align: left;
  }

  .stemtp-value-item:nth-last-child(-n+1) {
    border-bottom: 1px solid rgba(7, 16, 68, 0.12);
  }

  .stemtp-value-item-last {
    border-bottom: 0 !important;
  }

  .stemtp-cta-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .stemtp-cta-actions {
    gap: 12px;
  }

  .stemtp-btn {
    width: 100%;
  }

  .stemtp-plane {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .stemtp-hero-title {
    font-size: 2.9rem;
  }

  .stemtp-spark-one,
  .stemtp-spark-two,
  .stemtp-spark-three {
    display: none;
  }

  .stemtp-hero-subtitle {
    font-size: 1.04rem;
  }

  .stemtp-hero-image-wrap,
  .stemtp-hero-image {
    height: 220px;
    min-height: 220px;
  }

  .stemtp-leader-info h3 {
    font-size: 1.32rem;
  }

  .stemtp-role {
    font-size: 0.98rem;
  }

  .stemtp-profile-card,
  .stemtp-instructor-card {
    min-height: auto;
  }

  .stemtp-future-card {
    min-height: auto;
  }

  .stemtp-cta-section {
    padding: 22px 18px;
  }
}

.stemtp-card-active {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(7, 16, 68, 0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Bootstrap Icons alignment fix */
.stemtp-icon.bi::before,
.stemtp-icon[class^="bi-"]::before,
.stemtp-icon[class*=" bi-"]::before {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
}

.stemtp-leaf-badge .stemtp-icon {
  width: 1em;
  height: 1em;
  font-size: 0.92rem;
}