/* ST GILES STYLE D — VERSION 2.3 — BALANCED FULL-WIDTH NAVIGATION */
/* ==========================================================================
   ST GILES STYLE D — PREMIUM CASSIOPEIA FRAMEWORK
   Joomla 5/6 compatible
   ========================================================================== */

/* GOOGLE FONTS
   Add in template index.php or via Web Asset Manager:
   Cormorant Garamond: 500, 600
   Montserrat: 400, 500, 600
*/

:root {
  --sg-navy: #123f59;
  --sg-navy-deep: #0b2f44;
  --sg-teal: #5f9eaa;
  --sg-teal-dark: #477f8a;
  --sg-sage: #b9c8b6;
  --sg-sage-soft: #eef3ed;
  --sg-cream: #f7f3eb;
  --sg-ivory: #fffdf9;
  --sg-gold: #d7a43f;
  --sg-text: #35444a;
  --sg-muted: #6e797d;
  --sg-border: #dce4df;
  --sg-white: #fff;
  --sg-radius-sm: 8px;
  --sg-radius: 14px;
  --sg-radius-lg: 24px;
  --sg-shadow: 0 18px 50px rgba(18, 63, 89, .10);
  --sg-shadow-soft: 0 10px 28px rgba(18, 63, 89, .07);
  --sg-container: 1270px;
  --sg-reading: 780px;
  --sg-section: clamp(3.5rem, 7vw, 7rem);

  --cassiopeia-color-primary: var(--sg-navy);
  --cassiopeia-color-link: var(--sg-navy);
  --cassiopeia-color-hover: var(--sg-teal-dark);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sg-text);
  background: var(--sg-ivory);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--sg-navy); text-decoration: none; }
a:hover, a:focus { color: var(--sg-teal-dark); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.sg-display {
  margin-top: 0;
  color: var(--sg-navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.018em;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.7rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }

.sg-kicker {
  display: block;
  margin-bottom: .8rem;
  color: var(--sg-teal-dark);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sg-lead {
  max-width: 760px;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   CASSIOPEIA STRUCTURE
   Simple, predictable full-width page flow
   -------------------------------------------------------------------------- */

.site-grid {
  display: block !important;
  width: 100%;
  max-width: none;
}

.site-grid > * {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.grid-child,
.sg-container {
  width: min(90%, var(--sg-container));
  max-width: var(--sg-container);
  margin-inline: auto;
}

.container-component {
  width: 100%;
  max-width: none;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.container-component > .grid-child {
  display: block !important;
  width: min(90%, var(--sg-container)) !important;
  max-width: var(--sg-container) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.container-component main,
.container-component .com-content-article,
.container-component .item-page,
.container-component .blog,
.container-component .blog-featured,
.container-component .blog-items,
.container-component .com-content-category,
.container-component .com-content-category-blog,
.container-component .com-content-category__articles,
.container-component .category-list,
.container-component .table-responsive {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.sg-homepage .container-component,
.sg-homepage .container-component,
.container-component.sg-homepage {
  padding-top: 0;
  padding-bottom: 0;
}

body.sg-homepage .container-component > .grid-child,
.sg-homepage .container-component > .grid-child,
.container-component.sg-homepage > .grid-child {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sg-full-bleed {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.sg-homepage .page-header,
.sg-homepage .page-header,
body.sg-homepage .article-info,
body.sg-homepage .pager,
body.sg-homepage .pagination {
  display: none;
}

.container-breadcrumbs .grid-child,
.container-top-a .grid-child,
.container-top-b .grid-child,
.container-bottom-a .grid-child,
.container-bottom-b .grid-child {
  width: min(90%, var(--sg-container));
  max-width: var(--sg-container);
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   TOP LOGO POSITION
   Logo/contact details sit above the navigation
   -------------------------------------------------------------------------- */

.container-top-logo {
  width: 100%;
  background: var(--sg-white);
  border-bottom: 1px solid var(--sg-border);
}

.container-top-logo > .grid-child {
  width: min(90%, var(--sg-container));
  max-width: var(--sg-container);
  margin-inline: auto;
  padding: 1rem 0;
}

.sg-top-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.sg-top-logo__brand img {
  display: block;
  width: auto;
  max-width: 350px;
  max-height: 70px;
}

.sg-top-logo__details {
  margin-left: auto;
  text-align: right;
}

.sg-top-logo__details p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   HEADER / NAVIGATION
   Balanced full-width menu — logo removed from header
   -------------------------------------------------------------------------- */

.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  min-height: 64px;
  padding: 0;

  background: rgba(255, 255, 255, 0.98);
  background-image: none;
  border-bottom: 1px solid var(--sg-border);
  box-shadow: 0 6px 20px rgba(18, 63, 89, 0.05);
}

/* Header now contains navigation only */
.container-header .navbar-brand {
  display: none !important;
}

.container-header > .grid-child,
.container-header .container-nav {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-header .container-nav {
  display: flex;
  justify-content: center;
}

.container-header .container-nav nav,
.container-header .container-nav .navbar,
.container-header nav.navbar {
  width: min(94%, var(--sg-container));
  max-width: var(--sg-container);
  margin: 0 auto;
  padding: 0;
}

.container-header .navbar-collapse {
  width: 100%;
}

/* Balanced rather than stretched */
.container-header .mod-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin: 0;
  padding: 0;

  gap: clamp(1.5rem, 3.6vw, 4rem);
}

.container-header .mod-menu > li {
  position: relative;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Main items */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > .mm-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  width: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;

  margin: 0 !important;
  padding: 0.65rem 0.2rem !important;

  color: var(--sg-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: center;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li > button:hover,
.container-header .mod-menu > li > button:focus,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > button,
.container-header .mod-menu > li.current > button {
  color: var(--sg-teal-dark) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.container-header .mod-menu > li > .mm-toggler::after,
.container-header .mod-menu > li > button::after {
  margin-left: 0.35rem;
  color: currentColor;
}

/* Contact item is now a standard nav item */
.container-header .mod-menu > li.sg-nav-cta > a,
.container-header .mod-menu > li > a.sg-nav-cta {
  margin: 0 !important;
  padding: 0.65rem 0.2rem !important;

  color: var(--sg-text) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.container-header .mod-menu > li.sg-nav-cta > a:hover,
.container-header .mod-menu > li > a.sg-nav-cta:hover {
  color: var(--sg-teal-dark) !important;
  background: transparent !important;
}


/* --------------------------------------------------------------------------
   DESKTOP DROPDOWNS
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) {

  .container-header .metismenu.mod-menu > li {
    position: relative;
  }

  /* Keep dropdowns tied to the parent item */
  .container-header .metismenu.mod-menu > li > .mm-collapse,
  .container-header .metismenu.mod-menu > li > ul,
  .container-header .mod-menu > li > ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1200;

    width: max-content !important;
    min-width: 530px !important;
    max-width: 620px !important;

    margin: 0 !important;
    padding: 0.55rem 0 !important;

    background: var(--sg-white) !important;
    background-image: none !important;

    border: 1px solid var(--sg-border) !important;
    border-top: 2px solid var(--sg-teal) !important;
    border-radius: 0 0 8px 8px !important;

    box-shadow: 0 14px 30px rgba(18, 63, 89, 0.12) !important;

    transform: none !important;
  }

  /* Services needs a little extra width, but must remain contained */
  .container-header .metismenu.mod-menu > li:nth-child(2) > .mm-collapse,
  .container-header .metismenu.mod-menu > li:nth-child(2) > ul {
    min-width: 520px !important;
    max-width: 560px !important;
  }

  /* Right-side dropdowns open inward */
  .container-header .metismenu.mod-menu > li:nth-last-child(-n+2) > .mm-collapse,
  .container-header .metismenu.mod-menu > li:nth-last-child(-n+2) > ul {
    right: 0 !important;
    left: auto !important;
  }

  .container-header .metismenu.mod-menu .mm-collapse > li,
  .container-header .metismenu.mod-menu ul ul > li,
  .container-header .mod-menu ul > li {
    display: block;
    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .container-header .metismenu.mod-menu .mm-collapse > li > a,
  .container-header .metismenu.mod-menu .mm-collapse > li > span,
  .container-header .metismenu.mod-menu ul ul > li > a,
  .container-header .metismenu.mod-menu ul ul > li > span,
  .container-header .mod-menu ul > li > a,
  .container-header .mod-menu ul > li > span {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0.72rem 1.15rem !important;

    color: var(--sg-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Colour-only submenu hover */
  .container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
  .container-header .metismenu.mod-menu .mm-collapse > li > a:focus,
  .container-header .metismenu.mod-menu .mm-collapse > li.active > a,
  .container-header .metismenu.mod-menu ul ul > li > a:hover,
  .container-header .metismenu.mod-menu ul ul > li > a:focus,
  .container-header .mod-menu ul > li > a:hover,
  .container-header .mod-menu ul > li > a:focus {
    color: var(--sg-teal-dark) !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
}


/* Mobile toggler */
.container-header .navbar-toggler {
  width: 46px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;

  color: var(--sg-navy);
  background: transparent;
  border: 1px solid var(--sg-border);
  border-radius: 6px;
  box-shadow: none;
}

.container-header .navbar-toggler-icon {
  width: 22px;
  height: 22px;
  background-image: none !important;
}

.container-header .navbar-toggler-icon::before {
  display: block;
  color: currentColor;
  font-family: "Font Awesome 6 Free";
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 22px;
  content: "\f0c9";
}


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.sg-btn,
.btn-primary,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 50px;
  padding: .85rem 1.4rem;
  color: var(--sg-white);
  background: var(--sg-navy);
  border: 1px solid var(--sg-navy);
  border-radius: 999px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: .2s ease;
}

.sg-btn:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  color: var(--sg-white);
  background: var(--sg-teal-dark);
  border-color: var(--sg-teal-dark);
  transform: translateY(-2px);
}

.sg-btn--outline {
  color: var(--sg-navy);
  background: transparent;
  border-color: var(--sg-navy);
}

.sg-btn--outline:hover {
  color: var(--sg-white);
  background: var(--sg-navy);
}

.sg-btn--light {
  color: var(--sg-navy);
  background: var(--sg-white);
  border-color: var(--sg-white);
}

.sg-text-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--sg-gold);
  font-weight: 600;
}

.sg-text-link::after {
  content: "→";
  transition: transform .2s ease;
}

.sg-text-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.sg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(215,164,63,.12), transparent 28%),
    linear-gradient(135deg, #fbf8f1 0%, #f5f1e9 55%, #edf3ef 100%);
}

.sg-hero__grid {
  width: min(100%, 1700px);
  min-height: clamp(590px, 72vh, 760px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 1.02fr);
}

.sg-hero__content {
  display: flex;
  align-items: center;
  padding: clamp(3.2rem, 6vw, 7rem) clamp(2rem, 5vw, 6rem);
}

.sg-hero__inner {
  width: 100%;
  max-width: 690px;
  margin-left: auto;
}

.sg-hero h1 { max-width: 720px; margin-bottom: 1.4rem; }

.sg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

.sg-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.7rem;
  margin-top: 2.2rem;
}

.sg-trust-item {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--sg-text);
  font-size: .84rem;
  font-weight: 500;
}

.sg-trust-item i { color: var(--sg-teal-dark); font-size: 1.15rem; }

.sg-hero__image {
  position: relative;
  min-height: 100%;
}

.sg-hero__image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(247,243,235,.18), transparent 28%);
  pointer-events: none;
}

.sg-hero__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.sg-section { padding: var(--sg-section) 0; }
.sg-section--white { background: var(--sg-white); }
.sg-section--cream { background: var(--sg-cream); }
.sg-section--sage { background: var(--sg-sage-soft); }

.sg-section--navy {
  color: rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 15% 20%, rgba(95,158,170,.18), transparent 25%),
    linear-gradient(135deg, var(--sg-navy-deep), var(--sg-navy));
}

.sg-section--navy h2,
.sg-section--navy h3,
.sg-section--navy h4 { color: var(--sg-white); }

.sg-section__heading {
  max-width: 780px;
  margin: 0 auto 2.7rem;
  text-align: center;
}

.sg-section__heading p:last-child { margin-bottom: 0; }

.sg-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: stretch;
}

.sg-split__image { min-height: 520px; }
.sg-split__image img { width: 100%; height: 100%; display: block; object-fit: cover; }

.sg-split__content {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(3.2rem, 6vw, 6.5rem);
  background: var(--sg-sage-soft);
}

.sg-split__inner { position: relative; z-index: 2; max-width: 650px; }

.sg-leaf-bg::after {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 380px;
  height: 480px;
  content: "";
  opacity: .18;
  background:
    radial-gradient(ellipse at 40% 20%, var(--sg-sage) 0 17%, transparent 18%),
    radial-gradient(ellipse at 65% 38%, var(--sg-sage) 0 15%, transparent 16%),
    radial-gradient(ellipse at 34% 58%, var(--sg-sage) 0 16%, transparent 17%),
    radial-gradient(ellipse at 66% 75%, var(--sg-sage) 0 13%, transparent 14%);
  transform: rotate(-15deg);
}

/* --------------------------------------------------------------------------
   GRIDS / CARDS
   -------------------------------------------------------------------------- */

.sg-grid { display: grid; gap: 1.2rem; }
.sg-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sg-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sg-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sg-grid--5 { grid-template-columns: repeat(5,minmax(0,1fr)); }

.sg-card {
  height: 100%;
  padding: 1.7rem;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sg-card:hover {
  border-color: rgba(95,158,170,.45);
  box-shadow: var(--sg-shadow-soft);
  transform: translateY(-5px);
}

.sg-card--center { text-align: center; }

.sg-card--link {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.sg-card--link .sg-text-link { margin-top: auto; padding-top: 1rem; }

.sg-card__icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--sg-navy);
  background: var(--sg-sage-soft);
  border-radius: 50%;
  font-size: 1.45rem;
}

.sg-icon-card {
  min-height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.45rem 1rem;
  color: var(--sg-navy);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  text-align: center;
  transition: .22s ease;
}

.sg-icon-card i { color: var(--sg-navy); font-size: 2rem; }
.sg-icon-card span { font-weight: 600; line-height: 1.35; }

.sg-icon-card:hover {
  color: var(--sg-navy);
  border-color: var(--sg-gold);
  box-shadow: var(--sg-shadow-soft);
  transform: translateY(-4px);
}

/* staggered premium services */
.sg-services-stagger .sg-card:nth-child(2),
.sg-services-stagger .sg-card:nth-child(5) {
  transform: translateY(28px);
}

.sg-services-stagger .sg-card:nth-child(2):hover,
.sg-services-stagger .sg-card:nth-child(5):hover {
  transform: translateY(23px);
}

/* --------------------------------------------------------------------------
   WHY CHOOSE
   -------------------------------------------------------------------------- */

.sg-reasons {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.sg-reason {
  padding: 1.4rem 2rem;
  text-align: center;
}

.sg-reason + .sg-reason { border-left: 1px solid rgba(255,255,255,.2); }

.sg-reason__icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--sg-gold);
  border: 1px solid var(--sg-gold);
  border-radius: 50%;
  font-size: 1.45rem;
}

.sg-reason h3 {
  margin-bottom: .45rem;
  color: var(--sg-white);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.sg-reason p {
  margin-bottom: 0;
  color: rgba(255,255,255,.75);
  font-size: .86rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   TEAM / CTA / FORMS
   -------------------------------------------------------------------------- */

.sg-team-card {
  display: grid;
  grid-template-columns: minmax(170px, 36%) minmax(0, 1fr);
  align-items: stretch;
  min-height: 245px;
  overflow: hidden;
  background: var(--sg-white);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow-soft);
}

.sg-team-card__image {
  min-height: 245px;
  overflow: hidden;
}

.sg-team-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.sg-team-card:hover .sg-team-card__image img {
  transform: scale(1.025);
}

.sg-team-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.6rem 1.75rem;
}

.sg-team-card__content h3 {
  margin-bottom: 0.55rem;
}

.sg-team-card__content p {
  margin-bottom: 0.8rem;
}

.sg-team-card__content .sg-text-link {
  margin-top: auto;
  padding-top: 0.35rem;
}

.sg-team-card__role {
  margin-bottom: 0.45rem;
  color: var(--sg-teal-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sg-cta {
  padding: clamp(2.8rem,5vw,4.8rem) 0;
  color: var(--sg-white);
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.13), transparent 24%),
    linear-gradient(90deg,var(--sg-teal-dark),var(--sg-teal));
}

.sg-cta__inner {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2rem;
}

.sg-cta h2 { margin-bottom:.45rem; color:var(--sg-white); }
.sg-cta p { max-width:760px; margin-bottom:0; color:rgba(255,255,255,.88); }

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width:100%;
  min-height:52px;
  padding:.78rem .95rem;
  color:var(--sg-text);
  background:var(--sg-white);
  border:1px solid #ccd7d1;
  border-radius:8px;
  box-shadow:none;
}

textarea { min-height:160px; }
input:focus, textarea:focus, select:focus {
  border-color:var(--sg-teal);
  box-shadow:0 0 0 3px rgba(95,158,170,.16);
  outline:0;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.container-footer {
  margin-top:0;
  color:var(--sg-text);
  background:var(--sg-white);
  background-image:none;
  border-top:1px solid var(--sg-border);
}

.container-footer .grid-child { padding-top:3rem; padding-bottom:3rem; }

.sg-footer-main {
  display:grid;
  grid-template-columns:1.1fr 1.5fr;
  align-items:center;
  gap:3rem;
}

.sg-footer-logos {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(1.5rem,4vw,4rem);
  flex-wrap:wrap;
}

.sg-footer-logos img { width:auto; max-width:150px; max-height:88px; object-fit:contain; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL — CSS ONLY ENHANCEMENT
   Add class sg-reveal to a section/card.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sg-reveal {
      opacity: 0;
      transform: translateY(30px);
      animation: sg-reveal linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }

    @keyframes sg-reveal {
      to { opacity:1; transform:translateY(0); }
    }
  }
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

.sg-text-center { text-align:center; }
.sg-mt-2 { margin-top:2rem; }
.sg-mb-0 { margin-bottom:0; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

  .container-top-logo > .grid-child {
    width: min(calc(100% - 2rem), var(--sg-container));
  }

  .sg-top-logo {
    gap: 1rem;
  }

  .sg-top-logo__brand img {
    max-width: 300px;
    max-height: 60px;
  }

  .container-header {
    min-height: 62px;
  }

  .container-header .container-nav {
    position: relative;
    display: block;
    padding: 0.6rem 1rem !important;
  }

  .container-header .container-nav nav,
  .container-header .container-nav .navbar,
  .container-header nav.navbar {
    display: block;
    width: 100%;
    max-width: none;
  }

  .container-header .navbar-toggler {
    display: inline-flex !important;
  }

  .container-header .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    display: block !important;
  }

  .container-header .navbar-collapse {
    position: absolute;
    top: 100%;
    right: 1rem;
    left: 1rem;
    z-index: 1200;

    width: auto;
    padding: 0.7rem 1rem 1rem;

    background: var(--sg-white);
    border: 1px solid var(--sg-border);
    border-top: 0;
    border-radius: 0 0 var(--sg-radius) var(--sg-radius);
    box-shadow: var(--sg-shadow);
  }

  .container-header .mod-menu {
    display: block;
    width: 100%;
  }

  .container-header .mod-menu > li {
    display: block;
    width: 100%;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > .mm-toggler,
  .container-header .mod-menu > li.sg-nav-cta > a,
  .container-header .mod-menu > li > a.sg-nav-cta {
    width: 100% !important;
    min-height: auto !important;

    justify-content: space-between;

    padding: 0.8rem 0.4rem !important;

    font-size: 0.9rem !important;
    text-align: left;
    text-transform: uppercase !important;
    white-space: normal;

    background: transparent !important;
  }

  .container-header .metismenu.mod-menu .mm-collapse,
  .container-header .metismenu.mod-menu > li > ul,
  .container-header .mod-menu > li > ul {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 0 0.35rem 0.8rem !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .container-header .metismenu.mod-menu .mm-collapse > li > a,
  .container-header .metismenu.mod-menu .mm-collapse > li > span,
  .container-header .metismenu.mod-menu ul ul > li > a,
  .container-header .metismenu.mod-menu ul ul > li > span,
  .container-header .mod-menu ul > li > a,
  .container-header .mod-menu ul > li > span {
    width: 100% !important;

    padding: 0.7rem 0.5rem !important;

    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    white-space: normal !important;

    background: transparent !important;
  }

  .sg-hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .sg-hero__content {
    padding: 4rem max(1.5rem, calc((100vw - var(--sg-container)) / 2));
  }

  .sg-hero__inner {
    max-width: 780px;
    margin: 0;
  }

  .sg-hero__image {
    min-height: 440px;
  }

  .sg-split {
    grid-template-columns: 1fr;
  }

  .sg-split__image {
    min-height: 430px;
  }

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

  .sg-reason:nth-child(3) {
    border-left: 0;
  }

  .sg-reason:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .sg-services-stagger .sg-card:nth-child(2),
  .sg-services-stagger .sg-card:nth-child(5),
  .sg-services-stagger .sg-card:nth-child(2):hover,
  .sg-services-stagger .sg-card:nth-child(5):hover {
    transform: none;
  }

  .sg-team-card {
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    min-height: 220px;
  }

  .sg-team-card__image {
    min-height: 220px;
  }

  .sg-cta__inner,
  .sg-footer-main {
    grid-template-columns: 1fr;
  }

  .sg-footer-logos {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  :root {
    --sg-section: 3.7rem;
  }

  .container-top-logo > .grid-child {
    width: min(calc(100% - 1.5rem), var(--sg-container));
  }

  .sg-top-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sg-top-logo__details {
    margin-left: 0;
    text-align: left;
  }

  .sg-top-logo__brand img {
    max-width: min(280px, 80vw);
  }

  .sg-container,
  .site-grid > .grid-child,
  .container-component > .grid-child {
    width: min(calc(100% - 1.5rem), var(--sg-container));
  }

  .container-header {
    padding-inline: 0.75rem;
  }

  .container-header .navbar-brand img {
    max-width: min(260px, 68vw);
  }

  .container-header .navbar-collapse {
    right: 0.75rem;
    left: 0.75rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 1.9rem;
  }

  .sg-hero__content {
    padding: 3.2rem 1.25rem;
  }

  .sg-hero__image {
    min-height: 330px;
  }

  .sg-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sg-hero__actions .sg-btn {
    width: 100%;
  }

  .sg-hero__trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .sg-split__image {
    min-height: 330px;
  }

  .sg-split__content {
    padding: 2.7rem 1.25rem;
  }

  .sg-grid--2,
  .sg-grid--3,
  .sg-grid--4,
  .sg-grid--5,
  .sg-reasons {
    grid-template-columns: 1fr;
  }

  .sg-card {
    padding: 1.4rem;
  }

  .sg-team-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sg-team-card__image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .sg-team-card__content {
    padding: 1.35rem;
  }

  .sg-reason {
    padding: 1.5rem 1rem;
  }

  .sg-reason + .sg-reason,
  .sg-reason:nth-child(3),
  .sg-reason:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }

  .sg-cta {
    text-align: center;
  }

  .sg-cta__inner {
    justify-items: center;
  }

  .sg-cta .sg-btn {
    width: 100%;
  }

  .sg-footer-main {
    text-align: center;
  }

  .sg-footer-logos {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* ==========================================================================
   SERVICE PAGE INTRO
   Reusable text panel with right-hand image underlay
   ========================================================================== */

.sg-service-page {
  width: 100%;
}

.sg-service-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 0;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(215, 164, 63, 0.1),
      transparent 26%
    ),
    var(--sg-cream);
}

.sg-service-intro__layout {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(420px, 0.96fr);
  align-items: center;
  width: min(90%, var(--sg-container));
  max-width: var(--sg-container);
  min-height: 650px;
  margin-inline: auto;
}

.sg-service-intro__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: clamp(2rem, 4vw, 4.25rem);
  background: rgba(255, 253, 249, 0.97);
  border-left: 4px solid var(--sg-gold);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
}

.sg-service-intro__content h1 {
  margin-bottom: 1.25rem;
  font-size: 3rem;
}

.sg-service-intro__content p:last-of-type {
  margin-bottom: 0;
}

.sg-service-intro__image {
  position: relative;
  z-index: 1;
  height: calc(100% - 4rem);
  min-height: 560px;
  margin-left: -5rem;
  overflow: hidden;
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow);
}

.sg-service-intro__image::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 249, 0.34) 0%,
    rgba(255, 253, 249, 0.08) 32%,
    transparent 60%
  );
}

.sg-service-intro__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sg-service-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
}

/* Tablet */

@media (max-width: 991.98px) {
  .sg-service-intro__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sg-service-intro__content {
    width: calc(100% - 2rem);
    max-width: none;
    margin: 0 auto -3rem;
  }

  .sg-service-intro__image {
    height: auto;
    min-height: 450px;
    margin: 0;
    border-radius: var(--sg-radius);
  }

  .sg-service-intro__image img {
    min-height: 450px;
  }
}

/* Mobile */

@media (max-width: 767.98px) {
  .sg-service-intro {
    padding: 2.5rem 0;
  }

  .sg-service-intro__layout {
    display: flex;
    flex-direction: column;
  }

  .sg-service-intro__content {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.25rem;
    border-left-width: 3px;
    border-radius: var(--sg-radius-sm);
  }

  .sg-service-intro__image {
    order: 2;
    width: 100%;
    min-height: 300px;
    margin-top: 1rem;
  }

  .sg-service-intro__image img {
    min-height: 300px;
  }

  .sg-service-intro__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sg-service-intro__actions .sg-btn {
    width: 100%;
  }
}


/* ==========================================================================
   STANDARD JOOMLA ARTICLE / BLOG ALIGNMENT
   ========================================================================== */

.container-component .sg-section {
  width: 100%;
  max-width: none;
}

.container-component .sg-section > .sg-container {
  width: min(90%, var(--sg-container));
  max-width: var(--sg-container);
  margin-inline: auto;
}

.blog-items,
.items-leading,
.items-row {
  width: 100%;
  max-width: none;
}

.blog-items {
  gap: 1.5rem;
}

.blog-items > *,
.items-leading > *,
.items-row > *,
.blog-item {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 767.98px) {
  .grid-child,
  .sg-container,
  .container-component > .grid-child,
  .container-breadcrumbs .grid-child,
  .container-top-a .grid-child,
  .container-top-b .grid-child,
  .container-bottom-a .grid-child,
  .container-bottom-b .grid-child {
    width: min(calc(100% - 1.5rem), var(--sg-container)) !important;
  }

  body.sg-homepage .container-component > .grid-child,
  .sg-homepage .container-component > .grid-child,
  .container-component.sg-homepage > .grid-child {
    width: 100% !important;
  }
}
/* Image-left variation */

.sg-service-intro--image-left .sg-service-intro__layout {
  grid-template-columns:
    minmax(420px, 0.96fr)
    minmax(0, 1.04fr);
}

.sg-service-intro--image-left .sg-service-intro__image {
  grid-column: 1;
  grid-row: 1;
  margin-right: -5rem;
  margin-left: 0;
}

.sg-service-intro--image-left .sg-service-intro__content {
  grid-column: 2;
  grid-row: 1;
}

/* Tablet and mobile */

@media (max-width: 991.98px) {
  .sg-service-intro--image-left .sg-service-intro__layout {
    grid-template-columns: 1fr;
  }

  .sg-service-intro--image-left .sg-service-intro__image,
  .sg-service-intro--image-left .sg-service-intro__content {
    grid-column: 1;
    grid-row: auto;
  }

  .sg-service-intro--image-left .sg-service-intro__image {
    margin-right: 0;
    margin-left: 0;
  }

  .sg-service-intro--image-left .sg-service-intro__content {
    margin: -3rem auto 0;
  }
}

@media (max-width: 767.98px) {
  .sg-service-intro--image-left .sg-service-intro__image {
    order: 1;
  }

  .sg-service-intro--image-left .sg-service-intro__content {
    order: 2;
    margin: 1rem 0 0;
  }
}
/* Reference / Further Reading Panel */

.sg-reference-panel{
    margin-top:3rem;
    padding:2rem;
    background:var(--sg-colour-surface);
    border:1px solid var(--sg-colour-border);
    border-radius:18px;
}

.sg-reference-panel h2{
    margin-bottom:1rem;
}

.sg-reference-panel ul{
    margin:0;
    padding-left:1.2rem;
}

.sg-reference-panel li{
    margin-bottom:.6rem;
}

.sg-reference-panel a{
    word-break:break-word;
}
/* =========================================================
   TEAM CATEGORY BLOG
   Keeps Joomla/Cassiopeia blog column behaviour intact
   Add page class: sg-team-blog
   ========================================================= */

/* Allow Cassiopeia/Joomla to control the blog columns */
.sg-team-blog .blog-items {
  align-items: stretch;
  gap: 2rem;
}

/* Individual team member */
.sg-team-blog .blog-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--sg-colour-border, #dfe4e6);
  border-radius: 0;
}

/* Intro image wrapper */
.sg-team-blog .blog-item .item-image {
  float: none;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 1.25rem;
  overflow: hidden;
}

/* Make every profile image consistent */
.sg-team-blog .blog-item .item-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

/* Article title */
.sg-team-blog .blog-item .item-title,
.sg-team-blog .blog-item h2,
.sg-team-blog .blog-item h2 a {
  margin: 0 0 0.75rem;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  line-height: 1.08;
  color: var(--sg-colour-heading, #17465f);
  text-decoration: none;
}

/* Prevent article content from overflowing its column */
.sg-team-blog .blog-item .item-content,
.sg-team-blog .blog-item .item-content p {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Qualifications/introduction */
.sg-team-blog .blog-item .item-content {
  flex: 1;
}

.sg-team-blog .blog-item .item-content p {
  margin: 0 0 1rem;
  line-height: 1.65;
}

/* Keep Read More aligned at the bottom */
.sg-team-blog .blog-item .readmore {
  margin-top: auto;
  padding-top: 1rem;
}

.sg-team-blog .blog-item .readmore a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--sg-colour-border, #d5dde1);
  border-radius: 4px;
  color: var(--sg-colour-heading, #17465f);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.sg-team-blog .blog-item .readmore a:hover,
.sg-team-blog .blog-item .readmore a:focus {
  background: var(--sg-colour-heading, #17465f);
  border-color: var(--sg-colour-heading, #17465f);
  color: #fff;
}

/* Tidy front-end editing controls */
.sg-team-blog .blog-item .icons {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.sg-team-blog .blog-item {
  position: relative;
}

/* Tablet */
@media (max-width: 991.98px) {
  .sg-team-blog .blog-items {
    gap: 1.5rem;
  }

  .sg-team-blog .blog-item {
    padding: 1.25rem;
  }

  .sg-team-blog .blog-item .item-image {
    max-width: 190px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .sg-team-blog .blog-item {
    padding: 1rem;
  }

  .sg-team-blog .blog-item .item-image {
    max-width: 170px;
  }
}
/* =========================================================
   INDIVIDUAL TEAM PROFILE
   ========================================================= */

.sg-profile-page {
  width: 100%;
}

.sg-profile-header {
  margin-bottom: 1.5rem;
}

.sg-profile-header h1 {
  margin-bottom: 0.35rem;
}

.sg-profile-qualifications {
  margin: 0;
  color: var(--sg-colour-accent, #377f8f);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5;
}

/* Opening biography and portrait */

.sg-profile-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin: 1rem 0 2.75rem;
}

.sg-profile-intro__content {
  min-width: 0;
}

.sg-profile-intro__content p:first-child {
  margin-top: 0;
}

.sg-profile-intro__image {
  width: 100%;
  max-width: 240px;
  justify-self: end;
}

.sg-profile-intro__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* Main biography */

.sg-profile-body {
  width: 100%;
}

.sg-profile-body h2 {
  margin-top: 2.5rem;
}

.sg-profile-contact {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--sg-colour-surface, #f5f7f7);
  border-left: 3px solid var(--sg-colour-accent, #377f8f);
}

.sg-profile-contact p:last-child {
  margin-bottom: 0;
}

/* Professional logos */

.sg-profile-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.sg-profile-logos img {
  display: block;
  width: auto;
  max-width: 160px;
  max-height: 110px;
  height: auto;
  object-fit: contain;
  background: transparent;
}

/* Tablet */

@media (max-width: 767.98px) {
  .sg-profile-intro {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 1.5rem;
  }

  .sg-profile-intro__image {
    max-width: 170px;
  }
}

/* Mobile */

@media (max-width: 575.98px) {
  .sg-profile-intro {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .sg-profile-intro__image {
    grid-row: 1;
    width: 100%;
    max-width: 165px;
    justify-self: start;
  }

  .sg-profile-intro__content {
    grid-row: 2;
  }

  .sg-profile-contact {
    padding: 1.1rem;
  }

  .sg-profile-logos {
    gap: 1rem;
  }

  .sg-profile-logos img {
    max-width: 125px;
    max-height: 90px;
  }
}
/* =========================================================
   CORRECT CASSIOPEIA INNER PAGE WIDTH
   container-component is itself the site-grid child
   ========================================================= */

body:not(.sg-homepage) .site-grid > .container-component {
  width: min(90%, var(--sg-container)) !important;
  max-width: var(--sg-container) !important;
  margin-inline: auto !important;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Do not allow the Joomla article to escape that container */
body:not(.sg-homepage) .container-component > main,
body:not(.sg-homepage) .container-component .item-page,
body:not(.sg-homepage) .container-component .com-content-article {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}


/* =========================================================
   INDIVIDUAL PROFILE PAGE
   ========================================================= */

.sg-profile-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Joomla-generated article title */
.item-page > .page-header,
.com-content-article > .page-header {
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.5rem;
}

.item-page > .page-header h1,
.item-page > .page-header h2,
.com-content-article > .page-header h1,
.com-content-article > .page-header h2 {
  margin: 0;
  font-size: 3rem;
  line-height: 1.05;
}

/* Qualifications beneath the Joomla title */
.sg-profile-qualifications {
  width: 100%;
  margin: 0 0 2rem;
  color: var(--sg-teal-dark);
  font-size: 1rem;
  line-height: 1.55;
}

/* Introduction panel */
.sg-profile-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 210px !important;
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 2.5rem !important;
  padding: clamp(1.75rem, 3vw, 2.75rem);

  background: var(--sg-cream);
  border: 1px solid var(--sg-border);
}

.sg-profile-intro__content {
  min-width: 0;
}

.sg-profile-intro__content p:first-child {
  margin-top: 0;
}

.sg-profile-intro__content p:last-child {
  margin-bottom: 0;
}

.sg-profile-intro__image {
  width: 210px !important;
  max-width: 210px !important;
  justify-self: end;
  overflow: hidden;
  background: transparent;
}

.sg-profile-intro__image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* Remaining biography */
.sg-profile-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.sg-profile-body p,
.sg-profile-body h2,
.sg-profile-body h3 {
  max-width: none;
}


/* Mobile */
@media (max-width: 767.98px) {

  body:not(.sg-homepage) .site-grid > .container-component {
    width: calc(100% - 1.5rem) !important;
  }

  .sg-profile-intro {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .sg-profile-intro__image {
    grid-row: 1;
    width: 160px !important;
    max-width: 160px !important;
    justify-self: start;
  }

  .sg-profile-intro__content {
    grid-row: 2;
  }
}
/* =========================================================
   SIMPLE CONTENT BOX
   ========================================================= */

.sg-simple-page {
  width: 100%;
}

.sg-simple-box {
  width: min(100%, 920px);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--sg-white);
  border: 1px solid var(--sg-border);
  border-left: 4px solid var(--sg-gold);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow-soft);
}

.sg-simple-box h1 {
  margin-bottom: 1.25rem;
  font-size: 3rem;
}

.sg-simple-box p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .sg-simple-box {
    padding: 1.5rem 1.25rem;
    border-left-width: 3px;
  }
}
/* ==========================================================
   CONTACT PAGE
   ========================================================== */

.sg-contact-card{

    max-width:1100px;
    margin:auto;

    background:#fff;
    border:1px solid var(--sg-border);
    box-shadow:var(--sg-shadow-soft);
}

.sg-contact-grid{

    display:grid;
    grid-template-columns:1.3fr .9fr;

}

.sg-contact-main{

    padding:3rem;

}

.sg-contact-side{

    padding:3rem;

    background:var(--sg-sage-soft);

}

.sg-contact-side address{

    font-style:normal;

    line-height:1.8;

    margin:1.5rem 0;

}

.sg-contact-side .sg-btn{

    margin-top:1rem;

}

.sg-contact-parking{

    padding:2.5rem 3rem;

    border-top:1px solid var(--sg-border);

    background:var(--sg-cream);

}

.sg-contact-main h2,
.sg-contact-side h2,
.sg-contact-parking h2{

    font-size:2.7rem;

    margin-top:2rem;

}

.sg-contact-main h2:first-of-type{

    margin-top:1rem;

}

@media (max-width:768px){

.sg-contact-grid{

grid-template-columns:1fr;

}

.sg-contact-main,
.sg-contact-side,
.sg-contact-parking{

padding:1.5rem;
}
}
/* ==========================================================
   FOOTER
   ========================================================== */

.sg-footer{

    background:#fafaf8;

    border-top:1px solid var(--sg-border);

    margin-top:5rem;

}

.sg-footer-grid{

    display:grid;

    grid-template-columns:1fr auto;

    gap:4rem;

    align-items:center;

    padding:3.5rem 0;

}

.sg-footer-contact h3{

    margin-bottom:1rem;

}

.sg-footer-contact address{

    font-style:normal;

    line-height:1.8;

    margin-bottom:1.5rem;

}

.sg-footer-contact p{

    margin:.35rem 0;

}

.sg-footer-logos{

    display:flex;

    gap:3rem;

    align-items:center;

    justify-content:flex-end;

}

.sg-footer-logos img{

    height:90px;

    width:auto;

    object-fit:contain;

    transition:.25s;

}

.sg-footer-logos img:hover{

    transform:translateY(-3px);

}

.sg-footer-bottom{

    border-top:1px solid var(--sg-border);

    padding:1rem 0;

    font-size:.95rem;

}

.sg-footer-bottom p{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin:0;

}

.sg-footer-links{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.sg-footer-links a{

    text-decoration:none;

}

@media(max-width:768px){

.sg-footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:2rem;

}

.sg-footer-logos{

justify-content:center;

flex-wrap:wrap;

gap:2rem;

}

.sg-footer-logos img{

height:70px;

}

.sg-footer-bottom p{

flex-direction:column;

}

}

/* ==========================================================================
   GLOBAL HEADING SCALE — FINAL TYPOGRAPHY BASELINE
   ========================================================================== */

h1 {
  font-size: 2.3rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.6rem;
}

/* Keep all internal page H1/H2 variants on the same hierarchy */
.sg-service-intro__content h1,
.sg-simple-box h1,
.item-page > .page-header h1,
.com-content-article > .page-header h1 {
  font-size: 3rem;
}

.item-page > .page-header h2,
.com-content-article > .page-header h2,
.sg-profile-body h2,
.sg-contact-main h2,
.sg-contact-side h2,
.sg-contact-parking h2 {
  font-size: 2.7rem;
}

@media (max-width: 767.98px) {
  h1,
  .sg-service-intro__content h1,
  .sg-simple-box h1,
  .item-page > .page-header h1,
  .com-content-article > .page-header h1 {
    font-size: 2.5rem;
  }

  h2,
  .item-page > .page-header h2,
  .com-content-article > .page-header h2,
  .sg-profile-body h2,
  .sg-contact-main h2,
  .sg-contact-side h2,
  .sg-contact-parking h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 1.9rem;
  }
}
.top-logo {
  width: 100%;
  background: #f7f4ec;
  }

.container-header {
  z-index: 1030;
}
/* =========================================================
   HOME PAGE - JOOMLA FRONT-END EDIT BUTTON
   ========================================================= */

.com-content-article:has(.sg-home) {
  position: relative;
}

.com-content-article:has(.sg-home) > .icons {
  position: absolute;
  top: 1rem;
  right: 5%;
  z-index: 999;
  width: auto;
}

.com-content-article:has(.sg-home) > .icons .btn {
  width: auto;
}
@media (width <= 991.98px) {
  .container-header .mod-menu .mod-menu__sub a, .container-header .mod-menu .mod-menu__sub span {
    color: #000;
  }
}