/* ============================================================
   OSTEOCARE — catalogue styles
   Loaded once for the whole site. Previously this lived inside an
   Elementor HTML widget duplicated on every product page.
   ============================================================ */

:root {
  --oc-navy: #1B2A6B;
  --oc-navy-dark: #111D4E;
  --oc-navy-light: #2A3F8F;
  --oc-red: #E63B2E;
  --oc-red-dark: #C42F24;
  --oc-white: #FFFFFF;
  --oc-off-white: #F8F9FC;
  --oc-gray-50: #F1F3F8;
  --oc-gray-100: #E4E8F0;
  --oc-gray-300: #9AA3B4;
  --oc-gray-500: #4A5568;
  --oc-gray-600: #2D3748;
  --oc-font-heading: 'Playfair Display', Georgia, serif;
  --oc-font-body: 'DM Sans', -apple-system, sans-serif;
}

/* ---------- Ordering Information / Related Instruments ---------- */

.woocommerce-Tabs-panel h3,
.oc-catalog-tables h3,
.elementor-widget-woocommerce-product-content h3 {
  font-family: var(--oc-font-heading);
  color: var(--oc-navy-dark);
  font-size: 28px;
  font-weight: 600;
  margin: 40px 0 16px;
}
.elementor-widget-woocommerce-product-content h3:first-child { margin-top: 0; }

table.catalog-table {
  width: 100%;
  /* fixed layout keeps the Catalog No. column the same width on every table, so
     Ordering Information and Related Instruments line up with one another */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--oc-gray-100);
  font-family: var(--oc-font-body);
}
table.catalog-table thead { background: var(--oc-navy); }
table.catalog-table thead th {
  padding: 16px 20px;
  color: var(--oc-white);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}
table.catalog-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--oc-gray-100);
  color: var(--oc-gray-500);
  vertical-align: top;
}
table.catalog-table tbody tr:last-child td { border-bottom: none; }
table.catalog-table tbody tr:nth-child(odd) { background: var(--oc-off-white); }
/* catalogue numbers: brand red, tabular so they align down the column */
table.catalog-table thead th:first-child,
table.catalog-table tbody td:first-child { width: 220px; }
table.catalog-table tbody td:first-child {
  color: var(--oc-red-dark);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* narrow screens: let the table scroll rather than the page */
.elementor-widget-woocommerce-product-content .elementor-widget-container,
.oc-catalog-tables { overflow-x: auto; }

/* ---------- Product archive: the circle cards ---------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--oc-white);
  border: 1px solid var(--oc-gray-100);
  border-radius: 16px;
  padding: 24px 18px 22px;
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 14px 32px rgba(27, 42, 107, .12);
  transform: translateY(-3px);
}
/* card contents stack, so the title can sit in a fixed-height band */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  /* product images already carry their circular frame */
  background: transparent;
}
/* Reserve two lines for every title. Names run from "OC Curette" to
   "OC TBAfix(TM) Button Knotless Rope Quad", so without this a single
   wrapping name stretches its whole grid row and the short names in that
   row are left with dead space beneath them. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--oc-font-heading);
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--oc-navy);
  padding: 0 !important;
  margin: 0;
  min-height: calc(1.35em * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--oc-red-dark); }

/* belt and braces: catalogue mode removes these server-side too */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce div.product p.price,
.woocommerce div.product .stock { display: none !important; }

/* sub-category tiles use the same card */
.woocommerce ul.products li.product-category a { text-decoration: none; }
.woocommerce ul.products li.product-category h2 {
  font-family: var(--oc-font-heading);
  font-size: 18px !important;
  color: var(--oc-navy);
  margin: 0;
}
.woocommerce ul.products li.product-category mark.count { display: none; }

/* ---------- Single product ---------- */

.woocommerce div.product .product_title {
  font-family: var(--oc-font-heading);
  color: var(--oc-navy-dark);
  font-weight: 600;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--oc-gray-500);
  line-height: 1.75;
}
/* ---------- Breadcrumb pill, as on the legacy pages ---------- */

.woocommerce-breadcrumb.oc-breadcrumb,
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--oc-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--oc-navy-dark);
  background: rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 10px 22px;
  margin: 0;
}
.woocommerce-breadcrumb.oc-breadcrumb a { color: var(--oc-navy-dark); text-decoration: none; }
.woocommerce-breadcrumb.oc-breadcrumb a:hover { color: var(--oc-red-dark); }
.woocommerce-breadcrumb.oc-breadcrumb .oc-crumb-sep {
  color: var(--oc-gray-300);
  font-weight: 400;
  padding: 0 2px;
}
/* the trailing crumb is the current page, so it reads quieter */
.woocommerce-breadcrumb.oc-breadcrumb { color: var(--oc-gray-500); }

/* centre it inside the hero band */
.oc-archive-hero .elementor-widget-woocommerce-breadcrumb { text-align: center; }

/* ---------- Archive hero ---------- */

.oc-archive-hero h1 {
  font-family: var(--oc-font-heading);
  color: var(--oc-navy-dark);
  font-weight: 600;
  text-align: center;
  margin: 0;
}

@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
  table.catalog-table thead th,
  table.catalog-table tbody td { padding: 12px 14px; font-size: 13px; }
}

/* ---------- Leadership cards (Our Team) ---------- */

/* Designation sits directly under the name, set apart from the prose by
   case and colour rather than by another type size. */
.oc-role {
  font-family: var(--oc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oc-red-dark);
  margin: 2px 0 14px;
}
.oc-role::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--oc-red);
  margin: 12px auto 0;
}
.oc-exp {
  font-size: 15px;
  line-height: 1.65;
  color: var(--oc-gray-600);
  margin: 0 0 12px;
}
.oc-core {
  font-size: 14px;
  line-height: 1.6;
  color: var(--oc-gray-500);
  margin: 0 0 8px;
}
/* the label reads as a heading for its value without becoming another
   type size in the stack */
.oc-core-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oc-navy);
  margin-bottom: 3px;
}

/* ---------- Literature downloads ---------- */

/* A document list, not a picture gallery: the useful facts about a PDF are
   its subject, length and weight, so those lead. */
.oc-dl { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }

.oc-dl-row {
  background: var(--oc-white);
  border: 1px solid var(--oc-gray-100);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.oc-dl-row:hover { border-color: var(--oc-gray-200, #C8CFD8); box-shadow: 0 6px 20px rgba(27,42,107,.07); }
.oc-dl-row.is-open { border-color: var(--oc-navy); box-shadow: 0 10px 30px rgba(27,42,107,.12); }

.oc-dl-main {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 22px;
}
.oc-dl-txt { flex: 1 1 auto; min-width: 0; }
.oc-dl-txt h3 {
  font-family: var(--oc-font-heading);
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--oc-navy-dark); margin: 0 0 6px;
}
.oc-dl-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--oc-font-body);
  font-size: 12px; letter-spacing: .04em; color: var(--oc-gray-300);
  margin: 0; text-transform: uppercase;
}
.oc-dl-meta span + span::before { content: "·"; margin-right: 8px; color: var(--oc-gray-200, #C8CFD8); }

/* One rule for both button variants. A <button> does not inherit font or
   box-sizing from the page the way an <a> does, so every property is stated
   explicitly - otherwise the two download pages drift apart. */
.oc-dl .oc-dl-btn,
.oc-dl a.oc-dl-btn,
.oc-dl button.oc-dl-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  font-family: var(--oc-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: var(--oc-white);
  background: var(--oc-navy);
  /* transparent border reserves the space the hover border occupies, so the
     button does not resize on hover */
  border: 2px solid var(--oc-navy);
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.oc-dl .oc-dl-btn:hover,
.oc-dl .oc-dl-btn:focus-visible {
  background: var(--oc-white);
  color: var(--oc-navy);
  border-color: var(--oc-navy);
}
.oc-dl .oc-dl-btn:focus-visible { outline: 3px solid rgba(27, 42, 107, .25); outline-offset: 2px; }
.oc-dl-row.is-open .oc-dl-btn {
  background: var(--oc-white);
  color: var(--oc-navy);
  border-color: var(--oc-navy);
}

/* the form is part of the row it belongs to, so the request is never
   detached from the document being requested */
.oc-dl-form {
  display: none;
  padding: 4px 22px 24px;
  border-top: 1px solid var(--oc-gray-100);
  margin-top: 0;
}
.oc-dl-row.is-open .oc-dl-form { display: block; }
.oc-dl-lead { font-size: 14px; color: var(--oc-gray-500); margin: 16px 0 14px; }
.oc-dl-error {
  font-size: 14px; color: var(--oc-red-dark); font-weight: 600;
  background: #FBEEEC; border-radius: 8px; padding: 10px 14px; margin: 16px 0 0;
}
.oc-dl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.oc-dl-grid label { display: flex; flex-direction: column; gap: 5px; }
.oc-dl-grid span {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oc-gray-400, #6B7689);
}
.oc-dl-grid label.req span::after { content: " *"; color: var(--oc-red); }
.oc-dl-grid input {
  font-family: var(--oc-font-body); font-size: 15px;
  color: var(--oc-gray-600); background: var(--oc-off-white);
  border: 1px solid var(--oc-gray-100); border-radius: 8px;
  padding: 11px 13px; width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.oc-dl-grid input:focus {
  outline: none; background: var(--oc-white);
  border-color: var(--oc-navy); box-shadow: 0 0 0 3px rgba(27,42,107,.10);
}
.oc-dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.oc-dl-submit {
  font-family: var(--oc-font-body); font-size: 14px; font-weight: 600; letter-spacing: .03em;
  color: var(--oc-white); background: var(--oc-red);
  border: 0; border-radius: 999px; padding: 13px 30px; cursor: pointer;
  transition: background .2s ease;
}
.oc-dl-submit:hover, .oc-dl-submit:focus-visible { background: var(--oc-red-dark); }
.oc-dl-note { font-size: 12.5px; color: var(--oc-gray-300); }

@media (max-width: 560px) {
  .oc-dl-main { flex-direction: column; align-items: flex-start; gap: 14px; }
  .oc-dl-btn { width: 100%; text-align: center; }
}

/* The kit's link typography sets font-weight on <a>, which outranks the
   shared .oc-dl-btn rule and left the technique buttons lighter than the
   brochure ones. Matched here at equal-or-higher specificity. */
/* an inline site stylesheet declares  h1..h6, a { font-weight:400 !important }
   so the anchor variant can only be matched with !important of its own */
.oc-dl .oc-dl-row a.oc-dl-btn,
.oc-dl .oc-dl-row a.oc-dl-btn:link,
.oc-dl .oc-dl-row a.oc-dl-btn:visited {
  font-weight: 600 !important;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .02em;
}

/* ---------- PDF cover thumbnail ---------- */

/* The first page tells the reader what they are getting far faster than a
   title does, so it leads the row - but stays small enough that the list
   still reads as a list rather than a gallery. */
.oc-dl-cover {
  flex: 0 0 auto;
  width: 92px;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--oc-gray-50);
  box-shadow: 0 2px 10px rgba(27, 42, 107, .14);
  transition: transform .22s ease, box-shadow .22s ease;
}
.oc-dl-cover img {
  display: block;
  width: 100%;
  height: auto;
  /* covers are portrait; crop tall ones so every row matches */
  aspect-ratio: 440 / 570;
  object-fit: cover;
  object-position: top center;
}
.oc-dl-row:hover .oc-dl-cover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 42, 107, .22);
}
.oc-dl-main { align-items: center; }

@media (max-width: 560px) {
  .oc-dl-main { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .oc-dl-cover { width: 64px; }
  .oc-dl-txt { flex: 1 1 60%; }
  .oc-dl .oc-dl-btn { width: 100%; }
}

/* ---------- Downloads: empty state ---------- */

/* A downloads page can be published before its files exist. Without this the
   page renders as a bare title, which reads as a bug rather than as "not yet". */
.oc-dl-empty {
  border: 1px dashed var(--oc-gray-200, #c8cfd8);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.oc-dl-empty h3 {
  font-family: var(--oc-font-heading);
  color: var(--oc-navy-dark);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.oc-dl-empty p {
  font-family: var(--oc-font-body);
  color: var(--oc-gray-300);
  font-size: 15px;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0;
}
/* Repeats the .oc-dl button rather than reusing it: the shared rule is scoped
   to .oc-dl rows, and the site declares a { font-weight:400 !important }. */
.oc-dl-empty a.oc-dl-btn,
.oc-dl-empty a.oc-dl-btn:link,
.oc-dl-empty a.oc-dl-btn:visited {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  margin-top: 6px;
  font-family: var(--oc-font-body);
  font-size: 15px;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--oc-white);
  background: var(--oc-navy);
  border: 2px solid var(--oc-navy);
  border-radius: 999px;
  padding: 13px 30px;
  transition: background .18s ease, color .18s ease;
}
.oc-dl-empty a.oc-dl-btn:hover,
.oc-dl-empty a.oc-dl-btn:focus-visible {
  background: var(--oc-white);
  color: var(--oc-navy);
}
.oc-dl-empty a.oc-dl-btn:focus-visible {
  outline: 3px solid rgba(27, 42, 107, .25);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .oc-dl-empty { padding: 40px 20px; }
  .oc-dl-empty a.oc-dl-btn { width: 100%; }
}


/* ---------- Newsletter posts ---------- */

.oc-post-fig { margin: 30px 0; }
.oc-post-fig img { display: block; width: 100%; height: auto; border-radius: 10px; }

.oc-post-tablewrap { overflow-x: auto; margin: 26px 0; }
table.oc-post-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--oc-gray-100);
  font-family: var(--oc-font-body);
  font-size: 14px;
}
table.oc-post-table thead { background: var(--oc-navy); }
table.oc-post-table thead th {
  padding: 14px 16px;
  color: var(--oc-white);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  vertical-align: bottom;
}
table.oc-post-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--oc-gray-100);
  color: var(--oc-gray-500);
  vertical-align: top;
}
table.oc-post-table tbody tr:last-child td { border-bottom: none; }
table.oc-post-table tbody tr:nth-child(odd) { background: var(--oc-off-white); }
table.oc-post-table tbody td:first-child { font-weight: 600; color: var(--oc-navy-dark); }

/* ---------- Newsletter preview index ---------- */

.oc-np { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.oc-np-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--oc-gray-100);
  border-radius: 14px; overflow: hidden;
  background: var(--oc-white); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.oc-np-card:hover { border-color: var(--oc-navy); transform: translateY(-2px); }
.oc-np-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--oc-off-white); }
.oc-np-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-np-txt { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 22px; }
.oc-np-date {
  font-family: var(--oc-font-body); font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--oc-red-dark);
}
.oc-np-title {
  font-family: var(--oc-font-heading); font-size: 17px;
  font-weight: 600 !important; line-height: 1.35; color: var(--oc-navy-dark);
}
@media (prefers-reduced-motion: reduce) {
  .oc-np-card { transition: none; }
  .oc-np-card:hover { transform: none; }
}


/* ---------- Newsletter article typography ----------
   The Elementor kit sets h1 63px / h2 48px site-wide, which suits landing
   sections but is far too large for an article. Scoped to posts only, so
   product and marketing pages are untouched. Specificity is deliberately
   (0,2,2) to outrank `.elementor-kit-11 h2`. */

body.single-post .page-header .entry-title {
  font-size: 34px;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 8px;
}
body.single-post .page-content { font-size: 16.5px; line-height: 1.75; }
body.single-post .page-content p { margin: 0 0 18px; }
body.single-post .page-content h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 38px 0 12px;
}
body.single-post .page-content h3 {
  font-size: 19px;
  line-height: 1.35;
  margin: 28px 0 10px;
}
body.single-post .page-content li { font-size: 16.5px; line-height: 1.7; margin-bottom: 6px; }
body.single-post .page-content ul { margin: 0 0 18px; padding-left: 22px; }

@media (max-width: 767px) {
  body.single-post .page-header .entry-title { font-size: 27px; }
  body.single-post .page-content            { font-size: 16px; }
  body.single-post .page-content h2         { font-size: 21px; }
  body.single-post .page-content h3         { font-size: 18px; }
  body.single-post .page-content li         { font-size: 16px; }
}

/* ---------- Footer: contact + addresses ----------
   Two problems here. The kit renders these headings as h4 (24px) with 16px body
   text - landing-page scale in a footer. And the address container is a flex
   column with one uniform gap, so "Head Office" sat exactly as far from its own
   address as from the block above it, which reads as three loose lines rather
   than three groups. Sizes come down; spacing is rebuilt so each heading binds
   to its own address and the groups separate.

   Elementor's generated rules for these widgets run to (0,7,0), so the spacing
   overrides carry a `body` prefix to outrank them without !important. */

body .elementor-50 .elementor-element-59c73525 .elementor-heading-title {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0;
}
body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-text,
body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-item > a {
  font-size: 13px;
  line-height: 1.5;
}

/* group the addresses: tight under the heading, clear space between blocks */
body .elementor-50 .elementor-element-f01c482,
body .elementor-50 .elementor-element-29caea9f { gap: 0; }

body .elementor-50 .elementor-element-f01c482 > .elementor-widget-heading { margin-bottom: 5px; }
body .elementor-50 .elementor-element-f01c482 > .elementor-widget-icon-list { margin-bottom: 20px; }
body .elementor-50 .elementor-element-f01c482 > .elementor-widget-icon-list:last-child { margin-bottom: 0; }
body .elementor-50 .elementor-element-29caea9f > .elementor-widget-heading { margin-bottom: 7px; }

/* rows inside the lists: Elementor spaces them 10px apart and centres the icon
   against the whole block, which drops the pin below the first line of a
   wrapped address */
body .elementor-50 .elementor-element.elementor-element-59c73525 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  padding-block-end: 4px;
}
body .elementor-50 .elementor-element.elementor-element-59c73525 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
  margin-block-start: 4px;
}
body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-item {
  align-items: flex-start;
}
body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-icon {
  margin-top: 3px;
}

/* the brand line on the left reads as five loose lines at kit body size */
body .elementor-50 .elementor-element-18a9bab3 {
  font-size: 13.5px;
  line-height: 1.6;
}
body .elementor-50 .elementor-element-1491b1dd { font-size: 12.5px; }

@media (max-width: 767px) {
  body .elementor-50 .elementor-element-59c73525 .elementor-heading-title { font-size: 14.5px; }
  body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-text,
  body .elementor-50 .elementor-element-59c73525 .elementor-icon-list-item > a { font-size: 12.5px; }
  body .elementor-50 .elementor-element-f01c482 > .elementor-widget-icon-list { margin-bottom: 16px; }
}


/* ---------- Blog cards (blogs page + homepage News & Insights) ----------
   Post titles render as h3, which the kit sets to 26px, and the meta and excerpt
   inherit the 16px body size - card content at article scale. Scoped to the two
   posts widgets so nothing else moves. */

body .elementor-element-4f8a083e .elementor-post__title,
body .elementor-element-72e1cf91 .elementor-post__title {
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -.005em;
  margin: 0 0 8px;
}
body .elementor-element-4f8a083e .elementor-post__title a,
body .elementor-element-72e1cf91 .elementor-post__title a {
  font-size: inherit;
  line-height: inherit;
}
body .elementor-element-4f8a083e .elementor-post__meta-data,
body .elementor-element-72e1cf91 .elementor-post__meta-data {
  font-size: 12px;
  letter-spacing: .02em;
  margin: 0 0 10px;
}
body .elementor-element-4f8a083e .elementor-post__excerpt p,
body .elementor-element-72e1cf91 .elementor-post__excerpt p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}
body .elementor-element-4f8a083e .elementor-post__read-more,
body .elementor-element-72e1cf91 .elementor-post__read-more {
  font-size: 13px;
  font-weight: 600 !important;   /* the site declares a { font-weight:400 !important } */
  letter-spacing: .01em;
}
body .elementor-element-4f8a083e .elementor-post__text,
body .elementor-element-72e1cf91 .elementor-post__text {
  padding: 18px 20px 20px;
}

@media (max-width: 767px) {
  body .elementor-element-4f8a083e .elementor-post__title,
  body .elementor-element-72e1cf91 .elementor-post__title { font-size: 17px; }
  body .elementor-element-4f8a083e .elementor-post__excerpt p,
  body .elementor-element-72e1cf91 .elementor-post__excerpt p { font-size: 13.5px; }
}


/* ---------- Academy: Training Programs cards ----------
   The image boxes had a fixed 250px height while their width changed with the
   screen (about 246px on a laptop, 466px on a tablet), so each background image
   was cropped differently at every size. A square box keeps the designer's
   1000x1000 framing intact everywhere. */
body .elementor-118 .elementor-element.elementor-element-98b5d54,
body .elementor-118 .elementor-element.elementor-element-dc4d503,
body .elementor-118 .elementor-element.elementor-element-49b26d9,
body .elementor-118 .elementor-element.elementor-element-9285c40,
body .elementor-118 .elementor-element.elementor-element-fdbb396 {
  --min-height: 0px;
  min-height: 0;
  aspect-ratio: 1 / 1;
}