.ou-component-person-profile .person {padding: 1rem; border: 1px solid #dee2e6; background-color:#fff; margin-bottom:1rem;}
.ou-component-person-profile .person .pr-2 {padding-right:.5rem;}
.ou-component-person-profile .person .expandTab {padding: 0.5rem; background-color: #f6f6f6; border-radius: 3px;}
.ou-component-person-profile .person .expandTab a.expander {font-weight: bold; text-decoration: none;}
.ou-component-person-profile .person .expandTab a.expander span.fa.fa-plus-square.fa-2x {float: right; font-size: 1.6rem;}
.ou-component-person-profile .person .moreInfo p.card-text {padding:0.5rem; margin-top:0.5rem;}
.box-wrapper.themeOne .btn-warning {color:#000 !important;}
#compliance .feature-box.f-style {border:3px solid #ffcd00;}
#compliance .feature-box.f-style .feature-box-icon {padding:0px 0;}
/* Banner header on program review pages */
    :root{
      --box-bg: #0b4f81;
      --box-text: #ffffff;
      --flag-bg: #a7e8f8;         /* light blue fill for date and notch */
      --stroke: #0b2230;          /* dark outline color */
      --step-width: 180px;
      --step-border-w: 3px;

      /* tuning knobs */
      --date-font: 0.9rem;
      --date-padding: 0.6rem;
      --notch-depth: 1.0rem;      /* controls vertical size of the clip notch */
      --notch-offset: 4px;        /* gap between bottom of date and top of notch */
      --notch-stroke-expand: 6px; /* how much larger stroke is than fill (keeps outline visible) */
      --arrow-offset-right: 22px;
    }

 /* container */
.timeline {padding: 2rem 2rem 4rem 2rem; background: url("/accreditation-assessment/images/patterns/dot_tile_white.png") repeat, linear-gradient(90deg,#f5d438 0,#bfe6dd 35%,#7fd3e9 65%,#3b81a8 100%); box-sizing: border-box;}
.timeline-steps {margin: 0; padding: 0; list-style: none; display: flex; gap: 28px; align-items: flex-start; justify-content: center;}
/* === keep your .step exactly === */
.step { position: relative; background: var(--box-bg); color: var(--box-text); padding: 1rem; width: var(--step-width); text-align: center; border-radius: 0; font-weight: 600; border: var(--step-border-w) solid var(--stroke); box-sizing: border-box; overflow: visible; /* allow notch + arrows */ }
.label { margin: 0 0 0.35rem 0; font-weight:700; font-size:.9rem; color:var(--box-text); }
/* ensure there's visual breathing room in the flow (optional) */
.step { margin-bottom: 0.4rem; }
/* === date bar: live DOM element, sits below the .step === */
.date { position: absolute; left: 0; top: 100%; /* start right after .step */ width: 100%; background: var(--flag-bg); color: #000; font-weight: 800; font-size: var(--date-font); text-align: center; padding: var(--date-padding) 0; z-index: 40; /* on top of notch and stroke */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}

/* === notch stroke and fill are separate sibling elements for precise control ===
   - .date-notch-stroke is placed slightly lower and larger so the dark outline peeks
   - .date-notch is the light-blue clip shape (exact clip-path you wanted)
   Position: top = 100% + date height + notch-offset (done via translateY for reliability)
*/
.date-notch, .date-notch-stroke { position: absolute; left: 0; top: 100%; /* start at end of .step */ width: 100%; height: calc(var(--notch-depth) + var(--notch-stroke-expand)); /* stroke element will be larger visually */ pointer-events: none; transform: translateY(calc(var(--date-padding) + var(--notch-offset))); /* push below date bar */ box-sizing: border-box;}

/* stroke: dark outline — slightly larger and placed behind the fill */
.date-notch-stroke { z-index: 30; /* above step but below fill and date text */ background: transparent; display: block;}

 /* Fill: the light-blue clip-path shape (exact polygon you gave earlier) */
.date-notch { z-index: 35; /* above stroke, below .date (z-index:40) */ background: var(--flag-bg);
 /* YOUR clip-path (literal from your earlier message) — points form a ribbon V */
      clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - .5em) 100%, 50% calc(100% - var(--notch-depth)), .5em 100%, 0 100%); /* To create a visible dark outline behind the clip shape, we'll add a pseudo inside the stroke element (below) */ }

 /* Instead of scaling (which created the top band before), we create the stroke by placing a slightly larger dark shape behind the blue fill */
.date-notch-stroke::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--notch-depth) + var(--notch-stroke-expand)); background: var(--stroke);
 /* use same shape but slightly larger by offsetting the inner x points */
 clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - .6em) 100%, 50% calc(100% - calc(var(--notch-depth) + 0.12em)), .6em 100%, 0 100% ); pointer-events: none; display: block; z-index: 31;}

    /* small tweak so stroke does not create a top band: make sure top area of clip paths start at 0 */
    /* right-side arrow (unchanged) */
    .step-arrow { position: absolute; right: calc(-1 * var(--arrow-offset-right)); top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 22px solid var(--box-bg); z-index: 45; box-shadow: -3px 0 0 0 var(--stroke); pointer-events: none;}
.timeline-steps .step:last-child .step-arrow { display: none; }
  /* responsive fallback */
  @media (max-width: 560px) {
      .timeline-steps { flex-direction: column; gap: 28px; align-items: center; }
      .date { position: relative; top: 0; padding: .6rem 0; }
      .date-notch, .date-notch-stroke { display: none; transform: none; }
      .step-arrow { display: none; }
      .step { width: min(92%, 420px); }
    }