.elementor-kit-7{--e-global-color-primary:#1300C1;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#FFCDD9;--e-global-color-c1054a7:#9DA8FF;--e-global-color-78de84c:#71F5C4;--e-global-color-86bde06:#8149FF;--e-global-color-f9207bd:#FF0071;--e-global-typography-primary-font-family:"Mind Meridian Bold";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Mind Meridian Regular";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================================================
   SKM – proportional scaling
   LAPTOP SCREENS 1026–1919px wide: the desktop design is scaled by
                         screen/1920, so it looks like a 1920 screen at 100%.
                         Browser zoom still works on top. Zoomed far enough that
                         the window drops to tablet width, your tablet design
                         shows as normal.
   PHONES  ≤599px      : shows the 360px mobile design (Elementor's mobile
                         preview width), scaled to fit the phone. Based on the
                         window, so the phone's text-size/zoom setting can't squash it
   TABLET  600–1024px  : untouched (incl. iPad mini / Android tablets in portrait)

   REQUIRES: Elementor > Site Settings > Layout > Breakpoints > Laptop = 1025 (keeps tablet inheriting laptop settings).
   Stays on with Ally – Ally's Bigger text enlarges within the scaled page.
   Browser zoom (Ctrl +/-) works in Chrome, Edge and Safari (scale is based on
   the screen width, which zoom doesn't change). Firefox: use Ally to enlarge.
   ===================================================================== */

/* ---------- scale factor ----------
   Based on the SCREEN width (device-width), not the window width, so browser
   zoom (Ctrl +/-) still works: zooming narrows the window but not the screen.
   Firefox reports zoom in device-width too, so there Ctrl + is still cancelled. */
html{ --skm-z: 1; }
@media (min-device-width:1026px) and (max-device-width:1039px){ html{ --skm-z:0.5344; } }
@media (min-device-width:1040px) and (max-device-width:1055px){ html{ --skm-z:0.5417; } }
@media (min-device-width:1056px) and (max-device-width:1071px){ html{ --skm-z:0.55; } }
@media (min-device-width:1072px) and (max-device-width:1087px){ html{ --skm-z:0.5583; } }
@media (min-device-width:1088px) and (max-device-width:1103px){ html{ --skm-z:0.5667; } }
@media (min-device-width:1104px) and (max-device-width:1119px){ html{ --skm-z:0.575; } }
@media (min-device-width:1120px) and (max-device-width:1135px){ html{ --skm-z:0.5833; } }
@media (min-device-width:1136px) and (max-device-width:1151px){ html{ --skm-z:0.5917; } }
@media (min-device-width:1152px) and (max-device-width:1167px){ html{ --skm-z:0.6; } }
@media (min-device-width:1168px) and (max-device-width:1183px){ html{ --skm-z:0.6083; } }
@media (min-device-width:1184px) and (max-device-width:1199px){ html{ --skm-z:0.6167; } }
@media (min-device-width:1200px) and (max-device-width:1215px){ html{ --skm-z:0.625; } }
@media (min-device-width:1216px) and (max-device-width:1231px){ html{ --skm-z:0.6333; } }
@media (min-device-width:1232px) and (max-device-width:1247px){ html{ --skm-z:0.6417; } }
@media (min-device-width:1248px) and (max-device-width:1263px){ html{ --skm-z:0.65; } }
@media (min-device-width:1264px) and (max-device-width:1279px){ html{ --skm-z:0.6583; } }
@media (min-device-width:1280px) and (max-device-width:1295px){ html{ --skm-z:0.6667; } }
@media (min-device-width:1296px) and (max-device-width:1311px){ html{ --skm-z:0.675; } }
@media (min-device-width:1312px) and (max-device-width:1327px){ html{ --skm-z:0.6833; } }
@media (min-device-width:1328px) and (max-device-width:1343px){ html{ --skm-z:0.6917; } }
@media (min-device-width:1344px) and (max-device-width:1359px){ html{ --skm-z:0.7; } }
@media (min-device-width:1360px) and (max-device-width:1375px){ html{ --skm-z:0.7083; } }
@media (min-device-width:1376px) and (max-device-width:1391px){ html{ --skm-z:0.7167; } }
@media (min-device-width:1392px) and (max-device-width:1407px){ html{ --skm-z:0.725; } }
@media (min-device-width:1408px) and (max-device-width:1423px){ html{ --skm-z:0.7333; } }
@media (min-device-width:1424px) and (max-device-width:1439px){ html{ --skm-z:0.7417; } }
@media (min-device-width:1440px) and (max-device-width:1455px){ html{ --skm-z:0.75; } }
@media (min-device-width:1456px) and (max-device-width:1471px){ html{ --skm-z:0.7583; } }
@media (min-device-width:1472px) and (max-device-width:1487px){ html{ --skm-z:0.7667; } }
@media (min-device-width:1488px) and (max-device-width:1503px){ html{ --skm-z:0.775; } }
@media (min-device-width:1504px) and (max-device-width:1519px){ html{ --skm-z:0.7833; } }
@media (min-device-width:1520px) and (max-device-width:1535px){ html{ --skm-z:0.7917; } }
@media (min-device-width:1536px) and (max-device-width:1551px){ html{ --skm-z:0.8; } }
@media (min-device-width:1552px) and (max-device-width:1567px){ html{ --skm-z:0.8083; } }
@media (min-device-width:1568px) and (max-device-width:1583px){ html{ --skm-z:0.8167; } }
@media (min-device-width:1584px) and (max-device-width:1599px){ html{ --skm-z:0.825; } }
@media (min-device-width:1600px) and (max-device-width:1615px){ html{ --skm-z:0.8333; } }
@media (min-device-width:1616px) and (max-device-width:1631px){ html{ --skm-z:0.8417; } }
@media (min-device-width:1632px) and (max-device-width:1647px){ html{ --skm-z:0.85; } }
@media (min-device-width:1648px) and (max-device-width:1663px){ html{ --skm-z:0.8583; } }
@media (min-device-width:1664px) and (max-device-width:1679px){ html{ --skm-z:0.8667; } }
@media (min-device-width:1680px) and (max-device-width:1695px){ html{ --skm-z:0.875; } }
@media (min-device-width:1696px) and (max-device-width:1711px){ html{ --skm-z:0.8833; } }
@media (min-device-width:1712px) and (max-device-width:1727px){ html{ --skm-z:0.8917; } }
@media (min-device-width:1728px) and (max-device-width:1743px){ html{ --skm-z:0.9; } }
@media (min-device-width:1744px) and (max-device-width:1759px){ html{ --skm-z:0.9083; } }
@media (min-device-width:1760px) and (max-device-width:1775px){ html{ --skm-z:0.9167; } }
@media (min-device-width:1776px) and (max-device-width:1791px){ html{ --skm-z:0.925; } }
@media (min-device-width:1792px) and (max-device-width:1807px){ html{ --skm-z:0.9333; } }
@media (min-device-width:1808px) and (max-device-width:1823px){ html{ --skm-z:0.9417; } }
@media (min-device-width:1824px) and (max-device-width:1839px){ html{ --skm-z:0.95; } }
@media (min-device-width:1840px) and (max-device-width:1855px){ html{ --skm-z:0.9583; } }
@media (min-device-width:1856px) and (max-device-width:1871px){ html{ --skm-z:0.9667; } }
@media (min-device-width:1872px) and (max-device-width:1887px){ html{ --skm-z:0.975; } }
@media (min-device-width:1888px) and (max-device-width:1903px){ html{ --skm-z:0.9833; } }
@media (min-device-width:1904px) and (max-device-width:1919px){ html{ --skm-z:0.9917; } }
/* Phones: based on the WINDOW width, so the layout is always 360 wide even when
   the phone's text-size / page-zoom setting narrows the window (that was
   squeezing the layout to ~280px and knocking the menu button under the logo).
   Later rules win, so there are no gaps. Ally does the enlarging on phones. */
@media (max-width:599px) and (max-device-width:599px){ html{ --skm-z:0.5556; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:208px){ html{ --skm-z:0.5778; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:216px){ html{ --skm-z:0.6000; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:224px){ html{ --skm-z:0.6222; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:232px){ html{ --skm-z:0.6444; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:240px){ html{ --skm-z:0.6667; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:248px){ html{ --skm-z:0.6889; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:256px){ html{ --skm-z:0.7111; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:264px){ html{ --skm-z:0.7333; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:272px){ html{ --skm-z:0.7556; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:280px){ html{ --skm-z:0.7778; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:288px){ html{ --skm-z:0.8000; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:296px){ html{ --skm-z:0.8222; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:304px){ html{ --skm-z:0.8444; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:312px){ html{ --skm-z:0.8667; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:320px){ html{ --skm-z:0.8889; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:328px){ html{ --skm-z:0.9111; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:336px){ html{ --skm-z:0.9333; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:344px){ html{ --skm-z:0.9556; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:352px){ html{ --skm-z:0.9778; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:360px){ html{ --skm-z:1.0000; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:368px){ html{ --skm-z:1.0222; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:376px){ html{ --skm-z:1.0444; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:384px){ html{ --skm-z:1.0667; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:392px){ html{ --skm-z:1.0889; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:400px){ html{ --skm-z:1.1111; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:408px){ html{ --skm-z:1.1333; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:416px){ html{ --skm-z:1.1556; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:424px){ html{ --skm-z:1.1778; } }
@media (max-width:599px) and (max-device-width:599px) and (min-width:432px){ html{ --skm-z:1.2000; } }

/* ---------- vw/vh correction factor ----------
   Chrome/Edge/Firefox scale vw/vh units by the zoom, so anything sized in
   them is divided by --skm-vz (= the zoom) to put it back.
   Safari (every iPhone/iPad browser, and Safari on Mac) does NOT scale vw/vh
   by zoom, so there the correction must be skipped – otherwise full-width
   things (e.g. the splash) come out short of the screen edge. */
html{ --skm-vz: var(--skm-z); }
@supports (font: -apple-system-body){ html{ --skm-vz: 1; } }

/* =====================================================================
   SHARED – desktop + mobile
   ===================================================================== */
@media (min-width:1026px) and (min-device-width:1026px) and (max-device-width:1919px), (max-width:599px) and (max-device-width:599px){

  /* ---- scale the whole page ---- */
  html body{ zoom: var(--skm-z); }

  /* ---- zoom also scales vw/vh units, so anything sized in them is put back ---- */

  /* sticky header + pink bulletin bar */
  html #header-main.elementor-sticky--effects,
  html [data-elementor-type="header"] .elementor-sticky--active{
    width: calc(100vw / var(--skm-vz)) !important;
    max-width: none !important;
  }
  html .elementor-3532 .elementor-element.elementor-element-6a8ad3b{
    width: calc(100vw / var(--skm-vz)) !important;
    max-width: none !important;
  }

  /* sticky sidebars etc. – Elementor's JS positions them wrongly under zoom,
     so use native CSS sticky instead (sticks within its column, same as before) */
  html body{ overflow: clip visible !important; }
  html :not([data-elementor-type="header"] *).elementor-sticky:not(.elementor-sticky__spacer){
    position: sticky !important;
    inset-inline-start: auto !important;
    left: auto !important;
    width: auto !important;
    align-self: flex-start;
  }
  html :not([data-elementor-type="header"] *).elementor-sticky__spacer{ display: none !important; }

  /* menus – Elementor measures width/position on screen, undo the zoom */
  html .elementor-widget-n-menu .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-wrapper[style*="--stretch-width"] .e-n-menu-content,
  html .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper[style*="--stretch-width"]{
    left: calc(var(--stretch-left) / var(--skm-z));
    width: calc(var(--stretch-width) / var(--skm-z));
  }
  html .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper[style*="--stretch-width"] :is(.e-n-menu-item, .e-n-menu-content){
    width: calc(var(--stretch-width) / var(--skm-z));
  }

  /* Amelia / FullCalendar grids – its JS sizes them at the zoomed size, stretch back to fill */
  html .fc .fc-col-header,
  html .fc .fc-daygrid-body,
  html .fc .fc-scrollgrid-sync-table{ width: 100% !important; }
  html .fc .fc-daygrid-body,
  html .fc .fc-scrollgrid-sync-table{ height: 100% !important; }

  /* sections with vh heights (page banners, homepage hero, popups).
     The four mega-menu panels are deliberately NOT in here – compensated,
     their 50–70vh minimum heights made the dropdowns far taller than their
     links; left raw they hug their content. */
  html :is(
    .elementor-element-82cd548, .elementor-element-0e1bfcc, .elementor-element-7c3f65f,
    .elementor-element-0b48388, .elementor-element-518e37e, .elementor-element-ece5fe4,
    .elementor-element-8c3180f, .elementor-element-9265a74, .elementor-element-32f0173,
    .elementor-element-cf2b750, .elementor-element-76a17a2, .elementor-element-797061a,
    .elementor-element-1f62ead, .elementor-element-48a2754, .elementor-element-8499978,
    .elementor-element-11aa46a, .elementor-element-4ee8529, .elementor-element-a353784,
    .elementor-element-3c1c967, .elementor-element-bb25788,
    .elementor-element-627fc1e, .elementor-element-163719f, .elementor-element-1851b13,
    .elementor-element-2134a8e, .elementor-element-29a4ff2, .elementor-element-305b2d1,
    .elementor-element-42ae30c, .elementor-element-56652f5, .elementor-element-74e47ca,
    .elementor-element-749f201, .elementor-element-74b2873, .elementor-element-cd95632,
    .elementor-element-ec2a3c4, .elementor-element-fa1b385, .elementor-element-faedad5
  ).e-con{
    min-height: calc(var(--min-height) / var(--skm-vz));
  }

  /* containers with a vw content width */
  html .elementor-4448 .elementor-element.elementor-element-94fc9a8{ --content-width: calc(90vw / var(--skm-vz)); }
  html .elementor-5294 .elementor-element.elementor-element-a353784{ --content-width: calc(75vw / var(--skm-vz)); }

  /* popups – dvh so phones' address bar doesn't push the top off-screen */
  html .elementor-popup-modal{
    width: calc(100vw / var(--skm-vz)) !important;
    height: calc(100vh / var(--skm-vz)) !important; height: calc(100dvh / var(--skm-vz)) !important;
  }
  html .elementor-popup-modal .dialog-message{
    max-width: calc(100vw / var(--skm-vz));
    max-height: calc(100vh / var(--skm-vz)); max-height: calc(100dvh / var(--skm-vz));
  }
  html :is(#elementor-popup-modal-5294, #elementor-popup-modal-5549, #elementor-popup-modal-5557) .dialog-message{
    width: calc(100vw / var(--skm-vz));
    height: calc(100vh / var(--skm-vz)); height: calc(100dvh / var(--skm-vz));
  }
  html :is(#elementor-popup-modal-4448, #elementor-popup-modal-2345) .dialog-message{
    height: calc(100vh / var(--skm-vz)); height: calc(100dvh / var(--skm-vz));
  }
  html .elementor-5294 .elementor-element.elementor-element-a353784{ max-height: calc(100vh / var(--skm-vz)); max-height: calc(100dvh / var(--skm-vz)); }
  html .elementor-2070 .elementor-element.elementor-element-c8a5919 iframe{ height: calc(65vh / var(--skm-vz)); }
  html :is(.elementor-5187 .elementor-element.elementor-element-de70593, .elementor-5294 .elementor-element.elementor-element-c0c8dae) img{
    max-height: calc(20vh / var(--skm-vz)) !important;
  }
  html :is(.elementor-element-11aa46a, .elementor-element-4ee8529, .elementor-element-a353784).e-con{
    min-height: calc(100vh / var(--skm-vz));
    min-height: calc(100dvh / var(--skm-vz));
  }
  /* Workplace Wellbeing flipbook is 100vw wide – was running off both sides of phones */
  html #skm-flipbook-wrap{ width: calc(100vw / var(--skm-vz)); }
}

/* =====================================================================
   DESKTOP ONLY
   ===================================================================== */
@media (min-width:1026px) and (min-device-width:1026px) and (max-device-width:1919px){

  /* paragraphs and spans 10% larger on scaled laptops.
     Left alone: Amelia booking/calendar, the header/menu, spans inside
     paragraphs/headings/other spans (no double-sizing), icons (icon-list
     text IS included), arrows,
     social-icon grids, carousel controls, snowflakes, screen-reader text. */
  html body p:not(:is([class*="am-"], .fc) p){ zoom: 1.1; }
  html body span:not(:is(p, h1, h2, h3, h4, h5, h6, span, [class*="am-"], .fc, [data-elementor-type="header"], .swiper-pagination, .elementor-swiper-button) span):not([class*="icon"]:not([class*="text"]), [class*="arrow"], [class*="flake"], .elementor-grid-item, .elementor-screen-only, .screen-reader-text, [class*="swiper"]){ zoom: 1.1; }

  /* bulletin bar text at ~90% of its 1920 size (it was shrinking with the page),
     and the sticky header leaves matching room for it */
  html .elementor-3532 .elementor-element.elementor-element-6a8ad3b > .elementor-element{ zoom: calc(0.9 / var(--skm-z)); }
  html body:has(#bulletin-bar a) #header-main.elementor-sticky--effects{ padding-top: calc(60px * 0.9 / var(--skm-z)) !important; }

  /* menu text (vw/vi based) – locked to its 1920 size (top-level items capped
     at 22px so a larger browser font setting can't wrap "About Us" onto a
     second line) */
  html body .main-menu .e-n-menu-title span{ font-size: min(1.58rem, 25.3px) !important; }
  html body .sub-menu h4{ font-size: min(1.5rem, 24px) !important; }
  html body .sub-menu p{ font-size: min(1.125rem, 18px) !important; }
  /* menus keep exactly their 1920 text size – no +10% paragraph boost */
  html body [data-elementor-type="header"] p{ zoom: 1 !important; }

  /* mega-menu dropdowns: when one opens, Elementor's JS measures the space
     left in the window (in screen px) and writes it as an inline height in
     page px. Under the zoom that comes out shrunk by the zoom factor, so the
     dropdown got chopped flat at the bottom. Let it size to its content and
     only cap it at the real space left in the window. */
  html body .elementor-element-77e1817 .e-n-menu-content > .e-con{
    height: auto !important;
    max-height: calc(100vh / var(--skm-vz) - 130px / var(--skm-z)) !important;
    overflow-y: auto !important;
  }

  html #elementor-popup-modal-2345 .dialog-message{ width: calc(85vw / var(--skm-vz)); }
}

/* =====================================================================
   MOBILE ONLY
   ===================================================================== */
@media (max-width:599px) and (max-device-width:599px){
  html :is(#elementor-popup-modal-2345, #elementor-popup-modal-4448) .dialog-message{ width: calc(100vw / var(--skm-vz)); }
  html .elementor-5294 .elementor-element.elementor-element-38b561d{ --width: calc(100vw / var(--skm-vz)); }
  html .elementor-3931 .elementor-element.elementor-element-63bd472 img{ height: calc(30vh / var(--skm-vz)); }
  html .elementor-3931 .elementor-element.elementor-element-052cfcc .elementor-icon-list-item > :is(.elementor-icon-list-text, a){ font-size: calc(4vw / var(--skm-vz)); }
}

/* =====================================================================
   HOMEPAGE HERO (tablet design) – same idea for short tablet-width screens
   (iPad landscape with browser bars, laptops zoomed to 125%+): stops the
   Support cards covering the slide text. Portrait tablets are unchanged.
   ===================================================================== */
@media (min-width:600px) and (max-width:1024px){
  :is(.elementor-element-7c3f65f, .elementor-element-bb25788).e-con{
    min-height: max(var(--min-height), 37.5rem);
  }
}

/* =====================================================================
   HOMEPAGE HERO (phones) – stop the slide text sliding up under the logo on short
   phone screens (small phones, landscape, large OS text/display size).
   Only kicks in when the screen is short; normal phones are unchanged.
   ===================================================================== */
@media (max-width:767px){
  :is(.elementor-element-7c3f65f, .elementor-element-bb25788).e-con{
    min-height: max(var(--min-height), 34.5rem);
  }
}
@media (max-width:599px) and (max-device-width:599px){
  html :is(.elementor-element-7c3f65f, .elementor-element-bb25788).e-con{
    min-height: max(calc(var(--min-height) / var(--skm-vz)), 34.5rem);
  }
}

/* =====================================================================
   PAGE BANNERS (every page/post/event/archive) – keep the title clear of
   the header on every device (phones, and short laptop screens / Ctrl +
   where full-height centred banners rode up under the menu).
   Pages that already clear it are left exactly as they are; only banners
   whose content would run under the header move down.
   (Support Us has its own rule below – its banner is built differently.)
   ===================================================================== */
:is([data-elementor-type="wp-page"],[data-elementor-type="single-post"],[data-elementor-type="single-page"],[data-elementor-type="single"],[data-elementor-type="archive"],[data-elementor-type="error-404"]):not(.elementor-5374) > .e-con.e-parent:first-child:not(.elementor-element-7c3f65f){
  padding-top: max(var(--padding-top, 0px), calc(-1 * var(--margin-top, 0px))) !important;
  padding-bottom: calc(var(--padding-bottom, 0px) + max(0px, calc(-1 * var(--margin-top, 0px) - var(--padding-top, 0px)))) !important;
}
/* Support Us (desktop/laptop): same idea, allowing for the 40px gap above its title */
@media (min-width:1026px){
  .elementor-5374 > .e-con.e-parent:first-child{
    --skm-clear: max(0px, calc(-1 * var(--margin-top, 0px) - 40px - var(--padding-top, 0px)));
    padding-top: calc(var(--padding-top, 0px) + var(--skm-clear)) !important;
    padding-bottom: calc(var(--padding-bottom, 0px) + var(--skm-clear)) !important;
  }
}

/* Desktop/laptop: the bulletin bar is pinned to the top, and every page's top
   banner is pulled up 135px to sit under the header. That left only ~5px to
   spare, so a slightly taller header (font loading, rounding, Ctrl +) let a
   strip of white page show between the bar and the banner (also briefly when
   scrolling back to the top, and after changing browser zoom). The banner's
   background now reaches 100px further up, hidden behind the pinned bar.
   Titles, banner bottoms and everything below stay exactly where they were. */
@media (min-width:1025px){
  /* Header snaps straight back when you return to the top, instead of
     animating its sticky padding away (that animation flashed the strip). */
  html #header-main:not(.elementor-sticky--active){ transition: none !important; }
  :is([data-elementor-type="wp-page"],[data-elementor-type="single-post"],[data-elementor-type="single-page"],[data-elementor-type="single"],[data-elementor-type="archive"],[data-elementor-type="error-404"]):not(.elementor-5374) > .e-con.e-parent:first-child:not(.elementor-element-7c3f65f){
    margin-top: calc(var(--margin-top, 0px) - 100px) !important;
    padding-top: calc(max(var(--padding-top, 0px), calc(-1 * var(--margin-top, 0px))) + 100px) !important;
    min-height: calc(var(--min-height, 0px) / var(--skm-vz) + 100px) !important;
  }
  .elementor-5374 > .e-con.e-parent:first-child{
    margin-top: calc(var(--margin-top, 0px) - 100px) !important;
    padding-top: calc(var(--padding-top, 0px) + var(--skm-clear, 0px) + 100px) !important;
    min-height: calc(var(--min-height, 0px) / var(--skm-vz) + 100px) !important;
  }
  /* Homepage slider */
  html .elementor-5187 .elementor-element.elementor-element-8e238fb{ margin-top: -100px !important; }
  /* keep the slider arrows centred on the visible part of the slide */
  html .elementor-5187 .elementor-element.elementor-element-8e238fb .elementor-swiper-button{ margin-top: 50px !important; }
  html .elementor-element.elementor-element-bb25788.e-con{
    padding-top: calc(var(--padding-top, 0px) + 100px) !important;
    min-height: calc(var(--min-height) / var(--skm-vz) + 100px) !important;
  }
}

/* =====================================================================
   DESKTOP / LAPTOP HEADER MENUS
   ===================================================================== */
@media (min-width:1025px){
  /* Top-level menu items never bigger than their 1920 size (22px), so a large
     browser font setting / zoom can't push "About Us" onto a second line. */
  html .main-menu .e-n-menu-title span{ font-size: min(clamp(0.875rem, 0.304rem + 0.893vi, 1.375rem), 22px) !important; }
  /* Dropdown text likewise capped at its 1920 size (24px titles / 18px text),
     so a larger browser font setting doesn't blow the menus up */
  html .sub-menu h4{ font-size: min(clamp(0.938rem, 0.295rem + 1.004vi, 1.5rem), 24px) !important; }
  html .sub-menu p{ font-size: min(clamp(0.813rem, 0.455rem + 0.558vi, 1.125rem), 18px) !important; }

  /* Mega menu panels: Elementor gives them max-height in vh (45–70vh) with
     overflow hidden, so on shorter screens / larger text the panel was chopped
     off (top of Support For Me, bottom of Support Us / About Us). The cap is
     removed: each panel keeps its designed minimum height (vh, compensated
     for the scaling) and simply grows to fit its content. */
  html .elementor-26 .elementor-element:is(.elementor-element-aaa6a4a, .elementor-element-ba84850, .elementor-element-1ef37f6, .elementor-element-f9221db){
    max-height: none !important;
  }

  /* Dropdown position: Elementor's script measures where to put the full-width
     dropdown and stores it (--stretch-left / --stretch-width). After a zoom
     change those numbers go stale and the panel slides off the right edge
     (cut-off "Support For Schools", "Suicide Prevention"…). The dropdown is now
     simply laid out across the full header width in CSS, so it can't drift.
     Same position as before at every size; the margin keeps it the same
     distance below the menu (header bottom padding: 20px, 13px when pinned). */
  html [data-elementor-type="header"] :is(.elementor-element-3b3e308, .elementor-element-77e1817, .elementor-element-77e1817 .e-n-menu){ position: static !important; }
  html .elementor-element-77e1817 .e-n-menu-content{
    left: 0 !important; right: auto !important; inset-inline-start: 0 !important; width: 100% !important;
  }
  html #header-main .elementor-element-77e1817 .e-n-menu-content{ margin-top: -20px !important; }
  html #header-main.elementor-sticky--effects .elementor-element-77e1817 .e-n-menu-content{ margin-top: -13px !important; }

  /* Menu item titles were set to "justify", which spaced words out oddly
     whenever a title wrapped ("Book   a   Wellbeing"). */
  [data-elementor-type="header"] .elementor-icon-box-title{ text-align: start !important; }

  /* Support For Me – the photo tiles now stretch to match the Urgent Help box,
     so it no longer hangs below the grid when its text is larger. */
  html .elementor-element-012cc03 > .e-con:not(.elementor-element-1c90442) > .elementor-widget-flip-box{ flex: 1 1 auto !important; }
  html .elementor-element-012cc03 > .e-con:not(.elementor-element-1c90442) > .elementor-widget-flip-box .elementor-flip-box{ height: 100% !important; }
}

/* =====================================================================
   MOBILE / TABLET MENU POPUP – the Get Help / Donate buttons are fixed to
   the bottom of the screen; leave room under the menu so it can always be
   scrolled clear of them on short screens. No change where it already fits.
   ===================================================================== */
#elementor-popup-modal-4448 .elementor-element.elementor-element-b7e7e55{ margin-bottom: 8.5rem; }

/* =====================================================================
   CONTENT FIXES (all devices)
   ===================================================================== */
/* Long email addresses ran off the edge of phones (Monthly Draw, Youth
   Services, Mental Elf Fun Run…). They now wrap only if they don't fit. */
a[href^="mailto:"]{ overflow-wrap: anywhere; }
/* Safety net: any other word/phrase too long for its box wraps instead of
   running off screen (Monthly Draw's "fundraising and community" is glued
   together with non-breaking spaces). Has no effect on text that fits. */
:is(p, li){ overflow-wrap: break-word; }

/* Our Shops – on tablet portrait the three cards get narrow and "Folkestone" /
   "fundraising" ran out of their boxes. Titles shrink only as much as needed
   (full size from ~915px wide upwards). */
@media (min-width:768px) and (max-width:1024px){
  .elementor-2099 :is(.elementor-element-887ac58, .elementor-element-3381c7b, .elementor-element-e226a71, .elementor-element-c111434) .elementor-heading-title{
    font-size: min(2rem, 3.5vw) !important;
  }
  /* "Find us on Vinted" pill – Vinted logo was sitting on top of the text */
  .elementor-2099 .elementor-element.elementor-element-63cdeee{
    --width: 100% !important; width: 100% !important; padding: 8px 14px !important; column-gap: 8px !important;
  }
  .elementor-2099 .elementor-element.elementor-element-6a7f294{
    --container-widget-width: auto !important; width: auto !important; flex-shrink: 0 !important;
  }
}

/* Mental Health First Aid Training (tablet) – the top wave covered the
   "What will I learn?" heading and 150px right padding squeezed the text. */
@media (min-width:768px) and (max-width:1024px){
  .elementor-element.elementor-element-482ad084{
    --padding-right: 30px !important; padding-right: 30px !important;
    padding-top: 80px !important; padding-bottom: 90px !important;
  }
}

/* Mental Health First Aid Training (phones) – "What will I learn?" kept its
   desktop side padding (150px right) so the text was squeezed into half the
   screen, the photo above it was a 23px sliver, and the bottom wave covered
   the last lines of text. */
@media (max-width:767px){
  .elementor-element.elementor-element-482ad084{
    --padding-left: 20px !important; --padding-right: 20px !important;
    padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 90px !important;
  }
  .elementor-element.elementor-element-665db18d{ min-height: 300px !important; }
  /* Fundraise for Us – the top wave covered the "How To Fundraise" heading */
  .elementor-element.elementor-element-9b23c09{ padding-top: 80px !important; }
}

/* Fundraise for Us – the two "Leave a gift in your will" cards keep their
   60% / 40% desktop widths on phones, squashing them into narrow columns. */
@media (max-width:767px){
  .elementor-element-34883e8 > :is(.elementor-element-07ca633, .elementor-element-9e0ec09){
    --container-widget-width: 100% !important; width: 100% !important; max-width: 100% !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Mind Meridian Bold';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.southkentmind.org.uk/wp-content/uploads/2026/05/MindMeridianW05-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Mind Meridian Regular';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.southkentmind.org.uk/wp-content/uploads/2026/05/MindMeridianW05-Regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */