/* ==========================================================================
   Magengrim — layout fixes
   1. Footer          — column alignment, one-row layout, bottom bar
   2. Scrolling       — the document is the only scroll container
   3. Legacy nav      — the theme's off-canvas menu, retired
   4. Backgrounds     — cover, centre, never tile
   5. Scrollbar       — thin, in the site accent
   6. Header offset   — page clears the fixed header
   7. Page hero       — looping video background (About + Contact)
   Loaded last so it wins over the inherited Elementor / JKit rules.
   ========================================================================== */

/* ==========================================================================
   1. FOOTER
   The heading and link-list widgets both carried `elementor-widget__width-auto`,
   which made them sit side by side instead of stacking. Each footer column is
   now a proper stack: title on top, links beneath, all left-aligned.
   ========================================================================== */

.ekit-template-content-footer .elementor-element-52436446 > .elementor-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 24px;
}

.ekit-template-content-footer .elementor-element-52436446 .elementor-column {
  display: flex;
}

.ekit-template-content-footer .elementor-element-52436446 .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  gap: 0;
}

/* Cancel the auto-width behaviour that broke the stacking. */
.ekit-template-content-footer .elementor-widget__width-auto,
.ekit-template-content-footer .elementor-widget-mobile__width-initial {
  width: 100% !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

/* Column titles */
.ekit-template-content-footer .elementor-widget-heading {
  margin-bottom: 18px !important;
}

.ekit-template-content-footer .elementor-widget-heading .elementor-heading-title {
  text-align: left;
  line-height: 1.3;
  margin: 0;
}

/* Link lists */
.ekit-template-content-footer .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.ekit-template-content-footer .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.ekit-template-content-footer .elementor-icon-list-item a {
  display: inline-block;
  padding: 0;
  line-height: 1.4;
}

/* Brand column */
.ekit-template-content-footer .elementor-element-7fde8fcd .elementor-widget-image {
  margin-bottom: 20px !important;
}

.ekit-template-content-footer .elementor-element-7fde8fcd img {
  width: 140px;
  height: auto;
  max-width: 100%;
}

/* Bottom bar */
.ekit-template-content-footer .elementor-element-67472cbc > .elementor-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

/* Responsive column widths */
@media (max-width: 1024px) {
  .ekit-template-content-footer .elementor-element-52436446 .elementor-column {
    width: 50% !important;
  }
}

@media (max-width: 767px) {
  .ekit-template-content-footer .elementor-element-52436446 > .elementor-container {
    gap: 28px 0;
  }

  .ekit-template-content-footer .elementor-element-52436446 .elementor-column {
    width: 100% !important;
  }

  .ekit-template-content-footer .elementor-widget-heading {
    margin-bottom: 12px !important;
  }

  .ekit-template-content-footer .elementor-element-67472cbc > .elementor-container {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Footer columns — keep all four on one row at desktop
   The theme gives each column an explicit percentage width; combined with the
   row gap that overflowed 100% and pushed "Social Media" onto a second line.
   Letting the columns flex instead keeps them on a single row.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .ekit-template-content-footer .elementor-element-52436446 > .elementor-container {
    flex-wrap: nowrap;
    gap: 0 40px;
  }

  .ekit-template-content-footer .elementor-element-52436446 > .elementor-container > .elementor-column {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    min-width: 0;
  }

  /* The brand column carries the logo and strapline, so it earns more room. */
  .ekit-template-content-footer .elementor-element-52436446 > .elementor-container > .elementor-element-7fde8fcd {
    flex: 1.4 1 0 !important;
  }
}

/* The theme indented each list 30px from its own heading. */
.ekit-template-content-footer .elementor-widget-icon-list {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ekit-template-content-footer .elementor-icon-list-items {
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   Footer bottom bar — copyright left, legal links right, all on one row
   The generic column rule above also caught the inline legal list and stacked
   it; inline lists are exempted here.
   -------------------------------------------------------------------------- */

.ekit-template-content-footer .elementor-icon-list-items.elementor-inline-items {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px !important;
  width: auto !important;
}

.ekit-template-content-footer .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
  width: auto !important;
  margin: 0 !important;
}

.ekit-template-content-footer .elementor-element-67472cbc > .elementor-container {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.ekit-template-content-footer .elementor-element-67472cbc .elementor-column {
  width: auto !important;
  flex: 0 0 auto !important;
}

.ekit-template-content-footer .elementor-element-67472cbc .elementor-element-272bbc6c {
  flex: 1 1 auto !important;
}

.ekit-template-content-footer .elementor-element-67472cbc .elementor-element-af685a .elementor-widget-wrap {
  align-items: flex-end;
}

.ekit-template-content-footer .elementor-element-67472cbc p {
  margin: 0;
}

@media (max-width: 767px) {
  .ekit-template-content-footer .elementor-element-67472cbc > .elementor-container {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 0;
  }

  .ekit-template-content-footer .elementor-element-67472cbc .elementor-column,
  .ekit-template-content-footer .elementor-element-67472cbc .elementor-element-272bbc6c {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .ekit-template-content-footer .elementor-element-67472cbc .elementor-element-af685a .elementor-widget-wrap {
    align-items: flex-start;
  }
}

/* ==========================================================================
   2. SCROLLING — the document is the one and only vertical scroller
   ==========================================================================

   Rules of the section:
   - Neither <html> nor <body> declares `overflow`. Setting overflow on either
     one turns it into a scroll container (and setting it on BOTH yields two
     scrollbars, because a non-visible value on one axis forces the other axis
     to compute to `auto`). Left alone, the document scrolls normally: one
     scrollbar, native smooth scrolling, working `position: sticky`.
   - Horizontal overflow is prevented at its sources — 100vw elements and
     unconstrained media — never by clipping the page.
   - No structural wrapper may declare a height or an overflow that would make
     it an independent scroll container.
   -------------------------------------------------------------------------- */

/* --- Structural wrappers: never scroll containers ----------------------- */

html,
body,
#page,
.site,
.ekit-template-content-markup,
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget {
  overflow: visible;
  max-width: 100%;
  min-width: 0;
}

/* A page is at least as tall as the viewport, never exactly the viewport.
   `height: 100vh` plus a header, margins or padding is what pushes total
   height past the viewport and produces a second scrollbar. */
html,
body {
  height: auto;
  min-height: 100vh;
}

#page,
.site {
  height: auto;
  min-height: 0;
}

/* --- Horizontal overflow, fixed at source ------------------------------- */

/* `100vw` includes the vertical scrollbar's width, so it is always wider than
   the content box and forces a horizontal scrollbar. 100% never is. */
.alignfull,
.alignfull img,
.elementor .e-self-hosted-video-base,
.jkit-mega-menu-wrapper,
.elementskit-dropdown-menu-full_width .elementskit-megamenu-panel {
  width: 100% !important;
  max-width: 100% !important;
}

img,
video,
iframe,
canvas,
svg,
table {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Long unbroken strings (URLs, emails) wrap rather than widen the page. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
span,
a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --- Retired off-canvas menu -------------------------------------------- */

/* The theme's off-canvas panel is replaced by the drawer in nav.css, but its
   stylesheets still give this subtree `height: 100%`, `height: 100vh` and
   `overflow-y: auto` at every breakpoint. On desktop the panel holds the
   inline menu, so it must not scroll or be viewport-height. */
@media (min-width: 1025px) {
  .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper,
  .jeg-elementor-kit.jkit-nav-menu .jkit-menu-container,
  .jeg-elementor-kit.jkit-nav-menu .jkit-menu {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   3. LEGACY MOBILE NAV — retired
   The inherited JKit drawer is replaced below 1025px by the self-contained
   drawer in nav.css. Its parts are taken out of the layout entirely so the two
   implementations cannot fight over the same elements.
   ========================================================================== */

@media (max-width: 1024px) {
  .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper,
  .jeg-elementor-kit.jkit-nav-menu .jkit-overlay,
  .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu,
  .jeg-elementor-kit.jkit-nav-menu .jkit-nav-identity-panel {
    display: none !important;
  }
}

/* Desktop keeps the original inline menu; the drawer parts stay hidden. */
@media (min-width: 1025px) {
  .jeg-elementor-kit.jkit-nav-menu .jkit-overlay,
  .jeg-elementor-kit.jkit-nav-menu .jkit-nav-identity-panel,
  .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu {
    display: none !important;
  }
}

/* ==========================================================================
   4. BACKGROUND IMAGES — cover, centre, never tile
   The theme set `background-size: cover` but left `background-repeat` at its
   default, and one panel carried a -173px offset that exposed a strip on the
   right which the browser then filled by repeating the image.
   -------------------------------------------------------------------------- */

.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-background-overlay,
.elementor-motion-effects-layer {
  background-repeat: no-repeat;
}

/* The three panels using lady.png: centre the crop so the subject stays in
   frame at every viewport width. */
.elementor-242 .elementor-element-63aaa7d1 > .elementor-widget-wrap,
.elementor-242 .elementor-element-63aaa7d1 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-242 .elementor-element-6bf8634a > .elementor-widget-wrap,
.elementor-242 .elementor-element-6bf8634a > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-239 .elementor-element-61ee209 > .elementor-widget-wrap,
.elementor-239 .elementor-element-61ee209 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-239 .elementor-element-89fd4e1 > .elementor-widget-wrap,
.elementor-239 .elementor-element-89fd4e1 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

/* ==========================================================================
   5. SCROLLBAR — thin, in the site accent (#5270AA)
   ========================================================================== */

:root {
  --mg-accent: #5270aa;
  --mg-scrollbar-track: rgba(82, 112, 170, 0.08);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--mg-accent) var(--mg-scrollbar-track);
}

/* WebKit / Chromium */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--mg-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--mg-accent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #6b87bd;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Inside the dark mobile drawer the track reads better as a light tint. */
.mg-drawer,
.mg-drawer__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--mg-accent) rgba(255, 255, 255, 0.06);
}

.mg-drawer__nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   6. FIXED HEADER OFFSET
   The header is fixed, so the page needs an equivalent offset. The custom
   property is kept in sync with the header's measured height by
   fixed-header.js; the fallback covers the moment before that script runs.
   ========================================================================== */

/* The header sits in normal flow now, so the page needs no top offset at all.
   `html body` still beats the sub-pages' inline WordPress global-styles block
   and, more importantly, beats any stale rule that might reintroduce one. */
html body {
  padding-top: 0 !important;
}

/* Nothing overlays the top of the page any more, so an anchored jump just
   needs a little breathing room rather than a full header's height. */
[id] {
  scroll-margin-top: 20px;
}

#page {
  padding-top: 0;
}

/* The drawer covers the viewport, so the body offset must not shift it. */
.mg-drawer,
.mg-scrim {
  top: 0;
}


@media (prefers-reduced-motion: reduce) {
  .ekit-template-content-header {
    transition: none !important;
  }
}

/* Remove circular / pill borders and pill background on header nav items */
.ekit-template-content-header .jkit-nav-menu .jkit-menu > li > a,
.ekit-template-content-header .jkit-nav-menu .jkit-menu > li:hover > a,
.ekit-template-content-header .jkit-nav-menu .jkit-menu > li:not(.hover-gradient, .current-menu-item):hover > a,
.ekit-template-content-header .jkit-nav-menu .jkit-menu > li.current-menu-item > a {
  border: 0 solid transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   7. PAGE HERO (About + Contact) — full-bleed looping video background
   The video fills the entire viewport width (edge-to-edge). The outer
   Elementor section's max-width cap, horizontal padding, and the column's
   rounded corners are all removed so nothing clips the video.
   ========================================================================== */

/* ── Outer section: remove max-width cap and all horizontal padding ───────── */
.elementor-239 .elementor-element-41e533f8,
.elementor-224 .elementor-element-41e533f8 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.elementor-239 .elementor-element-41e533f8 > .elementor-container,
.elementor-224 .elementor-element-41e533f8 > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Column wrapper: remove rounded card, remove horizontal padding */
.elementor-239 .elementor-element-9ba8ced > .elementor-element-populated,
.elementor-224 .elementor-element-9ba8ced > .elementor-element-populated {
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Background/overlay pill also loses its radius */
.elementor-239 .elementor-element-9ba8ced > .elementor-element-populated,
.elementor-239 .elementor-element-9ba8ced > .elementor-element-populated > .elementor-background-overlay,
.elementor-224 .elementor-element-9ba8ced > .elementor-element-populated,
.elementor-224 .elementor-element-9ba8ced > .elementor-element-populated > .elementor-background-overlay {
  border-radius: 0 !important;
}

/* ── Widget-wrap: full height hero, centred content ──────────────────────── */
.elementor-element-9ba8ced > .elementor-widget-wrap {
  position: relative;
  isolation: isolate;
  min-height: clamp(480px, 60vw, 800px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;            /* centre horizontally */
  padding: 120px 5vw 80px !important; /* generous vertical breathing room */
}

/* Widgets inside stretch to full width so text stays centred */
.elementor-element-9ba8ced > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto) {
  align-self: stretch;
  width: 100%;
}

/* ── Video: fills the full column box, no radius ─────────────────────────── */
.mg-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  pointer-events: none;
  background: #1d1044;
}

/* Overlay and widgets sit above the video */
.elementor-element-9ba8ced > .elementor-widget-wrap > .elementor-background-overlay {
  z-index: 1;
}

.elementor-element-9ba8ced > .elementor-widget-wrap > .elementor-element {
  position: relative;
  z-index: 2;
}

/* When the user prefers reduced motion, hide the video; the gradient remains */
@media (prefers-reduced-motion: reduce) {
  .mg-hero-video {
    display: none;
  }
}

/* Mobile: tighten padding */
@media (max-width: 767px) {
  .elementor-element-9ba8ced > .elementor-widget-wrap {
    padding: 100px 20px 60px !important;
  }
}

/* ==========================================================================
   8. PAGE HERO HEADING — centered two-line layout (About + Contact)
   Centers the h2 heading, enforces two visible lines, and styles the
   CTA button that follows it.
   ========================================================================== */

/* Center the entire column content */
.elementor-239 .elementor-element-9ba8ced > .elementor-widget-wrap,
.elementor-224 .elementor-element-9ba8ced > .elementor-widget-wrap {
  align-items: center !important;
  text-align: center !important;
}

/* Override the right-margin that pushed the heading to the left half */
.elementor-239 .elementor-element-f0fdfae,
.elementor-224 .elementor-element-f0fdfae {
  margin: 0 auto !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-239 .elementor-element-f0fdfae .elementor-heading-title,
.elementor-224 .elementor-element-f0fdfae .elementor-heading-title {
  text-align: center !important;
}

/* CTA button wrapper */
.mg-hero-cta-btn-wrap {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 20px 0 0 !important;
}

/* CTA button */
.mg-hero-cta-btn {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffff;
  color: #2C1B63;
  font-family: "DM Sans", Sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 80px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mg-hero-cta-btn:hover {
  background: #2C1B63;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Breadcrumb pill stays centred too */
.elementor-239 .elementor-element-fd5ec6e,
.elementor-224 .elementor-element-fd5ec6e {
  margin: 16px auto 0 !important;
}

/* ==========================================================================
   9. HEADER OVER A DARK HERO
   ========================================================================== */

/* The Contact page used to run a white logo, white nav and a translucent CTA
   because its header floated over a dark video hero. The header sits in flow
   above that hero now, on its own white ground, so those inversions would
   render white-on-white — they are gone rather than merely overridden. */