/* Design tokens: Medicine/IME palette and type scale, defined as custom
   properties so page rules reference tokens rather than raw values.

   Values are taken from IPS-18. Type sizes confirmed against Figma Dev Mode
   (IPS-18, node 6443-3752 desktop / 6443-4483 mobile). */
:root {
  /* Color - Medicine/IME palette */
  --ime-heritage-green: #003b44;
  --ime-paper-white: #f2f2eb;
  --ime-beacon-blue: #4885f7;
  --ime-beacon-blue-tint-5: #e0ebfe; /* tags only - does not meet text contrast */
  --ime-bright-green: #00d975;
  --ime-bright-green-tint-5: #bff5dd; /* tags only - does not meet text contrast */
  --ime-white: #fff;
  --ime-black: #000;

  /* Confirmed from Figma Dev Mode (IPS-18). Note: --ime-wiley-blue differs from
     --ime-beacon-blue (#4885f7 in brand guide vs #5382f2 in Figma). Flag with PO. */
  --ime-wiley-blue:  #5382f2; /* button background, confirmed Figma */
  --ime-wiley-blue-dark: #3d6be0; /* button hover (darker wiley-blue) */
  --ime-wiley-gray:  #a3bfb5; /* list / event item border */
  --ime-a11y-gray:   #69716e; /* accessible gray - course header border, placeholder text */
  --ime-heritage-teal: #00736f; /* teal end of the Knowledge Hubs green gradient */
  --ime-border-light: #e5e5e5; /* navigation top/bottom hairline */
  --ime-paper-divider: #c9c7c2; /* divider on paper-white surfaces (e.g. nav dropdown) */
  --ime-wiley-gray-dd-arrow: #b7b7b7; /* text color for dropdown arrow icon in hover state */
  /* Gradients */
  --ime-header-accent-gradient: linear-gradient(90deg, var(--ime-wiley-blue) 0%, #85aefa 100%); /* header accent line under the top bar */

  /* Typography - families */
  --ime-font-sans: "Inter", sans-serif;        /* headings and body */
  --ime-font-mono: "IBM Plex Mono", monospace; /* button text only, uppercase */

  /* Typography - tracking (2% per brand guide; buttons use 10%) */
  --ime-tracking: 0.02em;
  --ime-tracking-button: 0.1em;

  /* Type scale - confirmed from Figma Dev Mode.
     Brand guide ranges: Hero >72px, Large 48-72px, Subheading 24-48px, Body 0-24px. */
  --ime-size-hero: 48px;        /* carousel H1, Inter Light 300, lh 1.2, ls -0.96px */
  --ime-size-heading-lg: 48px;
  --ime-size-subheading: 24px;  /* section headings, Inter Light 300, lh 1.15, ls -0.48px */
  --ime-size-body: 16px;        /* body text, Inter Regular 400, lh normal */
  --ime-size-body-sm: 14px;     /* secondary text (dates, locations) */

  /* Layout - content column. Design frame is 1440px with 100px side gutters,
     so the content is 1240px. max includes the min gutter (border-box), i.e.
     content = 1280 - 2*20 = 1240; at a 1440 viewport the effective side gutter
     resolves to 100px, matching the design. */
  --ime-content-max: 1280px;
  --ime-content-gutter: 20px;
}


/* Homepage
   Page-specific rules (hero, Knowledge Hubs, values, courses/events, homepage
   spacing) are scoped under .page-homepage (body class confirmed in
   fixtures/ethos/homepage.html) so they do not leak into other templates.

   The HEADER and FOOTER rules are deliberately NOT scoped to .page-homepage:
   the header/footer chrome is site-wide, so those selectors are anchored to
   `body` instead (present on every EthosCE page).

   Cascade note: this file is @imported near the TOP of src/global.css (line 18),
   BEFORE the large inline EthosCE platform block. So our rules come EARLIER in
   source order and cannot beat the platform on source order alone — they win on
   SPECIFICITY. The `body` anchor (and the long #wrapper #header-wrapper #header
   ... chains) is what out-specifies the platform's own ID selectors; several of
   those platform rules also use !important, so we match !important where needed
   and rely on the higher specificity to win. Content-authored inline styles are
   beaten with !important. */

/* === IPS-18 Homepage styles — START === */

/* stylelint-disable selector-class-pattern --
   EthosCE/Drupal uses BEM double-underscore naming (menu__link, menu__item)
   on platform-generated HTML we do not control. */

/* stylelint-disable no-descending-specificity --
   ID selectors intentionally follow class selectors to override inline styles. */

/* ------------------------------------------------------------------
   PAGE BACKGROUND
   The whole page is white, per the design. The platform sets a near-white
   background on <body> (which carries the .page-homepage class); override it
   to white here, along with the content wrappers.
   ------------------------------------------------------------------ */
body.page-homepage {
  background: var(--ime-white);
}

.page-homepage #main-wrapper,
.page-homepage #main,
.page-homepage #content,
.page-homepage #content-area {
  background: var(--ime-white);
}

/* ===== END OF PAGE BACKGROUND SECTION ===== */

/* ------------------------------------------------------------------
   CONTENT WIDTH — 1240px centred column
   The platform caps #page at 1200px (src/global.css). Widen to the design's
   1240px content so the main column matches the header/nav. The per-section
   100px gutters below are dropped to 0 so every section's content aligns to
   this same column; the coloured panels (e.g. Knowledge Hubs) keep their own
   internal padding instead.
   ------------------------------------------------------------------ */
.page-homepage #page {
  max-width: var(--ime-content-max);
  padding-left: var(--ime-content-gutter);
  padding-right: var(--ime-content-gutter);
}

/* ===== END OF CONTENT WIDTH SECTION ===== */

/* ------------------------------------------------------------------
   PANEL CHROME RESET
   The platform styles every .panel-pane as a white, rounded, drop-shadowed
   card with a 5px purple bottom border (--color-buttons #5b4dff)
   (src/global.css ~19716 box-shadow/radius/bg, ~20894 border-bottom). That
   floating-card look adds the "popped up" shadow, the purple lines under
   every section, and a white block that fights the flat full-width design.
   Strip all of it so sections sit flat; the ones that need a fill (e.g.
   video/values white, Knowledge Hubs gradient) set their own background at a
   higher specificity, so they are unaffected.
   ------------------------------------------------------------------ */
.page-homepage .panel-pane {
  background: transparent;
  border: 0; /* platform 1px card border + 5px purple bottom border */
  border-radius: 0;
  box-shadow: none; /* platform subtle card drop shadow */

  /* Drop the platform's .panel-pane { margin-bottom: 30px } (src/global.css
     ~14604). Each pane owns its own vertical spacing via padding, so this stray
     30px only inflated the gaps between sections (e.g. hero -> values). */
  margin-bottom: 0;

  /* Drop the platform's 20px horizontal card padding so each pane's content
     (headings, lists) aligns to its column edge instead of being inset. The
     content panes (pane-3/4/5) keep their own padding via higher-specificity
     rules; this mainly re-aligns the Courses/Events view panes. */
  padding-left: 0;
  padding-right: 0;
}

/* ===== END OF PANEL CHROME RESET SECTION ===== */

/* ------------------------------------------------------------------
   GLOBAL BUTTON (.btn)
   Figma: IBM Plex Mono Medium 16px, uppercase, 10% tracking, #5382f2 bg, 8px radius.
   ------------------------------------------------------------------ */
.page-homepage .btn,
.page-homepage button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ime-wiley-blue);
  color: var(--ime-black);
  font-family: var(--ime-font-mono);
  font-size: var(--ime-size-body);
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: var(--ime-tracking-button);
  text-decoration: none !important; /* beats #content-area a { text-decoration: underline } at specificity 101 */
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
}

.page-homepage .btn:hover,
.page-homepage button.btn:hover {
  background-color: var(--ime-wiley-blue-dark);
  color: var(--ime-black);
  text-decoration: none;
}

.page-homepage .btn:focus-visible,
.page-homepage button.btn:focus-visible {
  outline: 3px solid var(--ime-wiley-blue);
  outline-offset: 2px;
}

/* ===== END OF GLOBAL BUTTON SECTION ===== */

/* ------------------------------------------------------------------
   HEADER — TOP BAR + LOGO ROW
   EthosCE's own theme already builds a top bar this way: #header gets
   a border-top (native space reservation, no padding-top/overlay hack)
   and #ethosce-user-links-wrapper is pulled up into that border with a
   negative top offset. It's wired up via #wrapper #header-wrapper
   #header #header-inner #header-right ... with !important at every
   step (see src/global.css ~17632-17667, ~19505-19525), so our
   override has to match that selector chain (anchored to `body` for
   the extra specificity, since the platform block is later in source)
   and match its !important, rather than reset position/border-top on a
   shorter selector and lose the cascade. #header-inner is the actual
   containing block here (the platform forces it position:relative),
   not #header.
   ------------------------------------------------------------------ */
body #header-wrapper {
  background: var(--ime-white);
}

body #wrapper #header-wrapper #header {
  background: var(--ime-white);
  border: none;
  border-top: 47px solid var(--ime-heritage-green) !important;
  background-image: none;

  /* Positioning context for the accent line below, so it anchors to #header
     rather than the viewport. This is what keeps the line correct when the
     EthosCE admin page-builder bar (#navbar-bar, shown only to authorised
     admins) pushes the whole page down: a viewport-anchored line would stay
     47px from the top of the screen and land on the admin bar, but anchored
     to #header it moves down with the header. */
  position: relative;
}

/* Gradient accent line under the 47px green top bar (Figma "Line 5"). #header
   has border-top:47px, so its padding box (the containing block for this
   absolutely-positioned pseudo) starts at the bottom edge of that green bar —
   hence top:0 places the 6px line exactly there, at any scroll position and
   with or without the admin bar. */
body #header::after {
  content: "";
  display: block;
  background: var(--ime-header-accent-gradient);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

/* Dark green top bar content — pulled up into #header's border-top area.
   Must match the platform's own selector chain (see comment above) or
   this loses the cascade to src/global.css and silently does nothing. */
body #wrapper #header-wrapper #header #header-inner #header-right #ethosce-user-links-wrapper {
  color: var(--ime-white) !important;
  font-weight: bold !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 30px !important;
  position: absolute !important;
  max-width: 990px !important;
  top: -30px !important;
  right: 0 !important;
}

body #header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* 1280px content column (see --ime-content-max). Beats the platform's own
     #header-inner { max-width: 1200px; padding: 0 30px } via the `body` anchor
     (body #header-inner out-specifies #header-inner), so the logo/user-links
     align to the same edges as every section. */
  max-width: var(--ime-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 24px var(--ime-content-gutter);
  height: 135px;
  float: none;
  clear: both;
  background: transparent;
  box-sizing: border-box;
}

body #header-right {
  position: static;
  display: flex;
  align-items: center;
  gap: 16px;
  float: none;
  background: transparent;
}

/* Remove the clearfix ::after the platform generates on #header-right. With
   the region now laid out as flex (not floats), that empty cleared box just
   adds a stray flex item and throws the header spacing off. content:none
   stops the pseudo generating a box at all. !important because the live
   platform build applies it at a higher weight than this capture shows. */
body #header-right::after,
body #header-right::before {
  content: none !important;
}

/* .header__region is an intermediate container; must not create a new containing block */
body .header__region {
  position: static;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
body #logo {
  float: none;
  flex-shrink: 0;
  margin: 0;
}

body #logo img {
  max-width: 370px;
  max-height: 56px;
  width: auto;
  display: block;
}

body #name-and-slogan {
  display: none !important;
}

/* Login / Register links (inside dark bar) */
body #ethosce-mmenu-toggle {
  display: none; /* desktop: hidden; mobile: shown */
}

.page-homepage #uc-cart-link {
  display: none !important;
}

body #block-system-user-menu {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

body #block-system-user-menu .content,
body #block-system-user-menu h3 {
  padding: 0;
  margin: 0;
  display: none;
}

body #block-system-user-menu .content {
  display: block;
  padding: 0;
}

body #block-system-user-menu .menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

body #block-system-user-menu .menu__item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  list-style: none;
}

body #block-system-user-menu .menu__link {
  font-family: var(--ime-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ime-white);
  text-decoration: underline;
  padding: 0;
  background: transparent;
  border: none;
}

body #block-system-user-menu .menu__link:hover {
  text-decoration: none;
}

/* Social sharing block — hidden on homepage */
.page-homepage #block-service-links-service-links-not-node {
  display: none !important;
}

/* Search form */
body #block-ethosce-search-ethosce-search {
  margin: 0;
  padding: 0;
  float: none;
  border: none;
  box-shadow: none;
  background: transparent;
}

body #block-ethosce-search-ethosce-search h3 {
  display: none;
}

body #block-ethosce-search-ethosce-search .content {
  padding: 0;
}

body #ethosce-search-form .container-inline {
  display: flex;
  align-items: center;
  border: 1px solid var(--ime-heritage-green);
  border-radius: 4px;
  overflow: hidden;
  width: 300px;
  height: 44px;
}

body #ethosce-search-form .form-item {
  flex: 1;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body #ethosce-search-form .field-label {
  display: none;
}

body #ethosce-search-form input[type="text"] {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 0;
  padding: 0 12px;
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body);
  color: var(--ime-a11y-gray);
  background: var(--ime-white);
  outline: none;
  box-shadow: none;
}

body #ethosce-search-form input[type="text"]::placeholder {
  color: var(--ime-a11y-gray);
}

body #ethosce-search-form input[type="submit"] {
  height: 44px;
  padding: 0 16px;
  background-color: var(--ime-white);
  color: var(--ime-a11y-gray);
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body-sm);
  border: none;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
}

body #ethosce-search-form input[type="submit"]:hover {
  color: var(--ime-heritage-green);
}


/* Header + search structural overrides (relocated here from the file tail,
   now scoped to the homepage so they no longer leak to other templates). */
body #header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body #header-inner.clearfix::after {
  content: none;
}

body #edit-submit:hover {
  background: none;
}

/* Search field magnifying-glass icon. Rendered the platform way — a Font
   Awesome glyph on a pseudo-element (#edit-ethosce-search is position:relative,
   so this anchors to the search box). The glyph is written as the \f002 escape
   (U+F002 = search) instead of the raw private-use character, which reads as an
   empty "" in editors and gets silently dropped. */
body #block-ethosce-search-ethosce-search #edit-ethosce-search::after {
  content: "\f002";
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- icon font, no generic fallback */
  font-family: "Font Awesome 5 Solid";
  display: block;
  position: absolute;
  top: 10px;
  right: 11px;
  color: var(--ime-heritage-green) !important;
  pointer-events: none;
}

/* ===== END OF HEADER SECTION ===== */

/* ------------------------------------------------------------------
   NAVIGATION
   Figma: white bg, 1px #e5e5e5 border top/bottom, 51px link height.
   ------------------------------------------------------------------ */
body #navigation-outer {
  background: var(--ime-white);
  border-top: 1px solid var(--ime-border-light);
  border-bottom: 1px solid var(--ime-border-light);
}

body #navigation {
  background: transparent;
  padding: 0;
  background-image: none;
  box-shadow: none; /* platform gives #navigation the subtle card shadow */
}

/* Navbar aligned to the same 1240px content column as the header. */
body #topnav-inner {
  max-width: var(--ime-content-max);
  margin: 0 auto;
  padding: 0 var(--ime-content-gutter);
}

body #main-menu > .menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none; /* platform gives ul.menu a drop shadow */
}

body #main-menu > .menu > .menu__item {
  position: relative;
  background: transparent;
}

body #main-menu > .menu > .menu__item > .menu__link {
  display: flex;
  align-items: center;
  height: 51px;
  padding: 0;
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body);
  font-weight: 400;
  color: var(--ime-black);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: none;
}

body #main-menu > .menu > .menu__item > .menu__link:hover {
  color: var(--ime-heritage-green);
}

/* ===== END OF NAVIGATION SECTION ===== */

/* ------------------------------------------------------------------
   HEADER NAV DROPDOWNS — START
   Figma node 6796:3773. A top-level nav item that has children
   (li.menu__item.expanded) reveals a "paper" dropdown panel on hover or
   keyboard focus. This applies to every such item in the menu (Find a course,
   Specialties, Contact us, ...), not one specific link.
   DOM: #main-menu > ul.menu > li.menu__item.expanded
          > a.menu__link           (the top-level trigger, styled above)
          > ul.menu                (the dropdown panel)
              > li.menu__item > a.menu__link   (each dropdown link)
   The parent li is already position:relative (see NAVIGATION section), so the
   absolutely-positioned panel anchors to it. Chrome is site-wide, so the whole
   block is anchored to `body` (not .page-homepage) like the rest of the header.
   ------------------------------------------------------------------ */

/* Dropdown panel: hidden by default; the panel styling stays applied so only
   `display` toggles on reveal. Figma: paper-white fill, 1px paper divider,
   2px radius, soft drop shadow, 8px/16px inner padding. */
body #main-menu > .menu > .menu__item.expanded > .menu {
  /* Kept in the layout (not display:none) so the reveal can animate — `display`
     is not animatable, so the panel is hidden with opacity + visibility and
     faded in on hover/focus. visibility flips to hidden only AFTER the fade-out
     (0s delay = duration) so it disappears smoothly instead of snapping. */
  display: flex;
  position: absolute;
  top: calc(100% + 1px); /* clear the 1px navigation-outer bottom hairline */
  left: 0;
  z-index: 100;
  flex-direction: column;
  min-width: 253px; /* Figma panel width; grows with longer labels */
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  background: var(--ime-paper-white);
  border: 1px solid var(--ime-paper-divider);
  border-radius: 2px;
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px); /* subtle 4px settle-in, nothing dramatic */
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

Hello, my friend/* Force nav dropdown carets to stay gray by default,
even when the item is in the active-trail (e.g. Specialties on the homepage) */
#main-menu li.expanded > a.active-trail::after,
#main-menu li.expanded > a.active::after {
color: var(--ime-wiley-gray-dd-arrow); /* --ime-wiley-gray-dd-arrow */
}

/* Turn the caret black only on hover */
#main-menu li.expanded > a:hover::after,
#main-menu li.expanded > a.active-trail:hover::after,
#main-menu li.expanded > a.active:hover::after {
color: var(--ime-black); /* --ime-black */
}

/* Reveal on hover or when focus moves into the item (keyboard access). */
body #main-menu > .menu > .menu__item.expanded:hover > .menu,
body #main-menu > .menu > .menu__item.expanded:focus-within > .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s;
}

/* Respect reduced-motion: keep the fade but drop the slide and snap timing. */
@media (prefers-reduced-motion: reduce) {
  body #main-menu > .menu > .menu__item.expanded > .menu {
    transform: none;
    transition: opacity 80ms linear, visibility 0s linear 80ms;
  }

  body #main-menu > .menu > .menu__item.expanded:hover > .menu,
  body #main-menu > .menu > .menu__item.expanded:focus-within > .menu {
    transform: none;
    transition: opacity 80ms linear, visibility 0s;
  }
}

/* Dropdown rows: full-width, divider between rows (none above the first). */
body #main-menu > .menu > .menu__item.expanded > .menu > .menu__item {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ime-paper-divider);
}

body #main-menu > .menu > .menu__item.expanded > .menu > .menu__item:first-child {
  border-top: 0;
}

/* Dropdown links: Inter 16px/24px, -0.32px tracking, black (Figma). Reset the
   platform's flexed 51px top-level link geometry that these would otherwise
   inherit; wrap long labels rather than clip. 4px top pad on the first row
   matches the Figma slot rhythm (panel 8px + first row 4px). */
body #main-menu > .menu > .menu__item.expanded > .menu > .menu__item > .menu__link {
  display: block;
  height: auto;
  padding: 8px 0;
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--ime-black);
  text-decoration: none;
  white-space: normal;
  background: transparent;
  border: none;
}

body #main-menu > .menu > .menu__item.expanded > .menu > .menu__item:first-child > .menu__link {
  padding-top: 4px;
}

/* Hover: keep the text unchanged — no colour shift, no underline. The explicit
   :hover rule is still needed to hold black over any platform link-hover style
   that would otherwise apply on hover. */
body #main-menu > .menu > .menu__item.expanded > .menu > .menu__item > .menu__link:hover {
  color: var(--ime-black);
  text-decoration: none;
}

/* ===== HEADER NAV DROPDOWNS — END ===== */

/* ------------------------------------------------------------------
   HERO BANNER
   Figma node 6443:3754/6443:3755 (desktop) / 6443:4486 (mobile) — a 416px
   banner with a healthcare photo as the full background, a diagonal green
   gradient over its left, and the mission eyebrow + heading + CTA on the
   gradient. The photo shows on the right.
   DOM (EthosCE layout table we control the content of, not the tags):
     #hero-banner (display:table)
       > div:first-child  = text cell (eyebrow <p>, <h2>, CTA <p><a.btn>)
       > div:last-child   = image cell (<img>)
   Strategy: dissolve the table into an overlay — image cell becomes a
   full-bleed background layer; text cell sits on top with the gradient.
   ------------------------------------------------------------------ */

/* panel-col-top only clears floats; each pane owns its own spacing. */
.page-homepage .panel-col-top {
  padding: 0;
}

/* Hero pane: 32px top/bottom, 0 sides (the 1240px column provides the gutter). */
.page-homepage .pane-custom.pane-3 {
  padding: 32px 0;
}

/* Banner container — override the inline display:table / height:260px and
   become the positioning context for the two overlaid cells. */
.page-homepage #hero-banner {
  position: relative !important;
  display: block !important;
  min-height: 416px !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 4px;
  background: var(--ime-heritage-green) !important;
  box-sizing: border-box;
}

/* Image cell -> full-bleed background layer (behind the text). */
.page-homepage #hero-banner > div:last-child {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  vertical-align: unset !important;
}

.page-homepage #hero-banner > div:last-child img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
}

/* Text cell -> gradient overlay + mission content, on top of the photo. */
.page-homepage #hero-banner > div:first-child {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 58% !important;
  min-height: 416px !important;
  padding: 40px 56px !important;
  box-sizing: border-box !important;
  vertical-align: unset !important;
  background: linear-gradient(
    100deg,
    var(--ime-heritage-green) 0%,
    var(--ime-heritage-green) 42%,
    rgb(0 59 68 / 85%) 55%,
    rgb(0 59 68 / 0%) 72%
  ) !important;
}

/* Eyebrow (first paragraph) — IBM Plex Mono, uppercase, beige. */
.page-homepage #hero-banner > div:first-child > p:first-child {
  margin: 0 0 16px !important;
  font-family: var(--ime-font-mono) !important;
  font-size: var(--ime-size-body) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ime-tracking-button) !important;
  color: var(--ime-paper-white) !important;
}

/* Heading — Inter Light 48px on desktop (24px on mobile, see media query). */
.page-homepage #hero-banner h2 {
  margin: 0 0 32px !important;
  font-family: var(--ime-font-sans) !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.96px !important;
  color: var(--ime-white) !important;
}

/* CTA wrapper paragraph. */
.page-homepage #hero-banner > div:first-child > p:last-child {
  margin: 0 !important;
}

.page-homepage #hero-banner .btn {
  border-radius: 4px;
  padding: 16px 24px;
}

/* ===== END OF HERO BANNER / CAROUSEL SECTION ===== */

/* ------------------------------------------------------------------
   VIDEO / VALUES SECTION
   Figma: white bg, video on left, values text on right, no borders.
   DOM: .pane-custom.pane-4 > .pane-content > table (inline-styled)
   ------------------------------------------------------------------ */
.page-homepage .pane-custom.pane-4 {
  background: var(--ime-white);
  border: 0;

  /* Zero all of the platform pane padding (0 20px horizontal, plus a stray
     10px top / 20px bottom) so the section's spacing is owned entirely by the
     .pane-content padding below. Horizontal 0 also aligns content to the
     1240px column instead of being inset 20px. */
  padding: 0;
}

.page-homepage .pane-custom.pane-4 > .pane-content {
  /* Horizontal gutter dropped to 0: content aligns to the 1240px column.
     This pane-content owns both vertical gaps around the values section (its
     pane wrapper padding and the table margin are zeroed elsewhere):
       top 48px + hero pane's 32px bottom padding = 80px hero -> values gap;
       bottom 48px = the values -> Knowledge Hubs gap. */
  padding: 48px 0;
}

/* Video column: a clean, borderless 16:9 embed that plays on click.
   We deliberately do NOT lay a custom play-button facade over the iframe:
   a CSS-only facade cannot reliably reveal a cross-origin YouTube embed on
   click, because focus does not cross the iframe boundary (:focus-within on
   the parent never fires), so the facade would either block the video or
   snap back over it mid-playback. Instead the native player supplies the
   play control and the video plays/reveals normally at its 16:9 size.
   The cell padding is zeroed (the platform ships td { padding: 5px }, plus a
   32px inline padding-right moved to the text cell) so the video is flush. */
.page-homepage .pane-custom.pane-4 td:first-child {
  padding: 0 !important;
}

.page-homepage .pane-custom.pane-4 iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: var(--ime-black);
}

/* "Our Values:" heading — plain black, no underline, per the design. The
   inline styles (green underline, #003b44, weight 600) are overridden. */
.page-homepage .pane-custom.pane-4 h2 {
  display: block !important;
  font-family: var(--ime-font-sans) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ime-black) !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

.page-homepage .pane-custom.pane-4 p {
  font-family: var(--ime-font-sans) !important;
  font-size: var(--ime-size-body) !important;
  color: var(--ime-black) !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}

/* Bulleted list — standard black discs, per the design. */
.page-homepage .pane-custom.pane-4 ul {
  list-style: disc !important;
  padding-left: 22px !important;
  margin: 0 !important;
}

.page-homepage .pane-custom.pane-4 li {
  font-family: var(--ime-font-sans) !important;
  font-size: var(--ime-size-body) !important;
  color: var(--ime-black) !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}

.page-homepage .pane-custom.pane-4 a {
  text-decoration: none !important;
}

/* Table layout: reset EthosCE overrides so inline widths hold */
.page-homepage .pane-custom.pane-4 table {
  width: 100%;

  /* Clear the platform's #content-area .panel-pane table { margin: 0 auto 14px }.
     That ID selector out-specifies a plain margin:0 here, so its 14px bottom
     margin would otherwise leak into the values -> Hubs gap; !important removes
     it so the pane-content padding alone defines the gap. */
  margin: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
}

/* vertical-align top, and remove the cell borders the platform draws on
   every content-area td (#content-area td { border: 1px solid ... }). With
   border-collapse those form the box around the video, the box around the
   values text, and the outer rectangle around the whole block — all of
   which the design omits. */
.page-homepage .pane-custom.pane-4 td {
  vertical-align: top;
  border: 0 !important;
}

/* Restore the column gap that the video cell gave up (padding-right:0). */
.page-homepage .pane-custom.pane-4 td:last-child {
  padding-left: 48px !important;
}

/* ===== END OF VIDEO / VALUES SECTION SECTION ===== */

/* ------------------------------------------------------------------
   KNOWLEDGE HUBS SECTION
   Figma: dark green-to-teal gradient bg, centered heading, 2-col link list.
   DOM: #knowledge-hubs (inline: background:#003b44; padding:40px 60px)
        > h2 + table (inline-styled)
   ------------------------------------------------------------------ */

/* Drop the platform's .panel-pane { padding: 0 20px } and .pane-content
   padding so the green panel fills the full 1240px column (its own 100px
   internal padding then insets the grid, per the design). */
.page-homepage .pane-custom.pane-5 {
  /* Zero the platform's horizontal pane padding (so the green band fills the
     full 1240px column) and its stray 10px top padding (so the values -> Hubs
     gap is defined solely by pane-4's 48px bottom padding). Keep the 20px
     bottom padding as the white space below the band. */
  padding: 0 0 20px;
}

.page-homepage .pane-custom.pane-5 > .pane-content {
  padding: 0;
}

/* Full-width green band (per the Figma frame): the band spans the whole
   viewport while the title + grid stay capped at the 1240px content column.
   The band breaks out of #page's 1240 column with 100vw + negative margins.
   100vw includes the vertical scrollbar, which is what pushed horizontal
   overflow on production last time — so the fix is not to avoid the breakout
   but to CLIP that ~15px of overflow on the page wrapper (see the
   #page-wrapper rule below, overflow-x: clip). The side padding resolves to
   (100vw - 1240) / 2 — 100px at a 1440 viewport — with a 16px min gutter on
   narrow screens, matching the other sections. */
.page-homepage #knowledge-hubs {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 48px max(16px, calc(50vw - 620px)) !important;
  background: linear-gradient(59.52deg, var(--ime-heritage-green) 76%, var(--ime-heritage-teal) 121%) !important;
}

/* Clip the scrollbar-width overflow the 100vw band above creates, so it never
   produces a horizontal scrollbar. overflow-x: clip (not hidden) does NOT
   force overflow-y to auto, so it doesn't create a nested vertical scroll
   container. #page-wrapper is full-width and an ancestor of the band; it is
   body > #wrapper > #page-wrapper, so it is NOT the mmenu "body > div"
   wrapper and is safe to constrain. */
.page-homepage #page-wrapper {
  overflow-x: clip;
}

.page-homepage #knowledge-hubs h2 {
  font-family: var(--ime-font-sans) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--ime-white) !important;
  text-align: center !important;
  letter-spacing: -0.48px !important;
  line-height: 1.15 !important;
  margin: 0 0 36px !important;
}

/* Two independent columns with a real 36px gap. The inline-styled layout
   table is dissolved into a 2-col grid: tbody/tr become display:contents so
   the cells are direct grid items. Row-major auto-placement reproduces the
   source columns because each <tr> holds a left+right cell (items land
   col1,col2,col1,col2… so every left cell stacks in column 1). Grid gives
   each column its own borders; border-collapse could not — its bottom
   borders joined across the middle, which the design does not show. */
.page-homepage #knowledge-hubs table {
  display: grid !important; /* beats the table display type */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 36px !important;
  width: 100% !important;
  margin: 0 !important; /* clear the platform's #content-area table margin */
  background: none !important; /* inline background:#003b44 hid the section gradient behind the grid */
  border-collapse: collapse;
}

.page-homepage #knowledge-hubs tbody,
.page-homepage #knowledge-hubs tr {
  display: contents !important; /* dissolve so cells become grid items */
}

/* Column top hairline: first row's two cells only (top of each column).
   tr:first-child still selects in the DOM though the tr box is dissolved. */
.page-homepage #knowledge-hubs tr:first-child td {
  border-top: 1px solid var(--ime-wiley-gray) !important;
}

/* Each row: text + arrow, 16px padding, bottom hairline. Neutralises the
   inline cell geometry (width:50%, per-side padding) and the platform's
   #content-area td { border: 1px solid ... }. */
.page-homepage #knowledge-hubs td {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: auto !important; /* inline width:50% */
  padding: 16px !important; /* inline padding */
  border: 0 !important; /* inline border-* + platform td border */
  border-bottom: 1px solid var(--ime-wiley-gray) !important;
  background: transparent !important;
}

.page-homepage #knowledge-hubs a {
  font-family: var(--ime-font-sans) !important;
  font-size: var(--ime-size-body) !important; /* 16px, per Figma */
  font-weight: 400 !important;
  line-height: normal !important;
  color: var(--ime-white) !important;
  text-decoration: none !important;
  display: block;
  white-space: nowrap; /* single line per the design (see brittleness note) */
}

.page-homepage #knowledge-hubs a:hover {
  text-decoration: underline !important;
}

/* ===== END OF KNOWLEDGE HUBS SECTION SECTION ===== */

/* ------------------------------------------------------------------
   COURSES + EVENTS TWO-COLUMN LAYOUT
   Figma: side-by-side flex columns, 36px gap, 48px vertical padding.
   DOM: .center-wrapper > .panel-col-first (courses) + .panel-col-last (events)
   EthosCE uses floats; we set explicit 50% widths with half-gap padding.
   ------------------------------------------------------------------ */
.page-homepage .center-wrapper {
  /* Horizontal gutter dropped to 0: columns align to the 1240px column. */
  padding: 0;
  overflow: hidden; /* clearfix for floated columns */
}

.page-homepage .panel-col-first.panel-panel {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding-right: 18px;
}

.page-homepage .panel-col-last.panel-panel {
  width: 50%;
  float: right;
  box-sizing: border-box;
  padding-left: 18px;
}

.page-homepage .panel-col-first .inside,
.page-homepage .panel-col-last .inside {
  padding: 48px 0;
}

/* Section headings — "Recent courses", "Featured courses", "Featured Events" */
.page-homepage .pane-title {
  font-family: var(--ime-font-sans);
  font-size: 24px;
  font-weight: 300;
  color: var(--ime-black);
  letter-spacing: -0.48px;
  line-height: 1.15;
  margin: 0 0 24px;
  border: none;
  padding: 0;
  background: transparent;
}

/* ===== END OF COURSES + EVENTS TWO-COLUMN LAYOUT SECTION ===== */

/* ------------------------------------------------------------------
   COURSES TABLE (Recent / Featured courses)
   Figma node 6443:3845: a clean title-only list. A beige "Title" header row
   with a 1px a11y-gray top rule, then course rows with 16px padding, a 1px
   wiley-gray bottom divider, and black title text.

   The source is a FooTable Views table (class "views-table cols-5 footable").
   Two platform behaviours fight this design:
     1. FooTable's core CSS hides EVERY body cell by default
        (table.footable > tbody > tr > td { display: none }) and re-shows them
        with JS per breakpoint. Our fixture has no jQuery, so the JS never runs
        and the rows vanish. We render a static title-only list, so we force the
        title cell visible and keep the other 4 columns hidden regardless of JS.
     2. The platform's #content-area table cell rules (padding 20px 5px, cell
        borders) out-specify a plain .page-homepage .views-table selector on the
        ID, so the layout-critical properties use !important to win.
   ------------------------------------------------------------------ */
.page-homepage .views-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  table-layout: auto;
}

/* Hide the non-title columns; !important keeps them hidden even if FooTable's
   JS runs on the live site and tries to re-show cells per breakpoint. */
.page-homepage .views-table .views-field-course-credit-types,
.page-homepage .views-table .views-field-field-course-live,
.page-homepage .views-table .views-field-field-course-event-date,
.page-homepage .views-table .views-field-sell-price {
  display: none !important;
}

/* Force the title cell visible over FooTable's default-hide rule (see note 1).
   Higher specificity than table.footable > tbody > tr > td, so no !important
   needed; if the JS does run it also keeps this column shown. */
.page-homepage .views-table.footable > tbody > tr > td.views-field-title {
  display: table-cell;
}

/* Header "Title" row: beige fill + 1px a11y-gray top rule, Inter SemiBold 16px.
   Only the title column is visible, so its cell spans the row and the fill
   reads as a full-width header band.
   The #content-area prefix (a confirmed ancestor) is needed because the
   platform's #content-area .view thead th a { color: neutral-dark !important }
   out-specifies a plain .page-homepage selector on the ID and would otherwise
   leave the "Title" sort link grey. The other !important declarations beat the
   platform's non-ID th rules (fill, weight, borders). */
.page-homepage #content-area .views-table thead th {
  background-color: var(--ime-paper-white) !important;
  border: 0 !important;
  border-top: 1px solid var(--ime-a11y-gray) !important;
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body);
  font-weight: 600 !important;
  color: var(--ime-black) !important;
  padding: 12px 16px !important;
  text-align: left;
}

.page-homepage #content-area .views-table thead th a {
  font-weight: 600 !important;
  color: var(--ime-black) !important;
  text-decoration: none;
}

/* Course rows: 16px padding, 1px wiley-gray bottom divider, black title text
   (per Figma). Underline only on hover for the link affordance. */
.page-homepage .views-table tbody td {
  font-family: var(--ime-font-sans);
  font-size: var(--ime-size-body);
  font-weight: 400;
  color: var(--ime-black);
  padding: 16px !important;
  vertical-align: top;
  border: 0 !important;
  border-bottom: 1px solid var(--ime-wiley-gray) !important;
}

.page-homepage .views-table tbody td.views-field-title a {
  color: var(--ime-black);
  text-decoration: none;
}

.page-homepage .views-table tbody td.views-field-title a:hover {
  text-decoration: underline;
}

/* ===== END OF COURSES TABLE SECTION ===== */

/* ------------------------------------------------------------------
   FEATURED EVENTS
   Figma: event cards with 122x107px image, date / title / location / btn.
   DOM: #featured-events > .event-card > .event-image + .event-details
   ------------------------------------------------------------------ */
.page-homepage #featured-events {
  border-top: 1px solid var(--ime-wiley-gray);
}

.page-homepage .event-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 16px;
  border-bottom: 1px solid var(--ime-wiley-gray);
}

/* Hide empty event cards. EthosCE can emit placeholder cards with an empty
   .event-image and no content; without this they render as blank rows with
   divider borders. :has() tests for a real event (a title) — cards missing
   one are removed entirely, borders and all. */
.page-homepage #featured-events .event-card:not(:has(.event-title)) {
  display: none;
}

.page-homepage .event-image {
  flex-shrink: 0;
  width: 122px;
  height: 107px;
  overflow: hidden;
}

.page-homepage .event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-homepage .event-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-homepage .event-date {
  font-family: var(--ime-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ime-black);
  line-height: normal;
  margin: 0;
}

.page-homepage .event-title {
  font-family: var(--ime-font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--ime-black);
  letter-spacing: -0.4px;
  line-height: normal;
  margin: 0;
}

.page-homepage .event-location {
  font-family: var(--ime-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ime-black);
  line-height: normal;
  margin: 0;
}

.page-homepage .event-details .btn {
  margin-top: 4px;
  align-self: flex-start;
}

/* ===== END OF FEATURED EVENTS SECTION ===== */

/* ------------------------------------------------------------------
   SUBSCRIBE BANNER (panel-col-bottom)
   Not part of the Figma design — hidden. !important beats the element's
   inline style attribute. Remaining subscribe-banner rules below are now
   dead but harmless.
   ------------------------------------------------------------------ */
.page-homepage .subscribe-banner {
  display: none !important;
}

.page-homepage .subscribe-banner h2 {
  font-family: var(--ime-font-sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ime-heritage-green) !important;
  margin: 0 !important;
}

.page-homepage .subscribe-banner input[type="email"] {
  font-family: var(--ime-font-sans);
  font-size: 14px;
  color: var(--ime-heritage-green);
  border: 1px solid rgb(0 59 68 / 30%);
  border-radius: 4px;
  padding: 10px 14px;
}

/* ===== END OF SUBSCRIBE BANNER SECTION ===== */

/* ------------------------------------------------------------------
   FOOTER
   Figma: dark green bg, 48px top / 72px bottom / 100px sides.
   DOM: footer#footer > #footer-inner > div (inline: background:#003b44; padding:40px 60px)
   ------------------------------------------------------------------ */
body #footer {
  background-color: var(--ime-heritage-green);
  padding: 0;
  border-top: none;
  background-image: none;
}

body #footer-inner {
  padding: 0;
  margin: 0 216px
}

body #footer-inner > div:first-of-type {
  background-color: var(--ime-heritage-green) !important;

  /* Figma node 6443:3915: 48px top, 56px bottom (bottom bar ends 56px above the
     frame edge). Left/right padding is 0 — the footer content sits flush to the
     inner container edges. */
  padding: 48px 0 56px !important;
}

/* Footer column headings */
body #footer h4 {
  font-family: var(--ime-font-sans) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--ime-white) !important;
  letter-spacing: -0.48px !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}

body #footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #footer li {
  margin-bottom: 8px !important;
}

/* Footer links — scoped to the inline-styled div to avoid affecting the
   EthosCE footer callout link outside it */
body #footer-inner > div:first-of-type a {
  font-family: var(--ime-font-sans) !important;
  font-size: var(--ime-size-body) !important;
  font-weight: 600 !important;
  color: var(--ime-white) !important;
  text-decoration: none !important;
}

body #footer-inner > div:first-of-type a:hover {
  text-decoration: underline !important;
}

/* Dividers: 32px of clearance below each, to match the Figma footer's rhythm
   (sitemap -> divider -> Wiley Focus row -> divider -> bottom bar, each gap
   32px). The 32px above each divider comes from the preceding block: the
   sitemap cells' inline 32px bottom padding before the first divider, and the
   Wiley Focus table's margin (set below) before the second. */
body #footer hr {
  border: none !important;
  border-top: 1px solid rgb(255 255 255 / 30%) !important;
  margin: 0 0 32px !important;
}

/* Wiley Focus row (the middle of the three stacked tables in the footer panel).
   Its inline margin-bottom is 24px; lift it to 32px so the gap down to the
   second divider matches the rest of the footer rhythm. */
body #footer-inner > div:first-of-type > table:nth-of-type(2) {
  margin-bottom: 32px !important;
}

body #footer p {
  font-family: var(--ime-font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ime-white) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

body #ethosce-footer-callout {
  display: none;
}

/* ===== END OF FOOTER SECTION ===== */

/* ------------------------------------------------------------------
   FOCUS STATES — WCAG 2.1 AA
   ------------------------------------------------------------------ */
.page-homepage a:focus-visible,
.page-homepage button:focus-visible,
.page-homepage input:focus-visible {
  outline: 3px solid var(--ime-wiley-blue);
  outline-offset: 2px;
}

/* ===== END OF FOCUS STATES SECTION ===== */

/* ------------------------------------------------------------------
   MOBILE — max-width 767px
   Source: Figma Mobile frame node 6443:4483
   ------------------------------------------------------------------ */
@media (width <= 767px) {
  /* Drop the desktop 1240px column's 20px gutter on mobile so the only side
     margin is each section's own 16px — matching the Figma mobile frame
     (~16px gutters, 398px content in a 432px frame). Without this the content
     is inset 20 + 16 = 36px and sits too narrow. */
  .page-homepage #page {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* === Mobile header — Figma node 6443:4483 — START ===
     Frame: 56px heritage-green bar (Login/Register + hamburger, right-
     aligned) over a 6px wiley-blue divider, then a centered logo. */

  /* Top bar: 50px heritage-green fill + 6px wiley-blue divider = 56px,
     matching the Figma frame's total bar height. */
  body #wrapper #header-wrapper #header {
    border-bottom: 1px solid var(--ime-border-light);
  }

  /* The platform's own max-width:800px block makes #header-right
     position:relative — which would make it (not #header-inner) the
     containing block for #ethosce-user-links-wrapper below, breaking
     the pulled-up offset. Keep it static so the offset stays anchored
     to #header-inner. */
  body #wrapper #header-wrapper #header #header-inner #header-right {
    position: static !important;
  }

  /* Platform ships this wrapper's children as floats, not flex, so
     #ethosce-mmenu-toggle's order below has no effect until this
     element becomes the flex container. Row is pulled up over the full
     56px bar but height:50px keeps it clear of the blue divider. */
  body #wrapper #header-wrapper #header #header-inner #header-right #ethosce-user-links-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 50px !important;
    top: -56px !important;
    padding: 0 25px !important;
    font-size: 14px !important;
  }

  /* Login / Register block (Log in + Register links). The platform's own
     mobile rule pins margin-top:4px !important on it, which drops its
     center ~2px below the hamburger toggle. Match the platform's 7-ID
     chain (anchored to `body` so we also win on specificity) and zero
     that margin so all three items share one baseline. */
  body #wrapper #header-wrapper #header #header-inner #header-right #ethosce-user-links-wrapper #block-system-user-menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Hamburger toggle. The platform hides the "Open menu" text with
     text-indent + overflow:hidden and paints the icon via ::after pulled
     up with margin-top:-21px inside a 7px-tall box — a hack that renders
     the glyph above the login links' baseline. A short .page-homepage
     selector can't beat that 7-ID chain, so match the chain here: drop
     the fixed height/overflow/float, make it a centered flex box, and
     hide the raw text with font-size:0 (the ::after re-sets its own
     size). This lands the icon on the same center line as the links. */
  body #wrapper #header-wrapper #header #header-inner #header-right #ethosce-user-links-wrapper #ethosce-mmenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 10; /* after Login/Register, flush right per Figma */
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    color: var(--ime-white);
    font-size: 0; /* hide the "Open menu" text node */
    line-height: 1;
    text-indent: 0;
    cursor: pointer;
  }

  body #wrapper #header-wrapper #header #header-inner #header-right #ethosce-user-links-wrapper #ethosce-mmenu-toggle::after {
    display: block;
    margin-top: 0; /* remove the platform's -21px pull-up */
    font-size: 18px; /* icon glyph size, re-set after the toggle's font-size:0 */
    line-height: 1;
  }

  /* Logo row, left-aligned under the bar. flex-start pins the logo (and
     any other header-inner child) to the left edge instead of centering. */
  body #header-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px; /* 32px top gap; 16px sides to match the mobile gutter */
    min-height: auto;
    gap: 16px;
  }

  /* The platform's own mobile rule stretches #logo to width:100% and
     text-aligns it center. Shrink the anchor to its content and left-align
     so the logo sits flush left. Higher specificity (body #header #logo)
     beats the platform's #header #logo. */
  body #header #logo {
    width: auto;
    padding: 0;
    text-align: left;
  }

  /* Logo image at the Figma dimensions (360 x 58.4). The source JPG's
     intrinsic ratio (946x139, ~6.81) differs from the design box (~6.16),
     so object-fit:contain fills the exact 360x58.4 box without distorting
     the artwork; the small letterbox is invisible on the white header.
     object-position:left keeps it flush left. max-width:100% !important
     overrides the platform's #logo img { max-width:60% !important } and
     keeps the logo from overflowing on narrow viewports. */
  body #header #logo img {
    width: 360px;
    max-width: 100% !important;

    /* height/max-height both need !important: the platform ships an
       img { height: auto !important } reset, and our own base rule caps
       #logo img at max-height:56px, which would otherwise clamp 58.4. */
    height: 58.4px !important;
    max-height: 58.4px !important;
    margin: 0;
    object-fit: contain;
    object-position: left center;
    display: block;
  }

  /* Search is dropped from the header on mobile (platform's own
     max-width:767px block hides #block-ethosce-search-ethosce-search),
     matching the Figma frame — the bar holds only the logo. Left-align in
     case any header-right content remains. */
  body #header-right {
    width: 100%;
    justify-content: flex-start;
  }

  /* Hide horizontal navigation — mmenu handles it */
  body #navigation-outer {
    display: none;
  }

  /* === Mobile header — END === */

  /* Hero */
  .page-homepage .panel-col-top {
    padding: 0 16px 16px;
  }

  /* Hero on mobile: the text cell spans the full width with symmetric side
     padding; the heading shrinks to 24px; the gradient stays diagonal and
     clears toward the right so the photo remains visible there (per Figma). */
  .page-homepage #hero-banner {
    min-height: 370px !important;
  }

  .page-homepage #hero-banner > div:first-child {
    width: 100% !important;
    min-height: 370px !important;
    padding: 32px 24px !important;
    background: linear-gradient(
      100deg,
      var(--ime-heritage-green) 0%,
      var(--ime-heritage-green) 40%,
      rgb(0 59 68 / 65%) 56%,
      rgb(0 59 68 / 0%) 76%
    ) !important;
  }

  .page-homepage #hero-banner h2 {
    margin-bottom: 24px !important;
    font-size: 24px !important;
    letter-spacing: -0.48px !important;
  }

  /* Video / Values */
  .page-homepage .pane-custom.pane-4 > .pane-content {
    padding: 32px 24px;
  }

  .page-homepage .pane-custom.pane-4 table,
  .page-homepage .pane-custom.pane-4 tbody,
  .page-homepage .pane-custom.pane-4 tr {
    display: block;
    width: 100%;
  }

  .page-homepage .pane-custom.pane-4 td {
    display: block;
    width: 100% !important;
    padding: 0 0 24px !important;
  }

  /* Restore the stacked gap below the video (the desktop td:first-child
     padding:0 override, higher-specificity, would otherwise remove it). */
  .page-homepage .pane-custom.pane-4 td:first-child {
    padding: 0 0 24px !important;
  }

  /* Knowledge Hubs — collapse the desktop 2-col grid to one column. The
     table stays display:grid (desktop rule is !important); overriding the
     column template to a single track is enough to stack the items. The band
     stays full-width (width/margin from the base rule); only the vertical
     padding shrinks and the side gutter drops to 16px to match the page. */
  .page-homepage #knowledge-hubs {
    padding: 32px 16px !important;
  }

  .page-homepage #knowledge-hubs table {
    grid-template-columns: 1fr !important;
  }

  .page-homepage #knowledge-hubs td {
    padding: 12px 16px !important;
  }

  /* Allow titles to wrap on the narrow single column; the desktop nowrap
     (which matches the wide 2-col design) would otherwise clip long titles. */
  .page-homepage #knowledge-hubs a {
    white-space: normal;
  }

  /* Courses + Events */
  .page-homepage .center-wrapper {
    padding: 0 16px;
  }

  .page-homepage .panel-col-first.panel-panel,
  .page-homepage .panel-col-last.panel-panel {
    width: 100%;
    float: none;
    padding: 0;
  }

  .page-homepage .panel-col-first .inside,
  .page-homepage .panel-col-last .inside {
    padding: 32px 0;
  }

  .page-homepage .event-title {
    font-size: var(--ime-size-body);
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* Subscribe banner */
  .page-homepage .subscribe-banner {
    padding: 24px !important;
  }

  .page-homepage .subscribe-banner table,
  .page-homepage .subscribe-banner tbody,
  .page-homepage .subscribe-banner tr,
  .page-homepage .subscribe-banner td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
  }

  .page-homepage .subscribe-banner td + td {
    padding-top: 16px !important;
  }

  /* Footer */
  body #footer-inner > div:first-of-type {
    padding: 24px 24px 72px !important;
  }

  body #footer table,
  body #footer tbody,
  body #footer tr {
    display: block;
    width: 100%;
  }

  body #footer td {
    display: block;
    width: 100% !important;
    padding: 0 0 24px !important;
  }
}

/* ===== END OF MOBILE SECTION ===== */

/* === IPS-18 Homepage styles — END === */