/* ==========================================================
   KATE HOWELLS — CASSIOPEIA BASE CSS
   Version 1.12.1 | 9 November 2026
   Install: /media/templates/site/YOUR_CHILD_TEMPLATE/css/user.css
   Designed pages: wrap sections in <div class="kh-page">.
   Plain Joomla article content retains a small horizontal gutter.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Raleway:wght@400;500;600&display=swap');

:root {
  --kh-purple: #65516f;
  --kh-purple-dark: #4f3d58;
  --kh-purple-light: #f1edf3;
  --kh-blue: #527184;
  --kh-blue-dark: #3e5869;
  --kh-blue-light: #edf2f5;
  --kh-grey: #434950;
  --kh-grey-light: #f5f5f6;
  --kh-white: #ffffff;
  --kh-border: #dcdfe3;
  --kh-body-font: 'Montserrat', Arial, sans-serif;
  --kh-heading-font: 'Raleway', Arial, sans-serif;
  --kh-gutter: clamp(1rem, 2.5vw, 2rem);
  --kh-section-padding: clamp(1.5rem, 3vw, 2.5rem);
  --kh-gap: clamp(1.25rem, 2.5vw, 2rem);
  --kh-radius: 0.4rem;
  --cassiopeia-font-family-body: var(--kh-body-font);
  --cassiopeia-font-family-headings: var(--kh-heading-font);
  --cassiopeia-color-primary: var(--kh-purple);
  --cassiopeia-color-link: var(--kh-purple);
  --cassiopeia-color-hover: var(--kh-purple-dark);
  --body-font-family: var(--kh-body-font);
  --body-color: var(--kh-grey);
  --body-bg: var(--kh-white);
  --link-color: var(--kh-purple);
  --link-hover-color: var(--kh-purple-dark);
}

/* BASE AND TYPOGRAPHY */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--kh-white);
  color: var(--kh-grey);
  font-family: var(--kh-body-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 0.9rem;
  color: var(--kh-purple);
  font-family: var(--kh-heading-font);
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1rem; }
/* Keep emphasis inside headings at the same light weight. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
    .kh-faq summary, .kh-top-logo__tagline) :is(strong, b) { font-weight: inherit; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 600; }
a { color: var(--kh-purple); text-underline-offset: 0.2em; }
a:hover { color: var(--kh-purple-dark); }
h1 a, h2 a, h3 a, h4 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--kh-blue);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li + li { margin-top: 0.3rem; }
blockquote, p.blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--kh-blue);
  background: var(--kh-blue-light);
  color: inherit;
  font-size: 1rem;
}
hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--kh-border); }

/* CASSIOPEIA WIDTHS
   Retain named grid lines and the native sidebar areas.
   Remove the desktop outer tracks that constrain block widths. */
.site-grid { width: 100%; max-width: none; margin-inline: 0; }
@media (min-width: 992px) {
  .site-grid {
    grid-template-columns: [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
    column-gap: 0;
  }
}
.container-component { min-width: 0; padding-inline: var(--kh-gutter); }
.container-component > * { min-width: 0; }
.container-top-a, .container-top-b,
.container-bottom-a, .container-bottom-b { min-width: 0; }
.container-sidebar-left, .container-sidebar-right { padding-inline: var(--kh-gutter); }
.com-content-article, .com-content-article__body { max-width: none; }
.page-header h1 { margin-bottom: 1.25rem; }
.kh-page { margin-inline: calc(-1 * var(--kh-gutter)); }

/* FULL-WIDTH BLOCKS: content uses the available width */
.kh-section { width: 100%; padding: var(--kh-section-padding) var(--kh-gutter); }
.kh-section--white { background: var(--kh-white); }
.kh-section--purple { background: var(--kh-purple-light); }
.kh-section--blue { background: var(--kh-blue-light); }
.kh-section--grey { background: var(--kh-grey-light); }
.kh-section--dark { background: var(--kh-purple-dark); color: var(--kh-white); }
.kh-section--dark :is(h1, h2, h3, h4, h5, h6, a) { color: var(--kh-white); }
.kh-container { width: 100%; max-width: none; margin-inline: auto; }
.kh-section-heading { margin-bottom: 1.5rem; }
.kh-section-heading > :last-child { margin-bottom: 0; }
.kh-center { text-align: center; }
.kh-kicker {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--kh-blue-dark);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kh-section--dark .kh-kicker { color: var(--kh-white); }
.kh-intro { font-size: clamp(1rem, 1.4vw, 1.12rem); }

/* COLUMNS AND PANELS */
.kh-grid, .kh-split { display: grid; gap: var(--kh-gap); }
.kh-grid--2, .kh-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kh-split { align-items: center; }
.kh-grid > *, .kh-split > * { min-width: 0; }
.kh-card, .kh-panel {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  color: var(--kh-grey);
}
.kh-card--purple { background: var(--kh-purple-light); }
.kh-card--blue { background: var(--kh-blue-light); }
.kh-card--grey { background: var(--kh-grey-light); }
.kh-card > :last-child, .kh-panel > :last-child { margin-bottom: 0; }
.kh-card__icon { display: inline-block; margin-bottom: 0.75rem; color: var(--kh-blue); font-size: 1.75rem; }
.kh-image { display: block; width: 100%; border-radius: var(--kh-radius); }

/* BUTTONS AND CALLS TO ACTION */
.kh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.kh-button, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--kh-purple);
  border-radius: var(--kh-radius);
  background: var(--kh-purple);
  color: var(--kh-white);
  font-family: var(--kh-body-font);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.kh-button:hover, .kh-button:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active {
  border-color: var(--kh-purple-dark);
  background: var(--kh-purple-dark);
  color: var(--kh-white);
}
.kh-button--outline { background: transparent; color: var(--kh-purple); }
.kh-button--blue { border-color: var(--kh-blue); background: var(--kh-blue); }
.kh-button--blue:hover { border-color: var(--kh-blue-dark); background: var(--kh-blue-dark); }
.kh-section--dark .kh-button--outline { border-color: var(--kh-white); color: var(--kh-white); }
.kh-section--dark .kh-button--outline:hover { background: var(--kh-white); color: var(--kh-purple-dark); }

/* HEADER AND NATIVE MENU */
.container-header {
  width: 100%;
  z-index: 1000;
  overflow: visible;
  background: var(--kh-white);
  background-image: none;
  color: var(--kh-grey);
  border-bottom: 1px solid var(--kh-border);
  box-shadow: none;
}
.container-header > .grid-child {
  width: 100%;
  max-width: none;
  padding-inline: var(--kh-gutter);
}
.container-header .navbar-brand { color: var(--kh-purple); padding-block: 0.75rem; }
.container-header .navbar-brand img { max-width: 100%; max-height: 100px; width: auto; height: auto; }
.container-header .container-nav {
  justify-content: center;
  flex-wrap: wrap;
  padding-block: 0.5rem;
  padding-inline: clamp(0.75rem, 1.25vw, 1.25rem);
  overflow: visible;
}
.container-header .container-nav > nav,
.container-header .navbar,
.container-header .navbar-collapse { width: 100%; max-width: none; }
.container-header .navbar { justify-content: center; }
.container-header .mod-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--kh-purple);
  font-family: var(--kh-heading-font);
  font-size: 0.86rem;
  font-weight: 500;
  text-transform: uppercase;
}
.container-header .mod-menu li { margin: 0; }
.container-header .mod-menu a,
.container-header .mod-menu .mod-menu__heading,
.container-header .mod-menu .mod-menu__separator,
.container-header .mod-menu button.mm-toggler {
  color: var(--kh-purple);
  font-family: var(--kh-heading-font);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
}
.container-header .mod-menu a:hover,
.container-header .mod-menu button.mm-toggler:hover,
.container-header .mod-menu .current > a { color: var(--kh-blue-dark); }
/* A heading parent contains text; a linked parent has a separate arrow.
   Keep both visible and let Joomla control the expanded/collapsed state. */
.container-header .mod-menu button.mm-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.container-header .mod-menu button.mm-toggler-link {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  margin: 0;
  padding: 0.35rem;
}
.container-header .mod-menu button.mm-toggler::after {
  content: '';
  display: block;
  flex: 0 0 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.2rem 0 0;
  padding: 0;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: none;
  transform: rotate(45deg);
}
.container-header .mod-menu button.mm-toggler[aria-expanded='true']::after {
  margin-top: 0.2rem;
  transform: rotate(225deg);
}
.container-header .mod-menu .metismenu-item > ul {
  padding: 0.35rem 0;
  border: 1px solid var(--kh-border);
  background: var(--kh-white);
  border-radius: var(--kh-radius);
  color: var(--kh-purple);
  text-align: left;
  list-style: none;
  z-index: 1001;
}
.container-header .mod-menu .metismenu-item > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
.container-header .mod-menu .metismenu-item > ul > li > a,
.container-header .mod-menu .metismenu-item > ul > li > .mod-menu__heading,
.container-header .mod-menu .metismenu-item > ul > li > button.mm-toggler:not(.mm-toggler-link) {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  color: var(--kh-purple);
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.container-header .mod-menu .metismenu-item > ul > li > ul { flex-basis: 100%; }
.container-header .mod-menu .metismenu-item > ul > li > a:hover,
.container-header .mod-menu .metismenu-item > ul > li.current > a {
  background: var(--kh-purple-light);
  color: var(--kh-purple-dark);
}
.container-header .navbar-toggler { border: 1px solid var(--kh-border); color: var(--kh-purple); }
@media (min-width: 992px) {
  .container-header .mod-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.8rem);
  }
  .container-header .mod-menu > li {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0;
  }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
  }
  .container-header .mod-menu > li > :is(a, span, button.mm-toggler) {
    white-space: nowrap;
  }
  .container-header .mod-menu .metismenu-item > ul {
    width: max-content;
    min-width: 16rem;
    max-width: none;
    box-shadow: 0 6px 16px rgb(67 73 80 / 10%);
  }
  .container-header .mod-menu > li > ul { position: absolute; top: 100%; left: 0; }
  .container-header .mod-menu > li:nth-last-child(-n+3) > ul { right: 0; left: auto; }
  .container-header .mod-menu .metismenu-item > ul > li > :is(a, .mod-menu__heading, button.mm-toggler) {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}
/* Keep the ten-item menu compact on smaller desktop and landscape tablet widths. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .mod-menu { gap: 0.35rem; }
  .container-header .mod-menu :is(a, .mod-menu__heading, .mod-menu__separator, button.mm-toggler) {
    font-size: 0.78rem;
    letter-spacing: 0;
  }
}
@media (max-width: 991.98px) {
  .container-header .mod-menu { text-align: left; }
  .container-header .mod-menu > li { padding-block: 0.25rem; }
  .container-header .mod-menu .metismenu-item > ul {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-shadow: none;
  }
}

/* FORMS, FAQS AND FOOTER */
input, textarea, select, button { font-family: var(--kh-body-font); }
.form-control, .form-select {
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius);
  background-color: var(--kh-white);
  color: var(--kh-grey);
  font-size: 1rem;
}
.form-control:focus, .form-select:focus { border-color: var(--kh-blue); box-shadow: none; }
.form-label { font-weight: 500; }
.kh-faq { padding: 1rem 0; border-bottom: 1px solid var(--kh-border); }
.kh-faq summary { color: var(--kh-purple); font-family: var(--kh-heading-font); font-size: 1.2rem; font-weight: 400; cursor: pointer; }
.kh-faq[open] summary { margin-bottom: 0.75rem; }
.footer {
  background: var(--kh-grey-light);
  background-image: none;
  color: var(--kh-grey);
  border-top: 1px solid var(--kh-border);
}
.footer > .grid-child { width: 100%; max-width: none; padding: 1.5rem var(--kh-gutter); }
.footer a { color: var(--kh-purple); }
.footer a:hover { color: var(--kh-purple-dark); }

/* RESPONSIVE */
@media (max-width: 991.98px) {
  .kh-grid--3, .kh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .kh-grid--2, .kh-grid--3, .kh-grid--4, .kh-split { grid-template-columns: minmax(0, 1fr); }
  .container-header .navbar-brand img { max-height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-button, .btn-primary { transition: none; }
}

/* WELCOME PAGE — version 1.2.0 */
.kh-welcome-label {
  margin-bottom: 0.65rem;
  color: var(--kh-blue-dark);
  font-family: var(--kh-heading-font);
  font-size: 1.15rem;
  font-weight: 400;
}
.kh-welcome .kh-welcome-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas: 'text image' 'actions image';
  align-items: start;
  gap: 1rem var(--kh-gap);
}
.kh-welcome-hero__layout > * { min-width: 0; }
.kh-welcome-hero__text { grid-area: text; }
.kh-welcome-hero__image { grid-area: image; align-self: center; }
.kh-welcome-hero__actions { grid-area: actions; margin-top: 0; }
.kh-welcome-hero__text .kh-intro { margin-top: 1.1rem; }
.kh-welcome .kh-welcome-portrait {
  display: block;
  float: none;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 0 0 auto;
  border-radius: var(--kh-radius);
}
.kh-welcome-support {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--kh-blue);
  border-radius: var(--kh-radius);
  background: var(--kh-blue-light);
}
.kh-welcome-support h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.kh-welcome-support > p { margin: 0.85rem 0 0; font-size: 0.95rem; }
.kh-welcome .kh-welcome-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kh-welcome-questions li {
  margin: 0;
  padding: 0;
  color: var(--kh-blue-dark);
  font-family: var(--kh-heading-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.kh-welcome-questions li + li { margin-top: 0; }
.kh-welcome-about { scroll-margin-top: 6rem; }
.kh-welcome-about__copy { align-items: start; }
.kh-welcome-about__copy > div > :last-child { margin-bottom: 0; }
.kh-welcome-consultation {
  border-color: var(--kh-border);
  border-left: 3px solid var(--kh-purple);
  background: var(--kh-purple-light);
}
@media (max-width: 767.98px) {
  .kh-welcome .kh-welcome-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'image' 'actions';
  }
  .kh-welcome .kh-welcome-portrait { max-width: 280px; margin-inline: auto; }
  .kh-welcome .kh-welcome-questions { grid-template-columns: minmax(0, 1fr); }
}

/* TESTIMONIAL CUSTOM MODULE — version 1.0.0 */
.kh-testimonials [hidden] { display: none !important; }
.kh-testimonials__card {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
}
.kh-testimonials__mark {
  display: block;
  color: var(--kh-purple);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 0.95;
  user-select: none;
}
.kh-testimonials__slides { min-width: 0; }
.kh-testimonial { margin: 0; }
.kh-testimonial + .kh-testimonial { margin-top: 1.5rem; }
.kh-testimonials[aria-roledescription='carousel'] .kh-testimonial { margin: 0; }
.kh-testimonials .kh-testimonial__quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kh-grey);
  font-family: var(--kh-body-font);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-style: normal;
  line-height: 1.85;
  overflow-wrap: break-word;
}
.kh-testimonial__quote p { margin: 0; }
.kh-testimonial__client {
  margin-top: 1.25rem;
  color: var(--kh-blue-dark);
  font-family: var(--kh-heading-font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kh-testimonials__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.kh-testimonials__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--kh-purple);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  color: var(--kh-purple);
  font-family: var(--kh-body-font);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.kh-testimonials__button:hover,
.kh-testimonials__button:focus-visible {
  background: var(--kh-purple);
  color: var(--kh-white);
}
.kh-testimonials__button > span { font-size: 1.3rem; line-height: 1; }
.kh-testimonials__count {
  min-width: 3.5rem;
  color: var(--kh-blue-dark);
  font-size: 0.9rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
  .kh-testimonials__card { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .kh-testimonials__mark { height: 3rem; font-size: 5rem; }
  .kh-testimonials__controls { gap: 0.5rem; }
  .kh-testimonials__button { padding-inline: 0.75rem; }
}

/* BOTTOM-B CONTACT AND ACCREDITATION MODULE — version 1.0.0 */
.kh-footer {
  width: 100%;
  border-top: 1px solid var(--kh-border);
  background: var(--kh-white);
  color: var(--kh-grey);
}
.kh-footer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--kh-gap);
}
.kh-footer__layout > * { min-width: 0; }
.kh-footer__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 580px;
}
.kh-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 100px;
}
.kh-footer__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100px;
  margin: 0;
  object-fit: contain;
}
.kh-footer__logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  border: 1px dashed var(--kh-border);
  border-radius: var(--kh-radius);
  background: var(--kh-grey-light);
  color: var(--kh-blue-dark);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}
.kh-footer__details {
  padding-left: var(--kh-gap);
  border-left: 1px solid var(--kh-border);
  overflow-wrap: anywhere;
}
.kh-footer__contact p { margin: 0 0 0.25rem; }
.kh-footer a { color: var(--kh-purple); text-decoration: none; }
.kh-footer a:hover { color: var(--kh-purple-dark); text-decoration: underline; }
.kh-footer__address {
  margin: 0.9rem 0 1rem;
  color: var(--kh-grey);
  font-style: normal;
  line-height: 1.75;
}
.kh-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-size: 0.9rem;
}
.kh-footer__legal > span { color: var(--kh-blue-dark); }
.kh-footer__copyright { margin: 0.5rem 0 0; font-size: 0.85rem; }
@media (max-width: 767.98px) {
  .kh-footer__layout { grid-template-columns: minmax(0, 1fr); }
  .kh-footer__logos { max-width: none; gap: 0.75rem; }
  .kh-footer__details { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--kh-border); }
}

/* CONTENT PAGES AND TRAINING LISTS — version 1.0.0 */
.kh-content-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--kh-gap);
}
.kh-content-split > * { min-width: 0; }
.kh-content-split > div > :last-child { margin-bottom: 0; }
.kh-page-image {
  display: block;
  float: none;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 0 0 auto;
  border-radius: var(--kh-radius);
}
.kh-qualifications-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  align-items: start;
  gap: var(--kh-gap);
}
.kh-qualifications-layout > * { min-width: 0; }
.kh-training-list { margin: 0; padding-left: 1.25rem; }
.kh-training-list > li {
  padding: 0 0 0.65rem 0.25rem;
  break-inside: avoid;
  overflow-wrap: break-word;
}
.kh-training-list > li + li { margin-top: 0; }
.kh-training-list > li::marker { color: var(--kh-purple); }
.kh-development-list { column-count: 2; column-gap: calc(var(--kh-gap) + 1rem); }
@media (max-width: 767.98px) {
  .kh-content-split, .kh-qualifications-layout { grid-template-columns: minmax(0, 1fr); }
  .kh-page-image { max-width: 380px; margin-inline: auto; }
  .kh-development-list { column-count: 1; }
}

/* ALTERNATING CONTENT IMAGES — version 1.0.0 */
.kh-content-split--image-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.kh-content-split--image-left > .kh-content-split__text { grid-column: 2; grid-row: 1; }
.kh-content-split--image-left > .kh-content-split__image { grid-column: 1; grid-row: 1; }
.kh-content-split--image-left .kh-page-image { margin: 0 auto 0 0; }
.kh-page-image--portrait { max-width: 340px; }
@media (max-width: 767.98px) {
  .kh-content-split--image-left { grid-template-columns: minmax(0, 1fr); }
  .kh-content-split--image-left > .kh-content-split__text,
  .kh-content-split--image-left > .kh-content-split__image { grid-column: auto; grid-row: auto; }
  .kh-content-split--image-left .kh-page-image { margin-inline: auto; }
  .kh-page-image--portrait { max-width: 280px; }
}

/* JOOMLA BLOG CARDS — version 1.0.0
   Applies automatically to the Issues I Work With menu item (106).
   Reuse on another category blog with Page Class: kh-blog-cards.
   Scope to category blogs so full article headings keep their normal size. */
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0;
  column-count: auto;
  column-width: auto;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  box-shadow: none;
  overflow-wrap: anywhere;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item > .item-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item :is(h1, h2, h3) {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 400;
  line-height: 1.4;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item .page-header {
  margin-bottom: 0;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item .readmore {
  margin: auto 0 0;
  padding-top: 0.5rem;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item .readmore > a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--kh-purple);
  border-radius: var(--kh-radius);
  background: var(--kh-purple);
  color: var(--kh-white);
  font-family: var(--kh-body-font);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  text-decoration: none;
}
:is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
    .com-content-category-blog.kh-blog-cards) > .blog-items > .blog-item .readmore > a:is(:hover, :focus-visible) {
  border-color: var(--kh-purple-dark);
  background: var(--kh-purple-dark);
  color: var(--kh-white);
}
@media (max-width: 991.98px) {
  :is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
      .com-content-category-blog.kh-blog-cards) > .blog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  :is(body.itemid-106.view-category.layout-blog .com-content-category-blog,
      .com-content-category-blog.kh-blog-cards) > .blog-items {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

/* TOP-LOGO CUSTOM MODULE — version 1.1.0 */
.kh-top-logo {
  width: 100%;
  padding: 0.75rem var(--kh-gutter);
  background: var(--kh-white);
  color: var(--kh-grey);
}
.kh-top-logo__layout {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: 100%;
}
.kh-top-logo__layout > * { min-width: 0; }
.kh-top-logo__brand { display: block; width: 100%; max-width: 190px; }
.kh-top-logo__brand img {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
}
.kh-top-logo__text { justify-self: end; text-align: right; }
.kh-top-logo .kh-top-logo__tagline {
  margin: 0 0 0.85rem;
  color: var(--kh-purple);
  font-family: var(--kh-heading-font);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.4;
}
.kh-top-logo__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 1.5rem;
}
.kh-top-logo .kh-top-logo__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.25rem 0;
  color: var(--kh-grey);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}
.kh-top-logo__contact > span { min-width: 0; overflow-wrap: anywhere; }
.kh-top-logo .kh-top-logo__contact:hover { color: var(--kh-purple); text-decoration: underline; }
.kh-top-logo__icon {
  display: block;
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--kh-blue);
  font-size: 0;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .kh-top-logo__layout { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .kh-top-logo__brand { max-width: 160px; margin-inline: auto; }
  .kh-top-logo__text { justify-self: stretch; text-align: center; }
  .kh-top-logo .kh-top-logo__tagline { margin-bottom: 0.5rem; }
  .kh-top-logo__contacts { justify-content: center; gap: 0.25rem 1rem; }
}

/* CONTACT ICONS — embedded artwork; no icon font or script required. */
.kh-icon {
  display: inline-block;
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--kh-blue);
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}
.kh-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--kh-icon-mask) no-repeat center / contain;
  mask: var(--kh-icon-mask) no-repeat center / contain;
}
.kh-icon--phone { --kh-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.79%2019.79%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.69%202.79a2%202%200%200%201-.45%202.11L8.09%209.89a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.89.33%201.83.56%202.79.69A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E"); }
.kh-icon--email { --kh-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }

/* CONTACT AND APPOINTMENTS — version 1.0.0 */
.kh-contact__layout { align-items: start; }
.kh-contact__links { display: grid; gap: 0.25rem; }
.kh-contact__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.65rem;
  min-width: 0;
  min-height: 44px;
  color: var(--kh-purple);
  text-decoration: none;
}
.kh-contact__link > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.kh-contact__link:hover { text-decoration: underline; }
.kh-contact__location { margin-top: 1.5rem; }
.kh-contact__address { margin: 0 0 1rem; font-style: normal; }
.kh-contact__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 260px;
  padding: 1.25rem;
  border: 1px dashed var(--kh-border);
  border-radius: var(--kh-radius);
  background: var(--kh-blue-light);
  color: var(--kh-blue-dark);
  font-size: 0.95rem;
  text-align: center;
}
.kh-contact__placeholder > p { margin: 0; }
.kh-contact__placeholder--form { min-height: 360px; background: var(--kh-grey-light); }

/* SINGLE-COLUMN READING SECTIONS — reusable within full-width blocks. */
.kh-container.kh-reading {
  width: 100%;
  max-width: 68ch;
  margin-inline: auto;
  text-align: left;
}
.kh-reading > :last-child { margin-bottom: 0; }

/* PRACTICE MAP — full column width with no placeholder inset. */
.kh-contact__map {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--kh-radius);
  overflow: hidden;
  line-height: 0;
}
.kh-contact__map iframe {
  display: block;
  width: 100%;
  max-width: none;
  height: 360px;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (max-width: 767.98px) {
  .kh-contact__map iframe { height: 300px; }
}
._access-icon {
  color: #232946 !important;
  font-family: Arial !important;
  font-size: 0 !important;
  content: url(https://katehowells-co-uk.stackstaging.com/images/acesssible.png);
  padding: 5px;
  transform: none !important;
  bottom: 0 !important;
  height:100px !important;
  width:100px !important;
  }

/* Kate Howells — Dropdown add-on v1.0 | 9 November 2026
   Append AFTER all existing CSS in user.css.
   Targets nested menu lists with or without MetisMenu item classes.
   Joomla continues to control opening, closing and keyboard navigation. */

@media (min-width: 992px) {
  .container-header .mod-menu > li {
    position: relative;
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) {
    width: max-content !important;
    min-width: 18rem;
    max-width: none !important;
    margin: 0;
    padding: 0.35rem 0;
    border: 1px solid var(--kh-border, #dcdfe3);
    border-top: 3px solid var(--kh-purple, #65516f);
    border-radius: 0 0 0.4rem 0.4rem;
    background: var(--kh-white, #fff);
    box-shadow: 0 8px 22px rgb(67 73 80 / 12%);
    text-align: left;
    list-style: none;
    z-index: 1001;
  }

  .container-header .mod-menu > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
  }

  .container-header .mod-menu > li:nth-last-child(-n+3) > ul {
    right: 0;
    left: auto;
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) > li + li {
    border-top: 1px solid var(--kh-border, #dcdfe3);
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) > li > :is(a, .mod-menu__heading, button.mm-toggler:not(.mm-toggler-link)) {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    max-width: none;
    padding: 0.8rem 1.1rem;
    color: var(--kh-purple, #65516f);
    font-family: var(--kh-heading-font, 'Raleway', Arial, sans-serif);
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.015em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none;
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) > li > :is(a, .mod-menu__heading, button.mm-toggler:not(.mm-toggler-link)) * {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none;
  }

  .container-header .mod-menu :is(ul, .mod-menu__sub) > li > :is(a, button.mm-toggler:not(.mm-toggler-link)):is(:hover, :focus-visible),
  .container-header .mod-menu :is(ul, .mod-menu__sub) > li.current > a {
    background: var(--kh-purple-light, #f1edf3);
    color: var(--kh-purple-dark, #4f3d58);
  }
}