/*intro section*/
body{ background: var(--od-white); }

/* Shared container geometry — header and banner content sit on one left edge. */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.page-head{ padding-top: 20px; }

/* ---------- Banner ---------- */
.databanner{
  /*background-color: var(--od-black); */
  background-image: var(--hero-art);   /* path is set on the section tag */
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 110%;
	margin-top: 72px;
	padding-bottom: 60px;
}

.databanner__inner{
  display: flex;
  align-items: center;
  min-height: clamp(480px, 42vw, 640px);
}

/* Mobile-only art. Hidden on desktop, where the photo is the section
   background instead. */
.databanner__art{ display: none; }

/* Diagonal-cut panel: square on one diagonal, --r-xl on the other. */
.databanner__panel{
  background: var(--myt-blue);
  color: var(--od-white);
  border-radius: 0 var(--r-xl) 0 var(--r-xl);
  padding: clamp(36px, 3.4vw, 56px) clamp(30px, 3vw, 52px);
  /*width: min(52%, 580px); */
}

.databanner__panel h1{
  color: var(--myt-aqua);
  font-weight: var(--fw-bold);
  margin: 0 0 30px;
}

.databanner__q{
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  color: var(--od-white);
  margin: 0 0 22px;
}

.databanner__body{
  font-size: var(--fs-bodysmall);
  line-height: var(--lh-body);
  color: rgba(255,255,255,.9);
  margin: 0 0 30px;
  /*max-width: 36ch;*/
}

.databanner .btn-dark{ font-weight: var(--fw-semibold); }
.databanner .btn-dark:hover{ background: var(--od-white); color: var(--od-black); }

/* ---------- Tablet + Mobile (stacked layout) ---------- */
@media (max-width: 1100px){
  :root .p-6{ padding: 1.9rem !important; }
  .wrap{ padding: 0 12px; }
  .page-head{ padding-top: 12px; }

  .databanner{
    background-image: none;             /* photo-as-bg off */
    background-color: var(--od-white);
    margin-top: 104px;
    padding-bottom: 0;                  /* kill extra space below image */
  }

  .databanner__inner{
    display: block;
    min-height: 0;
  }

  .databanner__panel{
    width: auto;                        /* full width */
    border-radius: 0 var(--r-sm) 0 var(--r-sm);
    padding: 32px 24px;
  }

  .databanner__panel h1{ margin-bottom: 24px; }
  .databanner__q{ margin-bottom: 18px; }
  .databanner .btn{ width: 100%; justify-content: center; }

  /* Photo, full-bleed, directly beneath the panel */
  .databanner__art{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 90px;
    padding: 30px 30px 0 30px;          /* no bottom padding */
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px){
  :root .p-6{ padding: 1.9rem !important; }

  .wrap{ padding: 0 12px; }
  .page-head{ padding-top: 12px; }

  .databanner{
    background-image: none;             /* desktop art off */
    background-color: var(--od-white);
    margin-top: 104px;
  }

  .databanner__inner{
    display: block;
    min-height: 0;
  }

  .databanner__panel{
    width: auto;
    border-radius: 0 var(--r-sm) 0 var(--r-sm);
    padding: 32px 24px;
  }
  .databanner__panel h1{ margin-bottom: 24px; }
  .databanner__q{ margin-bottom: 18px; }
  .databanner .btn{ width: 100%; justify-content: center; }

  /* Photo, full-bleed, directly beneath the panel. */
	.databanner__art {
	        display: block;
	        width: 100%;
	        height: auto;
	        /* margin-top: 18px; */
	        border-radius: 50px;
	        padding: 30px;
	    }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .001ms !important; }
}

.prodfeat { background: none !important;}


.bcard .ic {
    width: 80px!important;
    height: 80px!important;
}