/* ==========================================================================
   Site Content — front end
   Taken from the approved HTML prototype. Every colour reads a theme token
   with a hard fallback, so components look right whether or not the child
   theme defines them.
   ========================================================================== */

.mm-scope,
.ff, .qa, .vidcard, .videocard, .levelcard {
  --mm-teal:      var(--teal, #2CBA9E);
  --mm-teal-dark: var(--teal-dark, #1F9B82);
  --mm-purple:    var(--purple, #3F085C);
  --mm-magenta:   var(--magenta, #D83D83);
  --mm-ink:       var(--ink, #3F4347);
  --mm-ink-mid:   var(--ink-mid, #64696E);
  --mm-ink-light: var(--ink-light, #8A8F94);
  --mm-line:      var(--line, #E6E1D6);
  --mm-white:     var(--white, #FFFFFF);
  --mm-radius:    var(--radius-lg, 22px);
}

/* ---- Grids -------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Video cards -------------------------------------------------------- */

.videocard {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  background: var(--purple-deep, #2C0440);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(63,8,92,.07), 0 20px 48px rgba(63,8,92,.09));
  transition: transform .2s ease, box-shadow .2s ease;
}

.videocard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

.videocard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,3,39,.42), rgba(26,3,39,.04) 58%);
  transition: background .22s ease;
}

.videocard--hero { border-radius: clamp(16px, 2vw, 28px); }

.playmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(26, 3, 39, .46);
  border: 1.5px solid rgba(255, 255, 255, .82);
  transition: background .22s ease, border-color .22s ease;
}

.playmark::before {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.videocard--hero .playmark { width: 86px; height: 86px; }

.videocard:hover { transform: translateY(-3px); }
.videocard:hover img { transform: scale(1.03); }
.videocard:hover .playmark { background: var(--purple, #3F085C); border-color: var(--purple, #3F085C); }

/* Card with a caption beneath */
.vidcard { display: block; text-decoration: none; }

.vidcard h3 {
  margin-top: .9rem;
  font-size: 1.02rem;
  color: var(--purple, #3F085C);
  text-align: center;
}

/* The hero card is much larger, so its caption steps up to match rather than
   sitting under it at the same size as the three small cards. */
.vidcard--hero h3 {
  margin-top: 1.15rem;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.vidmeta {
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--ink-light, #8A8F94);
  text-align: center;
}

.vidcard:hover .videocard { transform: translateY(-3px); }
.vidcard:hover .videocard img { transform: scale(1.03); }
.vidcard:hover .playmark { background: var(--purple, #3F085C); border-color: var(--purple, #3F085C); }

/* ---- Video modal -------------------------------------------------------- */

.vmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(26, 3, 39, .86);
}

.vmodal[hidden] { display: none; }

.vmodal-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(63,8,92,.12), 0 36px 80px rgba(63,8,92,.16));
}

/* Must fill .vmodal-inner, or the iframe's height:100% resolves against a
   zero height parent and collapses to the browser default 300x150. */
.vmodal-slot { position: absolute; inset: 0; }

/* Qwery's own script tags iframes with .qwery_resize and writes width and
   height inline, which leaves the player smaller than its box. Inline styles
   only lose to !important. */
.vmodal-slot iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Fixed to the viewport, not to the video box. The box carries overflow
   hidden so anything positioned outside it gets clipped, and in portrait
   there is no room above it anyway. Fixed also escapes the clip. */
.vmodal-close {
  position: fixed !important;
  top: 1rem !important;
  right: 1.75rem !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}

.vmodal-close:hover { background: var(--teal, #2CBA9E); }

/* ---- Financial Flow Formula --------------------------------------------- */

.ff {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  aspect-ratio: 1024 / 697;
  container-type: inline-size;
}

.ff-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ff-item {
  position: absolute;
  width: 19.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #30B99C;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4.5%;
  box-sizing: border-box;
}

/* Heading is a direct flex child on desktop, and becomes the circle itself
   on small screens. */
.ff-disc { display: contents; }

.ff-item h3 {
  font-family: var(--font-display, inherit);
  font-size: clamp(.72rem, 1.77cqw, 1.45rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #10231F;
  margin: 0 0 .35em;
}

.ff-copy {
  font-family: var(--font-body, inherit);
  font-size: clamp(.56rem, 1.52cqw, 1.15rem);
  line-height: 1.35;
  color: #10231F;
  margin: 0;
}

.ff-item--clarity   { left: 38.00%; top:  4.60%; }
.ff-item--priority  { left: 18.85%; top: 59.50%; }
.ff-item--certainty { left: 61.05%; top: 59.50%; }

.ff-centre {
  position: absolute;
  left: 40.80%;
  top: 40.50%;
  width: 13.90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--magenta, #D83D83);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5%;
  box-sizing: border-box;
}

.ff-centre span {
  font-family: var(--font-body, inherit);
  font-size: clamp(.5rem, 1.19cqw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}

/* ---- Questions ---------------------------------------------------------- */

.qa { border-top: 1px solid var(--line, #E6E1D6); }
.qa-item { border-bottom: 1px solid var(--line, #E6E1D6); }

.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display, inherit);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--purple, #3F085C);
}

.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:hover { color: var(--teal-dark, #1F9B82); }

.qa-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: .4rem;
  border-right: 2px solid var(--teal, #2CBA9E);
  border-bottom: 2px solid var(--teal, #2CBA9E);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}

.qa-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.qa-body {
  padding: 0 0 1.6rem;
  max-width: 74ch;
  color: var(--ink-mid, #64696E);
}

.qa-body > *:first-child { margin-top: 0; }
.qa-body > *:last-child { margin-bottom: 0; }

/* ---- Team --------------------------------------------------------------- */

.mm-team .qa-item summary { padding: 1.1rem 0; }

.mm-team-who {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.mm-team-who img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.mm-team-who strong {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--purple, #3F085C);
}

.mm-team-who em {
  display: block;
  font-style: normal;
  font-family: var(--font-body, inherit);
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-light, #8A8F94);
  margin-top: .1rem;
}

/* Body lines up under the name rather than the photo, so it reads as
   belonging to that person. Only applied when there is a photo. */
.mm-team .qa-body--indent { padding-left: 4.5rem; }

@media (max-width: 560px) {
  .mm-team .qa-body--indent { padding-left: 0; }
}

/* ---- Tick lists --------------------------------------------------------- */

.ticklist { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }

.ticklist li {
  position: relative;
  padding-left: 2.15rem;
  color: var(--ink-mid, #64696E);
}

.ticklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal, #2CBA9E);
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
}

/* Used on the relationship property list */
.ticklist--coral li::before { color: var(--magenta, #D83D83); }

/* Service level cards carry four short lines each, so the list runs tighter
   than the standalone one on Work With Me. */
.ticklist--sm {
  gap: .55rem;
  margin-top: 1.1rem;
  font-size: .93rem;
}

.ticklist--sm li { padding-left: 1.75rem; }
.ticklist--sm li::before { font-size: .9rem; }

/* ---- Caveat / small print ----------------------------------------------- */

.caveat {
  margin-top: 2rem;
  padding: 1.15rem 1.4rem;
  border-left: 3px solid var(--sand-deep, #EBE5D9);
  background: var(--paper, #FCFBF8);
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-mid, #64696E);
}

/* ---- Service level cards ------------------------------------------------ */

.levelcard {
  position: relative;
  overflow: hidden;
  padding: clamp(1.9rem, 2.4vw, 2.4rem) clamp(1.6rem, 2.2vw, 2.15rem) clamp(1.6rem, 2.2vw, 2.15rem);
  background: var(--white, #fff);
  border: 1px solid var(--line, #E6E1D6);
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(63,8,92,.05), 0 10px 24px rgba(63,8,92,.05));
}

.levelcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--teal, #2CBA9E);
}

.levelcard:nth-child(2)::before { background: var(--magenta, #D83D83); }
.levelcard:nth-child(3)::before { background: var(--purple, #3F085C); }

.levelcard h4 {
  font-family: var(--font-display, inherit);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.024em;
  color: var(--charcoal, #3F4347);
  margin: 0 0 .4rem;
}

.levelcard .lvlnote { color: var(--ink-light, #8A8F94); font-size: .97rem; margin: 0; }

.levelcard .rule {
  height: 1px;
  background: var(--line, #E6E1D6);
  margin-top: 1.35rem;
}

/* ---- Insights hub ------------------------------------------------------- */

.hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.hubcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: var(--radius-lg, 22px);
  border: 1.5px solid var(--line, #E6E1D6);
  background: var(--white, #fff);
  text-align: left;
  font-family: var(--font-body, inherit);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hubcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 4px 12px rgba(63,8,92,.07), 0 20px 48px rgba(63,8,92,.09)); }

.hubcard-label {
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--purple, #3F085C);
}

.hubcard-count {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-dark, #1F9B82);
}

.hubcard-desc { font-size: .93rem; color: var(--ink-mid, #64696E); margin-top: .3rem; }

.hubcard[aria-selected="true"] {
  background: var(--purple, #3F085C);
  border-color: var(--purple, #3F085C);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(63,8,92,.07), 0 20px 48px rgba(63,8,92,.09));
}

.hubcard[aria-selected="true"] .hubcard-label { color: var(--white, #fff); }
.hubcard[aria-selected="true"] .hubcard-count { color: var(--teal, #2CBA9E); }
.hubcard[aria-selected="true"] .hubcard-desc  { color: rgba(255,255,255,.78); }

/* Pointer down to the content the block revealed */
.hubcard[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 20px;
  height: 20px;
  background: var(--purple, #3F085C);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}

.panel[hidden] { display: none; }

.panelhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.panelhead p { color: var(--ink-mid, #64696E); max-width: 60ch; }

.items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.9rem);
}

/* Masonry, used where card heights vary a lot (the appearances list). Not
   used for Blog: post cards are near enough the same height that it gains
   nothing, and it costs the left to right reading order dated content needs. */
.items--masonry {
  display: block;
  column-count: 3;
  column-gap: clamp(1.25rem, 2.2vw, 1.9rem);
}

.items--masonry > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.25rem, 2.2vw, 1.9rem);
}

/* ---- Post cards --------------------------------------------------------- */

a.postcard { display: block; text-decoration: none; }

.postcard {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E6E1D6);
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(63,8,92,.05), 0 10px 24px rgba(63,8,92,.05));
  transition: transform .2s ease, box-shadow .2s ease;
}

.postcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(63,8,92,.07), 0 20px 48px rgba(63,8,92,.09));
}

.postcard-media { position: relative; overflow: hidden; }

.postcard-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

.postcard:hover .postcard-media img { transform: scale(1.04); }

.postcard-body {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: clamp(1.4rem, 2vw, 1.85rem);
}

.postcard .date {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-dark, #1F9B82);
}

.postcard h3 { font-size: 1.18rem; line-height: 1.32; margin: 0; color: var(--purple, #3F085C); }
.postcard p { color: var(--ink-mid, #64696E); font-size: .97rem; margin: 0; }

/* ---- Appearance cards --------------------------------------------------- */

.medcard {
  display: block;
  padding: clamp(1.4rem, 2.1vw, 1.8rem);
  background: var(--white, #fff);
  border: 1px solid var(--line, #E6E1D6);
  border-radius: var(--radius-md, 16px);
  text-decoration: none;
  transition: all .2s ease;
}

.medcard:hover {
  border-color: var(--teal, #2CBA9E);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(63,8,92,.05), 0 10px 24px rgba(63,8,92,.05));
  transform: translateY(-2px);
}

.medcard h3 { font-size: 1rem; line-height: 1.4; color: var(--purple, #3F085C); margin: 0 0 .45rem; }
.medcard .src { font-size: .85rem; color: var(--ink-light, #8A8F94); margin: 0; }

.medkind {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .55rem;
  border-radius: 5px;
  margin-bottom: .65rem;
  background: var(--coral-soft, #FDEBE5);
  color: #B4472A;
}

/* ---- Pagination --------------------------------------------------------- */

.mm-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}

.mm-pager .page-numbers {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem;
  border-radius: 8px;
  border: 1.5px solid var(--line, #E6E1D6);
  font-family: var(--font-body, inherit);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-mid, #64696E);
  text-decoration: none;
  transition: all .18s ease;
}

.mm-pager a.page-numbers:hover { border-color: var(--teal, #2CBA9E); color: var(--purple, #3F085C); }

.mm-pager .page-numbers.current {
  background: var(--purple, #3F085C);
  border-color: var(--purple, #3F085C);
  color: var(--white, #fff);
}

.mm-pager .page-numbers.dots { border-color: transparent; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Blocks stack, so the pointer arrow no longer makes sense */
  .hub { grid-template-columns: 1fr; }
  .hubcard[aria-selected="true"]::after { display: none; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .items--masonry { column-count: 2; }
}

@media (max-width: 620px) {
  .items { grid-template-columns: 1fr; }
  .items--masonry { column-count: 1; }
}

@media (max-width: 620px) {
  /* Close button moves below the player so it stays on screen */
  .vmodal-close { top: auto; bottom: -46px; right: 50%; transform: translateX(50%); }
}

/* The triangle cannot survive a narrow column: at 375px the circles would be
   about 73px across and the copy illegible. Instead the diagram becomes a
   vertical run, the circle keeps the pillar name, the sentence moves beneath
   it, and chevrons carry the cycle. */
@media (max-width: 700px) {
  .ff {
    aspect-ratio: auto;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ff-arrows { display: none; }

  .ff-item {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .ff-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #30B99C;
    flex: none;
  }

  .ff-item h3 { font-size: 1rem; margin: 0; }

  .ff-copy {
    margin-top: .85rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-mid, #64696E);
    max-width: 300px;
  }

  .ff-item::after {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 3px solid #111;
    border-bottom: 3px solid #111;
    transform: rotate(45deg);
    margin: 1.4rem 0 1rem;
    opacity: .55;
  }

  .ff-centre {
    position: static;
    width: 152px;
    height: 152px;
    aspect-ratio: auto;
    padding: 0 1rem;
    margin-top: .4rem;
  }

  .ff-centre span { font-size: .82rem; }
}