:root{
      --brand: rgb(109,60,94); /* #6d3c5e */
      --brand-100: rgba(109,60,94,.08);
      --brand-200: rgba(109,60,94,.12);
      --text: #2b2b2b;
    }
    html,body{ font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif; color: var(--text);}

    .page-wrap{ padding-block: 2.5rem 4rem; }
    .eyebrow{ letter-spacing:.08em; font-weight:700; font-size:.8rem; color: var(--brand); text-transform:uppercase; }
    .heading{ font-weight:900; color:#1c1c1c; }
    .leadish{ font-size:1.1rem; line-height:1.75; }

    /* Section spacing */
    section{ padding-block: 2.25rem; }
    section + section{ border-top: 1px solid #eee; }

    /* Brand accents */
    .accent-left{
      position: relative;
      padding-left: 1rem;
    }
    .accent-left:before{
      content:"";
      position: absolute;
      inset: 0 auto 0 0;
      width: .35rem;
      border-radius: .25rem;
      background: linear-gradient(180deg, var(--brand), #432439);
    }

    .btn-brand{
      --bs-btn-bg: var(--brand);
      --bs-btn-border-color: var(--brand);
      --bs-btn-hover-bg: #5c3150;
      --bs-btn-hover-border-color: #5c3150;
      --bs-btn-active-bg: #4a2742;
      --bs-btn-active-border-color: #4a2742;
      --bs-btn-disabled-bg: var(--brand);
      --bs-btn-disabled-border-color: var(--brand);
      color: #fff;
    }

    /* Media blocks */
    .media-card img {
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: .75rem;
  max-width: 90%;   /* shrink image a bit */
  margin: 0 auto;   /* center the image */
  display: block;   /* ensure centering works */
  margin-bottom: 1.5rem; /* space before divider */
}

    /* Callout cards */
    .callout{
      background: linear-gradient(180deg, var(--brand-100), var(--brand-200));
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 1rem;
    }

    /* Simple form look (non-functional placeholder) */
    .form-control:focus{
      box-shadow: 0 0 0 .25rem rgba(109,60,94,.15);
      border-color: var(--brand);
    }

    /* Small utility */
    .muted{ color:#6b6b6b; }

    body{font-optical-sizing:auto;
         --bs-body-font-family: 'Lato', sans-serif;
         font-size: 1.10rem;
         line-height: 1.5;
         background-color: #f2eef5;
    }

    /* Hero */
    .hero{
      position:relative;
      min-height:36vh;
      display:grid;
      place-items:center;
      color:#fff;
      text-align:center
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      /* Eye exam themed image */
      background:url('/mceyeclinic/images/clinic-color-banner.png') center/cover no-repeat;
      filter:brightness(.55)
    }
    .hero .inner{position:relative;z-index:1}
/* Breadcrumbs (scoped) */
    .disclaimer-breadcrumbs {
      background: #fff;
      border: 1px solid #eee;
      border-left: 4px solid var(--clinic-purple);
      border-radius: .5rem;
      padding: .5rem .75rem;
      margin-bottom: 1rem;
    }
    .disclaimer-breadcrumbs .breadcrumb { margin: 0; }
    .disclaimer-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: #888; }
    .disclaimer-breadcrumbs a { color: var(--clinic-purple); text-decoration: none; }
    .disclaimer-breadcrumbs a:hover { text-decoration: underline; }
    .frame-carousel {
      --gap: 1.25rem;
      --card-bg: #fff;
      --arrow-bg: rgba(255,255,255,.96);
      --arrow-shadow: 0 10px 24px rgba(0,0,0,.22);
      --brand: #6d3c5e; /* clinic mauve */
    }
    .frame-carousel * { box-sizing: border-box; }

    .frame-carousel .wrap { position: relative; }

    .frame-carousel .viewport {
      overflow: hidden;
      width: 100%;
      border-radius: 1rem;
      background:  white;
      border: 2px solid #6d3c5e;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      touch-action: pan-y;
      cursor: grab;
    }
    .frame-carousel .viewport.dragging { cursor: grabbing; }

    .frame-carousel .track {
      display: flex;
      align-items: center;
      gap: var(--gap);
      will-change: transform;
      padding: 1.25rem;
    }

    .frame-carousel .cardy {
      flex: 0 0 auto;
      width: clamp(220px, 30vw, 380px);
      background: var(--card-bg);
      border-radius: 1rem;
      border: 1px solid #eee0e9;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      padding: 1rem;
      transition: transform .2s ease;
    }
    .frame-carousel .cardy:hover { transform: translateY(-3px); }

    .frame-carousel .logo-box {
      width: 100%;
      aspect-ratio: 5/2;
      display: grid; place-items: center;
    }
    .frame-carousel img {
      max-width: 60%;
      max-height: 70%;
      object-fit: contain;
    }

    /* Overlay arrows (desktop/tablet only) */
    .frame-carousel .ctrl { pointer-events: none; }
    .frame-carousel .ctrl .btn-ghost {
      pointer-events: auto;
      position: absolute; top: 50%; transform: translateY(-50%);
      border: 0; border-radius: 9999px; width: 60px; height: 60px;
      display: grid; place-items: center; background: var(--arrow-bg);
      box-shadow: var(--arrow-shadow);
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      user-select: none;
      backdrop-filter: saturate(120%) blur(4px);
      border: 2px solid rgba(109,60,94,.18);
    }
    .frame-carousel .ctrl .btn-ghost:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 16px 30px rgba(0,0,0,.26); }
    .frame-carousel .ctrl .btn-prev { left: .5rem; }
    .frame-carousel .ctrl .btn-next { right: .5rem; }

    /* Make the link fill the card and stay centered */
.frame-carousel .cardy .logo-box {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

    .frame-carousel .ctrl .chev {
      width: 24px; height: 24px; display: block;
      fill: var(--brand);
    }

    @media (max-width: 767.98px) {
      .frame-carousel .ctrl { display: none; }
    }

    .frame-carousel .hint { font-size: .85rem; color: #6b6470; }

    .frame-carousel .cardy > a { display:block; inset:0; }

.purple {
    color: rgb(109,60,94);
}