/* ===== source: css/responsive.css ===== */
/* =========================================================
   RESPONSIVE - every tablet / mobile media query (load LAST)
   ========================================================= */

/* =========================================================
   RESPONSIVE - 1180px
   ========================================================= */
@media (max-width: 1180px) {
  .nav a {
      padding: 6px 7px;
      font-size: 13px;
  
  }

  .search {
    width: 150px;
  }
}


/* =========================================================
   RESPONSIVE - 1100px
   ========================================================= */
@media (max-width: 1100px) {
  .nav-toggle {
    display: block;
  }

  .nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;

      flex-direction: column;
      align-items: stretch;
      gap: 0;

      background: var(--bg);
      border-bottom: 1px solid var(--line);

      box-shadow: 0 10px 28px rgba(0, 0, 0, .15);

      max-height: 0;
      overflow: hidden;
      transition: max-height .3s;

      padding: 0 24px;
      visibility: hidden;
  
  }

  .nav.open {
      max-height: calc(100vh - var(--hdr));
      overflow-y: auto;
      padding: 10px 24px 20px;
      visibility: visible;
  
  }

  .nav .main {
      flex-direction: column;
      align-items: stretch;
  
  }

  .nav .main > li {
    border-bottom: 1px solid var(--line);
  }

  .nav a {
      padding: 13px 4px;
      font-size: 15px;
      border-bottom: 0;
  
  }

  .has-sub {
    flex-wrap: wrap;
  }

  .has-sub > a {
    flex: 1;
  }

  .sub-btn {
      margin: 0;
      padding: 13px 16px;
  
  }

  .sub {
      position: static;
      width: 100%;
      min-width: 0;
      border: 0;
      border-left: 2px solid var(--red);
      border-radius: 0;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      margin: 0 0 10px;
  
  }

  .has-sub:hover > .sub,
    .has-sub:focus-within > .sub {
    display: none;
  }

  .has-sub.open > .sub {
    display: block;
  }

  .search {
      width: 100%;
      order: -1;
      margin: 6px 0 10px;
  
  }
}


/* =========================================================
   RESPONSIVE - 1000px
   ========================================================= */
@media (max-width: 1000px) {
  .grid3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .locs {
    grid-template-columns: repeat(3, 1fr);
  }

  .skill,
    .two {
    grid-template-columns: 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hero-media {
      width: 80%;
      opacity: .55;
  
  }

  .cols3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .feat .media.tall,
    .feat .media.tall .imgreq {
    min-height: 260px;
  }
}


/* =========================================================
   TABLET - 820px
   ========================================================= */
@media (max-width: 820px) {
  .cols3 {
    grid-template-columns: 1fr;
  }

  .bundle-content h2 {
    font-size: 24px;
  }
}


/* =========================================================
   MOBILE - 720px
   ========================================================= */
@media (max-width: 720px) {
  .grid3 {
    grid-template-columns: 1fr;
  }

  .locs {
    grid-template-columns: 1fr 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-media {
      width: 100%;
      opacity: .3;
  
  }

  .tb-tag {
    display: none;
  }

  .topbar-in {
    justify-content: space-between;
  }

  .tb-phone {
    margin-left: 0;
  }

  .head {
      flex-direction: column;
      align-items: flex-start;
  
  }

  .ready-in,
    .why-in {
      flex-direction: column;
      align-items: flex-start;
  
  }

  .btns .btn {
    flex: 1 1 auto;
  }

  .copy {
    flex-direction: column;
  }

  .filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 8px;
  
  }

  .filters button {
    flex: none;
  }

  /* ==============================
     PROMO CARDS MOBILE
     ============================== */
  .promo-row {
    grid-template-columns: 1fr;
  }

  .promo-card {
    width: 100%;
  }

  /* ==============================
     BUNDLE CTA MOBILE
     ============================== */
  .bundle-cta {
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      padding: 22px;
  
  }

  .bundle-content h2 {
    font-size: 23px;
  }

  .bundle-content p {
    font-size: 13px;
  }

  .bundle-btn {
    width: 100%;
  }
}


/* =========================================================
   SMALL MOBILE - 480px
   ========================================================= */
@media (max-width: 480px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }

  .wrap {
      padding-left: 16px;
      padding-right: 16px;
  
  }

  .strip {
    padding: 20px 0;
  }

  .promo-card {
      padding: 10px;
      gap: 10px;
  
  }

  .promo-card .media {
      flex: 0 0 76px;
      min-height: 76px;
  
  }

  .pc-b h3 {
    font-size: 12.5px;
  }

  .pf {
    font-size: 11px;
  }

  .btn.dark {
      font-size: 11.5px;
      padding: 8px 12px;
  
  }

  .bundle-cta {
    padding: 20px;
  }

  .bundle-save {
    font-size: 10px;
  }

  .bundle-content h2 {
    font-size: 21px;
  }

  .bundle-content p {
    font-size: 12px;
  }
}


@media (max-width: 720px) {
  .feebox .big {
    font-size: 34px;
  }

  .stats {
    gap: 16px;
  }
}


@media (max-width: 720px) {
  .gl-ogrid {
    grid-template-columns: 1fr;
  }

  .gl-mock {
    flex-direction: column;
    align-items: flex-start;
  }

  .gl-mock .media {
    width: 100%;
  }

  .gl-mock-h {
    font-size: 22px;
  }
}


@media (max-width: 720px) {
  .act-band {
    font-size: 18px;
  }

  .act-shot h3 {
    font-size: 22px;
  }
}



/* =========================================================
   SGS FINAL RESPONSIVE / HOST-SAFE HEADER PATCH
   Purpose:
   - Prevent desktop hover menus from sticking on focus
   - Make mobile navigation tap-only and scrollable
   - Prevent dropdown/search overflow on hosted/mobile browsers
   - Keep logo/topbar/header stable from 320px upward
   ========================================================= */

/* ---------- GLOBAL OVERFLOW / SAFE SIZING ---------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.site-header,
.sgs-topbar {
  width: 100%;
}

.header-in,
.sgs-topbar-inner {
  min-width: 0;
}

/* ---------- DESKTOP DROPDOWNS: TRUE HOVER / KEYBOARD ---------- */
@media (min-width: 1101px) {
  .nav .main > li.has-sub {
    position: relative;
  }

  .nav .main > li.has-sub > .sub {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(7px);
    max-height: none;
    overflow: visible;
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;
  }

  /* Mouse hover opens it */
  .nav .main > li.has-sub:hover > .sub,
  /* Explicit JS-open state opens it */
  .nav .main > li.has-sub.open > .sub,
  /* Keyboard users can open/focus it */
  .nav .main > li.has-sub:has(:focus-visible) > .sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Do NOT let a normal click/focus leave the menu permanently open */
  .nav .main > li.has-sub:focus-within > .sub:not(:hover),
  .nav .main > li.has-sub:not(:hover):not(.open):focus-within > .sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(7px);
  }

  .nav .main > li.has-sub::after {
    height: 14px;
    top: 100%;
  }

  .nav .main > li.has-sub > .sub {
    z-index: 9999;
  }

  .site-header .sgs-search-results {
    z-index: 10000;
  }
}

/* ---------- TABLET + MOBILE NAV ---------- */
@media (max-width: 1100px) {
  :root {
    --hdr: 68px;
  }

  body.menu-open {
    overflow: hidden;
  }

  .sgs-topbar {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
  }

  .sgs-topbar-inner {
    height: 34px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 10px;
  }

  .sgs-topbar-inner > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sgs-topbar-right {
    flex: 0 0 auto;
    gap: 10px;
    white-space: nowrap;
  }

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

  .header-in {
    width: 100%;
    height: 68px;
    padding-left: 18px;
    padding-right: 18px;
    gap: 12px;
  }

  .logo {
    width: 145px;
    flex: 0 1 145px;
    min-width: 0;
  }

  .logo .sgs-logo-image {
    width: 145px;
    max-height: 50px;
    object-fit: contain;
    object-position: left center;
  }

  .nav-toggle {
    display: flex !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 7px 6px;
    border-radius: 8px;
    color: #202329;
    background: transparent;
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: #f3f4f6;
  }

  .nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    height: auto;
    max-height: calc(100dvh - 102px);
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid #e6e8eb;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
    padding: 8px 18px 22px;
    visibility: visible;
  }

  .nav.open {
    display: flex !important;
  }

  .nav .main {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav .main > li {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eceef1;
  }

  .nav .main > li > a {
    min-width: 0;
    flex: 1 1 auto;
    padding: 14px 4px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal;
    border-bottom: 0 !important;
  }

  .nav .main > li > a:hover,
  .nav .main > li > a.active {
    color: #d7191f !important;
    border-bottom: 0 !important;
  }

  .has-sub {
    width: 100%;
    position: relative;
  }

  .has-sub > .sub-btn {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    margin-left: 0 !important;
    padding: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #202329;
    font-size: 13px;
  }

  .has-sub > .sub-btn:hover {
    color: #d7191f;
  }

  /* IMPORTANT: mobile dropdowns must NOT open from :hover/:focus-within */
  .nav .main > li.has-sub > .sub,
  .nav .main > li.has-sub:hover > .sub,
  .nav .main > li.has-sub:focus-within > .sub {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    border: 0 !important;
    border-left: 2px solid #d7191f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #20242b !important;
    transition:
      max-height .28s ease,
      opacity .2s ease,
      visibility .2s ease,
      margin .28s ease !important;
  }

  .nav .main > li.has-sub.open > .sub {
    max-height: 70vh !important;
    margin: 0 0 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav .main > li.has-sub > .sub > li {
    width: 100%;
    min-width: 0;
  }

  .nav .main > li.has-sub > .sub a,
  .nav .main > li.has-sub > .sub a:hover,
  .nav .main > li.has-sub > .sub a:focus {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 11px 16px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .nav .main > li.has-sub > .sub a:hover,
  .nav .main > li.has-sub > .sub a:focus-visible {
    color: #ff5b61 !important;
    background: rgba(255,255,255,.06) !important;
  }

  /* Search stays inside the menu and never causes horizontal overflow */
  .nav .search,
  .nav .search.site-search {
    order: -1;
    width: 100% !important;
    max-width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 2px 0 10px;
    flex: 0 0 auto;
    background: #f5f6f8 !important;
    border: 1px solid #dfe2e7 !important;
    box-shadow: none !important;
  }

  .nav .search::before {
    background: #ed1c24;
  }

  .nav .search input,
  .nav .search input[type="search"] {
    min-width: 0;
    width: 100%;
    color: #202329 !important;
    -webkit-text-fill-color: #202329;
    background: transparent !important;
  }

  .nav .search input::placeholder {
    color: #737983 !important;
    opacity: 1;
  }

  .nav .search button {
    flex: 0 0 34px;
  }

  .site-header .sgs-search-results {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    max-height: min(55vh, 360px);
    overflow-y: auto;
  }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width: 650px) {
  .sgs-topbar-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sgs-topbar-right > a:first-child {
    display: none;
  }

  .sgs-enquire {
    height: 27px;
    padding: 0 11px;
    font-size: 10px;
  }

  .header-in {
    height: 64px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo {
    width: 125px;
    flex-basis: 125px;
  }

  .logo .sgs-logo-image {
    width: 125px;
    max-height: 46px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .nav {
    max-height: calc(100dvh - 98px);
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 380px) {
  .sgs-topbar-inner > span {
    font-size: 10px;
  }

  .sgs-enquire {
    padding-left: 9px;
    padding-right: 9px;
  }

  .header-in {
    padding-left: 11px;
    padding-right: 11px;
  }

  .logo,
  .logo .sgs-logo-image {
    width: 116px;
  }

  .logo {
    flex-basis: 116px;
  }

  .nav {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* ---------- TOUCH DEVICES: NEVER USE HOVER TO OPEN NAV ---------- */
@media (hover: none) and (pointer: coarse) {
  .nav .main > li.has-sub:hover > .sub {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav .main > li.has-sub.open > .sub {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ---------- REDUCE MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav .main > li.has-sub > .sub {
    transition: none !important;
  }
}



/* =========================================================
   SGS HOME MOBILE VISUAL FIX - FINAL
   Fixes the mobile hero background ending early and leaving
   the paragraph/quick links on a white background.
   Also improves ultra-narrow phone card layout.
   ========================================================= */
@media (max-width: 1100px) {
  /* The hero image must cover the complete content height. */
  .hero {
    color: #fff !important;
    background-color: #080a0d !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 0 !important;
    padding: 42px 0 30px !important;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.72)) !important;
    z-index: 0 !important;
  }

  .hero::after {
    height: 100% !important;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.30)) !important;
    z-index: 1 !important;
  }

  .hero-media {
    width: 100% !important;
    height: 100% !important;
    opacity: .34 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .hero-in1 {
    z-index: 3 !important;
  }

  .hero .eyebrow-l {
    color: #fff !important;
    font-size: 9px !important;
    letter-spacing: 1.1px !important;
    margin: 0 0 8px !important;
  }

  .hero h1 {
    color: #fff !important;
    font-size: clamp(34px, 10.5vw, 52px) !important;
    line-height: .94 !important;
    margin: 8px 0 15px !important;
    max-width: 700px;
  }

  .hero h1 b {
    color: #ff2028 !important;
  }

  .hero-p {
    max-width: 560px !important;
    color: #eef0f3 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .hero .btns {
    margin: 18px 0 22px !important;
  }

  .hero .btns .btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
  }

  .hero .btns .btn.o {
    display: none !important;
  }

  .quick {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  .quick li {
    min-width: 0 !important;
  }

  .quick a {
    display: block !important;
    color: #e5e7eb !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    padding: 3px 0 !important;
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 34px 0 24px !important;
  }

  .hero h1 {
    font-size: clamp(32px, 11vw, 46px) !important;
  }

  .hero-p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .quick {
    font-size: 9px !important;
    gap: 6px 12px !important;
  }

  /* Keep the first course card readable on narrow phones. */
  .exact-course-card {
    height: 205px !important;
    grid-template-columns: 36% 30px minmax(0, 1fr) !important;
  }

  .exact-course-photo {
    min-width: 0 !important;
  }

  .exact-vertical {
    font-size: 8px !important;
    letter-spacing: .3px !important;
    padding: 5px 0 !important;
  }

  .exact-course-body {
    padding: 10px 8px !important;
  }

  .exact-course-body h3 {
    font-size: 13px !important;
    line-height: 1.08 !important;
    margin: 0 38px 8px 0 !important;
  }

  .exact-course-body p {
    font-size: 9px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  .exact-price {
    top: 8px !important;
    right: 6px !important;
    font-size: 9px !important;
    padding: 5px 5px !important;
    border-radius: 8px !important;
  }

  .exact-book {
    min-height: 29px !important;
    font-size: 8px !important;
    padding: 5px 5px !important;
    gap: 4px !important;
  }

  .exact-book span {
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .hero {
    padding-top: 28px !important;
  }

  .hero h1 {
    font-size: 31px !important;
  }

  .hero-p {
    font-size: 11px !important;
  }

  .quick {
    grid-template-columns: 1fr 1fr !important;
    font-size: 8.5px !important;
  }

  .exact-home-wrap {
    width: calc(100% - 16px) !important;
  }
}

/* ===== source: css/components.css ===== */
/* Shared header/footer are now written directly into every page (no JS fetch),
   so there is nothing to hide or reserve space for. display:contents lets the
   sticky header stick relative to the page instead of its tiny wrapper div. */
#site-header, #site-footer { display: contents; }

/* ===== source: css/mobile-final.css ===== */

/* =========================================================
   SGS GLOBAL MOBILE FINAL FIX
   Loaded LAST on every HTML page.
   Fixes narrow phones, tablet stacking, fixed-width grids,
   cards, course pathways and horizontal overflow.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { width:100%; max-width:100%; overflow-x:hidden; }
body { width:100%; max-width:100%; min-width:0; overflow-x:hidden; }
img, svg, video, iframe { max-width:100%; }
img { height:auto; }
button, input, select, textarea { max-width:100%; }

@media (max-width: 720px) {
  html, body { width:100%; overflow-x:hidden !important; }

  .wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .section { width:100%; overflow:hidden; }
  main, section, article, .section, .wrap, .skill, .two, .copy,
  .grid3, .cols3, .locs, .ready-in, .why-in, .head, .promo-row,
  .feat, .filters, .related, .btns { min-width:0; }

  /* ---- ALL COMMON GRIDS: ONE COLUMN ON PHONES ---- */
  .grid3,
  .cols3,
  .locs,
  .promo-row,
  .two,
  .skill,
  .copy,
  .feat,
  .why-in,
  .ready-in {
    grid-template-columns:1fr !important;
  }

  .skill {
    display:grid !important;
    width:100% !important;
    gap:16px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  /* Career Pathways section from screenshot */
  .skill > div:first-child {
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:22px 18px !important;
    border-radius:12px !important;
  }

  .skill > div:first-child h2 {
    font-size:clamp(25px, 8vw, 34px) !important;
    line-height:1.08 !important;
    overflow-wrap:anywhere;
  }

  .skill > .cols3 {
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    height:auto !important;
  }

  .skill > .cols3 .colbox {
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:18px 16px !important;
  }

  .cols3 .colbox h3 {
    font-size:20px !important;
    line-height:1.2 !important;
  }

  .cols3 .colbox ul,
  .cols3 .colbox ul li,
  .cols3 .colbox ul li a {
    width:100% !important;
    min-width:0 !important;
  }

  .cols3 .colbox ul li a {
    display:block !important;
    padding:6px 0 !important;
    font-size:14px !important;
    line-height:1.45 !important;
    overflow-wrap:anywhere !important;
  }

  /* ---- COURSE / CONTENT CARDS ---- */
  .card,
  .ccard,
  .promo-card,
  .loc,
  .course-card,
  .sgs-course-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .card .body { min-width:0 !important; }
  .card h2, .card h3, .card p,
  .promo-card h2, .promo-card h3,
  .sgs-course-card h2, .sgs-course-card h3 {
    overflow-wrap:anywhere;
  }

  .card .media { width:100%; max-width:100%; }
  .card .media img,
  .promo-card img,
  .loc img { width:100%; max-width:100%; object-fit:cover; }

  /* ---- COMMON TWO-COLUMN CONTENT ---- */
  .two, .feat, .copy, .why-in, .ready-in {
    display:grid !important;
    gap:20px !important;
  }

  .two > *, .feat > *, .copy > *, .why-in > *, .ready-in > * {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ---- BUTTONS ---- */
  .btns { width:100%; max-width:100%; flex-wrap:wrap; }
  .btns .btn { max-width:100%; }

  /* ---- HEADINGS / TEXT ---- */
  h1, h2, h3, h4, p, li { max-width:100%; }
  h1 { overflow-wrap:anywhere; }

  /* ---- TABLES / WIDE ELEMENTS ---- */
  table { display:block; width:100%; overflow-x:auto; }
  pre, code { max-width:100%; overflow-x:auto; }

  /* ---- FOOTER ---- */
  .sgs-foot-main,
  .sgs-bottom-inner,
  .sgs-social-inner { width:100% !important; }

  .sgs-foot-main {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .sgs-footer-bottom,
  .sgs-bottom-inner { min-width:0 !important; }

  .sgs-bottom-inner {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:flex-start !important;
  }

  .sgs-bottom-inner nav {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
  }
}

@media (max-width: 480px) {
  .wrap { padding-left:12px !important; padding-right:12px !important; }

  .skill { gap:13px !important; }
  .skill > div:first-child { padding:20px 15px !important; }
  .skill > div:first-child h2 { font-size:27px !important; }

  .skill > .cols3 { gap:10px !important; }
  .skill > .cols3 .colbox { padding:15px 14px !important; }
  .cols3 .colbox h3 { font-size:18px !important; }
  .cols3 .colbox ul li a { font-size:13px !important; }

  .card .body { padding:12px !important; }
  .card .media { height:180px !important; }

  .ready-in { padding-top:20px !important; padding-bottom:20px !important; }
}

@media (max-width: 360px) {
  .wrap { padding-left:10px !important; padding-right:10px !important; }
  .skill > div:first-child { padding:18px 13px !important; }
  .skill > div:first-child h2 { font-size:24px !important; }
  .cols3 .colbox { padding:14px 12px !important; }
  .cols3 .colbox h3 { font-size:17px !important; }
  .cols3 .colbox ul li a { font-size:12.5px !important; }
}

@media (hover:none) and (pointer:coarse) {
  .card:hover, .loc:hover, .promo-card:hover { transform:none !important; }
}


@media (max-width:900px){
  .jx-grid{grid-template-columns:1fr}
  .jx-visual{order:-1;max-width:380px;margin:0 0 30px}
  .jx-badge{left:-8px}
  .jx-ring{right:-18px;top:-30px;width:100px;height:100px}
}
@media (max-width:480px){
  .jx-btns{flex-direction:column}
  .jx-btn{justify-content:space-between}
}

@media (max-width:980px){
  .bfx-head{grid-template-columns:1fr}
  .bfx-lead{grid-column:1;grid-row:3;margin-top:16px}
  .bfx-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bfx-item:nth-child(3n)::before{display:block}
  .bfx-item:nth-child(2n)::before{display:none}
}
@media (max-width:600px){
  .bfx-line{grid-template-columns:1fr}
  .bfx-item::before{display:none!important}
  .bfx-item{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:start}
  .bfx-card{height:auto;margin-top:0}
}

@media (max-width:980px){
  .bkx-head{grid-template-columns:1fr}
  .bkx .bkx-meter{grid-template-columns:1fr}
  .bkx-meter-btns{flex-wrap:wrap}
}
@media (max-width:640px){
  .bkx .bkx-list{grid-template-columns:1fr}
  .bkx-meter-btns button{flex:1}
}

@media (max-width:860px){
  .cdx-grid{grid-template-columns:1fr}
  .cdx-card h3{max-width:70%}
}
@media (max-width:480px){
  .cdx-list li{padding:12px 14px;font-size:15px}
  .cdx-card:hover{transform:none}
}

/* =========================================================
   FIXED HEADER FIX
   html + body both had overflow-x:hidden, which turns <body> into a
   scroll container and silently breaks `position: sticky` on the header.
   `clip` hides sideways overflow WITHOUT creating a scroll container,
   so the header now stays at the top while the page scrolls.
   (mobile menu keeps its body scroll-lock via body.menu-open)
   ========================================================= */
html body:not(.menu-open) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}






/* ===== HOME SECTIONS (hm-) ===== */
@media (max-width:1100px){
  .hm-courses__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-spotlight__card{margin-left:-60px;padding:34px}
  .hm-spotlight--reverse .hm-spotlight__card{margin-right:-60px}
  .hm-about__layout{gap:40px}
}
@media (max-width:900px){
  .hm-section{padding:68px 0}
  .hm-stats__grid{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .hm-stats__item:nth-child(3){border-left:0}
  .hm-process__steps{grid-template-columns:1fr;gap:56px}
  .hm-process__steps::before,.hm-process__steps::after{top:22px;bottom:0;left:22px;right:auto;width:3px;height:auto}
  .hm-process__steps::after{transform:scaleY(0);transform-origin:50% 0}
  .hm-process__steps.is-visible::after{transform:scaleY(1)}
  .hm-process__step{margin-left:42px}
  .hm-process__node{top:18px;left:-66px}
  .hm-process__steps{padding-top:0}
  .hm-paths__list{flex-direction:column;height:auto}
  .hm-paths__panel,.hm-paths__panel.is-active{flex:none;gap:18px}
  .hm-paths__panel .hm-paths__links{opacity:1;translate:0 0}
  .hm-paths__panel{background:var(--hm-black);color:#fff;border-color:var(--hm-black)}
  .hm-paths__num{font-size:48px}
  .hm-paths__panel h3{white-space:normal}
  .hm-spotlight__layout,.hm-spotlight--reverse .hm-spotlight__layout{grid-template-columns:1fr}
  .hm-spotlight__media{height:320px}
  .hm-spotlight__card,.hm-spotlight--reverse .hm-spotlight__card{margin:-48px 16px 0;order:2}
  .hm-spotlight--reverse .hm-spotlight__media{order:1}
  .hm-venues__grid{grid-template-columns:repeat(2,1fr)}
  .hm-about__layout{grid-template-columns:1fr}
  .hm-about__intro{position:static}
  .hm-faq__grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hm-courses__grid{grid-template-columns:1fr}
  .hm-courses__filters{width:100%}
  .hm-cta__inner{flex-direction:column;align-items:flex-start}
  .hm-cta__actions,.hm-cta__actions .hm-btn{width:100%}
  .hm-spotlight__card{padding:28px 22px}
  .hm-faq__question{padding-left:56px;font-size:15.5px}
  .hm-faq__answer p{padding-left:56px}
}
@media (max-width:480px){
  .hm-venues__grid{grid-template-columns:1fr}
  .hm-stats__item span{font-size:11px}
  .hm-heading--row .hm-slider__nav{display:none}
}