/* ------------------------------------------------------------------
   Mentia Elements
   Widget styling + the site-wide motion layer.
   Brand values come from the Elementor Kit; these are fallbacks only, so
   changing a global colour in Elementor changes it here too.
   ------------------------------------------------------------------ */

:root {
  --mentia-navy: #22376f;
  --mentia-navy-deep: #1a2a55;
  --mentia-blue: #1b5e9b;
  --mentia-sky: #a3c0db;
  --mentia-orange: #d2682e;
  --mentia-marigold: #f5b324;
  --mentia-cream: #faf7f1;
  --mentia-ink: #1a2238;
  --mentia-muted: #5b6478;
  --mentia-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================================================================
   1 · Marker heading
   The underline sits BEHIND the glyphs — svg first, word on a higher layer.
   Visible by default so it is correct with no JavaScript.
   ================================================================== */

.mentia-marker-run { white-space: nowrap; }

.mentia-marker-heading {
  margin: 0;
  text-wrap: balance;
}

.mentia-marker {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: inherit; /* the word stays the heading colour */
}

.mentia-marker > svg {
  position: absolute;
  left: 4%;
  width: 92%;
  bottom: -0.12em;
  height: 0.38em;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  color: var(--mentia-marker-color, var(--mentia-orange)); /* stroke uses currentColor */
}

.mentia-marker__word {
  position: relative;
  z-index: 2;
  color: inherit;
}

/* Inherit the heading colour for the text, accent only for the line. */
.mentia-marker-heading .mentia-marker__word {
  color: currentColor;
}

.mentia-marker > svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* drawn by default — no-JS safe */
}

.mentia-marker.is-armed > svg path {
  stroke-dashoffset: 1;
}

.mentia-marker.is-armed.is-drawn > svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--mentia-ease) 0.12s;
}

/* ==================================================================
   2 · Comparison table
   ================================================================== */

.mentia-compare {
  --mentia-compare-accent: var(--mentia-orange);
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(26, 34, 56, 0.1);
  background: #fff;
}

.mentia-compare table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.mentia-compare th,
.mentia-compare td {
  padding: 16px 20px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(26, 34, 56, 0.07);
}

.mentia-compare tbody tr:last-child th,
.mentia-compare tbody tr:last-child td {
  border-bottom: 0;
}

.mentia-compare thead th {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mentia-muted);
  background: rgba(26, 34, 56, 0.035);
  border-bottom: 1px solid rgba(26, 34, 56, 0.12);
  white-space: nowrap;
}

.mentia-compare tbody th {
  font-weight: 600;
  color: var(--mentia-ink);
}

.mentia-compare td {
  text-align: center;
}

.mentia-compare thead th:not(:first-child) {
  text-align: center;
}

/* Our column, emphasised so the comparison reads at a glance. */
.mentia-compare.is-emphasised .is-ours {
  background: color-mix(in srgb, var(--mentia-compare-accent) 7%, transparent);
}

.mentia-compare.is-emphasised thead th.is-ours {
  color: var(--mentia-compare-accent);
  background: color-mix(in srgb, var(--mentia-compare-accent) 12%, transparent);
}

.mentia-compare__mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}

.mentia-compare__mark.is-yes {
  background: color-mix(in srgb, var(--mentia-compare-accent) 16%, transparent);
  color: var(--mentia-compare-accent);
}

.mentia-compare__mark.is-no {
  background: rgba(26, 34, 56, 0.06);
  color: rgba(26, 34, 56, 0.4);
}

.mentia-compare__text {
  font-size: 0.9375rem;
  color: var(--mentia-muted);
}

.mentia-compare__none {
  color: rgba(26, 34, 56, 0.25);
}

/* WordPress' own screen-reader class may not exist on every theme. */
.mentia-compare .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==================================================================
   3 · Ambient background
   One continuous softly-lit field behind the whole page, so sections sit
   transparent on top and there are no hard colour divides.
   ================================================================== */

.mentia-ambient {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #faf7f1 0%,
    #f4f7f9 16%,
    #faf6ef 34%,
    #f2f6f9 52%,
    #faf7f1 68%,
    #f6f1ea 84%,
    #f7f4ee 100%
  );
}

.mentia-ambient__glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  will-change: transform;
}

.mentia-ambient__glow[data-glow="1"] {
  width: 44vw; height: 44vw; top: -6%; left: -8%;
  background: var(--mentia-marigold); opacity: 0.22;
  animation: mentia-drift-a 26s ease-in-out infinite;
}
.mentia-ambient__glow[data-glow="2"] {
  width: 50vw; height: 50vw; top: 24%; right: -12%;
  background: var(--mentia-sky); opacity: 0.3;
  animation: mentia-drift-b 32s ease-in-out infinite;
}
.mentia-ambient__glow[data-glow="3"] {
  width: 36vw; height: 36vw; top: 52%; left: -6%;
  background: var(--mentia-orange); opacity: 0.12;
  animation: mentia-drift-c 30s ease-in-out infinite;
}
.mentia-ambient__glow[data-glow="4"] {
  width: 40vw; height: 40vw; top: 74%; right: -8%;
  background: var(--mentia-sky); opacity: 0.24;
  animation: mentia-drift-a 34s ease-in-out infinite;
}
.mentia-ambient__glow[data-glow="5"] {
  width: 34vw; height: 34vw; top: 90%; left: 10%;
  background: var(--mentia-marigold); opacity: 0.16;
  animation: mentia-drift-b 28s ease-in-out infinite;
}

/* Translate only — deliberately no scale().
   A blurred layer that moves is a cheap compositor operation; one that scales
   must be re-rendered from scratch every frame. The visual difference is
   negligible, the cost difference is not. */
@keyframes mentia-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(7vw, 5vh, 0); }
}
@keyframes mentia-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-6vw, 6vh, 0); }
}
@keyframes mentia-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(5vw, -5vh, 0); }
}

/* ==================================================================
   5 · Floating brand shapes
   Decorative only — hidden from assistive technology, outside the tab
   order, never over a control.
   ================================================================== */

.mentia-shapes {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

.mentia-shapes__item {
  position: absolute;
  width: var(--s, 60px);
  height: var(--s, 60px);
  opacity: 0.22;
  will-change: transform;
}

.mentia-shapes__item img,
.mentia-shapes__item svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==================================================================
   6 · Logo
   Mentia's wordmark image, sized from the widget's single font-size.
   ================================================================== */
.mentia-logo-wrap {
  display: flex;
  align-items: center;
}

.mentia-logo {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  line-height: 1;
}

.mentia-logo__img {
  display: block;
  height: 1.2em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Same artwork, flattened to white for navy and orange panels. */
.mentia-logo--white .mentia-logo__img {
  filter: brightness(0) invert(1);
}

.mentia-logo__link {
  display: inline-flex;
  max-width: 100%;
  text-decoration: none;
}

.mentia-logo__link:hover .mentia-logo__img {
  opacity: 0.85;
}

/* ==================================================================
   7 · Site header
   Transparent while the page is at the top, collapsing into a floating
   cream pill once scrolled. Elementor's sticky adds
   .elementor-sticky--effects past the effects offset — that class is the
   only hook, so the whole transition hangs off it.

   Set "Effects Offset" on the sticky container or the class is never
   added and the header simply stays transparent.
   ================================================================== */
.mentia-header {
  transition:
    background-color 300ms var(--mentia-ease),
    box-shadow 300ms var(--mentia-ease),
    border-radius 300ms var(--mentia-ease),
    border-color 300ms var(--mentia-ease),
    margin 300ms var(--mentia-ease),
    padding 300ms var(--mentia-ease),
    backdrop-filter 300ms var(--mentia-ease);
  border: 1px solid transparent;
  background-color: transparent;
}

.mentia-header.elementor-sticky--effects {
  background-color: color-mix(in srgb, var(--mentia-cream) 85%, transparent);
  border-color: color-mix(in srgb, var(--mentia-navy) 5%, transparent);
  border-radius: 999px;
  box-shadow: 0 8px 30px -12px rgba(34, 55, 111, 0.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Older browsers without color-mix still get a solid pill rather than none. */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
  .mentia-header.elementor-sticky--effects {
    background-color: var(--mentia-cream);
    border-color: rgba(34, 55, 111, 0.05);
  }
}

/* --- Navigation ---------------------------------------------------- */
.mentia-nav .elementor-nav-menu--main .elementor-item {
  position: relative;
  border-radius: 999px;
  letter-spacing: 0 !important;
  font-weight: 500;
  transition: background-color 200ms var(--mentia-ease), color 200ms var(--mentia-ease);
}

.mentia-nav .elementor-nav-menu--main .elementor-item:hover,
.mentia-nav .elementor-nav-menu--main .elementor-item.highlighted {
  background-color: rgba(34, 55, 111, 0.04);
  color: var(--mentia-navy);
}

/* Current page: a short orange rule under the label. */
.mentia-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--mentia-orange);
  opacity: 0;
  transform: translateX(-50%);
  transition: width 300ms var(--mentia-ease), opacity 300ms var(--mentia-ease);
}
.mentia-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item.elementor-item-active::after,
.mentia-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after {
  width: 20px;
  opacity: 1;
}
.mentia-nav .elementor-nav-menu--main > .elementor-nav-menu > li.mentia-nav-login > .elementor-item::after { display: none; }

/* Thin chevron that turns as the menu opens. */
.mentia-nav .elementor-nav-menu--main .sub-arrow { display: inline-flex; margin-left: 2px; }
.mentia-nav .elementor-nav-menu--main .sub-arrow i,
.mentia-nav .elementor-nav-menu--main .sub-arrow svg { font-size: 10px; width: 10px; height: 10px; transition: transform 300ms var(--mentia-ease); }
.mentia-nav .elementor-nav-menu--main li:hover > .elementor-item .sub-arrow i,
.mentia-nav .elementor-nav-menu--main li:hover > .elementor-item .sub-arrow svg,
.mentia-nav .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow i,
.mentia-nav .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow svg { transform: rotate(180deg); }

/* The regional Login group reads quieter than the main links. It is keyed
   to a menu-item class set in the WordPress menu, not to its position, so
   reordering the menu cannot break it. */
.mentia-nav .mentia-nav-login > .elementor-item {
  color: var(--mentia-blue);
}

.mentia-nav .mentia-nav-login > .elementor-item:hover {
  background-color: rgba(27, 94, 155, 0.06);
}

/* Submenu panel — matches the dropdown in the approved design. */
.mentia-nav .elementor-nav-menu--main .sub-menu {
  min-width: 240px !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border: 1px solid rgba(34, 55, 111, 0.06) !important;
  border-radius: 18px !important;
  background: rgba(250, 247, 241, 0.96) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px -16px rgba(34, 55, 111, 0.35) !important;
  animation: mentia-drop 220ms var(--mentia-ease);
}
.mentia-nav .elementor-nav-menu--main .sub-menu::before { /* hover bridge across the gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.mentia-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  border-radius: 12px;
  padding: 10px 16px !important;
  background: transparent !important;
  color: rgba(34, 55, 111, 0.78) !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  transition: background-color 200ms var(--mentia-ease), color 200ms var(--mentia-ease);
}
.mentia-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.mentia-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active {
  background: rgba(34, 55, 111, 0.05) !important;
  color: var(--mentia-navy) !important;
}
@keyframes mentia-drop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Phone/tablet menu: a floating cream card, not a full-bleed slab. */
.mentia-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  margin-top: 12px !important;
  padding: 10px;
  border: 1px solid rgba(34, 55, 111, 0.06);
  border-radius: 24px;
  background: rgba(250, 247, 241, 0.97) !important;
  box-shadow: 0 24px 50px -20px rgba(34, 55, 111, 0.4);
  overflow: hidden;
}
.mentia-nav .elementor-nav-menu--dropdown .elementor-item,
.mentia-nav .elementor-nav-menu--dropdown .elementor-sub-item {
  border-radius: 14px;
  padding: 12px 16px !important;
  background: transparent !important;
  color: var(--mentia-navy) !important;
  font-weight: 500;
  letter-spacing: 0 !important;
}
.mentia-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.mentia-nav .elementor-nav-menu--dropdown .elementor-sub-item:hover { background: rgba(34, 55, 111, 0.05) !important; }
.mentia-nav .elementor-menu-toggle { border-radius: 999px; padding: 8px; background: transparent; }

/* ==================================================================
   9 · Page building blocks
   Classes set on native Elementor containers and widgets (Advanced >
   CSS Classes). Content, images and links stay editable in Elementor;
   these only carry the brand craft Elementor has no control for —
   arch crops, grain, layered photo compositions, the pill buttons.
   ================================================================== */

/* --- Grain (shared by the dark and orange panels) ------------------- */
.mentia-grain { position: relative; isolation: isolate; overflow: hidden; }
.mentia-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

/* --- Eyebrow: small caps label with a leading dot ------------------- */
.elementor-widget.mentia-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  line-height: 1.3;
}
.mentia-eyebrow .elementor-heading-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* --- Display headings: the tight tracking of the approved design ---- */
.mentia-display .elementor-heading-title,
.mentia-display .mentia-marker-heading {
  letter-spacing: -0.028em;
  line-height: 1;
}

/* --- Buttons --------------------------------------------------------- */
.elementor-widget.mentia-btn .elementor-button {
  display: inline-flex;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-family: Roboto, sans-serif;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 1rem 2rem;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  border: 2px solid transparent;
  transition: transform 300ms var(--mentia-ease), background-color 300ms var(--mentia-ease),
    border-color 300ms var(--mentia-ease), color 300ms var(--mentia-ease);
}
.elementor-widget.mentia-btn .elementor-button:hover { transform: translateY(-2px); }
.e-con > .mentia-btn { flex-shrink: 0; }
.elementor-widget.mentia-btn--sm .elementor-button { padding: 0.7rem 1.4rem; font-size: 15px; }
.mentia-btn:not(.mentia-btn--plain) .elementor-button-text::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.5rem;
  vertical-align: -0.16em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 300ms var(--mentia-ease);
}
.mentia-btn .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }

.elementor-widget.mentia-btn--primary .elementor-button { background: var(--mentia-orange); color: #fff; box-shadow: 0 8px 24px -8px rgba(210, 104, 46, 0.6); }
.elementor-widget.mentia-btn--primary .elementor-button:hover { background: #c25c25; color: #fff; }
.elementor-widget.mentia-btn--outline .elementor-button { background: transparent; color: var(--mentia-navy); border-color: rgba(34, 55, 111, 0.2); }
.elementor-widget.mentia-btn--outline .elementor-button:hover { border-color: var(--mentia-navy); color: var(--mentia-navy); }
.elementor-widget.mentia-btn--white .elementor-button { background: #fff; color: var(--mentia-navy); }
.elementor-widget.mentia-btn--white .elementor-button:hover { background: #fff; color: var(--mentia-navy); }
.elementor-widget.mentia-btn--navy .elementor-button { background: var(--mentia-navy); color: #fff; }
.elementor-widget.mentia-btn--navy .elementor-button:hover { background: #1a2c5a; color: #fff; }

/* --- Text link with a round arrow chip ------------------------------ */
.mentia-arrow-link .elementor-heading-title a,
.mentia-arrow-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--mentia-blue);
}
.mentia-arrow-link a::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(27, 94, 155, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e9b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color 300ms var(--mentia-ease), transform 300ms var(--mentia-ease);
}
.mentia-arrow-link a:hover::after { background-color: rgba(210, 104, 46, 0.18); transform: rotate(45deg); }

/* --- Trust points (icon list) --------------------------------------- */
.mentia-trust .elementor-icon-list-item { align-items: flex-start; }
.mentia-trust .elementor-icon-list-icon { margin-top: 2px; }
.mentia-trust .elementor-icon-list-icon,
.mentia-checklist .elementor-icon-list-icon,
.mentia-pills .elementor-icon-list-icon { flex-shrink: 0; }

/* --- Photo shapes ---------------------------------------------------- */
.mentia-arch img,
.mentia-arch .elementor-widget-container { border-top-left-radius: 999px; border-top-right-radius: 999px; overflow: hidden; }
.elementor-widget-image.mentia-circle img { width: 100%; border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }
.elementor-widget-image.mentia-ring img { box-shadow: 0 0 0 6px var(--mentia-cream), 0 18px 40px -16px rgba(34, 55, 111, 0.5); }

/* --- Hero composition: arch photo + circle "moment" + brand shapes -- */
.mentia-hero-visual { position: relative; isolation: isolate; width: 100%; max-width: 30rem; margin-inline: auto; }
.mentia-hero-visual::before { /* marigold half-circle behind the arch */
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: 0.5rem;
  width: 78%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: var(--mentia-marigold);
  transform: rotate(8deg);
  transform-origin: 50% 100%;
  z-index: -1;
}
.mentia-hero-visual::after { /* bold blue quarter, top left */
  content: "";
  position: absolute;
  left: -1.25rem;
  top: -1.25rem;
  width: 7rem;
  height: 7rem;
  border-top-right-radius: 100%;
  background: var(--mentia-blue);
  transform: rotate(90deg);
  z-index: -1;
}
.mentia-hero-visual .mentia-hv-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 42%;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  box-shadow: 0 34px 70px -28px rgba(34, 55, 111, 0.5);
}
.mentia-hero-visual .mentia-hv-moment {
  position: absolute !important;
  left: -1.5rem;
  bottom: -2rem;
  width: 11rem !important;
  z-index: 2;
}
.mentia-hero-visual .mentia-hv-main { position: relative; }
.mentia-hero-visual .mentia-hv-main::after { /* orange arc accent */
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 2rem;
  width: 5rem;
  height: 2.5rem;
  border: 10px solid var(--mentia-orange);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  z-index: 2;
}
@media (max-width: 767px) {
  .mentia-hero-visual .mentia-hv-moment { width: 8.5rem !important; left: -0.5rem; }
  .mentia-hero-visual .mentia-hv-main::after { width: 3.5rem; height: 1.75rem; border-width: 7px; }
}

/* --- Pathway tiles: whole-card links over an arch-topped photo ------- */
.mentia-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  aspect-ratio: 4 / 5;
  text-decoration: none;
}
.mentia-tile::before { /* deep navy scrim so white text always reads */
  /* !important: Elementor's container rule sets content from --background-overlay,
     which is "none" here, and that silently removed the scrim. */
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 29, 62, 0.94) 0%, rgba(18, 29, 62, 0.82) 38%,
    rgba(18, 29, 62, 0.35) 64%, transparent 82%);
}
.mentia-tile { background-size: cover; background-position: center; transition: background-size 900ms var(--mentia-ease); }
.mentia-tile .mentia-tile__link .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.mentia-tile .mentia-tile__link .elementor-heading-title::after {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: background-color 300ms var(--mentia-ease);
}
.mentia-tile:hover .mentia-tile__link .elementor-heading-title::after { background-color: var(--mentia-orange); }
@media (min-width: 1025px) { .mentia-tile--offset { margin-top: 3.5rem !important; } }
@media (max-width: 767px) {
  /* Content decides the height on phones; the photo gets a clear window above it. */
  .mentia-tile { aspect-ratio: auto; padding-top: 15rem !important; }
}
/* Header: the CTA is the one element that must never wrap under the logo. */
@media (max-width: 767px) {
  .mentia-header .elementor-widget.mentia-btn--sm .elementor-button { padding: 0.55rem 1rem; font-size: 14px; }
}
/* Once the menu collapses to a toggle it belongs at the far right. */
@media (max-width: 1024px) {
  .mentia-header .mentia-header__nav { order: 3; }
}
/* Tile words sit on photography, so they carry a soft shadow for legibility. */
.mentia-tile .elementor-heading-title,
.mentia-tile .elementor-widget-text-editor { text-shadow: 0 1px 14px rgba(26, 42, 85, 0.45); }

/* --- Impact statistics ---------------------------------------------- */
.mentia-stat { border-bottom: 1px solid rgba(34, 55, 111, 0.1); }
.mentia-stats { border-top: 1px solid rgba(34, 55, 111, 0.1); }
.mentia-stat .elementor-counter-number-wrapper { line-height: 0.85; letter-spacing: -0.03em; }
.mentia-stat .elementor-counter-number-suffix { font-size: 0.45em; font-weight: 600; letter-spacing: 0; margin-left: 0.1em; }

/* --- Collage: arch photo with two overlapping circles ---------------- */
.mentia-collage { position: relative; isolation: isolate; width: 100%; max-width: 32rem; margin-inline: auto; aspect-ratio: 1 / 1.04; }
.mentia-collage::before { /* marigold half-circle */
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 6%;
  width: 72%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: var(--mentia-marigold);
  transform: rotate(10deg);
  z-index: -1;
}
.mentia-collage > .elementor-element { position: absolute !important; margin: 0 !important; }
.mentia-collage .mentia-collage__arch { right: 0; top: 0; width: 78% !important; height: 74%; }
.mentia-collage .mentia-collage__arch img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 999px; border-top-right-radius: 999px; box-shadow: 0 30px 60px -26px rgba(34, 55, 111, 0.5); }
.mentia-collage .mentia-collage__arch .elementor-widget-container { height: 100%; }
.mentia-collage .mentia-collage__circle { left: 0; bottom: 2%; width: 44% !important; z-index: 2; }
.mentia-collage .mentia-collage__small { left: 6%; top: 8%; width: 30% !important; z-index: 2; }

/* --- Dark proof panel ------------------------------------------------ */
.mentia-panel-navy {
  background: radial-gradient(75% 60% at 82% 0%, #30498f 0%, transparent 55%), linear-gradient(180deg, var(--mentia-navy), var(--mentia-navy-deep)) !important;
  border-radius: 2.5rem;
}
.mentia-panel-navy::before { /* giant outlined arch */
  content: "";
  position: absolute;
  left: -4rem;
  bottom: 0;
  width: 38rem;
  height: 26rem;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: -1;
}

/* --- Testimonial carousel on the dark panel -------------------------- */
.mentia-testimonials .elementor-testimonial__text { font-style: normal !important; }
.mentia-testimonials .elementor-testimonial__text::before {
  content: "\201C";
  display: block;
  font-size: 4.5rem;
  line-height: 0.6;
  height: 2.2rem;
  color: var(--mentia-orange);
  font-weight: 700;
}
.mentia-testimonials .elementor-testimonial__name { color: #fff; font-weight: 700; }
.mentia-testimonials .elementor-testimonial__title { color: rgba(255, 255, 255, 0.6); }
.mentia-testimonials .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4); opacity: 1; }
.mentia-testimonials .swiper-pagination-bullet-active { background: var(--mentia-marigold); }
.mentia-testimonials .elementor-swiper-button { color: rgba(255, 255, 255, 0.8); }

/* --- Article cards (Posts widget, Cards skin) ------------------------ */
.mentia-posts .elementor-post__card { border-radius: 1.5rem; overflow: hidden; box-shadow: none; background: transparent; }
.mentia-posts .elementor-post__thumbnail__link { overflow: hidden; }
.mentia-posts .elementor-post__thumbnail { transition: transform 900ms var(--mentia-ease); transform-origin: center; }
.mentia-posts .elementor-post__card:hover .elementor-post__thumbnail { transform: scale(1.05); }

/* --- Orange closing CTA panel ---------------------------------------- */
.mentia-panel-orange {
  background: radial-gradient(80% 90% at 15% 0%, color-mix(in srgb, var(--mentia-marigold) 38%, var(--mentia-orange)) 0%, transparent 55%), linear-gradient(160deg, var(--mentia-orange), #b9531f) !important;
  border-radius: 2.5rem;
}
.mentia-panel-orange::before {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: 0;
  width: 34rem;
  height: 18rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: -1;
}

/* --- Footer ---------------------------------------------------------- */
.mentia-footer { border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; overflow: hidden; }
.mentia-footer::before { /* marigold half-circle, left */
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 4rem;
  width: 12rem;
  height: 6rem;
  border-radius: 999px 999px 0 0;
  background: var(--mentia-marigold);
  opacity: 0.9;
  transform: rotate(20deg);
  pointer-events: none;
  z-index: -1;
}
.mentia-footer::after { /* orange dot, right */
  content: "";
  position: absolute;
  right: 20%;
  bottom: 6rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mentia-orange);
  pointer-events: none;
  z-index: -1;
}
.mentia-footer .elementor-icon-list-item a { transition: color 200ms var(--mentia-ease); }
.mentia-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--mentia-marigold) !important; }

/* --- Counters read from the left edge, like the approved design ------ */
.elementor-widget.mentia-counter .elementor-counter-number-wrapper { justify-content: flex-start; }
.elementor-widget.mentia-counter .elementor-counter { align-items: flex-start; }

/* --- Icon chips (icon-box / icon widgets) --------------------------- */
.mentia-iconbox .elementor-icon { border-radius: 16px !important; }

/* --- Collage variant: sky half-circle on the left -------------------- */
.mentia-collage--sky::before { left: 0.5rem; right: auto; top: auto; bottom: 6%; width: 70%; background: var(--mentia-sky); transform: rotate(-12deg); }
.mentia-collage--sky .mentia-collage__arch { width: 74% !important; height: 72%; }
.mentia-collage--sky .mentia-collage__circle { bottom: 0; width: 46% !important; }

/* --- Checklist in soft pills ----------------------------------------- */
.mentia-checklist .elementor-icon-list-item,
.mentia-pills .elementor-icon-list-item {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 14px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(34, 55, 111, 0.05);
  align-items: flex-start;
}
.mentia-pills .elementor-icon-list-item { background: var(--mentia-cream); }

/* --- Steps: numbered circle + dashed connector ----------------------- */
.mentia-step-num .elementor-heading-title {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mentia-navy);
  box-shadow: 0 0 0 4px var(--mentia-cream);
}
.mentia-steps { position: relative; }
@media (min-width: 1025px) {
  .mentia-steps::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 3.5rem;
    border-top: 2px dashed rgba(34, 55, 111, 0.15);
    pointer-events: none;
  }
}
.mentia-step { position: relative; box-shadow: 0 10px 30px -18px rgba(34, 55, 111, 0.35); transition: transform 500ms var(--mentia-ease); }
.mentia-step:hover { transform: translateY(-4px); }

/* --- Chip label ------------------------------------------------------ */
.mentia-chip .elementor-heading-title { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--mentia-blue); }
.mentia-chip--orange .elementor-heading-title { background: var(--mentia-orange); }

/* --- Video still (swapped for a real video in the media pass) -------- */
.mentia-video { position: relative; }
.mentia-video .mentia-video-still img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(34, 55, 111, 0.45); }
.mentia-video .mentia-video-player { width: 100%; }
.mentia-video .mentia-video-player .elementor-wrapper { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(34, 55, 111, 0.45); }
.mentia-video .mentia-video-label { position: absolute !important; left: 20px; bottom: 20px; z-index: 2; pointer-events: none; }
/* Elementor removes the cover image on play; the label goes with it. */
.mentia-video:not(:has(.elementor-custom-embed-image-overlay)) .mentia-video-label { display: none; }
.mentia-video .mentia-video-label .elementor-heading-title { background: rgba(255, 255, 255, 0.95); padding: 8px 14px; border-radius: 999px; }

/* --- Use-case cards -------------------------------------------------- */
.mentia-usecase { overflow: hidden; box-shadow: 0 10px 30px -18px rgba(34, 55, 111, 0.35); }
.mentia-usecase__media { position: relative; overflow: hidden; }
.mentia-usecase__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 1100ms var(--mentia-ease); }
.mentia-usecase:hover .mentia-usecase__img img { transform: scale(1.06); }
.mentia-usecase__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(34, 55, 111, 0.7), rgba(34, 55, 111, 0.1) 50%, transparent); pointer-events: none; }
.mentia-usecase .mentia-usecase__tag { position: absolute !important; left: 16px; bottom: 16px; z-index: 1; }
.mentia-usecase .mentia-usecase__tag .elementor-heading-title { background: rgba(255, 255, 255, 0.95); padding: 8px 14px; border-radius: 999px; }

/* --- Arch photo with a coloured disc behind -------------------------- */
.elementor-widget-image.mentia-arch-photo { position: relative; isolation: isolate; width: 100% !important; max-width: 24rem !important; margin-inline: auto; }
.elementor-widget-image.mentia-arch-photo img { width: 100%; max-width: 24rem; aspect-ratio: 4 / 5; object-fit: cover; border-top-left-radius: 999px; border-top-right-radius: 999px; box-shadow: 0 30px 60px -25px rgba(34, 55, 111, 0.45); }
.mentia-arch-photo::before { content: ""; position: absolute; right: -1.25rem; top: -1.25rem; width: 66%; aspect-ratio: 1; border-radius: 50%; background: var(--mentia-marigold); z-index: -1; }
.mentia-arch-photo--sky::before { background: var(--mentia-sky); }

/* --- Stats inside a white card -------------------------------------- */
.mentia-stats--card { border-top: 0; }
.mentia-stats--card .mentia-stat:last-child { border-bottom: 0; }

/* --- FAQ accordion --------------------------------------------------- */
.mentia-faq .elementor-accordion-item { background: rgba(255, 255, 255, 0.75); border-radius: 20px; margin-bottom: 12px; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(34, 55, 111, 0.06); overflow: hidden; }
.mentia-faq .elementor-tab-title { padding: 22px 26px !important; }
.mentia-faq .elementor-tab-content { padding: 0 26px 24px !important; border: 0 !important; }
.mentia-faq .elementor-accordion-icon { font-size: 16px !important; line-height: 1.6; }
.mentia-faq .elementor-accordion-icon svg { width: 16px !important; height: 16px !important; }

/* --- Product showcase image (shown whole, not cropped) -------------- */
.elementor-widget-image.mentia-showcase img { width: 100%; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(34, 55, 111, 0.45); }

/* --- Stats on the navy panel ---------------------------------------- */
.mentia-dark-stat { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 24px !important; }

/* --- Copy still owed by the client — impossible to miss on staging --- */
.mentia-faq .elementor-tab-content em { display: inline-block; color: var(--mentia-orange); font-style: normal; font-weight: 600; background: rgba(210, 104, 46, 0.08); padding: 6px 10px; border-radius: 10px; }

/* --- Research findings register ------------------------------------ */
.mentia-register { border-top: 1px solid rgba(34, 55, 111, 0.12); }
.mentia-finding { border-bottom: 1px solid rgba(34, 55, 111, 0.12); }
.mentia-finding__num .elementor-heading-title { font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mentia-finding__more details { margin-top: 4px; }
.mentia-finding__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--mentia-blue);
}
.mentia-finding__more summary::-webkit-details-marker { display: none; }
.mentia-finding__more summary::after { content: "+"; font-size: 1.2em; line-height: 1; color: var(--mentia-orange); transition: transform 300ms var(--mentia-ease); }
.mentia-finding__more details[open] summary::after { transform: rotate(45deg); }
.mentia-finding__more details p { margin: 10px 0 0; }
.mentia-finding__source { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--mentia-navy); opacity: 0.7; }

/* --- Quote card floating over a photo -------------------------------- */
.mentia-quote-wrap { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; padding-bottom: 5rem !important; }
.mentia-quote-card {
  position: absolute !important;
  left: -2rem;
  right: 2rem;
  bottom: 0;
  z-index: 2;
  border-left: 4px solid var(--mentia-orange);
  box-shadow: 0 24px 50px -24px rgba(34, 55, 111, 0.45);
}
@media (max-width: 767px) {
  .mentia-quote-wrap { padding-bottom: 0 !important; }
  .mentia-quote-card { position: relative !important; left: 0; right: 0; margin-top: -3rem; }
}

/* --- Legal pages: sticky contents + readable long-form ---------------- */
@media (min-width: 1025px) {
  .mentia-toc-col { position: sticky !important; top: 110px; align-self: flex-start; }
}
.mentia-toc .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--mentia-orange) !important; }
@media (max-width: 1024px) { .mentia-toc-col { display: none !important; } }
.elementor-widget.mentia-legal h2 { font-size: 24px !important; line-height: 1.25 !important; font-weight: 700; color: var(--mentia-navy); letter-spacing: -0.01em; margin: 2.2em 0 0.6em; scroll-margin-top: 110px; }
.elementor-widget.mentia-legal h2:first-child { margin-top: 0; }
.mentia-legal p { margin: 0 0 1em; }
.mentia-legal ul, .mentia-legal ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.mentia-legal li { margin-bottom: 0.45em; }
.elementor-widget.mentia-legal h3 { font-size: 18px !important; line-height: 1.3 !important; font-weight: 700; color: var(--mentia-navy); margin: 1.6em 0 0.5em; }
/* Privacy Policy tables: scroll sideways on phones rather than squash. */
.mentia-legal .mentia-table { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid rgba(34, 55, 111, 0.12); border-radius: 14px; }
.mentia-legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.mentia-legal th, .mentia-legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(34, 55, 111, 0.1); }
.mentia-legal th { background: #FAF7F1; color: var(--mentia-navy); font-weight: 700; }
.mentia-legal tr:last-child td { border-bottom: 0; }
.mentia-legal a { color: var(--mentia-blue); text-decoration: underline; text-underline-offset: 2px; }

/* --- People cards (About) ------------------------------------------- */
.elementor-widget-image.mentia-person__photo img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--mentia-cream), 0 14px 30px -14px rgba(34, 55, 111, 0.45); }
.elementor-widget-image.mentia-person__photo { text-align: left; }
.mentia-person { box-shadow: 0 10px 30px -20px rgba(34, 55, 111, 0.35); transition: box-shadow 300ms var(--mentia-ease); }

/* The card stays compact; "Read bio" opens the profile window below.
   Without JavaScript the <details> still expands inline as a fallback. */
.mentia-person.has-profile details[open] > p { display: none; }
.mentia-person.is-source { opacity: 0.35; transition: opacity 300ms var(--mentia-ease); }
.mentia-person .mentia-finding__more summary::after { content: "→"; font-size: 1em; }

/* --- Profile window ---------------------------------------------------- */
.mentia-profile { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 32px; }
.mentia-profile[hidden] { display: none; }
.mentia-profile-open, .mentia-profile-open body { overflow: hidden; }
.mentia-profile__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 42, 85, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mentia-profile__panel {
  position: relative;
  width: min(1040px, 100%);
  height: min(700px, calc(100vh - 64px));
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr); /* only the bio column scrolls */
  background: var(--mentia-cream);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(10, 20, 50, 0.55);
  outline: none;
}
.mentia-profile__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 56px 40px;
  background: radial-gradient(90% 70% at 30% 20%, rgba(245, 179, 36, 0.28), transparent 60%),
              linear-gradient(160deg, #eef3f8, #faf7f1);
  overflow: hidden;
}
.mentia-profile__media::before { /* quiet arch outline — the brand doorway */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 78%;
  height: 72%;
  transform: translateX(-50%);
  border: 2px solid rgba(34, 55, 111, 0.08);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.mentia-profile__photo { position: relative; width: min(260px, 100%); }
.mentia-profile__photo::before { /* marigold disc behind the arch */
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mentia-marigold);
}
.mentia-profile__photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 200px 200px 24px 24px !important; /* the brand arch */
  box-shadow: 0 30px 60px -28px rgba(34, 55, 111, 0.55);
}
.mentia-profile__body { min-height: 0; padding: 72px 56px 56px 48px; overflow-y: auto; overscroll-behavior: contain; }
.mentia-profile__role {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mentia-orange);
}
.mentia-profile__name {
  margin: 0 0 28px;
  font-size: clamp(32px, 3.4vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--mentia-navy) !important;
}
.mentia-profile__bio p { margin: 0 0 1.1em; font-size: 17px; line-height: 1.75; color: var(--mentia-ink); max-width: 62ch; }
.mentia-profile__bio p:first-child { font-size: 19px; line-height: 1.6; color: var(--mentia-navy); font-weight: 500; }
.mentia-profile .mentia-profile__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--mentia-navy) !important;
  min-height: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(34, 55, 111, 0.4);
  transition: transform 300ms var(--mentia-ease), background-color 300ms var(--mentia-ease), color 300ms var(--mentia-ease);
}
.mentia-profile .mentia-profile__close:hover { transform: rotate(90deg); background: var(--mentia-navy) !important; color: #fff !important; }
.mentia-profile__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mentia-profile__close:focus-visible { outline: 3px solid var(--mentia-orange); outline-offset: 3px; }

@media (max-width: 767px) {
  /* Phones: a full-height sheet; the photo becomes a header band. */
  .mentia-profile { padding: 0; align-items: end; }
  .mentia-profile__panel {
    display: block;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    border-radius: 28px 28px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mentia-profile__media { padding: 40px 24px 28px; }
  .mentia-profile__photo { width: 168px; }
  .mentia-profile__body { padding: 8px 24px 56px; overflow: visible; }
  .mentia-profile .mentia-profile__close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; }
  .mentia-profile__backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- Timeline ------------------------------------------------------- */
.mentia-timeline { position: relative; }
@media (min-width: 1025px) {
  .mentia-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; border-top: 2px dashed rgba(34, 55, 111, 0.15); pointer-events: none; }
}
.mentia-milestone { position: relative; }

/* --- Blog: topic chips ---------------------------------------------- */
.mentia-topic .elementor-heading-title a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(34, 55, 111, 0.12);
  color: var(--mentia-navy);
  transition: background-color 200ms var(--mentia-ease), color 200ms var(--mentia-ease);
}
.mentia-topic .elementor-heading-title a:hover,
.mentia-topic.is-active .elementor-heading-title a { background: var(--mentia-navy); color: #fff !important; }

/* --- Blog: featured post + cards ------------------------------------ */
.mentia-featured-post .elementor-post { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(34, 55, 111, 0.4); align-items: center; }
.mentia-featured-post .elementor-post__text { padding: 32px 40px; }
@media (max-width: 767px) {
  /* Thumbnail-left squeezes the text to nothing on phones — stack instead. */
  .mentia-featured-post .elementor-post { flex-direction: column !important; align-items: stretch; }
  .mentia-featured-post .elementor-post__thumbnail__link { width: 100% !important; margin: 0 !important; }
  .mentia-featured-post .elementor-post__text { padding: 24px; width: 100%; }
}
.mentia-posts .elementor-post__card { box-shadow: 0 12px 34px -24px rgba(34, 55, 111, 0.45) !important; }
.mentia-posts .elementor-post__badge { border-radius: 999px; font-weight: 700; letter-spacing: 0.04em; }
.mentia-posts .elementor-pagination { margin-top: 40px; font-weight: 600; color: var(--mentia-navy); }

/* --- Single article -------------------------------------------------- */
.mentia-post-hero img { width: 100%; border-radius: 28px; aspect-ratio: 16 / 9; object-fit: cover; }
.mentia-post-cat .elementor-icon-list-icon { display: none !important; }
.mentia-post-cat a { color: var(--mentia-orange) !important; text-transform: uppercase; letter-spacing: 0.14em; }
.mentia-article h2 { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--mentia-navy); margin: 1.6em 0 0.5em; letter-spacing: -0.015em; }
.mentia-article h3 { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--mentia-navy); margin: 1.4em 0 0.4em; }
.mentia-article p { margin: 0 0 1.1em; }
.mentia-article ul, .mentia-article ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.mentia-article li { margin-bottom: 0.4em; }
.mentia-article a { color: var(--mentia-blue); text-decoration: underline; text-underline-offset: 3px; }
.mentia-article blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--mentia-orange); font-size: 1.15em; color: var(--mentia-navy); font-weight: 500; }
.mentia-article img { border-radius: 20px; height: auto; }
.mentia-article figure { margin: 1.6em 0; }
.mentia-article figcaption { font-size: 14px; color: var(--mentia-muted); margin-top: 8px; }
.mentia-article iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 20px; }

/* --- Share unit ------------------------------------------------------ */
.mentia-share .elementor-share-btn { border-radius: 999px !important; }

/* --- Contact form --------------------------------------------------- */
.mentia-form .elementor-field-textual,
.mentia-form select { min-height: 50px; padding: 12px 16px !important; transition: border-color 200ms var(--mentia-ease), box-shadow 200ms var(--mentia-ease); }
.mentia-form .elementor-field-textual:focus,
.mentia-form select:focus { border-color: var(--mentia-blue) !important; box-shadow: 0 0 0 4px rgba(27, 94, 155, 0.12); outline: none; }
.mentia-form .elementor-field-type-submit .elementor-button { min-height: 54px; box-shadow: 0 8px 24px -8px rgba(210, 104, 46, 0.6); transition: transform 300ms var(--mentia-ease), background-color 300ms var(--mentia-ease); text-transform: none; letter-spacing: 0; }
.mentia-form .elementor-field-type-submit .elementor-button:hover { transform: translateY(-2px); background-color: #c25c25 !important; }
.mentia-form .elementor-message-success { color: #1f7a4d; font-weight: 600; }
.mentia-direct-email a,
.elementor-widget-text-editor a[href^="/privacy-policy"] { color: var(--mentia-blue); font-weight: 600; }
.mentia-featured-post .elementor-post__meta-data { margin: 10px 0 4px; }

/* --- Page edges ---------------------------------------------------- */
/* Decorative discs and arches deliberately bleed past their boxes; clip
   them at the viewport so phones never scroll sideways. `clip` (unlike
   `hidden`) keeps position: sticky working. */
html, body { overflow-x: clip; }

/* Comparison table: scrolls within its own card on narrow screens. */
@media (max-width: 767px) {
  .mentia-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mentia-compare table { min-width: 620px; }
}

/* ==================================================================
   8 · Reduced motion
   Every device keeps a complete static state. Nothing essential is
   conveyed by motion alone.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mentia-ambient__glow { animation: none !important; }

  .mentia-marker.is-armed > svg path,
  .mentia-marker > svg path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .mentia-shapes__item { transition: none !important; }

  /* The header still changes appearance when stuck — it just snaps. */
  .mentia-header { transition: none !important; }
  .mentia-nav .sub-menu { animation: none !important; }

  .mentia-btn .elementor-button,
  .mentia-btn .elementor-button-text::after,
  .mentia-tile,
  .mentia-posts .elementor-post__thumbnail,
  .mentia-step,
  .mentia-usecase__img img { transition: none !important; }
  .mentia-btn .elementor-button:hover { transform: none; }
}