:root {
  --rul-bg: #ffffff;
  --rul-bg-alt: #f8f9fa;
  --rul-bg-dark: #1a1816;
  --rul-text: #1a1816;
  --rul-text-soft: #5c5852;
  --rul-accent: #DE550F;
  --rul-accent-soft: rgba(222, 85, 15, 0.1);
  --rul-line: rgba(26, 24, 22, 0.12);
  --rul-line-soft: rgba(26, 24, 22, 0.06);
}

/* The frontpage template is a standalone HTML document - it does not pull in
   output.standard_head_html, so Bootstrap's reboot never loads and the browser's
   default body margin (8px) would otherwise push the full-bleed sections off
   the edges. Reset it here. */
html, body {
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* Border-box everywhere. Previously only the seven section elements had it, so
   any descendant combining width:100% with padding overflowed its container.
   Safe to scope globally: custom.css is linked only by frontpage.mustache and
   is NOT in $THEME->sheets, so it never reaches Moodle's own pages. */
*, *::before, *::after { box-sizing: border-box; }

/* Reset for our page */
.rul-nav, .rul-hero, .rul-about, .rul-categories, .rul-courses, .rul-contact, .rul-footer,
.rul-cat-hero, .rul-catalogue, .rul-cat-cta {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== NAV ===== */
/* Fixed, not sticky: a sticky nav still takes up space in the flow, which the
   hero then had to cancel with a hardcoded negative margin. That number could
   never be right, because the nav's height changes with login state (the avatar
   button is taller than the Sign In button). Taking it out of the flow means
   the hero simply starts at the top and the nav overlays it, which is the
   intended design - the hero's 8rem top padding provides the clearance. */
.rul-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  background: transparent;
  transition: all 300ms ease;
}
.rul-nav.rul-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  padding: 1rem 3rem;
}
.rul-nav-logo {
  font-family: 'Merriweather', serif; font-size: 1.5rem; font-weight: 900;
  color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
  transition: color 300ms;
}
.rul-nav.rul-scrolled .rul-nav-logo { color: var(--rul-text); }
.rul-nav-logo em { font-style: italic; color: #fff; font-weight: 300; transition: color 300ms; }
.rul-nav.rul-scrolled .rul-nav-logo em { color: var(--rul-accent); }
.rul-nav-links { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.rul-nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px;
  font-weight: 500; transition: color 300ms;
}
.rul-nav.rul-scrolled .rul-nav-links a { color: var(--rul-text-soft); }

/* Animated underline. Drawn as a pseudo-element rather than text-decoration
   because an underline cannot be animated - this can be scaled, so it wipes in
   from the left on enter and back out to the right on leave. Using currentColor
   means the bar inherits whichever colour the link already has in that scroll
   state, so it needs no per-state rule of its own. */
.rul-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}
.rul-nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* While the bar is transparent it sits on the orange hero, so an accent-coloured
   hover would be orange-on-orange and effectively disappear - go to full white. */
.rul-nav-links a:hover { color: #fff; }

/* Once scrolled the bar turns white, so the brand orange has contrast again. */
.rul-nav.rul-scrolled .rul-nav-links a:hover { color: var(--rul-accent); }
.rul-nav-cta {
  background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none;
  padding: 0.6rem 1.5rem; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 300ms;
}
.rul-nav.rul-scrolled .rul-nav-cta { background: var(--rul-accent); color: #fff; border-color: var(--rul-accent); }
.rul-nav-cta:hover { background: #fff; color: var(--rul-accent); transform: translateY(-2px); }
.rul-nav.rul-scrolled .rul-nav-cta:hover { background: var(--rul-text); border-color: var(--rul-text); }

/* ===== MOBILE MENU TOGGLE ===== */
.rul-nav-toggle {
  display: none;              /* shown only under the 968px breakpoint */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: #fff;                /* transparent nav sits on the orange hero */
  font-size: 20px;
  cursor: pointer;
  transition: color 300ms;
}
.rul-nav.rul-scrolled .rul-nav-toggle { color: var(--rul-text); }
.rul-nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Drawer chrome is mobile-only; on desktop .rul-nav-menu is just a plain flex
   child of the nav wrapping the horizontal list. */
.rul-nav-menu-head,
.rul-nav-close,
.rul-nav-backdrop { display: none; }
.rul-nav-links a i { display: none; }

/* ===== NAV — LOGGED-IN USER MENU ===== */
.rul-nav-user { position: relative; }
.rul-nav-user-btn {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.4rem 0.9rem 0.4rem 0.4rem; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all 300ms;
}
.rul-nav.rul-scrolled .rul-nav-user-btn { background: var(--rul-bg-alt); border-color: var(--rul-line-soft); }
.rul-nav-user-btn:hover { background: rgba(255, 255, 255, 0.2); }
.rul-nav.rul-scrolled .rul-nav-user-btn:hover { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.rul-nav-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rul-nav-user-name {
  color: #fff; font-size: 13px; font-weight: 600;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 300ms;
}
.rul-nav.rul-scrolled .rul-nav-user-name { color: var(--rul-text); }
.rul-nav-user-caret { font-size: 10px; color: rgba(255, 255, 255, 0.7); transition: color 300ms, transform 200ms; }
.rul-nav.rul-scrolled .rul-nav-user-caret { color: var(--rul-text-soft); }
.rul-nav-user.rul-open .rul-nav-user-caret { transform: rotate(180deg); }
.rul-nav-dropdown {
  position: absolute; top: calc(100% + 0.6rem); right: 0;
  min-width: 190px; background: #fff;
  border-top: 3px solid var(--rul-accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.rul-nav-user.rul-open .rul-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.rul-nav-dropdown a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1.2rem; color: var(--rul-text); text-decoration: none;
  font-size: 13.5px; font-weight: 500; transition: background 150ms, color 150ms;
}
.rul-nav-dropdown a i { width: 16px; text-align: center; color: var(--rul-accent); }
.rul-nav-dropdown a:hover { background: var(--rul-accent-soft); color: var(--rul-accent); }

/* ===== HERO ===== */
.rul-hero {
  min-height: 90vh; position: relative;
  padding: 8rem 3rem 4rem;
  display: flex; align-items: center; overflow: hidden;
  background: var(--rul-accent);
  border-bottom-right-radius: 50% 20%;
}
.rul-hero-grid {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 4rem; align-items: center; z-index: 2;
}
.rul-hero-eyebrow {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.rul-hero-eyebrow::before { content: ''; width: 30px; height: 2px; background: #fff; }
.rul-hero h1 {
  font-family: 'Merriweather', serif; font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.2; letter-spacing: -0.02em;
  max-width: 12ch; margin-bottom: 1.5rem; color: #fff;
}
.rul-hero h1 em { font-style: italic; font-weight: 300; }
.rul-hero-sub {
  font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85);
  max-width: 40ch; margin-bottom: 2.5rem;
}
.rul-hero-cta-row { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.rul-btn-primary {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: #fff; color: var(--rul-accent);
  padding: 1rem 2rem; text-decoration: none;
  font-size: 14px; font-weight: 700;
  transition: all 300ms;
}
.rul-btn-primary:hover { background: var(--rul-bg-dark); color: #fff; transform: translateY(-2px); }
.rul-btn-video {
  display: inline-flex; align-items: center; gap: 0.8rem;
  color: #fff; padding: 1rem 0; text-decoration: none;
  font-size: 14px; font-weight: 600; transition: all 300ms;
}
.rul-play-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
}
.rul-play-icon i { font-size: 12px; }
.rul-btn-video:hover { opacity: 0.8; }
.rul-hero-right { position: relative; display: flex; justify-content: center; }
.rul-hero-img-circle {
  width: 420px; height: 420px; border-radius: 50%; overflow: hidden;
  border: 12px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.rul-hero-img { width: 100%; height: 100%; object-fit: cover; }
.rul-hero-badge {
  position: absolute; bottom: 2rem; right: 0;
  background: #fff; padding: 1.2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: flex; align-items: center; gap: 1rem; z-index: 10;
}
.rul-hero-badge .rul-num { font-family: 'Merriweather', serif; font-size: 1.8rem; color: var(--rul-accent); line-height: 1; font-weight: 900; }
.rul-hero-badge .rul-lbl { font-size: 13px; color: var(--rul-text-soft); font-weight: 500; }

/* ===== ABOUT ===== */
.rul-about { padding: 8rem 3rem; background: var(--rul-bg); }
.rul-about-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 5rem; align-items: center;
}
.rul-about-img-wrap { position: relative; aspect-ratio: 4/5; max-width: 500px; }
.rul-about-img { width: 100%; height: 100%; object-fit: cover; }
.rul-about-exp-badge {
  position: absolute; bottom: -2rem; right: -2rem;
  background: var(--rul-bg-dark); color: #fff;
  padding: 1.5rem 2rem; text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.rul-about-exp-badge .rul-num { font-family: 'Merriweather', serif; font-size: 3rem; color: #fff; line-height: 1; margin-bottom: 0.3rem; font-weight: 900; }
.rul-about-exp-badge .rul-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; font-weight: 500; }
.rul-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--rul-accent);
  margin-bottom: 1.5rem;
}
.rul-about h2, .rul-cat-head h2, .rul-courses-head h2, .rul-contact-head h2 {
  font-family: 'Merriweather', serif; font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3; letter-spacing: -0.015em;
  margin-bottom: 1.5rem; color: var(--rul-text);
}
.rul-about h2 em, .rul-cat-head h2 em, .rul-courses-head h2 em, .rul-contact-head h2 em {
  font-style: italic; font-weight: 300; color: var(--rul-accent);
}
.rul-about-text p { margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.8; color: var(--rul-text-soft); max-width: 54ch; }
.rul-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 3rem; }
.rul-about-feat { display: flex; align-items: flex-start; gap: 1.2rem; }
.rul-icon {
  width: 56px; height: 56px; background: var(--rul-accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--rul-accent); flex-shrink: 0;
  border-radius: 8px;
}
.rul-icon i { font-size: 20px; }
.rul-ttl { font-family: 'Merriweather', serif; font-size: 1.1rem; margin-bottom: 0.3rem; font-weight: 700; }
.rul-desc { font-size: 0.9rem; color: var(--rul-text-soft); }

/* ===== CATEGORIES ===== */
.rul-categories { padding: 6rem 3rem 8rem; background: var(--rul-bg-alt); }
.rul-cat-container { max-width: 1280px; margin: 0 auto; }
.rul-cat-head { text-align: center; margin-bottom: 4rem; }
.rul-cat-head p { color: var(--rul-text-soft); max-width: 50ch; margin: 1rem auto 0; font-size: 1rem; }
.rul-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.rul-cat-card {
  background: #fff; padding: 2.5rem 2rem; text-align: center;
  text-decoration: none; color: var(--rul-text);
  border: 1px solid var(--rul-line-soft);
  transition: all 300ms ease;
  display: flex; flex-direction: column; align-items: center;
}
.rul-cat-card:hover {
  border-color: var(--rul-accent);
  box-shadow: 0 15px 40px rgba(222, 85, 15, 0.08);
  transform: translateY(-5px);
}
.rul-cat-icon {
  width: 70px; height: 70px; background: var(--rul-accent-soft); color: var(--rul-accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; transition: all 300ms ease;
}
.rul-cat-card:hover .rul-cat-icon { background: var(--rul-accent); color: #fff; }
.rul-cat-icon i { font-size: 28px; }
.rul-cat-name { font-family: 'Merriweather', serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.rul-cat-count { font-size: 13px; color: var(--rul-text-soft); font-weight: 500; }
.rul-cat-count span { color: var(--rul-accent); font-weight: 700; }
.rul-cat-empty { grid-column: 1 / -1; text-align: center; color: var(--rul-text-soft); font-size: 0.95rem; }

/* ===== COURSES ===== */
.rul-courses { padding: 8rem 3rem; background: var(--rul-bg); }
.rul-courses-container { max-width: 1280px; margin: 0 auto; }
.rul-courses-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; flex-wrap: wrap; gap: 2rem; }
.rul-courses-head h2 { margin: 0; }
.rul-courses-head p { color: var(--rul-text-soft); margin-top: 0.5rem; font-size: 1rem; }
.rul-btn-view-all {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--rul-accent); padding: 0.8rem 1.5rem; text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--rul-accent); transition: all 300ms;
}
.rul-btn-view-all:hover { background: var(--rul-accent); color: #fff; }
.rul-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.rul-course-card {
  background: #fff; border: 1px solid var(--rul-line-soft);
  text-decoration: none; color: var(--rul-text);
  transition: all 400ms ease; display: flex; flex-direction: column;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.rul-course-card:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); transform: translateY(-5px); }
.rul-course-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--rul-bg-alt); }
.rul-course-img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.rul-course-card:hover .rul-course-img { transform: scale(1.05); }
.rul-course-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.rul-course-cat { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rul-accent); margin-bottom: 0.5rem; font-weight: 700; }
.rul-course-title {
  font-family: 'Merriweather', serif; font-weight: 700;
  font-size: 1.2rem; line-height: 1.4; margin-bottom: 0.5rem; color: var(--rul-text);
  transition: color 300ms;
}
.rul-course-card:hover .rul-course-title { color: var(--rul-accent); }
.rul-course-summary {
  font-size: 0.9rem; line-height: 1.6; color: var(--rul-text-soft);
  margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rul-course-empty { grid-column: 1 / -1; text-align: center; color: var(--rul-text-soft); font-size: 0.95rem; }

/* ===== CONTACT ===== */
.rul-contact { padding: 8rem 3rem; background: var(--rul-bg-alt); }
.rul-contact-container { max-width: 1280px; margin: 0 auto; }
.rul-contact-head { text-align: center; margin-bottom: 5rem; }
.rul-contact-head p { color: var(--rul-text-soft); max-width: 50ch; margin: 1rem auto 0; font-size: 1rem; }
/* No align-items:start - the columns should stretch so the dark info card
   matches the height of the form beside it. */
.rul-contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
.rul-contact-info { background: var(--rul-bg-dark); color: #fff; padding: 3rem; border-radius: 4px; }
.rul-contact-info h3 { font-family: 'Merriweather', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; }
.rul-info-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.rul-info-item:last-child { margin-bottom: 0; }
.rul-info-item .rul-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); color: var(--rul-accent); display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.rul-info-item .rul-icon i { font-size: 16px; }
.rul-txt { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.rul-txt strong { display: block; color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; }
.rul-contact-form { background: #fff; padding: 3rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); border-radius: 4px; }
.rul-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.rul-form-group { margin-bottom: 2rem; }
/* Groups inside a row are grid items: their margin does not collapse, so it
   stacked on top of the row's own margin and made paired rows sit 3rem apart
   while full-width fields sat 1.5rem apart. Let the row own the spacing. */
.rul-form-row .rul-form-group { margin-bottom: 0; }
.rul-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--rul-text); margin-bottom: 0.65rem; }
.rul-form-group .rul-req { color: var(--rul-accent); margin-left: 0.15rem; }
.rul-form-control {
  width: 100%; padding: 0.95rem 1.1rem;
  background: var(--rul-bg-alt); border: 1px solid var(--rul-line);
  border-radius: 4px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--rul-text);
  transition: all 300ms;
}
.rul-form-control::placeholder { color: var(--rul-text-soft); opacity: 0.65; }
.rul-form-control:focus {
  outline: none;
  border-color: var(--rul-accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--rul-accent-soft);
}
textarea.rul-form-control { resize: vertical; min-height: 120px; }
.rul-form-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  background: var(--rul-accent); color: #fff; border: none;
  padding: 1rem 2rem; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 300ms; width: 100%;
}
.rul-form-submit:hover { background: var(--rul-text); }

/* ===== FOOTER ===== */
.rul-footer { background: var(--rul-bg-dark); color: #fff; padding: 5rem 3rem 2rem; }
.rul-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem; max-width: 1280px; margin: 0 auto 4rem;
}
.rul-footer-brand .rul-nav-logo { font-size: 1.6rem; margin-bottom: 1.5rem; color: #fff; display: inline-flex; }
.rul-footer-brand .rul-nav-logo em { color: var(--rul-accent); }
.rul-footer-brand p { font-size: 0.9rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); max-width: 32ch; margin-bottom: 1.5rem; }
.rul-footer-socials { display: flex; gap: 1rem; }
.rul-footer-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: all 300ms;
}
.rul-footer-socials a:hover { background: var(--rul-accent); color: #fff; }
.rul-footer-col h4 { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rul-accent); margin-bottom: 1.5rem; font-weight: 700; }
.rul-footer-col ul { list-style: none; margin: 0; padding: 0; }
.rul-footer-col li { margin-bottom: 0.8rem; }
.rul-footer-col a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 0.9rem; transition: color 300ms; }
.rul-footer-col a:hover { color: var(--rul-accent); }
.rul-footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
  .rul-nav { padding: 1rem 1.5rem; }
  /* backdrop-filter would make the nav a containing block for the fixed drawer
     and backdrop, clipping both to the bar. The scrolled background is already
     rgba(255,255,255,0.95), so dropping the blur costs almost nothing visually.
     Desktop keeps it - the drawer does not exist there. */
  .rul-nav.rul-scrolled { padding: 0.8rem 1.5rem; backdrop-filter: none; }
  .rul-nav-toggle { display: flex; }

  /* The logo is a flex row of "Rise Up" + <em>Lab</em>; without nowrap the
     first item breaks onto two lines once the bar gets tight. */
  .rul-nav-logo { font-size: 1.25rem; white-space: nowrap; flex-shrink: 0; }

  /* Push Sign In / user button and the burger together on the right. */
  .rul-nav { justify-content: flex-start; gap: 0.5rem; }
  .rul-nav-cta, .rul-nav-user { margin-left: auto; }

  /* Off-canvas drawer sliding in from the left. NOTE: .rul-nav.rul-scrolled
     applies backdrop-filter, which (like transform) makes an element the
     containing block for position:fixed descendants - that would clip this
     drawer to the height of the nav bar once the page is scrolled. The blur is
     therefore switched off at this breakpoint, below. */
  .rul-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 300px);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  body.rul-menu-open .rul-nav-menu { transform: translateX(0); }

  .rul-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(26, 24, 22, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease, visibility 320ms ease;
  }
  body.rul-menu-open .rul-nav-backdrop { opacity: 1; visibility: visible; }

  /* Stop the page scrolling behind the open drawer. */
  body.rul-menu-open { overflow: hidden; }

  .rul-nav-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rul-line-soft);
  }
  /* Own class rather than reusing .rul-nav-logo, whose colour is driven by the
     nav's transparent/scrolled state and would fight this white panel. */
  .rul-nav-menu-brand {
    font-family: 'Merriweather', serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--rul-text);
    white-space: nowrap;
  }
  .rul-nav-menu-brand em { font-style: italic; font-weight: 300; color: var(--rul-accent); }

  .rul-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--rul-bg-alt);
    color: var(--rul-text-soft);
    font-size: 16px;
    cursor: pointer;
    transition: background 200ms, color 200ms;
  }
  .rul-nav-close:hover { background: var(--rul-accent-soft); color: var(--rul-accent); }

  .rul-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 0;
  }
  .rul-nav-links li { width: 100%; }

  /* White panel, so links need dark text in BOTH nav states. Matches the
     specificity of .rul-nav.rul-scrolled .rul-nav-links a and wins by order. */
  .rul-nav .rul-nav-links a,
  .rul-nav.rul-scrolled .rul-nav-links a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.5rem;
    font-size: 15px;
    color: var(--rul-text);
    border-left: 3px solid transparent;
    transition: background 180ms, color 180ms, border-color 180ms;
  }
  .rul-nav .rul-nav-links a:hover,
  .rul-nav.rul-scrolled .rul-nav-links a:hover {
    background: var(--rul-accent-soft);
    color: var(--rul-accent);
    border-left-color: var(--rul-accent);
  }
  .rul-nav-links a i {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--rul-accent);
  }
  /* The sliding underline is a desktop affordance; it makes no sense on rows. */
  .rul-nav-links a::after { display: none; }
  .rul-hero { padding: 6rem 1.5rem 4rem; border-bottom-right-radius: 30%; }
  .rul-hero-grid, .rul-about-grid { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
  .rul-hero-eyebrow { justify-content: center; }
  .rul-hero-cta-row { justify-content: center; }
  .rul-hero-right { order: -1; }
  /* Was a flat 300px, which could not fit the 272px available at 320px wide. */
  .rul-hero-img-circle { width: min(300px, 72vw); height: min(300px, 72vw); border-width: 8px; }
  .rul-about-features { grid-template-columns: 1fr; text-align: left; }
  /* right:-2rem pushed this past the viewport edge once the image went full width. */
  .rul-about-exp-badge { right: 0; bottom: -1rem; padding: 1rem 1.25rem; }
  .rul-cat-grid { grid-template-columns: 1fr 1fr; }
  .rul-course-grid { grid-template-columns: 1fr 1fr; }
  .rul-footer-grid { grid-template-columns: 1fr 1fr; }
  .rul-contact-grid { grid-template-columns: 1fr; }
  .rul-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rul-nav { padding: 0.85rem 1rem; }
  .rul-nav.rul-scrolled { padding: 0.7rem 1rem; }
  .rul-nav-logo { font-size: 1.05rem; }
  .rul-nav-user-name { display: none; }   /* avatar + caret only */
  .rul-nav-user-btn { padding: 0.3rem 0.5rem 0.3rem 0.3rem; gap: 0.35rem; }
  .rul-nav-avatar { width: 26px; height: 26px; }
  .rul-nav-cta { padding: 0.5rem 1rem; font-size: 12px; }
  .rul-nav-toggle { width: 36px; height: 36px; font-size: 18px; }

  /* Only .rul-nav and .rul-hero had reduced padding; every other section kept
     3rem a side, leaving ~176px of content at 320px wide. */
  .rul-about,
  .rul-courses,
  .rul-contact { padding: 4rem 1.25rem; }
  .rul-categories { padding: 3.5rem 1.25rem 4rem; }
  .rul-footer { padding: 3rem 1.25rem 1.5rem; }
  .rul-hero { padding: 5.5rem 1.25rem 3rem; }
  .rul-contact-form,
  .rul-contact-info { padding: 1.5rem; }
  .rul-contact-grid { gap: 2rem; }
  .rul-form-row { gap: 0; }

  .rul-cat-grid { grid-template-columns: 1fr; }
  .rul-course-grid { grid-template-columns: 1fr; }
  .rul-courses-head { flex-direction: column; align-items: flex-start; }
  .rul-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .rul-footer-brand { grid-column: 1 / -1; }
  .rul-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ===== BACK TO TOP ===== */
.rul-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;            /* below .rul-nav (1000); they never overlap anyway */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--rul-accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(222, 85, 15, 0.35);
  /* Hidden until scrolled. visibility (not just opacity) so it cannot be
     focused or clicked while invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease, background 300ms ease;
}
.rul-to-top.rul-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rul-to-top:hover {
  background: var(--rul-bg-dark);
  transform: translateY(-3px);
}
.rul-to-top:focus-visible {
  outline: 2px solid var(--rul-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .rul-to-top { bottom: 1.25rem; right: 1.25rem; width: 42px; height: 42px; font-size: 14px; }
}

/* Users who ask for reduced motion get the colour change only. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rul-nav-links a::after { transition: none; }
  .rul-nav-cta, .rul-nav-cta:hover { transition: none; transform: none; }
  .rul-to-top { transition: opacity 1ms linear, visibility 1ms linear; }
  .rul-to-top, .rul-to-top:hover, .rul-to-top.rul-visible { transform: none; }
  .rul-nav-menu { transition: none; }
  .rul-nav-backdrop { transition: none; }
}

/* Contact form: status notice, honeypot, info-only layout */
.rul-form-notice { padding: 1rem 1.25rem; margin-bottom: 2rem; border-left: 4px solid; font-size: 14px; border-radius: 2px; }
.rul-form-notice--success { background: #eef8f0; border-color: #2e7d32; color: #1b5e20; }
.rul-form-notice--error { background: var(--rul-accent-soft); border-color: var(--rul-accent); color: #8a3209; }
.rul-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rul-contact-grid--single { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }

/* ===== COURSE CATALOGUE (course/index.php, course/search.php) ===== */
.rul-page-catalogue { margin: 0; background: var(--rul-bg-alt); color: var(--rul-text); }
.rul-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rul-cat-hero {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(222, 85, 15, 0.28), transparent 55%),
    var(--rul-bg-dark);
  color: #fff; padding: 9rem 3rem 5rem; text-align: center;
}
.rul-cat-hero-inner { max-width: 760px; margin: 0 auto; }
.rul-cat-hero h1 {
  font-family: 'Merriweather', serif; font-weight: 900; color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.15; margin: 0.75rem 0 1rem;
}
.rul-cat-hero p { color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; line-height: 1.7; margin: 0 0 2.5rem; }
.rul-cat-trail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; font-size: 13px; }
.rul-cat-trail a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.rul-cat-trail a:hover { color: var(--rul-accent); }
.rul-cat-trail i { font-size: 10px; color: rgba(255, 255, 255, 0.35); }

.rul-cat-search {
  display: flex; align-items: center; background: #fff; border-radius: 4px;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); gap: 0.75rem;
}
.rul-cat-search > i { color: var(--rul-text-soft); }
.rul-cat-search input {
  flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1rem;
  color: var(--rul-text); background: transparent; padding: 0.8rem 0;
}
.rul-cat-search button {
  border: 0; background: var(--rul-accent); color: #fff; font: inherit; font-weight: 700; font-size: 14px;
  padding: 0.9rem 1.75rem; border-radius: 3px; cursor: pointer; transition: background 300ms;
}
.rul-cat-search button:hover { background: var(--rul-text); }
.rul-cat-search:focus-within { box-shadow: 0 0 0 3px var(--rul-accent), 0 20px 50px rgba(0, 0, 0, 0.3); }
.rul-cat-manage { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 1.5rem; font-size: 13px; color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.rul-cat-manage:hover { color: #fff; }

.rul-catalogue { padding: 3rem 3rem 6rem; }
.rul-catalogue-container { max-width: 1280px; margin: 0 auto; }
.rul-cat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.rul-cat-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rul-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem;
  border: 1px solid var(--rul-line); border-radius: 999px; background: #fff;
  color: var(--rul-text); text-decoration: none; font-size: 14px; font-weight: 600; transition: all 200ms;
}
.rul-pill span { font-size: 12px; color: var(--rul-text-soft); background: var(--rul-bg-alt); border-radius: 999px; padding: 0.1rem 0.5rem; }
.rul-pill:hover { border-color: var(--rul-accent); color: var(--rul-accent); }
.rul-pill--active, .rul-pill--active:hover { background: var(--rul-accent); border-color: var(--rul-accent); color: #fff; }
.rul-pill--active span { background: rgba(255, 255, 255, 0.2); color: #fff; }
.rul-cat-sort { display: flex; align-items: center; gap: 0.25rem; font-size: 14px; color: var(--rul-text-soft); }
.rul-cat-sort a { padding: 0.4rem 0.75rem; border-radius: 3px; color: var(--rul-text-soft); text-decoration: none; font-weight: 600; }
.rul-cat-sort a:hover { color: var(--rul-accent); }
.rul-cat-sort a.rul-sort--active { background: #fff; color: var(--rul-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.rul-cat-subcats { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: -1rem 0 2.5rem; font-size: 14px; color: var(--rul-text-soft); }
.rul-cat-subcats a { color: var(--rul-text); text-decoration: none; font-weight: 600; }
.rul-cat-subcats a i { color: var(--rul-accent); margin-right: 0.3rem; }
.rul-cat-subcats a:hover { color: var(--rul-accent); }

.rul-catalogue .rul-course-card { background: #fff; text-decoration: none; }
.rul-course-badge {
  position: absolute; top: 1rem; left: 1rem; display: inline-flex; gap: 0.4rem; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 3px; color: #fff;
}
.rul-course-badge--enrolled { background: #2e7d32; }
.rul-course-badge--hidden { background: rgba(26, 24, 22, 0.8); left: auto; right: 1rem; }
.rul-course-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--rul-line-soft); font-size: 13px;
}
.rul-catalogue .rul-course-summary { margin-bottom: 1.25rem; }
.rul-course-teacher { color: var(--rul-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rul-course-teacher i { color: var(--rul-accent); margin-right: 0.3rem; }
.rul-course-go { color: var(--rul-accent); font-weight: 700; white-space: nowrap; margin-left: auto; }
.rul-course-go i { transition: transform 300ms; }
.rul-course-card:hover .rul-course-go i { transform: translateX(4px); }

.rul-cat-empty-state { text-align: center; background: #fff; padding: 4.5rem 2rem; border-radius: 4px; }
.rul-cat-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--rul-accent-soft); color: var(--rul-accent); font-size: 1.6rem;
}
.rul-cat-empty-state h2 { font-family: 'Merriweather', serif; font-size: 1.5rem; margin: 0 0 0.75rem; }
.rul-cat-empty-state p { color: var(--rul-text-soft); margin: 0 0 2rem; }

.rul-pager { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3.5rem; flex-wrap: wrap; }
.rul-pager a {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 0.75rem;
  background: #fff; border: 1px solid var(--rul-line); border-radius: 3px;
  color: var(--rul-text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.rul-pager a:hover { border-color: var(--rul-accent); color: var(--rul-accent); }
.rul-pager a.rul-pager--current { background: var(--rul-accent); border-color: var(--rul-accent); color: #fff; }

.rul-cat-cta { background: var(--rul-bg); padding: 4.5rem 3rem; border-top: 1px solid var(--rul-line-soft); }
.rul-cat-cta-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.rul-cat-cta h2 { font-family: 'Merriweather', serif; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 0.5rem; }
.rul-cat-cta-btn { background: var(--rul-accent); color: #fff; }
.rul-cat-cta p { margin: 0; color: var(--rul-text-soft); max-width: 55ch; line-height: 1.7; }

@media (max-width: 968px) {
  .rul-catalogue .rul-course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rul-cat-hero { padding: 7rem 1rem 3.5rem; }
  .rul-catalogue { padding: 2rem 1rem 4rem; }
  .rul-cat-cta { padding: 3rem 1rem; }
  .rul-catalogue .rul-course-grid { grid-template-columns: 1fr; }
  .rul-cat-search { padding-left: 1rem; }
  .rul-cat-search button { padding: 0.8rem 1rem; }
  .rul-cat-pills { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 0.25rem; scrollbar-width: none; }
  .rul-pill { flex-shrink: 0; }
}

/* Simple header (catalogue): logo + one button, always visible on every width. */
.rul-nav--simple { justify-content: space-between; }
.rul-nav--simple .rul-nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Watch Video lightbox */
.rul-video-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rul-video-modal[hidden] { display: none; }
.rul-video-backdrop { position: absolute; inset: 0; background: rgba(10, 9, 8, 0.85); }
.rul-video-box { position: relative; width: min(1100px, 100%); animation: rulVideoIn 250ms ease-out; }
.rul-video-box video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1a1816; border-radius: 8px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); }
.rul-video-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.rul-video-close:hover { color: #DE550F; }
@keyframes rulVideoIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }

/* ===== ACCESSIBILITY ===== */
/* Skip link: off-screen until focused with the keyboard, then shown above the fixed nav. */
.rul-skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 10000;
  background: var(--rul-accent); color: #fff; padding: 0.8rem 1.25rem;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none;
  border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-200%);
}
.rul-skip-link:focus { transform: none; outline: 3px solid #fff; outline-offset: 2px; }
/* <main> takes focus from the skip link; it is a container, so no focus ring. */
#rul-main:focus { outline: none; }

/* Footer contact strip, above the copyright divider */
.rul-footer-contact {
  list-style: none; max-width: 1280px; margin: 0 auto 2rem; padding: 2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem;
}
.rul-footer-contact li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.rul-footer-contact li > i { color: var(--rul-accent); width: 1rem; text-align: center; flex-shrink: 0; }
.rul-footer-contact a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 300ms; word-break: break-word; }
.rul-footer-contact a:hover { color: var(--rul-accent); }
.rul-footer-contact-note { color: rgba(255, 255, 255, 0.45); margin-left: 0.4rem; }
@media (max-width: 968px) {
  .rul-footer-contact { flex-direction: column; }
}