@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary: #981c4e;
  --primary-dark: #740633;
  --primary-light: #c22562;
  --header-top-bg: #6b1036;
  --header-main-bg: #9c1b56;
  --header-main-bg-scrolled: #8d1a4e;
  --accent: #fff8d1;
  --dark-blue: #003a6b;
  --body-text: #696969;
  --heading-color: #212121;
  --link-color: #1D242E;
  --dark: #101010;
  --border-color: #e8e8e8;
  --br: 0.75rem;
  --white: #ffffff;
  --light-bg: #f8f9fc;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--white);
  color: var(--body-text);
  line-height: 1.7;
  font-size: 1rem;
  overflow-x: hidden;
}

/* ===== Site-wide typography lock =====
   Copy pasted into the CMS editors arrives carrying the font of wherever it was
   written — department descriptions came in as "REM", a face this site never
   loads, so they silently fell back to Arial while the headings beside them
   stayed Poppins. The declaration rides on the element's own style attribute,
   which outranks any selector, so holding the site to one face takes
   !important. Two deliberate exceptions:

   - FontAwesome: its glyphs ARE a font, so forcing a family on an icon renders
     a box. Every icon on the site is an <i> carrying an "fa-*" class, and no
     other class here contains that token, so excluding it is exact.
   - Noto Sans Malayalam: the blog is written in Malayalam and Poppins has no
     glyphs for that script. Listing it after Poppins lets the Latin characters
     set in Poppins while the Malayalam ones fall through to a script font
     rather than to whatever the browser would have picked on its own. */
body,
body *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: "Poppins", "Noto Sans Malayalam", sans-serif !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: var(--link-color);
  transition: var(--transition);
}

a:hover {
  color: var(--primary);
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
  min-width: 250px;
}

.col-12 {
  width: 100%;
  padding: 0 15px;
}

.col-6 {
  width: 50%;
  padding: 0 15px;
}

.col-4 {
  width: 33.333%;
  padding: 0 15px;
  margin-bottom: 30px;
}

.col-3 {
  width: 25%;
  padding: 0 15px;
}

@media (max-width: 992px) {

  .col-4,
  .col-3 {
    width: 50%;
  }
}

@media (max-width: 768px) {

  .col-6,
  .col-4,
  .col-3 {
    width: 100%;
  }
}

/* ===== Reference Redesigned Top Bar ===== */
.top-nav-bar {
  background-color: var(--header-top-bg);
  color: #fff8e7;
  padding: 9px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Above the sticky header below it, or the About menu would drop behind it.
     The two never overlap in normal flow, so nothing else changes. */
  position: relative;
  z-index: 1001;
}

.top-nav-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.lang-option {
  color: rgba(255, 248, 231, 0.8);
  font-weight: 500;
  transition: color 0.25s ease;
}

.lang-option:hover,
.lang-option.active {
  color: #ffffff;
}

.lang-divider {
  color: rgba(255, 248, 231, 0.4);
  font-size: 0.75rem;
}

.lang-ar {
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  font-weight: 700;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.top-nav-right a {
  color: #fff8e7;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
  opacity: 0.9;
}

.top-nav-right a:hover,
.top-nav-right a.active {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* --- About dropdown ---
   No script involved. The menu is a child of the wrapper, so :hover covers it
   too, and :focus-within opens it from the keyboard the moment the About link
   itself takes focus. While closed it is visibility:hidden, which also keeps
   its links out of the tab order. */
.topnav-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topnav-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topnav-caret {
  font-size: 0.6rem;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.topnav-drop:hover .topnav-caret,
.topnav-drop:focus-within .topnav-caret {
  transform: rotate(180deg);
}

.topnav-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 5;
  /* Transparent, and part of the menu's own hover area: it spans the top bar's
     padding so the pointer never crosses dead space on its way down. */
  padding-top: 11px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.topnav-drop:hover .topnav-menu,
.topnav-drop:focus-within .topnav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.topnav-menu ul {
  list-style: none;
  margin: 0;
  padding: 7px 0;
  min-width: 226px;
  background-color: var(--header-main-bg);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
}

.topnav-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 248, 231, 0.9);
  white-space: nowrap;
  opacity: 1;
}

.topnav-menu a:hover,
.topnav-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .topnav-menu,
  .topnav-caret {
    transition: none;
  }
}

/* ===== Reference Redesigned Header ===== */
.header {
  background-color: var(--header-main-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
  background-color: var(--header-main-bg-scrolled);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 102px;
  padding: 14px 20px;
}

/* Logo Styling */
.logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
  color: #fae6b2 !important;
}

.logo:hover {
  color: #fae6b2 !important;
}

.logo .logo-img {
  height: 64px;
  width: auto;
  max-width: 210px;
  display: block;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-title {
  font-size: 1.35rem;
  font-weight: 700 !important;
  color: #fae6b2 !important;
  letter-spacing: 0.4px;
}

.logo-sub {
  font-size: 1.35rem;
  font-weight: 700 !important;
  color: #fae6b2 !important;
  letter-spacing: 0.4px;
}

/* Main 4 Prominent Navigation Sections */
.nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-section-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 24px;
  color: #fff8e7;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
  position: relative;
  background: transparent;
}

.nav-section-item:hover,
.nav-section-item.active {
  background: transparent;
  color: #ffffff;
}

/* ===== Our Specialities hover panel =====
   The wrapper stays unpositioned on purpose. The panel inside it is absolute
   against .header - sticky counts as positioned - which is what lets it span
   the full width of the screen without a 100vw that would count the scrollbar
   and put the document into horizontal overflow. */
.nav-mega {
  display: flex;
  align-items: center;
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 24px 0 26px;
  background-color: var(--header-main-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28);
  /* A long enough list has to stay reachable rather than run off the screen. */
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-panel[hidden] {
  display: none;
}

.mega-panel.is-open {
  opacity: 1;
  transform: none;
}

/* Multi-column rather than a grid: the names run alphabetically down one column
   and on to the top of the next, which is the order someone scanning for a
   speciality expects. */
.mega-list {
  /* Four columns rather than three: with this many specialities, three made a
     panel tall enough to swallow the screen. Four keeps every name on one
     glance without scrolling. */
  column-count: 4;
  column-gap: 40px;
  column-rule: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-list li {
  /* Stops a two-line speciality being split across the column break. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.mega-list a {
  display: block;
  padding: 6px 0;
  color: rgba(255, 248, 231, 0.9);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-list a:hover,
.mega-list a:focus-visible {
  color: #ffffff;
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel,
  .mega-list a {
    transition: none;
  }

  .mega-panel {
    transform: none;
  }
}

.sec-top {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 248, 231, 0.88);
  line-height: 1.2;
  transition: color 0.3s ease;
}

.sec-main {
  font-size: 1.32rem;
  font-weight: 800;
  color: #fff8e7;
  letter-spacing: 0.2px;
  line-height: 1.25;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-section-item:hover .sec-top,
.nav-section-item:hover .sec-main,
.nav-section-item.active .sec-top,
.nav-section-item.active .sec-main {
  color: #ffffff;
}

.nav-section-item:hover .sec-main {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ===== Emergency block =====
   The one item in the bar that is a row rather than a stack: the badge sits
   beside the two lines of type, which are the ordinary .sec-top / .sec-main so
   it matches the items next to it without restating their sizes. */
.nav-emergency {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.nav-emergency-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Cream disc, maroon handset - the inverse of the bar around it, which is what
   makes it the one thing the eye lands on up there. Fixed width and height
   rather than padding, so the disc stays a circle whatever the icon metrics. */
.nav-emergency-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fae6b2;
  color: var(--header-top-bg);
  font-size: 1.25rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.nav-emergency:hover .nav-emergency-badge {
  background: #fff8e7;
  transform: scale(1.06);
}

.sec-divider {
  width: 1px;
  height: 54px;
  background-color: rgba(255, 248, 231, 0.25);
  margin: 0 4px;
  align-self: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff8e7;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
}

.mobile-top-links {
  display: none;
}

/* Responsive Breakdown */
@media (max-width: 1100px) {
  .header .container {
    min-height: 92px;
  }

  .logo .logo-img {
    height: 56px;
  }

  .logo-title,
  .logo-sub {
    font-size: 1.18rem;
  }

  .nav-section-item {
    padding: 6px 16px;
  }

  .sec-top {
    font-size: 0.85rem;
  }

  .sec-main {
    font-size: 1.12rem;
  }

  .nav-emergency {
    gap: 10px;
  }

  .nav-emergency-badge {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }

  .top-nav-right {
    gap: 14px;
  }
}

@media (max-width: 992px) {
  .top-nav-right {
    display: none;
  }

  .header .container {
    min-height: 76px;
    padding: 10px 20px;
  }

  .logo .logo-img {
    height: 50px;
  }

  .logo-title,
  .logo-sub {
    font-size: 1.1rem;
  }

  .nav-toggle {
    display: block;
  }

  .sec-divider {
    display: none;
  }

  .nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--header-main-bg);
    padding: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 85vh;
    overflow-y: auto;
    align-items: stretch;
    gap: 8px;
  }

  .nav.open {
    display: flex;
  }

  .mobile-top-links {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .mobile-top-links a {
    color: #fff8e7;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
  }

  .mobile-top-links a:hover,
  .mobile-top-links a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .nav-section-item {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    margin-bottom: 4px;
  }

  .nav-section-item:hover,
  .nav-section-item.active {
    background: rgba(255, 255, 255, 0.18);
  }

  /* The panel is a column of full-width cards. The emergency card keeps its row
     layout - a number to tap is the most useful thing in this menu on a phone -
     and sits a shade darker than the rest so it reads as the one to reach for. */
  .nav-emergency {
    background: rgba(0, 0, 0, 0.28);
  }

  /* The nav is already a tap-to-open panel at this width, and there is no hover
     to trigger a second one. Our Specialities stays a plain link to the full
     departments page. */
  .nav-mega {
    display: block;
  }

  .mega-panel {
    display: none !important;
  }
}

/* ===== Hero ===== */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  color: var(--white);
  padding: 100px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
  position: relative;
}

.hero h1 span {
  color: var(--accent);
}

.hero p {
  font-size: 1.15rem;
  max-width: 650px;
  margin: 0 auto 32px;
  opacity: 0.92;
  line-height: 1.7;
  position: relative;
}

.hero .btn {
  margin: 0 6px;
  position: relative;
}

.hero .hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 50px;
  position: relative;
}

.hero .hero-stat {
  text-align: center;
}

.hero .hero-stat .number {
  font-size: 2.2rem;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}

.hero .hero-stat .label {
  font-size: 0.82rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 50px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero .hero-stats {
    flex-wrap: wrap;
    gap: 24px;
  }

  .hero .hero-stat .number {
    font-size: 1.6rem;
  }
}

/* ===== Hero background video =====
   Everything here hangs off .has-hero-video, which index.php puts on <body>
   only when the home record has a playable video banner. No other page and no
   other state can reach these rules, so the hero and header above are left
   exactly as they were whenever there is no video. */

body.has-hero-video {
  /* Combined height of the top bar and the header. The script measures the
     real value on load and on resize - a hard-coded number breaks the moment
     the nav wraps onto another line or a breakpoint changes the header - but
     this fallback has to be close enough to look right for the frame or two
     before that happens. */
  --masthead-h: 150px;
}

/* Transparent only while the header is still overlapping the video. The moment
   the script marks it stuck this rule stops matching, and the header falls back
   to the site's own .header / .header.scrolled rules - so it goes solid in
   exactly the brand colour every other page uses at that scroll position,
   rather than a shade this file picked for itself. */
body.has-hero-video .top-nav-bar,
body.has-hero-video .header:not(.is-stuck) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Pull the hero up so it starts behind the masthead, and let the footage fill
   the viewport. The hero has no content of its own here, so its usual padding
   is dropped: nothing needs holding clear of the header. dvh tracks mobile
   browser chrome as it shrinks; vh is declared first as the fallback for
   browsers that do not know dvh. */
body.has-hero-video .hero {
  margin-top: calc(-1 * var(--masthead-h));
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Shows through until the first frame decodes, and behind a poster that does
     not match the viewport's aspect ratio. */
  background-color: var(--dark);
}

/* The only thing left in the hero besides the footage. Off the screen, but
   still in the accessibility tree and still the page's <h1> - visibility:hidden
   or display:none would take it out of both. */
body.has-hero-video .hero-video-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.has-hero-video .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Without cover the video letterboxes inside the hero instead of filling it. */
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Nothing is written across the footage any more, so the only text the scrim
   has to protect is the nav. That means one firm top-down wash over the header
   band and barely anything below it - the middle of the frame stays as close to
   the footage as the nav's contrast allows. The bottom edge darkens again only
   to soften the cut into the section beneath. */
body.has-hero-video .hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(12, 4, 9, 0.62) 0,
      rgba(12, 4, 9, 0.56) var(--masthead-h),
      rgba(12, 4, 9, 0) calc(var(--masthead-h) + 150px)),
    linear-gradient(180deg,
      rgba(12, 4, 9, 0.12) 0,
      rgba(12, 4, 9, 0.1) 65%,
      rgba(12, 4, 9, 0.28) 100%);
}

/* ===== Home feature sections (About Us, Our Specialities) =====
   A two-column band: a narrow left column carrying the eyebrow, the oversized
   heading and its call to action, and a wide right column carrying the content.
   Both home sections share the frame so their headings line up down the page. */

.home-feature {
  padding: 96px 0;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) 1.9fr;
  gap: 60px;
  align-items: start;
}

.home-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}

.home-feature-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

/* The hairline between the two columns, on the content side so it only appears
   once the columns are actually side by side. */
.home-feature-ruled {
  border-left: 1px solid var(--border-color);
  padding-left: 60px;
}

.home-feature-text {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--body-text);
  max-width: 62ch;
}

/* Read More: the label stays put and only the dot travels, so the line of text
   does not shift under the cursor. */
.home-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-weight: 500;
  color: var(--heading-color);
}

.home-arrow-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.home-arrow-link:hover {
  color: var(--primary);
}

.home-arrow-link:hover .home-arrow-dot {
  background: var(--primary-dark);
  transform: translateX(5px);
}

.home-ghost-btn {
  display: inline-block;
  margin-top: 34px;
  padding: 13px 34px;
  border: 1px solid var(--primary);
  /* Pill, to match the rest of the site's buttons - including the View Profile
     ones on the doctor cards sitting right beside this. */
  border-radius: 50px;
  color: var(--primary);
  font-weight: 500;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.home-ghost-btn:hover {
  background-size: 100% 100%;
  color: var(--white);
}

/* --- Specialities grid ---
   Hairline cells rather than separated cards. Only the top and left edges are
   drawn on the container and the right and bottom on each cell, so shared
   borders never double up into a 2px line. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}

.spec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 32px 26px 24px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: inherit;
  overflow: hidden;
  transition: background-color 0.35s ease;
}

/* The brand wash is a pseudo-element wiping up from the bottom, so the cell can
   keep its hairline borders while the fill animates. */
.spec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(152, 28, 78, 0.06), rgba(152, 28, 78, 0.02));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-card:hover::before {
  transform: scaleY(1);
}

.spec-card > * {
  position: relative;
}

.spec-icon {
  font-size: 2.3rem;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 26px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-card:hover .spec-icon {
  transform: translateY(-4px) scale(1.06);
}

.spec-name {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--heading-color);
  margin-bottom: 18px;
  transition: color 0.25s ease;
}

.spec-card:hover .spec-name {
  color: var(--primary);
}

/* Pinned to the bottom of the cell so the word lines up across a row whatever
   length the department names run to. */
.spec-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.92rem;
  color: var(--body-text);
  transition: color 0.25s ease, gap 0.3s ease;
}

.spec-explore i {
  font-size: 0.72rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-card:hover .spec-explore {
  color: var(--primary);
  gap: 12px;
}

.spec-card:hover .spec-explore i {
  opacity: 1;
  transform: translateX(0);
}

/* Keyboard users get the same affordance as the mouse. */
.spec-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.spec-card:focus-visible::before {
  transform: scaleY(1);
}

@media (max-width: 992px) {
  .home-feature {
    padding: 70px 0;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Stacked, a left border would read as a stray vertical line above the text. */
  .home-feature-ruled {
    border-left: 0;
    padding-left: 0;
  }

  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .home-feature {
    padding: 56px 0;
  }

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

  .spec-card {
    min-height: 0;
    padding: 26px 22px 22px;
  }

  .spec-icon {
    font-size: 2rem;
    margin-bottom: 18px;
  }
}

/* ===== Our Doctors marquee =====
   One continuous row drifting right to left. The animation shifts the track by
   the width of exactly one set of cards and script.js appends enough clones to
   cover the gap, so the moment the first set has slid out the copy behind it is
   sitting in the same place and the loop is invisible. */

.docs-aside-text {
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--body-text);
  max-width: 34ch;
}

/* The ghost button carries its own top margin for the Specialities aside; here
   the sentence above it already provides the separation. */
.docs-aside-text + .home-ghost-btn {
  margin-top: 26px;
}

.docs-marquee {
  position: relative;
  overflow: hidden;
  /* Cards travel leftwards, so the left edge is the one they leave by, and it
     is feathered so they dissolve into the heading column instead of being
     guillotined against it. The right edge is the edge of the screen and takes
     no fade - the cards are meant to look like they are arriving from beyond
     it.

     The stops are eased rather than evenly spaced. A straight ramp from
     transparent to opaque is what made the earlier version read as a pale
     wash: alpha climbs steadily across the whole distance, the eye picks that
     out as a band, and the first card spends its width behind it. Easing holds
     the ramp low through the first third and then brings it up quickly, so the
     dissolve happens in the few pixels nearest the edge and the card is clear
     well before it arrives.

     The width scales with the viewport so the fade stays in proportion to the
     cards rather than being a slab on a phone and a hairline on a monitor.
     rtl.css reuses this same custom property, so both languages dissolve
     identically and only the angle turns around. */
  --docs-fade: clamp(26px, 3.4vw, 56px);
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.06) calc(var(--docs-fade) * 0.3),
    rgba(0, 0, 0, 0.3) calc(var(--docs-fade) * 0.55),
    rgba(0, 0, 0, 0.68) calc(var(--docs-fade) * 0.76),
    rgba(0, 0, 0, 0.92) calc(var(--docs-fade) * 0.9),
    #000 var(--docs-fade)
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.06) calc(var(--docs-fade) * 0.3),
    rgba(0, 0, 0, 0.3) calc(var(--docs-fade) * 0.55),
    rgba(0, 0, 0, 0.68) calc(var(--docs-fade) * 0.76),
    rgba(0, 0, 0, 0.92) calc(var(--docs-fade) * 0.9),
    #000 var(--docs-fade)
  );
}

.docs-track {
  display: flex;
  gap: 28px;
  width: max-content;
  list-style: none;
  /* Vertical room for the cards' drop shadow and their hover lift, which the
     overflow above would otherwise clip. No horizontal padding: the first card
     should begin right where the heading column ends. */
  padding: 22px 0 30px;
  animation: docsScroll var(--docs-duration, 40s) linear infinite;
}

/* --docs-shift is the measured width of one set of cards plus its trailing
   gap; script.js writes it. The fallback only has to be harmless before then. */
@keyframes docsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--docs-shift, 0px)), 0, 0); }
}

/* Stop while someone is reading a card, keyboard included - the cards carry a
   hover state and a link, and neither is usable on a moving target. */
.docs-marquee:hover .docs-track,
.docs-marquee:focus-within .docs-track,
.docs-marquee.is-paused .docs-track {
  animation-play-state: paused;
}

.docs-item {
  flex: 0 0 auto;
  width: 270px;
}

/* The card was built for a stretched grid cell. In the row it sets its own
   height instead, from a fixed portrait ratio. */
.docs-item .doctor-card {
  margin-bottom: 0;
  height: auto;
}

.docs-item .doctor-card-media {
  flex: none;
  aspect-ratio: 3 / 4;
}

@media (prefers-reduced-motion: reduce) {
  /* No drift at all. The row stays where it is and becomes an ordinary
     horizontal scroller, so every doctor is still reachable. */
  .docs-track {
    animation: none;
  }

  .docs-marquee {
    overflow-x: auto;
  }
}

@media (max-width: 992px) {
  /* Stacked, the row runs the full width of the container and the sentence no
     longer needs holding to a narrow measure beside it. */
  .docs-aside-text {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .docs-item {
    width: 220px;
  }

  .docs-track {
    gap: 18px;
    padding: 18px 0 26px;
  }

}

/* ===== Patient stories =====
   A row of YouTube testimonials. The carousel is native scroll-snap rather than
   a JS slider: it drags and flicks on touch without any script, and the arrows
   only nudge scrollLeft, so if the script never runs the row is still fully
   reachable by swiping. */

.stories-section {
  padding: 96px 0;
}

.stories-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 40px;
}

.stories-carousel {
  position: relative;
}

.stories-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 2);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  /* Room for the card shadow to breathe inside the scroller. */
  padding: 6px 4px 18px;
  margin: -6px -4px -18px;
  scrollbar-width: none;
}

.stories-track::-webkit-scrollbar {
  display: none;
}

.stories-item {
  scroll-snap-align: start;
}

.story-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.story-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #101010;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-thumb img {
  width: 100%;
  height: 100%;
  /* YouTube pads 4:3 stills to 16:9 with black bars; cover crops them off. */
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover .story-thumb,
.story-card:focus-visible .story-thumb {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.story-card:hover .story-thumb img {
  transform: scale(1.04);
}

.story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  font-size: 1.35rem;
  /* Optical centring: the glyph's own bearing sits it left of true centre. */
  padding-left: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease;
}

.story-card:hover .story-play,
.story-card:focus-visible .story-play {
  transform: translate(-50%, -50%) scale(1.09);
  background: var(--primary);
  color: var(--white);
}

.story-card:focus-visible .story-thumb {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.story-name {
  display: block;
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--heading-color);
  transition: color 0.25s ease;
}

.story-card:hover .story-name {
  color: var(--primary);
}

/* Arrows sit outside the track on wide screens and tuck inward when there is no
   gutter left for them. JS unhides them only when the row actually overflows. */
.stories-nav {
  position: absolute;
  /* Centred on the thumbnail rather than on the whole card: the caption sits
     below the image and would otherwise drag the arrows down past its middle.
     The offset is half a caption block, which is close enough that a name
     wrapping to a second line does not visibly shift them. */
  top: calc((100% - 46px) / 2 - 21px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--white);
  color: var(--heading-color);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.stories-nav:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.stories-nav[disabled] {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

/* Below 1200px the container runs edge to edge and its 20px padding is the
   only room these have to sit in, so the offset has to stay under it - at -22px
   the arrow lands 2px past the viewport and puts the whole document into
   horizontal overflow. The wide breakpoint below pushes them fully outboard
   once there are real gutters to put them in. */
.stories-prev {
  left: -16px;
}

.stories-next {
  right: -16px;
}

@media (min-width: 1340px) {
  .stories-prev { left: -62px; }
  .stories-next { right: -62px; }
}

/* --- Lightbox --- */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.story-modal[hidden] {
  display: none;
}

.story-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 8, 0.82);
  animation: storyFade 0.25s ease;
}

.story-modal-box {
  position: relative;
  width: min(1100px, 100%);
  /* On a short or landscape-phone viewport the 16:9 frame would be taller than
     the screen and run off the bottom. Capping the width by the height the
     viewport can actually give it (less the close button and padding) keeps the
     whole player on screen instead. */
  max-width: calc((100vh - 130px) * 16 / 9);
  animation: storyRise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.story-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.story-modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.story-modal-close:hover,
.story-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

@keyframes storyFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes storyRise {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-modal-backdrop,
  .story-modal-box {
    animation: none;
  }

  .stories-track {
    scroll-behavior: auto;
  }
}

@media (max-width: 992px) {
  .stories-section {
    padding: 70px 0;
  }

  /* No gutter for outboard arrows at this width, so they come inside the track. */
  .stories-prev { left: 6px; }
  .stories-next { right: 6px; }
}

@media (max-width: 700px) {
  .stories-section {
    padding: 56px 0;
  }

  .stories-track {
    grid-auto-columns: 86%;
    gap: 18px;
  }

  /* Swiping is the natural gesture here, and the next card already peeks in to
     advertise it. The arrows would only sit on top of the artwork. */
  .stories-nav {
    display: none;
  }

  .story-play {
    width: 58px;
    height: 58px;
    font-size: 1.05rem;
  }

  .story-modal {
    padding: 16px;
  }

  .story-modal-close {
    top: -46px;
  }
}

/* Off the screen but still read aloud - the same technique the hero heading
   uses when the banner is a video. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Scroll reveal ---
   The hidden state is applied by script.js rather than declared here, so with
   JavaScript off or broken the content is simply visible instead of stranded at
   opacity 0. --reveal-delay staggers a row without needing a class per cell. */
.reveal[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

.reveal[data-reveal="in"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .reveal[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .reveal[data-reveal="in"] {
    transition: none;
  }
}

/* ===== Sections ===== */
.section {
  padding: 80px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 8px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading-color);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin: 14px auto 0;
  border-radius: 2px;
}

.section-subtitle {
  text-align: center;
  color: var(--body-text);
  margin-bottom: 48px;
  font-size: 1.05rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Cards ===== */
.card {
  background: var(--white);
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
  margin-bottom: 30px;
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
  z-index: 1;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 0, 0, 0.06);
}

.card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

.card-img-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.card:hover .card-img {
  transform: scale(1.08);
}

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-body .btn-sm {
  margin-top: auto;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-color);
  transition: var(--transition);
  display: inline-block;
  position: relative;
}

.card-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card-title {
  color: var(--primary);
}

.card:hover .card-title::after {
  width: 30px;
}

.card-text {
  color: var(--body-text);
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.7;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .btn-sm {
  padding: 10px 24px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50px;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  align-self: flex-start;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  text-decoration: none;
}

.card .btn-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card .btn-sm:hover::before {
  left: 100%;
}

.card .btn-sm::after {
  content: '→';
  font-size: 1.1em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  line-height: 1;
}

.card .btn-sm:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.35);
}

.card .btn-sm:hover::after {
  transform: translateX(4px);
}

/* ===== Department Cards (Matching Reference Design) ===== */
.card.department-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #f0f0f0 !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card.department-card::before {
  display: none !important;
}

.card.department-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
  border-color: #e5e7eb !important;
}

.card.department-card .card-img-wrapper {
  position: relative;
  width: 100%;
  /* Banner box is deliberately WIDER than the source artwork (the department
     banners are ~1.95:1). object-fit:cover then crops the top and bottom rather
     than pillarboxing, which is what removes the white margins baked into
     several of the banners. 3.4:1 crops 21% off each edge - just past the
     worst offender (the IVF banner carries 21% white at its foot), so no card
     shows a white band. Showing the whole banner is deliberately sacrificed
     for a flush edge. */
  aspect-ratio: 3.4 / 1;
  height: auto;
  background-color: #ffffff;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .card.department-card .card-img-wrapper {
    height: 110px;
  }
}

/* Soft blend into the white card body. Kept proportional: a fixed 60px fade
   covered over half of the shorter banner and read as a white band at its
   foot - the very gap this layout is meant to avoid. */
.card.department-card .card-img-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, #ffffff 100%);
  pointer-events: none;
  z-index: 2;
}

.card.department-card .card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.card.department-card:hover .card-img {
  transform: scale(1.04);
}

.card.department-card .card-body {
  padding: 24px 28px 28px 28px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  z-index: 3;
}

.card.department-card .card-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.card.department-card .card-title::after {
  display: none !important;
}

.card.department-card:hover .card-title {
  color: var(--primary, #981c4e) !important;
}

.card.department-card .card-text {
  color: #6b7280 !important;
  font-size: 0.93rem !important;
  line-height: 1.65 !important;
  margin-bottom: 24px !important;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400 !important;
}

.btn-dept-explore {
  background-color: #981c4e !important;
  color: #ffffff !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: fit-content;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.2) !important;
  margin-top: auto;
}

.btn-dept-explore:hover {
  background-color: #78123c !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 6px 16px rgba(152, 28, 78, 0.3) !important;
}

/* ===== Doctor Profile Card (Premium Glassmorphism) ===== */
.doctor-card {
  border-radius: 28px;
  border: none;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doctor-card::before {
  display: none;
}

.doctor-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.doctor-card-media {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.doctor-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.doctor-card:hover .card-img {
  transform: scale(1.05);
}

.doctor-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  color: #ccc;
  font-size: 64px;
}

.doctor-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 24px 28px;
  /* Dark only where the name and designation sit, and clear well before the
     face - a wash that reaches the top of the card dims the whole photo. */
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.12) 55%,
    rgba(0, 0, 0, 0) 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
}

.doctor-card .card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  /* Keeps the name legible where a long designation pushes it up past the
     darkest part of the overlay. */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.doctor-card .card-title::after {
  display: none;
}

.doctor-card .designation {
  color: #E8649A;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.doctor-card .btn-sm {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  padding: 10px 28px;
  background: linear-gradient(135deg, #9C1C57, #B32768);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(156, 28, 87, 0.35);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.doctor-card .btn-sm::before {
  display: none;
}

.doctor-card .btn-sm::after {
  display: none;
}

.doctor-card .btn-sm i {
  font-size: 0.72rem;
  transition: transform 0.3s ease;
}

.doctor-card .btn-sm:hover {
  background: linear-gradient(135deg, #B32768, #D13A80);
  box-shadow: 0 6px 20px rgba(156, 28, 87, 0.5);
  transform: translateY(-1px);
}

.doctor-card .btn-sm:hover i {
  transform: translateX(3px);
}

/* Home marquee only: the whole card is the link, so there is no button inside
   it at all. The listing pages keep their "View Profile" button and their card
   stays a plain div. */
a.doctor-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.doctor-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ===== Branch Card ===== */
.branch-card .card-title i {
  color: var(--primary);
  margin-right: 6px;
}

/* ===== Doctor Profile Page Modern Redesign ===== */
.doctor-profile-wrapper {
  background: #f8fafc;
  min-height: 80vh;
}

.doctor-profile-topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
}

.doctor-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.doctor-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  text-decoration: none;
}

.doctor-back-link:hover {
  color: var(--primary-dark);
  transform: translateX(-4px);
}

.doctor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #64748b;
}

.doctor-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.doctor-breadcrumb a:hover {
  color: var(--primary);
}

.doctor-breadcrumb .sep {
  color: #cbd5e1;
  font-size: 0.8rem;
}

.doctor-breadcrumb .current {
  color: var(--heading-color);
  font-weight: 600;
}

.doctor-profile-section {
  padding: 50px 0 80px;
}

.doctor-profile-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* Left Column: Photo Card & Quick Actions */
.doctor-photo-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}

.doctor-photo-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.doctor-portrait {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.doctor-photo-card:hover .doctor-portrait {
  transform: scale(1.03);
}

.doctor-photo-placeholder {
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #94a3b8;
  font-size: 90px;
}

.doctor-availability-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(16, 185, 129, 0.9);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.doctor-experience-glass-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 12px 18px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.doctor-experience-glass-badge i {
  font-size: 1.5rem;
  color: #f59e0b;
}

.doctor-experience-glass-badge .exp-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.doctor-experience-glass-badge .exp-lbl {
  display: block;
  font-size: 0.75rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.doctor-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doctor-hero-btn {
  padding: 14px 24px !important;
  border-radius: 50px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 20px rgba(152, 28, 78, 0.25) !important;
  transition: all 0.3s ease !important;
}

.doctor-hero-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(152, 28, 78, 0.35) !important;
}

.doctor-hero-btn-alt {
  padding: 12px 24px !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

.doctor-hero-btn-alt:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: #fff5f8 !important;
}

/* Right Column: Info & Stats */
.doctor-info-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.doctor-header-info {
  background: #ffffff;
  padding: 36px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.doctor-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.doctor-main-name {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

.doctor-main-designation {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.doctor-dept-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.doctor-dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.doctor-dept-pill:hover {
  background: #981c4e;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Stats Highlight Grid */
.doctor-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.doctor-stat-box {
  background: #ffffff;
  padding: 22px 24px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.doctor-stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
  border-color: #e2e8f0;
}

.stat-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-icon-wrap.icon-primary {
  background: #fff0f5;
  color: #981c4e;
}

.stat-icon-wrap.icon-accent {
  background: #f0fdf4;
  color: #16a34a;
}

.stat-icon-wrap.icon-blue {
  background: #f0f9ff;
  color: #0284c7;
}

.stat-icon-wrap.icon-gold {
  background: #fffbeb;
  color: #d97706;
}

.stat-text-wrap {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

/* Doctor Biography Card */
.doctor-bio-card {
  background: #ffffff;
  padding: 36px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.doctor-bio-heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
}

.doctor-bio-heading i {
  color: var(--primary);
}

.doctor-bio-content {
  font-size: 0.98rem;
  line-height: 1.85;
  color: #475569;
}

/* Appointment Booking Callout Banner */
.doctor-booking-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 14px 28px;
  border-radius: 18px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15);
}

.doctor-booking-banner .banner-content {
  flex: 1 1 auto;
  min-width: 0;
}

.doctor-booking-banner .banner-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.doctor-booking-banner .banner-content h4 i {
  color: #38bdf8;
}

.doctor-booking-banner .banner-content p {
  font-size: 0.86rem;
  color: #94a3b8;
  margin: 0;
}

.doctor-booking-banner .banner-btn {
  background: var(--primary) !important;
  color: #ffffff !important;
  padding: 9px 24px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap;
  margin-left: auto !important;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(152, 28, 78, 0.4) !important;
  transition: all 0.3s ease !important;
}

.doctor-booking-banner .banner-btn:hover {
  background: var(--primary-dark) !important;
  transform: translateX(4px) !important;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .doctor-profile-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .doctor-photo-column {
    position: static;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }

  .doctor-main-name {
    font-size: 1.85rem;
  }
}

@media (max-width: 640px) {
  .doctor-stats-grid {
    grid-template-columns: 1fr;
  }

  .doctor-header-info,
  .doctor-bio-card,
  .doctor-booking-banner {
    padding: 24px;
  }

  .doctor-booking-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    gap: 12px;
  }

  .doctor-booking-banner .banner-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
  }
}

/* ===== Page Header ===== */
.page-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}

.page-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}

.page-header h1 strong {
  color: var(--accent);
}

.page-header p {
  opacity: 0.85;
  font-size: 1.05rem;
  position: relative;
}

@media (max-width: 768px) {
  .page-header {
    padding: 40px 0;
  }

  .page-header h1 {
    font-size: 1.6rem;
  }
}

/* ===== Forms ===== */
.form-wrapper {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  padding: 36px;
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--heading-color);
  font-size: 0.88rem;
}

.form-group label i {
  color: var(--primary);
  width: 20px;
  margin-right: 4px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition);
  background: #fafafa;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(152, 28, 78, 0.1);
  background: var(--white);
}

textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

select.form-control {
  appearance: auto;
}

/* ===== Buttons ===== */
.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  font-family: inherit;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: var(--white);
}

.btn-success {
  background: #198754;
  color: var(--white);
}

.btn-success:hover {
  background: #157347;
}

.btn-danger {
  background: #dc3545;
  color: var(--white);
}

.btn-danger:hover {
  background: #bb2d3b;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.82rem;
}

.btn i {
  margin-right: 6px;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
}

/* ===== Footer ===== */
.footer-new {
  background: linear-gradient(180deg, var(--primary-dark) 0%, #3f0015 100%);
  color: rgba(255, 255, 255, 0.8);
  padding: 60px 0 0;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top Booking & Emergency Bar - Glass Cards */
.footer-top-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 32px;
}

.footer-top-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(5px);
}

.footer-top-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.card-icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(234, 144, 176, 0.15);
  border: 1px solid rgba(234, 144, 176, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ea90b0;
  font-size: 1.02rem;
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.footer-top-card:hover .card-icon-wrapper {
  background: #ea90b0;
  color: #3f0015;
  transform: rotateY(360deg);
}

.card-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.footer-top-label {
  color: #ea90b0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-top-val {
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.footer-top-val a {
  color: var(--white);
  transition: var(--transition);
}

.footer-top-val a:hover {
  color: #ea90b0;
}

/* Horizontal Divider with Glow */
.footer-divider-container {
  position: relative;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 50%, transparent);
  margin-bottom: 50px;
}

.footer-divider-glow {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ea90b0, transparent);
  filter: blur(1px);
  border-radius: 50%;
}

/* Main Grid */
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.5fr;
  gap: 50px;
  padding-bottom: 60px;
}

/* Headings */
.footer-heading {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
}

/* Specialities split columns */
.specialities-subgrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

.specialities-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-animated-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  line-height: 1.4;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s ease;
  width: fit-content;
}

.footer-animated-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #ea90b0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.footer-animated-link:hover {
  color: var(--white);
}

.footer-animated-link:hover::after {
  width: 100%;
}

/* Quick Links list */
.quick-links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Info Column & Logo */
.footer-col-info {
  display: flex;
  flex-direction: column;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-logo-svg {
  color: var(--white);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.footer-logo-row:hover .footer-logo-svg {
  transform: scale(1.05);
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.footer-logo-text .brand-almas {
  color: var(--white);
  font-size: 1.35rem;
}

.footer-logo-text .brand-hospital {
  color: var(--white);
  font-size: 1.05rem;
  opacity: 0.95;
}

.footer-address-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.5;
}

.footer-address-block a {
  color: inherit;
  transition: var(--transition);
}

.footer-address-block a:hover {
  color: var(--white);
  text-decoration: underline;
}

.info-divider {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 25px 0;
}

/* Newsletter Subscribe */
.footer-newsletter {
  display: flex;
  flex-direction: column;
}

.newsletter-heading {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  padding: 3px;
}

.newsletter-form:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.newsletter-input {
  width: 100%;
  padding: 10px 60px 10px 20px;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 0.88rem;
  font-family: inherit;
}

.newsletter-input:focus {
  outline: none;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-submit {
  position: absolute;
  right: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  color: #70092b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.newsletter-submit:hover {
  transform: scale(1.05) rotate(15deg);
  background: #ea90b0;
  color: var(--white);
  box-shadow: 0 5px 15px rgba(234, 144, 176, 0.4);
}

.newsletter-privacy {
  color: #ea90b0;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Bottom Bar */
.footer-bottom-bar {
  background: #400418;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.copyright-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-socials .follow-label {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 4px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.02);
}

.footer-socials a:hover {
  background: var(--white);
  color: #70092b;
  border-color: var(--white);
  transform: translateY(-4px) rotate(360deg);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

/* Floating WhatsApp Button */
.whatsapp-floating {
  position: fixed;
  /* Sits above the announcements button, which now has the corner: that
     button's 24px offset plus its 60px plus a 20px gap. */
  bottom: 104px;
  left: 24px;
  z-index: 999;
  background: #25d366;
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A slow bob, so the button reads as floating in the corner rather than stuck
   to it. The shadow tightens as it rises and spreads again as it settles, which
   is what sells the height - a bob over a fixed shadow just looks like a
   twitch. The expanding ring this replaced now belongs to the announcements
   button above it; two pulses in one corner was one too many. */
.whatsapp-floating {
  /* How high it rides. It is the upper of the two floating buttons, so rising
     opens the gap below it rather than closing one above. */
  --wa-lift: -9px;
  animation: whatsappFloat 3.4s ease-in-out infinite;
}

@keyframes whatsappFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 5px 18px rgba(37, 211, 102, 0.42);
  }

  50% {
    transform: translateY(var(--wa-lift, -9px));
    box-shadow: 0 16px 26px rgba(37, 211, 102, 0.26);
  }
}

/* Taken off under the cursor rather than paused: a running animation outranks
   the declarations below, so the button would otherwise refuse to lift or
   brighten when someone points at it. */
.whatsapp-floating:hover {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-floating {
    animation: none;
  }

  .whatsapp-floating:hover {
    transform: none;
  }
}

/* Floating Back to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: rgba(110, 5, 39, 0.85);
  backdrop-filter: blur(10px);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background: var(--white);
  color: #70092b;
  border-color: var(--white);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* ===== Utility ===== */
.text-center {
  text-align: center;
}

/* ===== Doctor Search & Filter Bar ===== */
.doctor-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 40px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  max-width: 880px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.doctor-filter-bar:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: #e8e8e8;
}

/* Each field owns its own positioning context for the icons */
.doctor-filter-field {
  position: relative;
  display: flex;
  align-items: center;
}

.doctor-filter-search {
  flex: 1 1 auto;
  min-width: 0;
}

.doctor-filter-department {
  flex: 0 0 auto;
  width: 230px;
}

.doctor-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 0.9rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transition: color 0.3s ease;
}

.doctor-filter-input,
.doctor-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 14px 44px 14px 44px;
  border: 1.5px solid #e2e5ea;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--heading-color);
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.doctor-filter-select {
  cursor: pointer;
  text-overflow: ellipsis;
}

.doctor-filter-input::placeholder {
  color: #a3adb9;
  font-weight: 400;
}

/* Hide the browser's own clear button — we render our own */
.doctor-filter-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.doctor-filter-input:hover,
.doctor-filter-select:hover {
  border-color: var(--primary);
}

.doctor-filter-input:focus,
.doctor-filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(152, 28, 78, 0.1);
}

.doctor-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f3f6;
  color: var(--body-text);
  font-size: 0.7rem;
  text-decoration: none;
  z-index: 2;
  transition: all 0.25s ease;
}

.doctor-search-clear:hover {
  background: var(--primary);
  color: #ffffff;
}

.doctor-filter-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body-text);
  font-size: 0.72rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.doctor-filter-select:focus ~ .doctor-filter-chevron {
  color: var(--primary);
}

.doctor-filter-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-light, #c22562) 0%, var(--primary) 55%, var(--primary-dark, #740633) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(152, 28, 78, 0.22);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.doctor-filter-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(152, 28, 78, 0.3);
}

.doctor-filter-submit:active {
  transform: translateY(0);
}

/* Result summary line */
.doctor-result-summary {
  max-width: 880px;
  margin: -22px auto 32px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--body-text);
}

.doctor-result-summary strong {
  color: var(--primary);
  font-weight: 700;
}

.doctor-result-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--body-text);
  text-decoration: none;
  transition: color 0.25s ease;
}

.doctor-result-reset:hover {
  color: var(--primary);
}

/* Empty state */
.doctor-empty-state {
  text-align: center;
  padding: 56px 24px;
  background: #fafbfc;
  border: 1px dashed #e2e5ea;
  border-radius: 18px;
}

.doctor-empty-state > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(152, 28, 78, 0.08);
  color: var(--primary);
  font-size: 1.4rem;
}

.doctor-empty-state h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.doctor-empty-state p {
  font-size: 0.93rem;
  color: var(--body-text);
  max-width: 46ch;
  margin: 0 auto 20px;
}

@media (max-width: 860px) {
  .doctor-filter-bar {
    flex-wrap: wrap;
  }

  .doctor-filter-search {
    flex: 1 1 100%;
  }

  .doctor-filter-department {
    flex: 1 1 auto;
    width: auto;
  }
}

@media (max-width: 600px) {
  .doctor-filter-bar {
    max-width: 100%;
    gap: 10px;
  }

  .doctor-filter-department,
  .doctor-filter-submit {
    flex: 1 1 100%;
  }

  .doctor-filter-submit {
    justify-content: center;
  }

  .doctor-result-summary {
    margin-top: -14px;
  }
}

.text-primary {
  color: var(--primary) !important;
}

.text-accent {
  color: var(--accent);
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.py-20 {
  padding: 20px 0;
}

.d-flex {
  display: flex;
}

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

.gap-15 {
  gap: 15px;
}

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

.align-center {
  align-items: center;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.d-inline-block {
  display: inline-block;
}

.bg-light-section {
  background: var(--light-bg);
}

/* ===== Alert ===== */
.alert {
  padding: 14px 22px;
  border-radius: 8px;
  margin-bottom: 24px;
  position: relative;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-success {
  background: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.alert-danger {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.alert-info {
  background: #cff4fc;
  color: #055160;
  border: 1px solid #b6effb;
}

.alert .btn-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

/* ===== Detail ===== */
.detail-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--br);
  margin-bottom: 24px;
}

.content-area {
  line-height: 1.9;
  color: var(--body-text);
  text-align: justify;
}

.content-area h2 {
  color: var(--heading-color);
  font-weight: 700;
  margin: 28px 0 14px;
  font-size: 1.5rem;
}

.content-area h3 {
  color: var(--heading-color);
  font-weight: 600;
  margin: 24px 0 12px;
  font-size: 1.2rem;
}

.content-area p {
  margin-bottom: 14px;
  line-height: 1.9 !important;
}

/* Justification is for body copy only. A heading that wraps gets its first
   line stretched across the whole column, which is what opened the gaps in
   "General  &  Advanced / Laparoscopic Surgery" - so headings opt out of the
   justify set on .content-area above. `start` rather than `left`, so an Arabic
   page still reads right to left. */
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6 {
  text-align: start;
}

/* ===== Badge ===== */
.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
}

.badge-primary {
  background: var(--primary);
  color: var(--white);
}

.badge-success {
  background: #198754;
  color: var(--white);
}

.badge-warning {
  background: #ffc107;
  color: var(--dark);
}

.badge-danger {
  background: #dc3545;
  color: var(--white);
}

/* ===== Blog Cards ===== */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 32px;
}

.blog-card {
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 60px rgba(152, 28, 78, 0.15),
              0 8px 24px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(152, 28, 78, 0.3);
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #9C1C57, #E8649A, #9C1C57);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-card-img {
  position: relative;
  overflow: hidden;
}

.blog-card-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.08);
}

.blog-card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(152, 28, 78, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%);
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: #981c4e;
  margin-bottom: 12px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.blog-meta i {
  color: #E8649A;
  font-size: 0.85rem;
}

.blog-meta span {
  background: linear-gradient(135deg, rgba(152, 28, 78, 0.08), rgba(232, 100, 154, 0.08));
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(152, 28, 78, 0.12);
}

.blog-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.blog-card:hover .blog-title {
  color: #981c4e;
}

.blog-desc {
  font-size: 0.92rem;
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.65;
  flex: 1;
}

.blog-card .btn-sm {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #9C1C57, #B32768);
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(156, 28, 87, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.blog-card .btn-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.blog-card:hover .btn-sm::before {
  left: 100%;
}

.blog-card .btn-sm i {
  font-size: 0.72rem;
  transition: transform 0.3s ease;
}

.blog-card:hover .btn-sm {
  background: linear-gradient(135deg, #B32768, #D13A80);
  box-shadow: 0 6px 24px rgba(156, 28, 87, 0.45);
  transform: translateY(-2px);
}

.blog-card:hover .btn-sm i {
  transform: translateX(4px);
}

.blog-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--body-text);
}

.blog-content p {
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .blogs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===== Table ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--br);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th {
  background: var(--primary);
  color: var(--white);
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
}

.table td {
  padding: 12px 18px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.table tr:hover td {
  background: #fdf2f6;
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 36px;
}

.pagination a,
.pagination span {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--body-text);
  font-size: 0.9rem;
  transition: var(--transition);
}

.pagination a:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.pagination .active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* ===== Contact Info Card ===== */
.contact-info-card {
  padding: 28px;
  background: var(--white);
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
}

.contact-info-card p {
  margin-bottom: 14px;
  font-size: 0.92rem;
}

.contact-info-card i {
  color: var(--primary);
  width: 22px;
  text-align: center;
  margin-right: 4px;
}

.branch-item {
  background: var(--light-bg);
  padding: 18px;
  border-radius: 8px;
  margin-top: 12px;
}

.branch-item i {
  color: var(--primary);
}

/* ===== Stats Counter ===== */
.stats-section {
  background: var(--dark-blue);
  color: var(--white);
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  text-align: center;
}

.stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}

.stat-item .stat-label {
  font-size: 0.85rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.stat-item i {
  font-size: 2rem;
  margin-bottom: 12px;
  color: var(--accent);
}

/* ===== Features / Icons ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.feature-card {
  text-align: center;
  padding: 36px 24px;
  background: var(--white);
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-card .icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--white);
  font-size: 1.5rem;
}

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 0.88rem;
  color: var(--body-text);
  line-height: 1.6;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-in-delay-1 {
  animation-delay: 0.1s;
}

.animate-in-delay-2 {
  animation-delay: 0.2s;
}

.animate-in-delay-3 {
  animation-delay: 0.3s;
}

.newsletter-submit {
  position: absolute;
  right: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.newsletter-submit:hover {
  transform: scale(1.05) rotate(15deg);
  background: #ea90b0;
  color: var(--white);
  box-shadow: 0 5px 15px rgba(234, 144, 176, 0.4);
}

.newsletter-privacy {
  color: #ea90b0;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Bottom Bar */
.footer-bottom-bar {
  background: #300210;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.copyright-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-socials .follow-label {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 4px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.02);
}

.footer-socials a:hover {
  background: var(--white);
  color: var(--primary-dark);
  border-color: var(--white);
  transform: translateY(-4px) rotate(360deg);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

/* Floating WhatsApp Button */
.whatsapp-floating {
  position: fixed;
  /* Sits above the announcements button, which now has the corner: that
     button's 24px offset plus its 60px plus a 20px gap. */
  bottom: 104px;
  left: 24px;
  z-index: 999;
  background: #25d366;
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A slow bob, so the button reads as floating in the corner rather than stuck
   to it. The shadow tightens as it rises and spreads again as it settles, which
   is what sells the height - a bob over a fixed shadow just looks like a
   twitch. The expanding ring this replaced now belongs to the announcements
   button above it; two pulses in one corner was one too many. */
.whatsapp-floating {
  /* How high it rides. It is the upper of the two floating buttons, so rising
     opens the gap below it rather than closing one above. */
  --wa-lift: -9px;
  animation: whatsappFloat 3.4s ease-in-out infinite;
}

@keyframes whatsappFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 5px 18px rgba(37, 211, 102, 0.42);
  }

  50% {
    transform: translateY(var(--wa-lift, -9px));
    box-shadow: 0 16px 26px rgba(37, 211, 102, 0.26);
  }
}

/* Taken off under the cursor rather than paused: a running animation outranks
   the declarations below, so the button would otherwise refuse to lift or
   brighten when someone points at it. */
.whatsapp-floating:hover {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-floating {
    animation: none;
  }

  .whatsapp-floating:hover {
    transform: none;
  }
}

/* Floating Announcements Button
   A circle at rest, widening into a pill on hover and on focus so the icon is
   never the only thing carrying the meaning. max-width because width: auto is
   not animatable; the label clips itself until it opens. The clipping is on the
   label rather than on the anchor because the anchor has to let the pulse rings
   below escape it. */
.announce-floating {
  position: fixed;
  /* Nearest the corner of the two floating buttons; WhatsApp sits above it. */
  bottom: 24px;
  left: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  height: 60px;
  max-width: 60px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color: var(--white);
  box-shadow: 0 6px 22px rgba(152, 28, 78, 0.42);
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.announce-floating-icon {
  /* Never shrinks, so the glyph stays dead centre in the 60px circle while the
     pill opens out to the right of it. */
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  font-size: 1.32rem;
}

.announce-floating-label {
  max-width: 0;
  overflow: hidden;
  padding-right: 26px;
  font-size: 0.94rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease 0.1s;
}

/* Two rings easing outward from under the button, the second half a beat behind
   the first - the same idea as the WhatsApp button's pulse, in the house colour.
   They are filled rather than outlined, so the part still crossing the button
   face is maroon on maroon and reads as nothing at all. z-index puts them under
   the icon but over the anchor's own background, which is exactly where the
   WhatsApp pulse sits too. */
.announce-floating::before,
.announce-floating::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  animation: announceRing 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.announce-floating::after {
  animation-delay: 1.3s;
}

@keyframes announceRing {
  0%   { transform: scale(0.96); opacity: 0.55; }
  70%  { opacity: 0.08; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* The bullhorn gives a shake every few seconds. The long still stretch at the
   start of the cycle is the point - it is a glance-catcher, not a wobble. */
.announce-floating-icon i {
  display: inline-block;
  transform-origin: 60% 60%;
  animation: announceShake 5s ease-in-out infinite;
}

@keyframes announceShake {
  0%, 74%, 100% { transform: rotate(0deg); }
  78%  { transform: rotate(-13deg); }
  82%  { transform: rotate(10deg); }
  86%  { transform: rotate(-7deg); }
  90%  { transform: rotate(5deg); }
  94%  { transform: rotate(-2deg); }
}

/* Once someone is actually pointing at it, the button has their attention and
   the rings have nothing left to do. The animation comes off rather than being
   paused: a running animation outranks a plain declaration, so a paused ring
   would simply hold whatever opacity its keyframes had reached and sit there.
   The bullhorn drops its animation for the same reason - paused, it would stay
   frozen mid-tilt. */
.announce-floating:hover::before,
.announce-floating:hover::after,
.announce-floating:focus-visible::before,
.announce-floating:focus-visible::after {
  animation: none;
}

.announce-floating:hover .announce-floating-icon i,
.announce-floating:focus-visible .announce-floating-icon i {
  animation: none;
}

.announce-floating:hover,
.announce-floating:focus-visible {
  max-width: 280px;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(152, 28, 78, 0.55);
}

.announce-floating:hover .announce-floating-label,
.announce-floating:focus-visible .announce-floating-label {
  max-width: 220px;
  opacity: 1;
}

.announce-floating:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Already on the announcements page - still a link back, but it stops shouting. */
.announce-floating.is-current {
  background: rgba(116, 6, 51, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* It is a link back to the page you are already on, so it has nothing to call
   anyone over for. */
.announce-floating.is-current::before,
.announce-floating.is-current::after {
  display: none;
}

.announce-floating.is-current .announce-floating-icon i {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .announce-floating,
  .announce-floating-label {
    transition: none;
  }

  .announce-floating:hover,
  .announce-floating:focus-visible {
    transform: none;
  }

  /* Nothing pulses or shakes on its own. The button keeps its colour and its
     shadow, which is what made it findable in the first place. */
  .announce-floating::before,
  .announce-floating::after {
    display: none;
  }

  .announce-floating-icon i {
    animation: none;
  }
}

/* Empty state on the announcements page itself. */
.announce-empty {
  text-align: center;
  padding: 40px 20px 30px;
  color: var(--body-text);
}

.announce-empty i {
  font-size: 2.6rem;
  color: var(--border-color);
  margin-bottom: 18px;
  display: block;
}

.announce-empty-sub {
  font-size: 0.95rem;
  opacity: 0.75;
}

/* Floating Back to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: rgba(116, 6, 51, 0.85);
  backdrop-filter: blur(10px);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background: var(--white);
  color: var(--primary-dark);
  border-color: var(--white);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}


/* ===== Blood Centre Page (bloodcentre.php) =====
   Flat editorial layout: page heading, intro, then units - each a large
   heading followed by its subheadings. All content is CMS-managed, so the
   styling has to hold up for any number of units and subheadings. */
.bc-main {
  position: relative;
}

/* Content spans the container so every heading, paragraph and the CTA share
   the same left edge as the rest of the site. */
.bc-page {
  position: relative;
  max-width: 100%;
}

/* Needs the extra specificity - .dept-title-name is declared later in the
   sheet and would otherwise win with its own bottom margin. */
.bc-page .bc-page-title {
  margin: 0 0 28px;
}

/* Justified copy, tuned for this line length: hyphenate so word gaps stay even
   instead of opening into rivers, and leave the last line of a paragraph ragged
   rather than stretched across the full width. To go flush left instead, swap
   the text-align below to `left` and drop the two text-* lines under it. */
.bc-page .content-area {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.bc-intro p:last-child {
  margin-bottom: 0;
}

.bc-unit {
  margin-top: 52px;
}

/* Unit and subheading titles share the main heading's colour and weight
   (as .dept-section .section-title does on the department page) - size alone
   carries the hierarchy, so the page reads as one continuous document. */
.bc-unit-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--body-text);
  line-height: 1.2;
  margin-bottom: 8px;
}

.bc-sub {
  margin-top: 28px;
}

.bc-sub-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--body-text);
  line-height: 1.25;
  margin-bottom: 10px;
}

.bc-sub-content p:last-child {
  margin-bottom: 0;
}

/* Headings authored inside the rich-text editor follow the same colour */
.bc-page .content-area h2,
.bc-page .content-area h3,
.bc-page .content-area h4 {
  color: var(--body-text);
}

@media (max-width: 768px) {
  .bc-unit {
    margin-top: 40px;
  }

  .bc-unit-title {
    font-size: 1.6rem;
  }

  .bc-sub-title {
    font-size: 1.2rem;
  }
}

/* ===== Department Page ===== */
.dept-banner {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 393px;
}

.dept-main {
  padding: 40px 0 36px;
  background: var(--white);
}

.dept-title-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.dept-title-name {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--body-text);
  margin: 0 0 24px;
  line-height: 1.2;
}

.dept-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.dept-cta .btn {
  min-width: 220px;
}

.dept-section {
  background: var(--white);
  padding: 48px 0;
}

.dept-section+.dept-section {
  background: var(--light-bg);
}

/* --- Left-align all dept section headings to match intro --- */
.dept-section .section-title {
  text-align: left;
  color: var(--body-text);
}

.dept-section .section-title::after {
  display: none;
}

.dept-section .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* The one centred heading on the page. Every other department section runs its
   title flush left (see .dept-section .section-title above); the doctor grid is
   a centred, self-contained block, so its heading sits over the middle of it.
   Same specificity as the rule it overrides - it only wins by coming later. */
.dept-section-doctors .section-title {
  text-align: center;
}

.dept-section-doctors .doctor-card {
  border-radius: 28px;
  border: none;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dept-section-doctors .doctor-card-media {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dept-section-doctors .doctor-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.dept-section-doctors .designation {
  color: #E8649A;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

@media (max-width: 992px) {
  .dept-banner {
    min-height: 280px;
  }

  .dept-title-name {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .dept-banner {
    min-height: 200px;
  }

  .dept-title-name {
    font-size: 1.6rem;
  }

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

  .dept-cta .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 992px) {
  .footer-top-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-col-info {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 50px 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .form-wrapper {
    padding: 24px;
  }

  .footer-top-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .specialities-subgrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-col-info {
    grid-column: span 1;
  }

  .footer-bottom-container {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .whatsapp-floating {
    bottom: 82px;
    left: 16px;
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }

  .announce-floating {
    bottom: 16px;
    left: 16px;
    height: 48px;
    max-width: 48px;
  }

  .announce-floating-icon {
    flex: 0 0 48px;
    font-size: 1.15rem;
  }

  .announce-floating-label {
    padding-right: 22px;
    font-size: 0.88rem;
  }

  .scroll-to-top {
    bottom: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
}

/* ===== About Page ===== */
.about-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

@media (max-width: 768px) {
  .about-container {
    padding: 0 20px;
  }
}

.about-layout {
  max-width: 1220px;
  margin: 0 auto;
}

.about-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}

.about-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 32px;
}

/* The sub-headings the CMS writes into the About copy (Admin > About > Content
   Blocks). They arrive as bare h3s carrying nothing but the default body
   styling, which left them reading as plain bold text in the middle of the
   paragraphs. The rule beside them is the same 4px marker the Mission and
   Vision headings carry, so the page has one heading device rather than two. */
.content-area .about-block-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 38px 0 16px;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
}

.content-area .about-block-heading::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--primary);
}

.about-text-wrap::after {
  content: '';
  display: table;
  clear: both;
}

.about-featured-img {
  float: right;
  width: 534px;
  max-width: 100%;
  margin: 0 0 20px 32px;
  border-radius: var(--br);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-featured-img img {
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  display: block;
}

/* ===== Shared section block (gallery) ===== */
.about-section-block {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
}

.about-gallery-block .about-section-heading {
  text-align: center;
  justify-content: center;
}

.about-gallery-block .about-section-heading::before {
  display: none;
}

.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.about-gallery-item {
  margin: 0;
  border-radius: var(--br);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}

.about-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Gallery tile hover ---
   The tile lifts on a wine-tinted shadow, the photo pushes in behind a wash
   that rises from the bottom edge, and a light streak sweeps across once. Same
   vocabulary as the Gallery page's tiles, so the two read as one effect. The
   markup is whatever the CMS stored - a bare <figure><img> - so everything
   here hangs off the figure's own two pseudo-elements. */
.about-gallery-item {
  position: relative;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-gallery-item img {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.about-gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(152, 28, 78, 0.22);
}

.about-gallery-item:hover img {
  transform: scale(1.08);
  filter: saturate(1.08);
}

/* The streak. galSheen is the Gallery page's keyframe - keyframes are global,
   so the two tiles sweep at exactly the same speed. */
.about-gallery-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.about-gallery-item:hover::after {
  animation: galSheen 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Mission & Vision Premium Redesign ===== */
.about-mission-block,
.about-vision-block {
  margin-top: 52px;
  padding: 36px;
  border: none;
  border-radius: var(--br);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.about-mission-block {
  background: linear-gradient(135deg, #fdf2f5 0%, #fff 70%);
  border-left: 4px solid var(--primary);
}

.about-vision-block {
  background: linear-gradient(135deg, #f0f7ff 0%, #fff 70%);
  border-left: 4px solid var(--dark-blue);
}

.about-section-heading {
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-section-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 30px;
  border-radius: 2px;
  flex-shrink: 0;
}

.about-mission-block .about-section-heading {
  color: var(--primary);
}

.about-mission-block .about-section-heading::before {
  background: var(--primary);
}

.about-vision-block .about-section-heading {
  color: var(--dark-blue);
}

.about-vision-block .about-section-heading::before {
  background: var(--dark-blue);
}

/* --- Mission & Vision card hover ---
   The card lifts, its tint deepens out of the same corner its background
   gradient already starts from, the accent rail on the left bleeds inwards as
   a soft glow, and a hairline of the accent colour wipes across the top edge.
   --mv-accent carries each card's colour as bare channels, so one set of rules
   covers both cards and every tint below stays in step with it. */
.about-mission-block,
.about-vision-block {
  --mv-accent: 152, 28, 78;
  overflow: hidden;
  /* A stacking context of its own, so the glow below can sit at z-index -1:
     above the card's background gradient, behind its text. */
  isolation: isolate;
  /* Three shadows at rest, matching the three on hover - box-shadow only
     animates between lists of the same length, and two of these are invisible
     until the card is hovered. */
  box-shadow: inset 0 0 0 0 rgba(var(--mv-accent), 0),
    0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 0 rgba(var(--mv-accent), 0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-vision-block {
  --mv-accent: 0, 58, 107;
}

.about-mission-block::before,
.about-vision-block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    90% 80% at 0% 0%,
    rgba(var(--mv-accent), 0.16) 0%,
    rgba(var(--mv-accent), 0) 62%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.about-mission-block::after,
.about-vision-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(var(--mv-accent), 0.95),
    rgba(var(--mv-accent), 0)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.about-mission-block:hover,
.about-vision-block:hover {
  transform: translateY(-6px);
  box-shadow: inset 12px 0 24px -16px rgba(var(--mv-accent), 0.6),
    0 6px 16px rgba(16, 16, 16, 0.05),
    0 26px 52px rgba(var(--mv-accent), 0.18);
}

.about-mission-block:hover::before,
.about-vision-block:hover::before {
  opacity: 1;
}

.about-mission-block:hover::after,
.about-vision-block:hover::after {
  transform: none;
}

.about-section-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}

.about-section-text {
  flex: 1;
  min-width: 0;
}

.about-section-text .content-area {
  font-size: 0.95rem;
}

.about-section-img {
  width: 534px;
  max-width: 100%;
  flex-shrink: 0;
  border-radius: var(--br);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-section-img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.about-section-img img {
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  display: block;
}

@media (max-width: 992px) {
  .about-featured-img {
    float: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 24px;
  }

  .about-mission-block,
  .about-vision-block {
    padding: 28px 24px;
  }

  .about-section-inner {
    flex-direction: column;
    gap: 24px;
  }

  .about-section-img {
    width: 100%;
    max-width: 380px;
  }

  .about-vision-block .about-section-inner {
    flex-direction: column-reverse;
  }

  .about-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about-title {
    font-size: 1.9rem;
  }

  .content-area .about-block-heading {
    font-size: 1.2rem;
  }

  .content-area .about-block-heading::before {
    height: 24px;
  }

  .about-mission-block,
  .about-vision-block {
    padding: 20px 16px;
  }

  .about-section-heading {
    font-size: 1.4rem;
  }

  .about-section-heading::before {
    height: 26px;
  }

  .about-gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-section-block {
    margin-top: 36px;
    padding-top: 28px;
  }
}

/* Anyone who has asked for less movement still gets the hover feedback - the
   card's tint fades in as before - but nothing slides, lifts or sweeps. */
@media (prefers-reduced-motion: reduce) {
  .about-gallery-item,
  .about-gallery-item img,
  .about-mission-block,
  .about-vision-block,
  .about-mission-block::after,
  .about-vision-block::after {
    transition: none;
  }

  .about-gallery-item::after {
    display: none;
  }

  .about-gallery-item:hover,
  .about-gallery-item:hover img,
  .about-mission-block:hover,
  .about-vision-block:hover {
    transform: none;
  }
}

/* ===== Department Page Enhanced ===== */
.dept-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.dept-intro-image {
  flex: 0 0 300px;
  max-width: 100%;
}

.dept-intro-image img {
  width: 100%;
  border-radius: var(--br);
  box-shadow: var(--shadow-md);
}

.dept-intro-content {
  flex: 1;
  min-width: 300px;
}

.dept-intro-content p {
  margin-bottom: 16px;
  line-height: 1.8;
}

.dept-intro-content ul,
.dept-intro-content ol {
  padding-left: 24px;
  margin: 12px 0;
}

.dept-intro-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.dept-intro-content li>ul,
.dept-intro-content li>ol {
  margin: 6px 0 6px 20px;
}

.dept-intro-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
}

.dept-unit {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.dept-unit-image {
  flex: 0 0 280px;
  max-width: 100%;
}

.dept-unit-image img {
  width: 100%;
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
}

.dept-unit-content {
  flex: 1;
  min-width: 300px;
}

.dept-unit-content p {
  margin-bottom: 14px;
  line-height: 1.9;
}

.dept-unit-content ul,
.dept-unit-content ol {
  padding-left: 24px;
  margin: 12px 0;
}

.dept-unit-content li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.dept-unit-content li>ul,
.dept-unit-content li>ol {
  margin: 4px 0 4px 20px;
}

.dept-unit-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 12px 0;
}

/* ===== FAQ Section ===== */
.dept-faq {
  background: var(--light-bg);
  padding: 48px 0;
}

.faq-section-title {
  text-align: center;
  color: var(--body-text);
  margin-bottom: 32px;
}

.faq-section-title::after {
  display: none;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border-radius: var(--br);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 14px;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.faq-item.faq-open {
  border-color: rgba(152, 28, 78, 0.2);
  box-shadow: 0 4px 20px rgba(152, 28, 78, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  font-family: inherit;
  text-align: left;
  transition: color 0.3s ease;
  gap: 16px;
}

.faq-question:hover {
  color: var(--primary);
}

.faq-question-text {
  flex: 1;
  line-height: 1.5;
}

/* Plus/Minus Icon */
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background 0.3s ease;
}

.faq-item.faq-open .faq-icon {
  background: var(--primary);
}

.faq-icon-plus,
.faq-icon-minus {
  position: absolute;
  background: var(--heading-color);
  border-radius: 1px;
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon-plus {
  width: 12px;
  height: 2px;
}

.faq-icon-minus {
  width: 2px;
  height: 12px;
}

.faq-item.faq-open .faq-icon-plus {
  background: var(--white);
  transform: rotate(90deg);
}

.faq-item.faq-open .faq-icon-minus {
  background: var(--white);
  transform: rotate(90deg);
}

/* Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-open .faq-answer {
  max-height: 1200px;
}

.faq-answer-inner {
  padding: 0 24px 22px;
  color: var(--body-text);
  line-height: 1.8;
  font-size: 0.94rem;
}

.faq-answer-inner p {
  margin-bottom: 10px;
}

.faq-answer-inner ul,
.faq-answer-inner ol {
  padding-left: 24px;
  margin: 8px 0;
}

.faq-answer-inner li {
  margin-bottom: 6px;
}

/* A checklist under a FAQ answer runs in one column, unlike the two-column one
   in a unit: the answer sits in a narrower box and its items are full sentences
   rather than the two or three words a unit lists, so a second column would
   wrap almost every line. */
.faq-answer-inner .dept-checklist {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 6px;
}

.faq-answer-inner li>ul,
.faq-answer-inner li>ol {
  margin: 4px 0 4px 20px;
}

/* ===== Department Facilities ===== */
.dept-facility-card {
  margin-bottom: 32px;
}

.dept-facility-card:last-child {
  margin-bottom: 0;
}

.dept-facility-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.dept-facility-image {
  flex: 0 0 260px;
  max-width: 100%;
}

.dept-facility-image img {
  width: 100%;
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
}

.dept-facility-body {
  flex: 1;
  min-width: 0;
}

.dept-facility-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.dept-facility-text p {
  margin-bottom: 12px;
  line-height: 1.8;
}

.dept-facility-list {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

.dept-facility-list-item {
  padding: 10px 0;
}

@media (max-width: 768px) {
  .dept-facility-inner {
    flex-direction: column;
    gap: 16px;
  }

  .dept-facility-image {
    flex: none;
    width: 100%;
  }

  .dept-facility-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 768px) {
  .dept-intro {
    flex-direction: column;
  }

  .dept-intro-image {
    flex: none;
    width: 100%;
  }

  .dept-unit,
  .dept-unit.dept-unit-reverse {
    flex-direction: column;
  }

  .dept-unit-image {
    flex: none;
    width: 100%;
  }
}

/* --- Reverse layout (text_image: image on right, text on left) --- */
.dept-unit.dept-unit-reverse {
  flex-direction: row-reverse;
}

/* --- CTA button row --- */
.dept-unit-cta {
  text-align: center;
  margin-top: 28px;
}

/* --- Gallery grid --- */
.dept-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.dept-gallery-item {
  border-radius: var(--br);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}

.dept-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.dept-gallery-item:hover img {
  transform: scale(1.06);
}

@media (max-width: 768px) {
  .dept-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .dept-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Clean Check-List Unit --- */
.dept-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

.dept-checklist-item {
  padding: 10px 0;
}

.dept-checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dept-check-icon {
  color: var(--primary);
  font-size: 0.95rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.dept-checklist-text {
  display: flex;
  flex-direction: column;
}

.dept-checklist-title {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--body-text);
  line-height: 1.5;
}

.dept-checklist-desc {
  font-size: 0.88rem;
  color: var(--body-text);
  line-height: 1.6;
  margin-top: 2px;
}

/* The sentence that introduces a group of ticks ("The services offered
   include:"). Spanning every column is what does the real work: it ends the
   two-column flow above it, so the next tick starts back in column one and the
   groups read as separate blocks rather than one run-on list. */
.dept-checklist-lead {
  grid-column: 1 / -1;
  font-size: 1.05rem;
  color: var(--body-text);
  line-height: 1.6;
  margin: 32px 0 6px;
}

/* No gap above the first one - the section subtitle already sits there. */
.dept-checklist-lead:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .dept-checklist {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Keep the tightened department rhythm on small screens too - declared after
   the generic .section mobile padding so it is the one that applies. */
@media (max-width: 768px) {

  .dept-section,
  .dept-faq {
    padding: 32px 0;
  }

  .dept-main {
    padding: 32px 0 24px;
  }
}

/* Department Intro Floated Image Wrap */
.dept-intro-wrap {
  overflow: hidden;
  margin-bottom: 24px;
}

.dept-intro-wrap::after {
  content: "";
  display: table;
  clear: both;
}

.dept-intro-img-float {
  float: left;
  width: 46%;
  max-width: 550px;
  margin-right: 44px;
  margin-bottom: 24px;
}

.dept-intro-img-float img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}

@media (max-width: 992px) {
  .dept-intro-img-float {
    margin-right: 32px;
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .dept-intro-img-float {
    float: none;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 24px;
  }
}

/* Chairman's Message — a portrait rather than a department photo, so it sits
   smaller than the shared default and the banner gets more room beneath it. */
.chairman-main {
  padding-top: 72px;
}

/* --- Portrait ---
   The frame clips the photo now, so the image drops its own radius: a rounded
   image scaled up inside a square frame shows its corners pulling away. */
.chairman-main .dept-intro-img-float {
  position: relative;
  width: 38%;
  max-width: 420px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.chairman-main .dept-intro-img-float img {
  border-radius: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

/* The frame lifts on a wine-tinted shadow while the photo pushes in behind it.
   Same vocabulary as the Gallery page's tiles, so the two read as one effect. */
.chairman-main .dept-intro-img-float:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(152, 28, 78, 0.22);
}

.chairman-main .dept-intro-img-float:hover img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

/* A wine wash rising from the foot of the frame. It stops well short of the
   top so it deepens the portrait rather than covering the face. */
.chairman-main .dept-intro-img-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(116, 6, 51, 0.42) 0%, rgba(116, 6, 51, 0) 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.chairman-main .dept-intro-img-float:hover::before {
  opacity: 1;
}

/* A light streak sweeps across the photo once on hover. galSheen is the
   Gallery page's keyframe - keyframes are global, so the two sweep at exactly
   the same speed. */
.chairman-main .dept-intro-img-float::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.chairman-main .dept-intro-img-float:hover::after {
  animation: galSheen 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Paragraph spacing ---
   The editor in the admin panel separates the paragraphs twice over: an empty
   paragraph carrying a single <br> between each pair, and its own inline
   bottom margin on some of them. At a 1.9 line-height that came to the best
   part of 40px between two lines. The empty paragraphs are dropped before the
   copy is printed (see chairman.php) and the gap is set here, over the margin
   the editor stored inline. */
.chairman-main .content-area p {
  margin-bottom: 22px !important;
}

/* The sign-off - the slogan and the name beneath it - closes the letter, so it
   is set well below the message rather than following on as one more
   paragraph. The last two paragraphs are that block, so the margin goes on
   the first of them; the name below it keeps the ordinary paragraph gap. */
.chairman-main .content-area > p:nth-last-of-type(2) {
  margin-top: 48px !important;
}

@media (max-width: 768px) {
  .chairman-main {
    padding-top: 40px;
  }

  .chairman-main .dept-intro-img-float {
    width: 100%;
    max-width: none;
  }
}

/* Anyone who has asked for less movement still gets the hover feedback - the
   shadow and the wash - without anything sliding or scaling. */
@media (prefers-reduced-motion: reduce) {
  .chairman-main .dept-intro-img-float,
  .chairman-main .dept-intro-img-float img {
    transition: box-shadow 0.55s ease;
  }

  .chairman-main .dept-intro-img-float:hover,
  .chairman-main .dept-intro-img-float:hover img {
    transform: none;
  }

  .chairman-main .dept-intro-img-float:hover::after {
    animation: none;
  }
}

/* The numbered variant does its own spacing through .dept-check-num's
   min-width, which is what keeps a two-digit number's text aligned with a
   single-digit one's. The row gap would add on top of that and only widen the
   single-digit rows, so it is dropped here. */
.dept-checklist-numbered .dept-checklist-row {
  gap: 0;
}

/* Set from the item text it sits beside - same size, weight and line-height,
   so the number reads as part of the line rather than a label stuck on the
   front of it, and the two share a baseline. Colour alone marks it as the
   bullet, the same way the tick is marked in the other variant. The min-width
   holds a two-digit number, which is what keeps every item's text on the same
   left edge once a list passes nine. */
.dept-check-num {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--primary);
  line-height: 1.5;
  min-width: 24px;
  flex-shrink: 0;
}

/* The numbered variant used to blow its titles up to 1.5rem/700, which turned
   a list of nine plain services into nine headings and made two units on the
   same page read as different things. Item text is now one size and one weight
   everywhere - see .dept-checklist-title above; the big red number is what
   marks the numbered variant, and it carries the hierarchy on its own. */

.dept-checklist-sub {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 38px;
}

.dept-checklist-sub li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--body-text, #333);
  line-height: 1.5;
}

.dept-sub-icon {
  color: var(--primary);
  font-size: 0.85rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.dept-checklist-subtitle {
  font-weight: 400;
}

.dept-checklist-subdesc {
  display: block;
  font-weight: 400;
  color: #64748b;
  font-size: 0.9rem;
}

/* ===== Home Care Services Page =====
   One block per service, each an eyebrow and an oversized title over a photo
   floated into the copy, the service list as a row of cards, and the contact
   note as a tinted panel. Every block is a CMS record, so the number of them
   and the length of each is whatever the editor saved. */
.homecare-main {
  position: relative;
  overflow: hidden;
  padding-top: 68px !important;
  padding-bottom: 84px !important;
}

/* A soft brand glow behind the top of the page. This page has no banner to
   sit under - there is no image field for one - so without it the copy starts
   against flat white. Decorative, and never in the way of a click. */
.homecare-main::before {
  content: "";
  position: absolute;
  top: -240px;
  right: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 28, 78, 0.09) 0%, rgba(152, 28, 78, 0) 70%);
  pointer-events: none;
}

.homecare-main > .container {
  position: relative;
}

.homecare-item-block {
  margin-bottom: 64px;
}

.homecare-item-block:last-child {
  margin-bottom: 0;
}

.homecare-item-block.with-divider {
  padding-top: 56px;
  border-top: 1px solid var(--border-color);
}

/* Every second block puts its photo on the other side, so a page with several
   services reads as alternating rows rather than one long left-hand column. */
.homecare-item-block:nth-of-type(even) .homecare-img-float {
  float: right;
  margin: 4px 0 28px 44px;
}

.homecare-flow-wrap {
  overflow: hidden;
}

.homecare-flow-wrap::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Photo ---
   The frame clips the photo, so the image drops its own radius: a rounded
   image scaled up inside a square frame shows its corners pulling away. The
   lift, the wash and the streak are the same three the Chairman's portrait
   and the Gallery tiles use, so every photo on the site behaves alike. */
.homecare-img-float {
  position: relative;
  float: left;
  width: 46%;
  max-width: 540px;
  margin: 4px 44px 28px 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.homecare-img-float img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.homecare-img-float:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(152, 28, 78, 0.22);
}

.homecare-img-float:hover img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

/* A wash rising from the foot of the frame. It stops well short of the top, so
   it deepens the photo rather than covering whoever is in it. */
.homecare-img-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(116, 6, 51, 0.42) 0%, rgba(116, 6, 51, 0) 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.homecare-img-float:hover::before {
  opacity: 1;
}

/* galSheen is the Gallery page's keyframe - keyframes are global, so every
   photo on the site sweeps at exactly the same speed. */
.homecare-img-float::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.homecare-img-float:hover::after {
  animation: galSheen 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Heading --- */
.homecare-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.homecare-item-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--body-text);
  line-height: 1.22;
  margin: 0 0 24px;
  /* A block child of a heading that sits beside a float - the accent rule
     below - starts at the container edge, not where the text does, so it
     would be drawn underneath the photo. Its own formatting context keeps the
     whole heading box clear of the float, and the rule lines up with the
     words above it. */
  display: flow-root;
}

.homecare-item-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.homecare-item-desc {
  color: var(--body-text);
  line-height: 1.85;
  font-size: 1rem;
  margin-bottom: 44px;
}

/* The paragraphs sit closer together than this page wants them to -
   .content-area gives every p a 14px gap, which at this line height reads as
   one block of text rather than several. The last one drops its gap so it
   does not stack with the wrapper's own margin above the cards. */
.homecare-item-desc p {
  margin-bottom: 26px;
}

.homecare-item-desc p:last-child {
  margin-bottom: 0;
}

/* --- Service list ---
   Ticked lines in two columns, as they were before the rest of the page was
   restyled. */
.homecare-item-list {
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}

.homecare-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.98rem;
  color: #334155;
  line-height: 1.5;
}

.homecare-list-item i {
  color: var(--primary, #981c4e);
  font-size: 1.05rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* --- Contact note ---
   Whatever the editor wrote in Additional Text - usually the helpline and the
   email address - set apart from the body copy as a tinted panel. */
.homecare-item-additional {
  clear: both;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 0;
  padding: 26px 30px;
  border: 1px solid rgba(152, 28, 78, 0.14);
  border-left: 4px solid var(--primary);
  border-radius: 16px;
  background: linear-gradient(140deg, #fdf3f7 0%, var(--white) 68%);
  color: var(--body-text);
  font-size: 1rem;
  line-height: 1.85;
  text-align: left;
}

.homecare-additional-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(152, 28, 78, 0.26);
}

.homecare-additional-body {
  min-width: 0;
}

.homecare-additional-body p {
  margin-bottom: 18px;
}

.homecare-additional-body p:last-child {
  margin-bottom: 0;
}

/* --- Call to action --- */
.homecare-cta-wrap {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.homecare-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 34px;
  border-radius: 50px;
  font-size: 0.97rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(152, 28, 78, 0.22);
}

.homecare-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(152, 28, 78, 0.3);
}

/* --- Nothing published yet --- */
.homecare-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 34px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: linear-gradient(160deg, #fdf3f7 0%, var(--white) 70%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.homecare-empty i {
  font-size: 3.2rem;
  color: var(--primary);
  opacity: 0.45;
}

.homecare-empty h1 {
  margin: 20px 0 10px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--heading-color);
}

.homecare-empty p {
  max-width: 420px;
  margin: 0 auto 26px;
  color: var(--body-text);
  line-height: 1.8;
}

@media (max-width: 992px) {
  .homecare-main {
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }

  .homecare-img-float,
  .homecare-item-block:nth-of-type(even) .homecare-img-float {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 26px;
  }

  .homecare-item-title {
    font-size: 1.9rem;
  }

  .homecare-item-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .homecare-item-block {
    margin-bottom: 48px;
  }

  .homecare-item-block.with-divider {
    padding-top: 40px;
  }

  .homecare-item-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  /* The icon moves above the text rather than squeezing the lines into a
     column barely wider than the helpline number beside it. */
  .homecare-item-additional {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }

  .homecare-cta {
    width: 100%;
    justify-content: center;
  }

  .homecare-empty {
    padding: 52px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homecare-img-float,
  .homecare-img-float img {
    transition: none;
  }

  .homecare-img-float::after {
    display: none;
  }

  .homecare-img-float:hover,
  .homecare-img-float:hover img,
  .homecare-cta:hover {
    transform: none;
  }
}

/* ===== Careers (careers.php) =====
   Built on the same parts as the notice board: a gradient hero with decoration
   behind the copy, chips and a live search over a card wall, and a reveal that
   staggers each row in. Everything that moves here animates transform, opacity
   or a background position - nothing that forces the browser to lay the page
   out again - and all of it is switched off in the prefers-reduced-motion
   block at the end of this section. */

/* --- Hero --- */
.crr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 0 92px;
  background:
    radial-gradient(120% 130% at 12% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
}

/* A fine grid panning behind the copy. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.crr-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(62% 62% at 45% 42%, #000, transparent 100%);
  mask-image: radial-gradient(62% 62% at 45% 42%, #000, transparent 100%);
  animation: crr-drift 24s linear infinite;
}

@keyframes crr-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

/* Two lights drifting behind everything. Drawn as radial gradients rather than
   as solid circles under a blur filter - the gradient is soft on its own, and
   blurring a 500px box every frame is the one thing on this page a mid-range
   phone would actually feel. */
.crr-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.crr-hero-glow-a {
  top: -170px;
  right: -70px;
  width: 470px;
  height: 470px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.42), rgba(255, 126, 178, 0) 68%);
  animation: crr-float-a 19s ease-in-out infinite;
}

.crr-hero-glow-b {
  bottom: -230px;
  left: -130px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.26), rgba(255, 210, 130, 0) 68%);
  animation: crr-float-b 23s ease-in-out infinite;
}

@keyframes crr-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-64px, 44px, 0) scale(1.12); }
}

@keyframes crr-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(74px, -52px, 0) scale(1.09); }
}

.crr-hero-inner {
  position: relative;
  max-width: 870px;
}

.crr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.crr-hero-title {
  margin: 21px 0 16px;
  font-size: clamp(2.2rem, 5.4vw, 3.55rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
}

.crr-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave the word invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .crr-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: crr-shine 7s linear infinite;
  }
}

@keyframes crr-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

.crr-hero-text {
  max-width: 650px;
  font-size: 1.04rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
}

.crr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.crr-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 38px;
}

.crr-stat {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.crr-stat-num {
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  /* The figure counts up on arrival, and tabular digits stop the label under it
     shifting sideways as the number passes 9. */
  font-variant-numeric: tabular-nums;
}

.crr-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Buttons ---
   Three of them: white on the maroon panels, outlined on the same, and the
   house gradient for a light background. All share the lift and the sheen. */
.crr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

.crr-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.crr-btn:hover::before,
.crr-btn:focus-visible::before {
  left: 110%;
}

.crr-btn > * {
  position: relative;
}

.crr-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.crr-btn:hover,
.crr-btn:focus-visible {
  transform: translateY(-3px);
}

.crr-btn:hover i,
.crr-btn:focus-visible i {
  transform: scale(1.12);
}

.crr-btn-solid {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.75);
}

.crr-btn-solid:hover,
.crr-btn-solid:focus-visible {
  color: var(--primary-dark);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.85);
}

.crr-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.crr-btn-ghost:hover,
.crr-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.crr-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.crr-btn-primary:hover,
.crr-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Shared section heading --- */
.crr-head {
  max-width: 700px;
  margin-bottom: 38px;
}

.crr-head-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 10px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.crr-head-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: translateY(-50%);
}

.crr-head-title {
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}

.crr-head-title strong {
  font-weight: 700;
  color: var(--primary);
}

.crr-head-text {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--body-text);
}

/* --- Openings --- */
.crr-openings {
  padding: 84px 0 92px;
  background: var(--white);
  /* Both in-page links land under a sticky 102px header otherwise. */
  scroll-margin-top: 120px;
}

.crr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}

.crr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The fill wipes in from the left rather than the colour simply switching, so
   choosing a department reads as a state arriving. */
.crr-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 9px 18px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  color: var(--heading-color);
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.crr-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.crr-chip > * {
  position: relative;
}

.crr-chip:hover,
.crr-chip:focus-visible {
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.crr-chip:hover::before,
.crr-chip:focus-visible::before,
.crr-chip.is-active::before {
  transform: scaleX(1);
}

.crr-chip.is-active {
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 10px 22px -10px rgba(152, 28, 78, 0.85);
}

.crr-chip-count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--light-bg);
  font-size: 0.71rem;
  font-weight: 700;
  text-align: center;
  color: var(--body-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.crr-chip:hover .crr-chip-count,
.crr-chip:focus-visible .crr-chip-count,
.crr-chip.is-active .crr-chip-count {
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

.crr-search {
  position: relative;
  flex: 0 1 300px;
}

.crr-search i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #a3a3a3;
  pointer-events: none;
  transition: color 0.3s ease;
}

.crr-search input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9rem;
  color: var(--heading-color);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.crr-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(152, 28, 78, 0.12);
}

.crr-search input:focus + i,
.crr-search:focus-within i {
  color: var(--primary);
}

/* --- Job cards ---
   --crr-mx / --crr-my are written by the page's pointermove handler as
   percentages across the card and drive the highlight that follows the cursor.
   They default to the centre, so a card nobody has pointed at - and every card
   on a touch screen, where that handler never runs - still looks deliberate. */
.crr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 26px;
}

/* auto-fit shares the row out between whatever is in it, which is right for a
   full list and far too wide for one or two postings. These two hold the grid
   itself in instead of stretching the cards. */
.crr-grid-one {
  max-width: 480px;
}

.crr-grid-two {
  max-width: 820px;
}

/* The filter hides a card by setting [hidden] on it, and the display:flex below
   would otherwise outrank the UA stylesheet's [hidden] rule and leave every
   filtered-out card on screen. */
.crr-card[hidden] {
  display: none;
}

.crr-card {
  --crr-mx: 50%;
  --crr-my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 26px 22px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 24px -18px rgba(16, 16, 16, 0.35);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* The highlight that follows the cursor. Over the whole card rather than behind
   the text, which is why it is this faint - any stronger and it would wash out
   the paragraph underneath. */
.crr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--crr-mx) var(--crr-my),
    rgba(152, 28, 78, 0.09),
    rgba(152, 28, 78, 0) 62%
  );
  transition: opacity 0.4s ease;
}

.crr-card:hover::before,
.crr-card:focus-within::before {
  opacity: 1;
}

/* A rule wiping across the foot of the card. Anchored left so it reads as the
   card being picked up rather than as something arriving. */
.crr-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.crr-card:hover::after,
.crr-card:focus-within::after {
  transform: scaleX(1);
}

.crr-card:hover,
.crr-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(152, 28, 78, 0.22);
  /* Tinted rather than grey: a plain black shadow under a coloured card reads
     as dirt, and this one reads as the card lifting off the page. */
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 26px 44px -22px rgba(152, 28, 78, 0.45);
}

.crr-card.is-urgent {
  border-color: rgba(217, 119, 6, 0.28);
}

.crr-card.is-urgent::after {
  background: linear-gradient(90deg, #f59e0b, #b45309);
}

/* A posting past its closing date. Still legible and still complete - it is
   kept on the page so a bookmarked link lands somewhere that explains itself -
   but drained of the colour that makes the live ones look clickable, and it
   stops lifting on hover because there is nothing left to click. */
.crr-card.is-closed {
  background: #fcfcfd;
  border-color: #e9eaef;
  box-shadow: none;
}

.crr-card.is-closed:hover,
.crr-card.is-closed:focus-within {
  transform: none;
  border-color: #e9eaef;
  box-shadow: none;
}

.crr-card.is-closed::before,
.crr-card.is-closed:hover::after,
.crr-card.is-closed:focus-within::after {
  opacity: 0;
  transform: scaleX(0);
}

.crr-card.is-closed .crr-card-watermark {
  color: rgba(16, 16, 16, 0.04);
}

.crr-card.is-closed:hover .crr-card-watermark {
  transform: none;
  color: rgba(16, 16, 16, 0.04);
}

.crr-card.is-closed .crr-card-icon {
  background: #f1f2f6;
  box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.05);
  color: #9aa1ae;
}

.crr-card.is-closed:hover .crr-card-icon {
  background: #f1f2f6;
  color: #9aa1ae;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.05);
}

.crr-card.is-closed .crr-card-title,
.crr-card.is-closed:hover .crr-card-title {
  color: #6f7683;
}

/* The department marker goes grey with the rest of the card - left maroon it
   is the one bright thing on an otherwise retired posting. */
.crr-card.is-closed .crr-card-dept i {
  color: #aeb4c0;
}

.crr-card.is-closed:hover .crr-card-meta {
  background: var(--light-bg);
  border-color: #eef0f6;
}

.crr-tag-closed {
  background: #f4f5f8;
  border-color: #e4e6ec;
  color: #6f7683;
}

/* Takes the place of the Apply button. Deliberately flat and not focusable -
   there is nothing to press, so there is nothing to put in the tab order. */
.crr-closed-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  border: 1px dashed #dcdfe7;
  border-radius: 999px;
  background: #f7f8fa;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8b929f;
}

.crr-closed-note i {
  font-size: 0.85rem;
  color: #aeb4c0;
}

/* The department's own glyph, blown up behind the corner. It sits on a negative
   layer inside the card's own stacking context, so it clears the card's
   background but stays under every word on it without a single child needing a
   z-index of its own. */
.crr-card-watermark {
  position: absolute;
  top: -20px;
  right: -16px;
  z-index: -1;
  font-size: 7.2rem;
  line-height: 1;
  color: rgba(152, 28, 78, 0.05);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.crr-card:hover .crr-card-watermark,
.crr-card:focus-within .crr-card-watermark {
  transform: rotate(-9deg) scale(1.09);
  color: rgba(152, 28, 78, 0.09);
}

.crr-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.crr-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fdeef4, #fbe0ec);
  box-shadow: inset 0 0 0 1px rgba(152, 28, 78, 0.08);
  color: var(--primary);
  font-size: 1.12rem;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.crr-card:hover .crr-card-icon,
.crr-card:focus-within .crr-card-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
  box-shadow: 0 14px 24px -12px rgba(152, 28, 78, 0.85);
}

.crr-card-headings {
  min-width: 0;
}

.crr-card-title {
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.crr-card:hover .crr-card-title,
.crr-card:focus-within .crr-card-title {
  color: var(--primary);
}

.crr-card-dept {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--body-text);
}

.crr-card-dept i {
  font-size: 0.72rem;
  color: var(--primary-light);
}

.crr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.crr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.crr-tag-open {
  background: #f0fdf4;
  border-color: rgba(21, 128, 61, 0.14);
  color: #15803d;
}

.crr-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.crr-tag-urgent {
  background: #fffbeb;
  border-color: rgba(180, 83, 9, 0.18);
  color: #b45309;
}

.crr-tag-past {
  background: #fff1f2;
  border-color: rgba(159, 18, 57, 0.16);
  color: #9f1239;
}

.crr-tag-quiet {
  background: var(--light-bg);
  border-color: var(--border-color);
  color: #8d94a3;
  font-weight: 500;
}

/* Justified, like every other block of body copy on this site. */
.crr-card-desc {
  margin-bottom: 18px;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--body-text);
  text-align: justify;
}

/* Pushed to the bottom by the auto margin, so cards in a row line their
   qualification panels up with each other however long the titles above them
   happen to run. */
.crr-card-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding: 14px 16px;
  border: 1px solid #eef0f6;
  border-radius: 14px;
  background: var(--light-bg);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.crr-card:hover .crr-card-meta,
.crr-card:focus-within .crr-card-meta {
  background: #fdf5f8;
  border-color: rgba(152, 28, 78, 0.1);
}

.crr-meta {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.crr-meta-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(16, 16, 16, 0.07);
  color: var(--primary);
  font-size: 0.77rem;
}

.crr-meta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crr-meta-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a0a7b5;
}

.crr-meta-val {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading-color);
}

.crr-card-foot {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

/* Deliberately not positioned: the span inside it is what stretches over the
   whole card, and it needs the card - not this button - as its containing
   block. */
.crr-apply {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px 10px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 52%, var(--primary-light));
  background-size: 190% 100%;
  background-position: 0 0;
  color: var(--white);
  font-size: 0.87rem;
  font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(152, 28, 78, 0.95);
  transition:
    background-position 0.55s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

.crr-card:hover .crr-apply,
.crr-apply:hover,
.crr-apply:focus-visible {
  background-position: 100% 0;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -14px rgba(152, 28, 78, 0.95);
}

.crr-apply-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
}

.crr-card:hover .crr-apply-arrow,
.crr-apply:hover .crr-apply-arrow,
.crr-apply:focus-visible .crr-apply-arrow {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.3);
}

/* Makes the whole card the target while the link itself stays one ordinary
   entry in the tab order. */
.crr-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.crr-noresults {
  margin-top: 34px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--body-text);
}

.crr-noresults i {
  margin-right: 8px;
  color: var(--primary);
}

.crr-reset {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

.crr-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 34px;
  text-align: center;
  border: 1px dashed rgba(152, 28, 78, 0.22);
  border-radius: 24px;
  background: linear-gradient(180deg, #fdf6f9, var(--white));
}

.crr-empty-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 20px 34px -16px rgba(152, 28, 78, 0.9);
  color: var(--white);
  font-size: 1.7rem;
}

.crr-empty-title {
  margin-bottom: 10px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading-color);
}

.crr-empty-text {
  margin-bottom: 26px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--body-text);
}

/* --- Life at Almas --- */
.crr-why {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
  background: var(--light-bg);
}

.crr-why::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 28, 78, 0.07), rgba(152, 28, 78, 0) 70%);
  pointer-events: none;
}

.crr-why .container {
  position: relative;
}

.crr-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.crr-why-card {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 28px;
  border: 1px solid #ecedf3;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.03), 0 14px 26px -22px rgba(16, 16, 16, 0.4);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.4s ease;
}

.crr-why-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.crr-why-card:hover {
  transform: translateY(-7px);
  border-color: rgba(152, 28, 78, 0.18);
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 28px 46px -26px rgba(152, 28, 78, 0.5);
}

.crr-why-card:hover::after {
  transform: scaleX(1);
}

.crr-why-index {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(152, 28, 78, 0.07);
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.crr-why-card:hover .crr-why-index {
  color: rgba(152, 28, 78, 0.14);
  transform: translateY(-3px);
}

.crr-why-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 17px;
  background: linear-gradient(135deg, #fdeef4, #fbe0ec);
  box-shadow: inset 0 0 0 1px rgba(152, 28, 78, 0.08);
  color: var(--primary);
  font-size: 1.2rem;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.crr-why-card:hover .crr-why-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 14px 24px -12px rgba(152, 28, 78, 0.8);
}

.crr-why-title {
  margin-bottom: 10px;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--heading-color);
}

.crr-why-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--body-text);
  text-align: justify;
}

/* --- How we hire --- */
.crr-process {
  padding: 84px 0 92px;
  background: var(--white);
  scroll-margin-top: 120px;
}

.crr-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One rail behind all four discs rather than a connector per step, so the row
   reads as a single sequence. It is drawn at the height of the disc centres and
   the discs, being opaque and painted after it, sit on top of it. */
.crr-steps-rail {
  position: absolute;
  top: 33px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border-color);
}

.crr-steps-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

.crr-steps.is-drawn .crr-steps-rail-fill {
  transform: scaleX(1);
}

.crr-step {
  position: relative;
  text-align: center;
}

.crr-step-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border: 2px solid rgba(152, 28, 78, 0.16);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 12px 26px -18px rgba(16, 16, 16, 0.8);
  color: var(--primary);
  font-size: 1.22rem;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.crr-step:hover .crr-step-disc {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-color: transparent;
  color: var(--white);
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 22px 34px -16px rgba(152, 28, 78, 0.85);
}

.crr-step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  transition: background-color 0.4s ease;
}

.crr-step:hover .crr-step-num {
  background: var(--dark);
}

.crr-step-title {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--heading-color);
}

.crr-step-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--body-text);
}

/* --- Closing invitation --- */
.crr-cta-wrap {
  padding: 0 0 92px;
  background: var(--white);
}

.crr-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 32px;
  padding: 30px 42px;
  border-radius: 24px;
  background: linear-gradient(125deg, #5c0d2d, #981c4e 55%, #6b1036);
  box-shadow: 0 34px 62px -36px rgba(152, 28, 78, 0.95);
  color: var(--white);
}

.crr-cta-glow {
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -90px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 190, 0.4), rgba(255, 140, 190, 0) 68%);
  pointer-events: none;
  animation: crr-float-a 21s ease-in-out infinite;
}

.crr-cta-copy {
  flex: 1 1 380px;
}

.crr-cta-title {
  margin-bottom: 6px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: var(--white);
}

/* Given room to run wider than the copy elsewhere on the page: two lines here
   rather than three is most of what keeps this panel short. */
.crr-cta-text {
  max-width: 680px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
  text-align: justify;
}

/* --- Reveal on scroll ---
   An animation rather than a transition, because the stagger has to come from
   a delay that does not survive into the hover state - a transition-delay of
   half a second would still be sitting on card eight long after it had
   settled, and every hover on it would start late. With backwards fill the
   card holds the opening frame through its delay and is governed by nothing
   once the animation is over. */
.crr-reveal {
  opacity: 0;
}

.crr-reveal.is-in {
  opacity: 1;
  animation: crr-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--crr-delay, 0ms) backwards;
}

@keyframes crr-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

/* --- Narrower screens --- */
@media (max-width: 1100px) {
  .crr-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  }
}

@media (max-width: 992px) {
  .crr-hero {
    padding: 72px 0 70px;
  }

  .crr-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }

  /* Two rows of two: one horizontal rail can no longer join them in order, and
     a rail that stops halfway is worse than none. */
  .crr-steps-rail {
    display: none;
  }

  .crr-cta {
    padding: 26px 28px;
  }
}

@media (max-width: 768px) {
  .crr-openings,
  .crr-why,
  .crr-process {
    padding: 62px 0 66px;
  }

  .crr-cta-wrap {
    padding-bottom: 66px;
  }

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

  .crr-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .crr-search {
    flex: 1 1 auto;
  }

  .crr-hero-stats {
    gap: 14px 24px;
  }

  .crr-stat-num {
    font-size: 1.7rem;
  }

  .crr-cta-text {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .crr-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Upright, with the disc beside the words rather than above them - four
     centred blocks stacked down a phone is a lot of empty space either side of
     each one. */
  .crr-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
  }

  .crr-step-disc {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 1.05rem;
  }

  .crr-step-title {
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .crr-hero {
    padding: 58px 0 58px;
  }

  .crr-hero-actions .crr-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .crr-card {
    padding: 22px 20px 20px;
  }

  .crr-card-watermark {
    font-size: 6rem;
  }

  .crr-apply {
    flex: 1 1 auto;
    justify-content: center;
  }

  .crr-card-foot {
    display: flex;
  }

  .crr-empty {
    padding: 44px 22px;
  }

  .crr-cta {
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The decoration behind the hero is only motion, so with the motion gone
     there is nothing left worth painting. */
  .crr-hero-grid {
    display: none;
  }

  .crr-hero-glow,
  .crr-cta-glow {
    animation: none;
  }

  /* The sheen is dropped and the word goes back to plain white - the emphasis
     was always the weight, not the movement. */
  .crr-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .crr-tag-dot {
    animation: none;
  }

  .crr-reveal {
    opacity: 1;
  }

  .crr-reveal.is-in {
    animation: none;
  }

  /* The rail arrives already full rather than drawing itself in. */
  .crr-steps-rail-fill {
    transform: scaleX(1);
    transition: none;
  }

  .crr-btn,
  .crr-btn::before,
  .crr-btn i,
  .crr-chip,
  .crr-chip::before,
  .crr-card,
  .crr-card::before,
  .crr-card::after,
  .crr-card-watermark,
  .crr-card-icon,
  .crr-apply,
  .crr-apply-arrow,
  .crr-why-card,
  .crr-why-card::after,
  .crr-why-icon,
  .crr-why-index,
  .crr-step-disc {
    transition: none;
  }

  .crr-btn:hover,
  .crr-btn:focus-visible,
  .crr-btn:hover i,
  .crr-btn:focus-visible i,
  .crr-chip:hover,
  .crr-chip:focus-visible,
  .crr-card:hover,
  .crr-card:focus-within,
  .crr-card:hover .crr-card-icon,
  .crr-card:focus-within .crr-card-icon,
  .crr-card:hover .crr-card-watermark,
  .crr-card:focus-within .crr-card-watermark,
  .crr-card:hover .crr-apply,
  .crr-apply:hover,
  .crr-card:hover .crr-apply-arrow,
  .crr-apply:hover .crr-apply-arrow,
  .crr-why-card:hover,
  .crr-why-card:hover .crr-why-icon,
  .crr-why-card:hover .crr-why-index,
  .crr-step:hover .crr-step-disc {
    transform: none;
  }

  /* The rules along the foot of a card arrive at full width instead of wiping
     in, so the hover state still reads. */
  .crr-card:hover::after,
  .crr-card:focus-within::after,
  .crr-why-card:hover::after {
    transform: scaleX(1);
  }

  /* The chip fill stays - it is the colour that says which one is selected. */
  .crr-chip:hover::before,
  .crr-chip:focus-visible::before,
  .crr-chip.is-active::before {
    transform: scaleX(1);
  }

  .crr-btn:hover::before,
  .crr-btn:focus-visible::before {
    left: -110%;
  }
}

/* ===== Apply Page (apply.php) =====
   The other half of the careers pair, and built from the same parts: a gradient
   header carrying the posting's identity, house-token colours rather than the
   slate palette this page used to carry on its own, and the same reveal. The
   crr-drift and crr-float-a keyframes it borrows are defined in the Careers
   section above - the two pages are one journey and share their motion. */

/* --- Header --- */
.apply-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 0 40px;
  background:
    radial-gradient(120% 140% at 10% 0%, #a92159 0%, rgba(169, 33, 89, 0) 60%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 54%, #6b1036 100%);
  color: var(--white);
}

.apply-hero-grid {
  position: absolute;
  inset: -60% -30%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(60% 70% at 40% 45%, #000, transparent 100%);
  mask-image: radial-gradient(60% 70% at 40% 45%, #000, transparent 100%);
  animation: crr-drift 24s linear infinite;
}

.apply-hero-glow {
  position: absolute;
  z-index: -1;
  top: -240px;
  right: -80px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.38), rgba(255, 126, 178, 0) 68%);
  pointer-events: none;
  animation: crr-float-a 19s ease-in-out infinite;
}

.apply-hero-inner {
  position: relative;
}

.apply-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.apply-back:hover,
.apply-back:focus-visible {
  color: var(--white);
}

/* The arrow slides inside its own circle rather than the whole link shifting
   left, so the words stay where the eye left them. */
.apply-back-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.apply-back:hover .apply-back-arrow,
.apply-back:focus-visible .apply-back-arrow {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-4px);
}

.apply-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.apply-hero-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.25rem;
  backdrop-filter: blur(4px);
}

.apply-hero-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.apply-hero-title {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.apply-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.apply-htag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.apply-htag i {
  font-size: 0.7rem;
  opacity: 0.85;
}

.apply-htag-open {
  border-color: rgba(134, 239, 172, 0.42);
  background: rgba(22, 163, 74, 0.22);
  color: #dcfce7;
}

.apply-htag-urgent {
  border-color: rgba(253, 186, 116, 0.45);
  background: rgba(245, 158, 11, 0.2);
  color: #fef3c7;
}

.apply-htag-past {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

/* Grey rather than red: the posting closing is the ordinary end of its life,
   not something that went wrong. */
.apply-htag-closed {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(16, 16, 16, 0.24);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}

.apply-open-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: statusPulse 2s infinite;
}

/* --- Page body --- */
.apply-main {
  padding: 38px 0 84px;
  background: var(--light-bg);
  min-height: 60vh;
}

.apply-layout {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 28px;
  align-items: flex-start;
}

.apply-alert {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 0.9rem;
}

.apply-alert i {
  font-size: 1rem;
}

.apply-alert-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.apply-card {
  position: relative;
  border: 1px solid #ecedf3;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.03), 0 14px 28px -24px rgba(16, 16, 16, 0.45);
}

/* --- Form card --- */
.apply-form-card {
  overflow: hidden;
}

.apply-form-head {
  padding: 22px 32px 20px;
  border-bottom: 1px solid #f1f2f7;
  background: linear-gradient(135deg, #fdf5f8 0%, var(--white) 70%);
}

.apply-progress {
  position: relative;
}

/* The rail is behind the row of steps and is measured to stop at the centre of
   the first and last disc, so a full bar lines up with the last step rather
   than running past it into the padding. */
.apply-progress-track {
  position: absolute;
  top: 17px;
  left: 16.6%;
  right: 16.6%;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: #ebedf3;
}

.apply-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 60%, var(--primary-dark));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.apply-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.apply-step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #e6e8f0;
  border-radius: 50%;
  background: var(--white);
  color: #a8afbd;
  font-size: 0.8rem;
  font-weight: 700;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The tick and the numeral occupy the same cell and cross-fade, so the disc
   never changes size as a step completes. */
.apply-step-num i,
.apply-step-num b {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.apply-step-num i {
  opacity: 0;
  transform: scale(0.6);
  font-size: 0.78rem;
}

.apply-step.is-done .apply-step-num {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  transform: scale(1.06);
  box-shadow: 0 10px 20px -8px rgba(152, 28, 78, 0.8);
}

.apply-step.is-done .apply-step-num i {
  opacity: 1;
  transform: none;
}

.apply-step.is-done .apply-step-num b {
  opacity: 0;
  transform: scale(0.6);
}

.apply-step-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #979eac;
  transition: color 0.35s ease;
}

.apply-step.is-done .apply-step-label {
  font-weight: 600;
  color: var(--heading-color);
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 32px 32px;
}

.apply-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.apply-section-label i {
  font-size: 0.86rem;
}

.apply-divider {
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(90deg, #eef0f5, rgba(238, 240, 245, 0));
}

.apply-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.apply-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.apply-label {
  font-size: 0.81rem;
  font-weight: 600;
  color: #4d5665;
}

.req {
  color: var(--primary);
}

.apply-optional-tag {
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #a8afbd;
}

.apply-input-box {
  position: relative;
}

.apply-input-box .input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #b7bec9;
  pointer-events: none;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-input-box:focus-within .input-icon {
  color: var(--primary);
  transform: translateY(-50%) scale(1.1);
}

.apply-input-box .apply-input {
  padding-left: 42px;
}

.apply-input,
.apply-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e4e7ee;
  border-radius: 12px;
  background: #fafbfc;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--heading-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.apply-input:focus,
.apply-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(152, 28, 78, 0.09);
}

.apply-input::placeholder,
.apply-textarea::placeholder {
  color: #c3cad4;
}

.apply-textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.7;
}

.apply-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  color: #b0b7c3;
  pointer-events: none;
  transition: color 0.3s ease;
}

.apply-counter.is-near {
  color: var(--primary);
}

.apply-field-error {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #b42318;
}

/* --- Dropzone ---
   The three rows below are swapped by toggling [hidden], and each one sets its
   own display, which outranks the UA stylesheet's [hidden] rule - without this
   the empty "file attached" row sits under the browse prompt from the moment
   the page loads. */
.apply-dropzone-content[hidden],
.apply-dropzone-file[hidden],
.apply-field-error[hidden] {
  display: none;
}

.apply-dropzone {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  border: 2px dashed #dfe3ea;
  border-radius: 16px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-dropzone:hover {
  border-color: var(--primary);
  background: #fdf5f8;
}

/* Lifted while a file is over it, so the box visibly accepts the drop rather
   than only changing shade under the cursor. */
.apply-dropzone.is-dragging {
  border-color: var(--primary);
  border-style: solid;
  background: #fdeef4;
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 32px -20px rgba(152, 28, 78, 0.85);
}

.apply-dropzone.has-file {
  padding: 14px 16px;
  border-style: solid;
  border-color: rgba(22, 163, 74, 0.28);
  background: #f4fdf7;
}

.apply-dropzone.has-error {
  border-color: rgba(180, 35, 24, 0.4);
  background: #fef4f3;
}

.apply-dropzone-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.apply-dropzone-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(135deg, #fdeef4, #fbe0ec);
  box-shadow: inset 0 0 0 1px rgba(152, 28, 78, 0.08);
  color: var(--primary);
  font-size: 1.3rem;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.apply-dropzone:hover .apply-dropzone-icon,
.apply-dropzone.is-dragging .apply-dropzone-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 24px -12px rgba(152, 28, 78, 0.85);
}

.apply-dropzone-title {
  margin: 0;
  font-size: 0.9rem;
  color: #4d5665;
}

.apply-dropzone-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apply-dropzone-hint {
  margin: 4px 0 0;
  font-size: 0.77rem;
  color: #a8afbd;
}

.apply-dropzone-file {
  display: flex;
  align-items: center;
  gap: 13px;
}

.apply-file-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef2f7;
  color: #6b7482;
  font-size: 1.05rem;
}

.apply-file-icon.is-pdf {
  background: #fef2f2;
  color: #dc2626;
}

.apply-file-icon.is-doc {
  background: #eff6ff;
  color: #2563eb;
}

.apply-file-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.apply-file-name {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  color: #166534;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apply-file-size {
  font-size: 0.74rem;
  color: #7f8896;
}

.apply-dropzone-remove {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}

.apply-dropzone-remove:hover {
  background: #dc2626;
  color: var(--white);
  transform: rotate(90deg);
}

/* --- Submit --- */
.apply-submit-btn {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  padding: 16px 32px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 52%, var(--primary-light));
  background-size: 190% 100%;
  background-position: 0 0;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.95);
  transition:
    background-position 0.55s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.apply-submit-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transition: left 0.6s ease;
}

.apply-submit-btn:hover::before,
.apply-submit-btn:focus-visible::before {
  left: 110%;
}

.apply-submit-btn:hover,
.apply-submit-btn:focus-visible {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

.apply-submit-btn:active {
  transform: translateY(-1px);
}

/* Label and spinner share one grid cell, so swapping them cannot change the
   button's size and make the page jump as it submits. */
.apply-submit-label,
.apply-submit-spinner {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.apply-submit-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.apply-submit-label i {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-submit-btn:hover .apply-submit-label i {
  transform: translateX(3px) translateY(-3px);
}

.apply-submit-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  opacity: 0;
  animation: apply-spin 0.7s linear infinite;
}

@keyframes apply-spin {
  to { transform: rotate(360deg); }
}

.apply-submit-btn.is-loading {
  cursor: progress;
  transform: none;
}

.apply-submit-btn.is-loading .apply-submit-label {
  opacity: 0;
  transform: scale(0.95);
}

.apply-submit-btn.is-loading .apply-submit-spinner {
  opacity: 1;
}

.apply-submit-btn:disabled {
  box-shadow: 0 8px 20px -12px rgba(152, 28, 78, 0.7);
}

.apply-form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #979eac;
  text-align: center;
}

.apply-form-note i {
  font-size: 0.72rem;
  color: #16a34a;
}

/* --- Sidebar --- */
.apply-info-col {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.apply-job-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
}

.apply-job-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
}

.apply-job-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.apply-job-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 12px 22px -12px rgba(152, 28, 78, 0.95);
  color: var(--white);
  font-size: 1.05rem;
}

.apply-job-title {
  margin-bottom: 7px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--heading-color);
}

.apply-job-dept {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid rgba(152, 28, 78, 0.12);
  border-radius: 999px;
  background: #fdeef4;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.apply-job-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #eef0f6;
  border-radius: 14px;
  background: var(--light-bg);
}

.apply-job-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.apply-meta-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(16, 16, 16, 0.07);
  color: var(--primary);
  font-size: 0.8rem;
}

.apply-meta-icon.deadline-icon {
  background: #fff7ed;
  color: #b45309;
}

.apply-meta-icon.open-icon {
  background: #f0fdf4;
  color: #16a34a;
}

.apply-meta-icon.closed-icon {
  background: #f4f5f8;
  color: #8b929f;
}

.apply-meta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.apply-meta-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a0a7b5;
}

.apply-meta-val {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading-color);
}

.apply-meta-deadline {
  font-weight: 600;
  color: #b45309;
}

.apply-meta-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #16a34a;
}

.apply-meta-closed {
  font-weight: 600;
  color: #6f7683;
}

/* --- Closed posting ---
   Takes the place of the whole form when the closing date has gone by. Sized
   and shaped like the form card it replaces, so the page does not collapse to
   a strip of text where the application used to be. */
.apply-closed-card {
  padding: 56px 40px;
  text-align: center;
}

.apply-closed-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #f1f2f6, #e7e9ef);
  box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.05);
  color: #98a0ad;
  font-size: 1.7rem;
}

.apply-closed-title {
  margin-bottom: 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.apply-closed-text {
  max-width: 460px;
  margin: 0 auto 28px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--body-text);
}

.apply-closed-text strong {
  font-weight: 600;
  color: var(--heading-color);
}

.apply-closed-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.apply-closed-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.89rem;
  font-weight: 600;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.apply-closed-btn:hover,
.apply-closed-btn:focus-visible {
  transform: translateY(-3px);
}

.apply-closed-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 28px -14px rgba(152, 28, 78, 0.9);
}

.apply-closed-btn-primary:hover,
.apply-closed-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 20px 34px -16px rgba(152, 28, 78, 0.95);
}

.apply-closed-btn-ghost {
  border-color: var(--border-color);
  background: var(--white);
  color: var(--heading-color);
}

.apply-closed-btn-ghost:hover,
.apply-closed-btn-ghost:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.apply-desc-card,
.apply-process-card {
  padding: 24px 26px;
}

.apply-card-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f2f7;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--heading-color);
}

.apply-card-heading i {
  font-size: 0.86rem;
  color: var(--primary);
}

/* Justified, like every other block of body copy on this site. */
.apply-desc-content {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--body-text);
  text-align: justify;
}

.apply-desc-content p {
  margin-bottom: 10px;
}

.apply-desc-content p:last-child {
  margin-bottom: 0;
}

.apply-process-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: apply-step;
}

.apply-process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 0;
}

/* One line joining the discs down the list, stopping short of the last so it
   does not trail off into the padding below it. */
.apply-process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 16px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(152, 28, 78, 0.22), rgba(152, 28, 78, 0.06));
}

.apply-process-num {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fdeef4, #fbe0ec);
  box-shadow: inset 0 0 0 1px rgba(152, 28, 78, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  counter-increment: apply-step;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.apply-process-step:hover .apply-process-num {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  transform: scale(1.08);
  box-shadow: 0 10px 20px -9px rgba(152, 28, 78, 0.85);
}

.apply-process-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.apply-process-text strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--heading-color);
}

.apply-process-text span {
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--body-text);
}

/* --- Reveal on scroll ---
   An animation with a backwards fill rather than a transition, for the same
   reason the careers cards use one: the stagger must not survive into the
   hover state. */
.apply-reveal {
  opacity: 0;
}

.apply-reveal.is-in {
  opacity: 1;
  animation: apply-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--apply-delay, 0ms) backwards;
}

@keyframes apply-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Narrower screens --- */
@media (max-width: 992px) {
  .apply-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Stacked, with the form first. Somebody on this page has already read the
     card they clicked and pressed Apply, so the description and the process
     notes follow the form rather than standing between the header and the
     first field. */
  .apply-info-col {
    position: static;
  }

  /* The header already names the role, so the sidebar's copy of it would be
     the same title twice in a row. */
  .apply-job-card {
    display: none;
  }
}

@media (max-width: 640px) {
  .apply-hero {
    padding: 26px 0 32px;
  }

  .apply-hero-main {
    gap: 14px;
  }

  .apply-hero-icon {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
  }

  .apply-main {
    padding: 28px 0 60px;
  }

  .apply-form {
    padding: 24px 20px 26px;
  }

  .apply-form-head {
    padding: 20px 18px 16px;
  }

  .apply-progress-track {
    left: 16.6%;
    right: 16.6%;
  }

  .apply-step-label {
    font-size: 0.72rem;
  }

  .apply-field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .apply-dropzone {
    padding: 22px 16px;
  }

  .apply-dropzone-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .apply-desc-card,
  .apply-process-card {
    padding: 20px;
  }

  .apply-closed-card {
    padding: 42px 22px;
  }

  .apply-closed-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply-hero-grid {
    display: none;
  }

  .apply-hero-glow,
  .apply-open-dot,
  .apply-submit-spinner {
    animation: none;
  }

  /* Without the spin it still has to read as "working", so it becomes a plain
     ring rather than nothing at all. */
  .apply-submit-spinner {
    border-color: rgba(255, 255, 255, 0.55);
    border-top-color: var(--white);
  }

  .apply-reveal {
    opacity: 1;
  }

  .apply-reveal.is-in {
    animation: none;
  }

  .apply-progress-fill {
    transition: none;
  }

  .apply-back-arrow,
  .apply-input-box .input-icon,
  .apply-dropzone,
  .apply-dropzone-icon,
  .apply-dropzone-remove,
  .apply-step-num,
  .apply-submit-btn,
  .apply-submit-btn::before,
  .apply-submit-label i,
  .apply-closed-btn,
  .apply-process-num {
    transition: none;
  }

  .apply-back:hover .apply-back-arrow,
  .apply-closed-btn:hover,
  .apply-closed-btn:focus-visible,
  .apply-dropzone.is-dragging,
  .apply-dropzone:hover .apply-dropzone-icon,
  .apply-dropzone.is-dragging .apply-dropzone-icon,
  .apply-dropzone-remove:hover,
  .apply-step.is-done .apply-step-num,
  .apply-submit-btn:hover,
  .apply-submit-btn:focus-visible,
  .apply-submit-btn:hover .apply-submit-label i,
  .apply-input-box:focus-within .input-icon,
  .apply-process-step:hover .apply-process-num {
    transform: none;
  }

  .apply-submit-btn:hover::before,
  .apply-submit-btn:focus-visible::before {
    left: -110%;
  }
}

/* ===== Branches Page ===== */
.branches-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.branch-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.branch-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.branch-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.branch-card:hover .branch-card-img img {
  transform: scale(1.05);
}

.branch-card-placeholder {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch-card-placeholder i {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.5);
}

.branch-card-body {
  padding: 24px;
}

.branch-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}

.branch-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.25);
}

.branch-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.branch-card-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.branch-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.branch-detail-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.82rem;
  flex-shrink: 0;
  border: 1px solid #f1f5f9;
}

.branch-detail-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 1px;
}

.branch-detail-val {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}

.branch-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.branch-map-btn:hover {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.25);
}

.branch-map-btn i:first-child {
  font-size: 0.9rem;
}

.branch-map-btn i:last-child {
  font-size: 0.78rem;
  transition: transform 0.3s ease;
}

.branch-map-btn:hover i:last-child {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .branches-grid {
    grid-template-columns: 1fr;
  }

  .branch-card-img {
    height: 180px;
  }
}

/* ===== Appointment Page ===== */
.apt-alert {
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.apt-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: flex-start;
}

.apt-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

/* Form Card */
.apt-form-card {
  padding: 0;
  overflow: hidden;
}

.apt-form-head {
  padding: 24px 32px;
  background: linear-gradient(135deg, #fdf6f9 0%, #f8fafc 100%);
  border-bottom: 1px solid #f1f5f9;
}

.apt-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.apt-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.apt-step.active {
  opacity: 1;
}

.apt-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.apt-step.active .apt-step-num {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.25);
}

.apt-step span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

.apt-step.active span {
  color: #0f172a;
}

.apt-step-line {
  width: 48px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 16px;
  border-radius: 2px;
}

.apt-form {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.apt-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.apt-section-label i {
  font-size: 0.88rem;
}

.apt-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

.apt-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.apt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apt-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.1px;
}

.apt-optional {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: 0;
}

.apt-input-box {
  position: relative;
}

.apt-input-box .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b0b8c4;
  font-size: 0.85rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.apt-input-box .apt-input {
  padding-left: 40px;
}

.apt-input-box:focus-within .input-icon {
  color: var(--primary);
}

.apt-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #0f172a;
  background: #fafbfc;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  appearance: none;
  -webkit-appearance: none;
}

.apt-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(152, 28, 78, 0.07);
  background: #ffffff;
}

.apt-input::placeholder {
  color: #c1c9d4;
}

select.apt-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.apt-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #0f172a;
  background: #fafbfc;
  resize: vertical;
  min-height: 110px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apt-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(152, 28, 78, 0.07);
  background: #ffffff;
}

.apt-textarea::placeholder {
  color: #c1c9d4;
}

.apt-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 24px rgba(152, 28, 78, 0.28);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.apt-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.apt-submit-btn:hover::before {
  left: 100%;
}

.apt-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(152, 28, 78, 0.4);
}

.apt-submit-btn:active {
  transform: translateY(0);
}

.apt-submit-btn i {
  transition: transform 0.3s ease;
}

.apt-submit-btn:hover i {
  transform: translateX(3px) translateY(-3px);
}

/* Info Sidebar */
.apt-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}

.apt-info-card {
  padding: 24px 28px;
}

.apt-card-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f1f5f9;
}

.apt-card-heading i {
  color: var(--primary);
  font-size: 0.9rem;
}

.apt-info-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apt-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.apt-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.85rem;
  flex-shrink: 0;
  border: 1px solid #f1f5f9;
}

.apt-info-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 1px;
}

.apt-info-val {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}

/* Process Card */
.apt-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.apt-process-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.apt-process-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.apt-process-step:first-child {
  padding-top: 0;
}

.apt-process-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(152, 28, 78, 0.2);
}

.apt-process-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.apt-process-text strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.apt-process-text span {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* Contact Card */
.apt-contact-card {
  background: linear-gradient(135deg, #fdf6f9 0%, #ffffff 50%);
}

.apt-contact-text {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 16px;
}

.apt-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(152, 28, 78, 0.22);
}

.apt-call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(152, 28, 78, 0.35);
  color: #ffffff;
}

@media (max-width: 992px) {
  .apt-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .apt-info-col {
    position: static;
    order: -1;
  }

  .apt-info-col .apt-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  }
}

@media (max-width: 640px) {
  .apt-form {
    padding: 24px 20px;
  }

  .apt-form-head {
    padding: 20px;
  }

  .apt-field-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .apt-step span {
    display: none;
  }

  .apt-info-card {
    padding: 20px;
  }
}

/* ===== Contact Page (contact.php) =====
   A split page rather than a stack: a dark panel pinned down the left carrying
   the hospital's name for itself and the four ways of reaching it, and the form
   and the map scrolling past on the right. The phone number is therefore on
   screen for the whole of the scroll, which is the one thing a hospital contact
   page has to get right.

   The language is editorial - hairlines instead of cards, small caps labels,
   thin large headings, arrows - so it reads as a quieter relative of the
   careers pages rather than a copy of them. It borrows their crr-drift,
   crr-float-a and crr-shine keyframes instead of declaring three more that do
   the same thing.

   --ct-mx / --ct-my are written by the page's pointermove handler as
   percentages across the dark panel and drive the light that follows the
   cursor. They default to the top left, so a panel nobody has pointed at - and
   every panel on a touch screen, where that handler never runs - still looks
   deliberate.

   Everything that moves animates transform, opacity or a background position,
   and all of it is switched off in the prefers-reduced-motion block at the end
   of this section. */

.ct-split {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: start;
  background: var(--white);
}

/* --- The pinned panel ---
   102px is the sticky header's height, so the panel comes to rest exactly
   underneath it rather than sliding behind it. It is allowed to scroll inside
   itself: on a short laptop the four routes plus the heading are taller than
   what is left of the viewport, and without this the foot of the panel would be
   unreachable for as long as it stayed pinned. */
.ct-panel {
  --ct-mx: 18%;
  --ct-my: 22%;
  position: sticky;
  top: 102px;
  isolation: isolate;
  overflow: hidden auto;
  display: flex;
  height: calc(100vh - 102px);
  min-height: 560px;
  background:
    radial-gradient(120% 120% at 12% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(160deg, #5c0d2d 0%, #981c4e 54%, #6b1036 100%);
  color: var(--white);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.ct-panel::-webkit-scrollbar {
  width: 6px;
}

.ct-panel::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.24);
}

/* The layer that holds the decoration. Every one of the three below reaches
   past the edges of the panel, and the panel scrolls, so anything not clipped
   here counts as scrollable overflow: without this the panel carried a
   scrollbar of its own over several hundred pixels of empty maroon, and the
   wheel scrolled that instead of the page. Clipping them also keeps their
   stacking to themselves, which is why none of them needs a z-index. */
.ct-panel-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* A fine grid panning behind the copy. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the panel. */
.ct-panel-grid {
  position: absolute;
  inset: -40% -30%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(64% 58% at 42% 40%, #000, transparent 100%);
  mask-image: radial-gradient(64% 58% at 42% 40%, #000, transparent 100%);
  animation: crr-drift 26s linear infinite;
}

/* Drawn as a radial gradient rather than a solid circle under a blur filter -
   the gradient is soft on its own, and blurring a 500px box every frame is the
   one thing on this page a mid-range phone would actually feel. */
.ct-panel-glow {
  position: absolute;
  top: -180px;
  left: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.38), rgba(255, 126, 178, 0) 68%);
  animation: crr-float-a 21s ease-in-out infinite;
}

/* The light that follows the cursor. Faint on purpose: any stronger and it
   would wash out the paragraph underneath it. */
.ct-panel-sheen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--ct-mx) var(--ct-my),
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0) 64%
  );
  transition: opacity 0.5s ease;
}

.ct-panel:hover .ct-panel-sheen {
  opacity: 1;
}

/* Held against the inner edge of the panel, so the two halves of the page meet
   on one axis down the middle instead of drifting apart on a wide screen. */
.ct-panel-inner {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: auto 0 auto auto;
  padding: 64px 58px 64px 44px;
}

/* --- Shared small-caps label --- */
.ct-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

.ct-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: translateY(-50%);
}

.ct-eyebrow-light {
  color: rgba(255, 255, 255, 0.72);
}

.ct-eyebrow-light::before {
  background: rgba(255, 255, 255, 0.55);
}

.ct-panel-title {
  margin-bottom: 18px;
  font-size: clamp(1.9rem, 2.9vw, 2.85rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--white);
}

.ct-panel-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave the word invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ct-panel-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: crr-shine 7s linear infinite;
  }
}

.ct-panel-lede {
  margin-bottom: 34px;
  font-size: 0.95rem;
  line-height: 1.82;
  color: rgba(255, 255, 255, 0.78);
  text-align: justify;
}

/* --- The four routes ---
   Hairline rules rather than four boxes: on a dark panel a border is enough to
   separate them, and a row of cards here would fight the form opposite. */
.ct-routes {
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ct-routes li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ct-route {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 14px 15px 16px;
  color: var(--white);
  transition: padding-left 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
}

.ct-route:hover,
.ct-route:focus-visible {
  padding-left: 24px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

/* Grows down the left edge from the middle out, so the row reads as being
   picked up rather than as something sliding in from the top. */
.ct-route-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #ffd7e6, rgba(255, 215, 230, 0.35));
  transform: scaleY(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-route:hover .ct-route-bar,
.ct-route:focus-visible .ct-route-bar {
  transform: scaleY(1);
}

.ct-route-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
  transition: color 0.3s ease;
}

.ct-route-label i {
  width: 14px;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-route:hover .ct-route-label,
.ct-route:focus-visible .ct-route-label {
  color: rgba(255, 255, 255, 0.85);
}

.ct-route:hover .ct-route-label i,
.ct-route:focus-visible .ct-route-label i {
  color: #ffd7e6;
  transform: scale(1.14);
}

.ct-route-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ct-route-val {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  word-break: break-word;
}

/* The line of explanation under each route. Present from the start rather than
   revealed on hover: it is there to help someone choose, which is a decision
   they make before they point at anything. */
.ct-route-note {
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.ct-route-arrow {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.ct-route:hover .ct-route-arrow,
.ct-route:focus-visible .ct-route-arrow {
  opacity: 1;
  transform: none;
  color: #ffd7e6;
}

/* --- Foot of the panel --- */
.ct-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border: 1px solid rgba(134, 239, 172, 0.4);
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.2);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #dcfce7;
}

/* statusPulse is declared in the Animations section near the top of this file
   and is the same dot the doctors' cards use for "available". */
.ct-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: statusPulse 2s infinite;
}

.ct-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.ct-panel-link span {
  font-weight: 700;
  color: var(--white);
  /* The figure counts up on arrival, and tabular digits stop the words after it
     shifting sideways as the number passes 9. */
  font-variant-numeric: tabular-nums;
}

.ct-panel-link i {
  font-size: 0.72rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-panel-link:hover,
.ct-panel-link:focus-visible {
  color: var(--white);
}

.ct-panel-link:hover i,
.ct-panel-link:focus-visible i {
  transform: translateY(4px);
}

/* --- The scrolling half --- */
.ct-body {
  background: var(--white);
}

/* Held against the inner edge, opposite the panel's inner edge, so both halves
   of the page share one central axis. */
.ct-body-inner {
  max-width: 660px;
  margin-right: auto;
  padding: 66px 48px 92px 58px;
}

.ct-block + .ct-block {
  margin-top: 66px;
  padding-top: 58px;
  border-top: 1px solid var(--border-color);
}

.ct-block {
  /* Both in-page links land under a sticky 102px header otherwise. */
  scroll-margin-top: 122px;
}

.ct-block-title {
  margin-bottom: 26px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}

.ct-block-title strong {
  font-weight: 700;
  color: var(--primary);
}

/* --- Flash panels ---
   The confirmation is the most important thing on the page the moment it
   exists, so it is drawn as a panel rather than as the site's plain alert bar. */
.ct-flash {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 32px;
  padding: 18px 22px;
  border-radius: 16px;
  animation: ct-flash-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes ct-flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.ct-flash-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--white);
  font-size: 0.82rem;
}

.ct-flash-title {
  display: block;
  margin-bottom: 2px;
  font-size: 0.94rem;
  font-weight: 700;
}

.ct-flash-text {
  font-size: 0.86rem;
  line-height: 1.65;
}

.ct-flash-success {
  border: 1px solid #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4, #ffffff 70%);
}

.ct-flash-success .ct-flash-icon {
  background: linear-gradient(135deg, #15803d, #22c55e);
  box-shadow: 0 10px 20px -10px rgba(21, 128, 61, 0.9);
  /* One pass only: it marks the moment the reply landed, and a tick that never
     stops pulsing turns into a fault light. */
  animation: ct-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}

@keyframes ct-pop {
  from { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.ct-flash-success .ct-flash-title { color: #14532d; }
.ct-flash-success .ct-flash-text  { color: #166534; }

.ct-flash-error {
  border: 1px solid #fecaca;
  background: linear-gradient(135deg, #fef2f2, #ffffff 70%);
}

.ct-flash-error .ct-flash-icon {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  box-shadow: 0 10px 20px -10px rgba(185, 28, 28, 0.9);
}

.ct-flash-error .ct-flash-title { color: #7f1d1d; }
.ct-flash-error .ct-flash-text  { color: #991b1b; }

/* --- The gauge above the form --- */
.ct-gauge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.ct-gauge-rail {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border-color);
}

.ct-gauge-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 60%, var(--primary-dark));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-gauge-text {
  flex: 0 0 auto;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8afbd;
}

/* --- Form --- */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ct-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The legend is a flex item like the pills, so it has to be told to take a whole
   row of its own or the first pill sits beside it. */
.ct-legend {
  flex: 1 0 100%;
  margin-bottom: 2px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6f7683;
}

.ct-pill {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Kept in the document rather than display:none, so the group is still
   reachable by keyboard and the arrow keys still move between the options. */
.ct-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The fill wipes in from the left rather than the colour simply switching, so
   choosing a subject reads as a state arriving. */
.ct-pill-face {
  position: relative;
  /* The fill below sits at z-index -1 so it passes behind the label as well as
     behind the icon - the label is a bare text node, which cannot be lifted
     above it the way an element can. Isolating here keeps that -1 inside the
     pill instead of dropping it behind the page. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 9px 18px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--heading-color);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-pill-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-pill-face i {
  font-size: 0.82rem;
  opacity: 0.75;
}

.ct-pill:hover .ct-pill-face {
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.ct-pill:hover .ct-pill-face::before,
.ct-pill input:checked + .ct-pill-face::before {
  transform: scaleX(1);
}

.ct-pill input:checked + .ct-pill-face {
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 10px 22px -10px rgba(152, 28, 78, 0.85);
}

.ct-pill input:focus-visible + .ct-pill-face {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* --- Fields ---
   Underlined rather than boxed, with the label resting over the empty box and
   lifting out of the way as soon as there is something to read. The lift is
   driven by :placeholder-shown, which is why every control carries a
   placeholder of one space - with no placeholder at all the selector never
   matches and the label sits on top of the typing. */
.ct-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.ct-field {
  position: relative;
  padding-top: 20px;
}

.ct-input {
  display: block;
  width: 100%;
  padding: 6px 0 11px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: var(--heading-color);
  transition: border-color 0.3s ease;
}

.ct-input:focus {
  outline: none;
}

.ct-label {
  position: absolute;
  top: 26px;
  left: 0;
  font-size: 1rem;
  color: #a8afbd;
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

.ct-input:not(:placeholder-shown) + .ct-label {
  transform: translateY(-26px) scale(0.76);
  color: #8b929f;
}

/* After the rule above, so focus wins over merely being filled in. */
.ct-input:focus + .ct-label {
  transform: translateY(-26px) scale(0.76);
  color: var(--primary);
}

/* The line that draws itself under the field on focus. It sits on top of the
   resting border rather than replacing it, so nothing shifts by a pixel as it
   arrives. */
.ct-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-input:focus ~ .ct-line {
  transform: scaleX(1);
}

/* Flagged by the page's own check rather than by :invalid, which would paint
   every empty required field red before anyone had typed a character. */
.ct-input.is-invalid {
  border-bottom-color: #e8918e;
  animation: ct-nudge 0.4s ease;
}

.ct-input.is-invalid + .ct-label {
  color: #b42318;
}

@keyframes ct-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.ct-textarea {
  min-height: 132px;
  padding-bottom: 30px;
  resize: vertical;
  line-height: 1.75;
}

.ct-field-message {
  /* The counter sits over the foot of the box, so the box needs the room. */
  padding-bottom: 0;
}

.ct-counter {
  position: absolute;
  right: 0;
  bottom: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #c3cad4;
  pointer-events: none;
  transition: color 0.3s ease;
}

.ct-counter.is-near {
  color: var(--primary);
}

/* --- The one-of-these-two hint ---
   Three states in one line: asking, satisfied, and unhappy. */
.ct-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: -14px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: #979eac;
  transition: color 0.3s ease;
}

/* The two glyphs share one grid cell, so swapping them cannot move the words
   beside them sideways. */
.ct-hint-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
}

.ct-hint-icon i {
  grid-area: 1 / 1;
  font-size: 0.82rem;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-hint .ct-hint-ok {
  opacity: 0;
  transform: scale(0.6);
  color: #16a34a;
}

.ct-hint.is-met .ct-hint-info {
  opacity: 0;
  transform: scale(0.6);
}

.ct-hint.is-met .ct-hint-ok {
  opacity: 1;
  transform: none;
}

.ct-hint.is-met {
  color: #16a34a;
}

.ct-hint.is-error,
.ct-hint.is-error .ct-hint-info {
  color: #b42318;
}

/* --- Submit --- */
.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.ct-submit {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 15px 34px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 52%, var(--primary-light));
  background-size: 190% 100%;
  background-position: 0 0;
  color: var(--white);
  font-size: 0.93rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.95);
  transition:
    background-position 0.55s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.ct-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  transition: left 0.6s ease;
}

.ct-submit:hover::before,
.ct-submit:focus-visible::before {
  left: 110%;
}

.ct-submit:hover,
.ct-submit:focus-visible {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

.ct-submit:active {
  transform: translateY(-1px);
}

/* Label and spinner share one grid cell, so swapping them cannot change the
   button's size and make the row jump as it submits. */
.ct-submit-label,
.ct-submit-spinner {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ct-submit-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.ct-submit-label i {
  font-size: 0.8rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-submit:hover .ct-submit-label i {
  transform: translateX(5px);
}

.ct-submit-spinner {
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  opacity: 0;
  animation: apply-spin 0.7s linear infinite;
}

.ct-submit.is-loading {
  cursor: progress;
  transform: none;
}

.ct-submit.is-loading .ct-submit-label {
  opacity: 0;
  transform: scale(0.95);
}

.ct-submit.is-loading .ct-submit-spinner {
  opacity: 1;
}

.ct-submit:disabled {
  box-shadow: 0 8px 20px -12px rgba(152, 28, 78, 0.7);
}

.ct-note {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.77rem;
  line-height: 1.6;
  color: #979eac;
}

.ct-note i {
  font-size: 0.72rem;
  color: #16a34a;
}

/* --- What happens next ---
   Numbered rather than bulleted, and the numerals are the only decoration: on a
   page already carrying a dark panel and a map, three more icons would be noise. */
.ct-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ct-step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

.ct-step:last-child {
  border-bottom: 1px solid var(--border-color);
}

.ct-step-num {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-step:hover .ct-step-num {
  transform: translateX(4px);
}

.ct-step-title {
  display: block;
  margin-bottom: 3px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--heading-color);
}

.ct-step-text {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--body-text);
  text-align: justify;
}

/* --- Map --- */
.ct-map {
  position: relative;
  margin: 0 0 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--light-bg);
}

.ct-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  /* Google's own frame is a touch more saturated than anything else on the
     page. Pulling it back settles it into the section without making it look
     broken, and it comes back to full colour when it is being used. */
  filter: saturate(0.9) contrast(1.02);
  transition: filter 0.5s ease;
}

.ct-map:hover iframe {
  filter: none;
}

/* There is no hover on a touch screen, so the map would sit muted forever.
   It is the only copy of the map on the page, so it gets its colour back. */
@media (hover: none) {
  .ct-map iframe {
    filter: none;
  }
}

.ct-map-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--white);
}

.ct-map-place {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ct-map-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a0a7b5;
}

.ct-map-val {
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading-color);
}

.ct-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--primary);
  transition: background-color 0.35s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.ct-map-btn i {
  font-size: 0.7rem;
}

.ct-map-btn:hover,
.ct-map-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 12px 24px -12px rgba(152, 28, 78, 0.9);
}

/* --- Branches ---
   The same hairline rows as the routes on the panel, in the light palette. */
.ct-places {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ct-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border-color);
}

.ct-place:last-child {
  border-bottom: 1px solid var(--border-color);
}

.ct-place-id {
  min-width: 0;
}

.ct-place-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
}

.ct-place-addr {
  display: block;
  margin-top: 3px;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--body-text);
}

.ct-place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ct-place-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-bg);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-place-btn i {
  font-size: 0.72rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ct-place-btn:hover,
.ct-place-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.ct-place-btn:hover i,
.ct-place-btn:focus-visible i {
  color: var(--white);
}

/* The one of the pair that leaves the site. Outlined rather than filled, so the
   number beside it stays the first thing read. */
.ct-place-btn-map {
  background: transparent;
  border-color: rgba(152, 28, 78, 0.3);
  color: var(--primary);
}

.ct-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--primary);
}

.ct-more i {
  font-size: 0.76rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-more:hover i,
.ct-more:focus-visible i {
  transform: translateX(5px);
}

/* --- Reveal on scroll ---
   An animation rather than a transition, because the stagger has to come from
   a delay that does not survive into the hover state - a transition-delay of
   half a second would still be sitting on row eight long after it had settled,
   and every hover on it would start late. */
.ct-reveal {
  opacity: 0;
}

.ct-reveal.is-in {
  opacity: 1;
  animation: ct-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--ct-delay, 0ms) backwards;
}

@keyframes ct-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* --- Narrower screens --- */
@media (max-width: 1280px) {
  .ct-panel-inner {
    padding: 56px 40px 56px 32px;
  }

  .ct-body-inner {
    padding: 58px 40px 82px 44px;
  }

  .ct-route {
    grid-template-columns: 104px minmax(0, 1fr) auto;
  }
}

/* A short viewport - a 768-tall laptop, or a browser carrying two toolbars and
   a bookmarks bar. The pinned panel is sized by the viewport rather than by its
   contents, so on these the rhythm has to give a little or the badge at its
   foot ends up below the fold of its own panel. Guarded by a width as well,
   because below 1080 the panel is static and sized by what is in it. */
@media (min-width: 1081px) and (max-height: 940px) {
  .ct-panel-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .ct-panel-title {
    margin-bottom: 13px;
  }

  .ct-panel-lede {
    margin-bottom: 26px;
  }

  .ct-routes {
    margin-bottom: 26px;
  }

  .ct-route {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Shorter still - a laptop at 768, which is most of them. Tightening alone runs
   out around here, and what was left was a panel overflowing by a dozen pixels,
   which buys a scrollbar across the hospital's phone number in exchange for
   nothing. The line of explanation under each route is the one part of the
   panel that can go: every route keeps its name and its number, which is what
   anyone is here for. */
@media (min-width: 1081px) and (max-height: 880px) {
  .ct-route-note {
    display: none;
  }

  .ct-panel-lede {
    margin-bottom: 22px;
  }
}

@media (max-width: 1080px) {
  /* Below this there is no room for two columns worth of reading, so the panel
     stops being a panel: it becomes an ordinary block at the top of the page,
     sized by its contents rather than by the viewport, and nothing is pinned. */
  .ct-split {
    grid-template-columns: 1fr;
  }

  .ct-panel {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .ct-panel-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 58px 30px 56px;
  }

  .ct-body-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 54px 30px 80px;
  }
}

@media (max-width: 680px) {
  .ct-panel-inner {
    padding: 44px 20px 42px;
  }

  .ct-body-inner {
    padding: 42px 20px 64px;
  }

  /* The label column would leave the number almost no room of its own, so each
     route becomes two lines instead of three columns. All three children are
     placed by hand: the arrow carries a definite row, and grid places definite
     items before auto ones, so leaving the value to auto-placement would let
     the arrow take the column the value is meant to be in. */
  .ct-route {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 12px;
  }

  .ct-route-label {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .ct-route-main {
    grid-row: 2;
    grid-column: 1;
  }

  .ct-route-arrow {
    grid-row: 2;
    grid-column: 2;
    align-self: center;
  }

  .ct-field-row {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ct-block + .ct-block {
    margin-top: 48px;
    padding-top: 42px;
  }

  .ct-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .ct-map iframe {
    height: 290px;
  }

  .ct-submit {
    width: 100%;
  }
}

/* --- Motion turned down ---
   Everything above that drifts, pulses, shines or rises is decoration. The page
   has to read exactly the same without any of it, so each one is stopped rather
   than shortened, and anything that animates in is left in its finished state.
   The label lift is deliberately not listed: it is not decoration, it is the
   only thing telling you which box you are typing in. */
@media (prefers-reduced-motion: reduce) {
  .ct-panel-grid,
  .ct-panel-glow,
  .ct-live-dot,
  .ct-panel-title strong,
  .ct-flash,
  .ct-flash-success .ct-flash-icon,
  .ct-submit-spinner,
  .ct-input.is-invalid {
    animation: none !important;
  }

  .ct-panel-grid,
  .ct-panel-glow {
    opacity: 0.55;
  }

  .ct-panel-sheen {
    display: none;
  }

  .ct-reveal,
  .ct-reveal.is-in {
    opacity: 1;
    animation: none;
  }

  .ct-route:hover,
  .ct-route:focus-visible {
    padding-left: 16px;
  }

  .ct-pill:hover .ct-pill-face,
  .ct-submit:hover,
  .ct-submit:focus-visible,
  .ct-map-btn:hover,
  .ct-map-btn:focus-visible,
  .ct-place-btn:hover,
  .ct-place-btn:focus-visible,
  .ct-step:hover .ct-step-num {
    transform: none;
  }
}


/* ===== About Page Image Hover Effects =====
   The Home Care photo used to share this rule. It has its own frame now (see
   Home Care Services Page above) and this block sits later in the file, so it
   would win every declaration they have in common - hence About only here. */
.about-featured-img,
.about-section-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 24px;
}

.about-featured-img img,
.about-section-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
}

.about-featured-img:hover,
.about-section-img:hover {
  box-shadow: 0 16px 36px rgba(152, 28, 78, 0.16);
}

.about-featured-img:hover img,
.about-section-img:hover img {
  transform: scale(1.05);
}

/* ===== International Patients (international-patients.php) =====
   Built on the same parts as Careers and Contact: a gradient hero with
   decoration drifting behind it, alternating white and tinted bands, cards that
   lift under the cursor, and a reveal that staggers each row in as it arrives.
   Everything that moves animates transform, opacity or a background position -
   nothing that forces the browser to lay the page out again - and all of it is
   switched off in the prefers-reduced-motion block at the end of this section.

   The page is almost entirely CMS-managed, so every grid here is auto-fit and
   every band has to hold up whether the admin has put one item in it or nine. */

/* --- Bands --- */
.ipx-band {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
  background: var(--white);
}

.ipx-band.is-tint {
  background: var(--light-bg);
}

/* Each band also carries its own name - .ipx-split-band, .ipx-desk, .ipx-spec,
   .ipx-testi - so the four otherwise identical <section> lines in the page can
   be told apart at a glance. Only this one needs a rule of its own: the dots
   under the carousel read as part of the space below it, and on the shared
   padding the band ends up looking loose at the bottom. */
.ipx-testi {
  padding-bottom: 72px;
}

.ipx-band > .container {
  position: relative;
  z-index: 1;
}

/* A single soft light in the corner of a band. Drawn as a radial gradient
   rather than as a solid circle under a blur filter - the gradient is soft on
   its own, and blurring a 540px box is the one thing on this page a mid-range
   phone would actually feel. */
.ipx-orb {
  position: absolute;
  top: -220px;
  right: -170px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 28, 78, 0.07), rgba(152, 28, 78, 0) 70%);
  pointer-events: none;
}

.ipx-orb-left {
  top: auto;
  right: auto;
  bottom: -260px;
  left: -180px;
}

/* --- Shared headings --- */
.ipx-head {
  max-width: 760px;
  margin-bottom: 42px;
}

.ipx-head.is-centred {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ipx-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 11px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.ipx-eyebrow::before,
.ipx-head.is-centred .ipx-eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: translateY(-50%);
}

.ipx-eyebrow::before {
  left: 0;
}

/* Centred, the label needs a rule either side or it sits off to one side of its
   own dash. The right-hand one is a mirror of the left. */
.ipx-head.is-centred .ipx-eyebrow {
  padding-right: 32px;
}

.ipx-head.is-centred .ipx-eyebrow::after {
  right: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.ipx-title {
  margin-bottom: 14px;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--heading-color);
}

.ipx-title strong {
  font-weight: 700;
  color: var(--primary);
}

/* Justified, like every other block of body copy on this site, with the last
   line pulled back to the middle so a centred heading does not sit over a
   paragraph that ends ragged on the left. */
.ipx-lede {
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--body-text);
  text-align: justify;
  text-align-last: center;
}

/* --- Prose ---
   The intro copy and the care-desk introduction are pasted into the CMS from a
   word processor and arrive carrying their own inline font sizes and colours,
   which no selector here can outrank. What this can do is set the measure and
   the rhythm around them. */
.ipx-prose {
  font-size: 1.01rem;
  line-height: 1.9;
  color: var(--body-text);
  text-align: justify;
}

.ipx-prose p {
  margin: 0 0 16px;
}

.ipx-prose p:last-child {
  margin-bottom: 0;
}

.ipx-prose ul,
.ipx-prose ol {
  margin: 0 0 16px 22px;
}

.ipx-prose ul { list-style: disc; }
.ipx-prose ol { list-style: decimal; }

.ipx-prose li {
  margin-bottom: 7px;
}

.ipx-prose a {
  color: var(--primary);
  text-decoration: underline;
}

/* --- Buttons ---
   Three of them: white on the maroon panels, outlined on the same, and the
   house gradient for a light background. All share the lift and the sheen. */
.ipx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

.ipx-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.ipx-btn:hover::before,
.ipx-btn:focus-visible::before {
  left: 110%;
}

.ipx-btn > * {
  position: relative;
}

.ipx-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-btn:hover,
.ipx-btn:focus-visible {
  transform: translateY(-3px);
}

.ipx-btn:hover i,
.ipx-btn:focus-visible i {
  transform: scale(1.12);
}

.ipx-btn-solid {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.75);
}

.ipx-btn-solid:hover,
.ipx-btn-solid:focus-visible {
  color: var(--primary-dark);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.85);
}

.ipx-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.ipx-btn-ghost:hover,
.ipx-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.ipx-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.ipx-btn-primary:hover,
.ipx-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Hero --- */
.ipx-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 64px 0 66px;
  background:
    radial-gradient(120% 130% at 12% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
}

/* A fine grid panning behind everything. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.ipx-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(62% 62% at 45% 42%, #000, transparent 100%);
  mask-image: radial-gradient(62% 62% at 45% 42%, #000, transparent 100%);
  animation: ipx-drift 24s linear infinite;
}

@keyframes ipx-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

.ipx-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.ipx-hero-glow-a {
  top: -190px;
  right: -80px;
  width: 470px;
  height: 470px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.42), rgba(255, 126, 178, 0) 68%);
  animation: ipx-float-a 19s ease-in-out infinite;
}

.ipx-hero-glow-b {
  bottom: -250px;
  left: -140px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.26), rgba(255, 210, 130, 0) 68%);
  animation: ipx-float-b 23s ease-in-out infinite;
}

@keyframes ipx-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-64px, 44px, 0) scale(1.12); }
}

@keyframes ipx-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(74px, -52px, 0) scale(1.09); }
}

/* Wider than the site's usual 1200px container. The banner is 1533px of
   artwork, so the extra width is shown at native resolution rather than
   upscaled, and the stat bar under it keeps the same edges. */
.ipx-hero-inner {
  position: relative;
  max-width: 1340px;
}

/* The banner the admin uploads carries its own headline, so it is framed and
   lit rather than written over. width/height come off the file itself in the
   page, which is what reserves its shape before it lands. */
.ipx-hero-figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 40px 70px -36px rgba(0, 0, 0, 0.85);
  animation: ipx-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.ipx-hero-figure img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes ipx-hero-in {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* A slow light travelling across the frame. It starts well off one side and
   ends well off the other, then waits out the rest of the cycle, so it reads as
   an occasional glint rather than as something sweeping back and forth. */
.ipx-hero-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: ipx-sheen 9s ease-in-out infinite;
}

@keyframes ipx-sheen {
  0%       { background-position: 180% 0; }
  45%, 100% { background-position: -80% 0; }
}

/* The written hero. It is always in the markup - it is the page's heading - and
   with a banner up it is reduced to the screen-reader treatment on anything
   wide enough to read that banner. Reduced rather than removed: display:none
   would take the only <h1> on the page out of the document with it. */
.ipx-hero-copy {
  max-width: 820px;
  padding: 18px 0 6px;
}

@media (min-width: 769px) {
  .ipx-hero.has-banner .ipx-hero-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* And below that the two swap over: the banner is 1533px of artwork with its
   headline set into it, which on a phone comes down to wording a few pixels
   tall, so the words take over and the picture stands down. */
@media (max-width: 768px) {
  .ipx-hero.has-banner .ipx-hero-figure {
    display: none;
  }
}

.ipx-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.ipx-hero-title {
  margin: 21px 0 16px;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
}

.ipx-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised words. Guarded because without
   background-clip the same rules leave them invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ipx-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ipx-shine 7s linear infinite;
  }
}

@keyframes ipx-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

.ipx-hero-text {
  max-width: 660px;
  font-size: 1.04rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  text-align: justify;
}

/* --- The bar under the banner --- */
.ipx-hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  margin-top: 34px;
}

.ipx-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.ipx-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.ipx-stat-num {
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  /* The figure counts up on arrival, and tabular digits stop the label under it
     shifting sideways as the number passes 9. */
  font-variant-numeric: tabular-nums;
}

/* One of the three says its piece with a glyph rather than a figure. Sized down
   to the numerals' cap height so the row still reads as one line of headings. */
.ipx-stat-num i {
  font-size: 1.5rem;
  line-height: 1.5;
}

.ipx-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ipx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Nothing published yet --- */
.ipx-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 52px 30px;
  border: 1px dashed rgba(152, 28, 78, 0.28);
  border-radius: 24px;
  background: var(--light-bg);
  text-align: center;
}

.ipx-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.ipx-empty-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.ipx-empty-text {
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--body-text);
}

/* --- Text beside a picture --- */
.ipx-split {
  display: flex;
  align-items: center;
  gap: 54px;
}

.ipx-split.is-reverse {
  flex-direction: row-reverse;
}

/* A section with no picture is a column of prose, held to a comfortable measure
   rather than let out to the full width of the container. */
.ipx-split.is-single {
  display: block;
  max-width: 880px;
}

.ipx-split-media {
  position: relative;
  flex: 0 0 46%;
  max-width: 540px;
}

/* An outlined rectangle sitting a little behind and below the photograph. It is
   the one piece of decoration on this page that is purely a flourish, and it is
   drawn with a border rather than a shadow so it stays crisp at any size. */
.ipx-split-media::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -16px;
  bottom: -16px;
  width: 62%;
  height: 62%;
  border: 2px solid rgba(152, 28, 78, 0.22);
  border-radius: 24px;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-split-media:hover::after {
  transform: translate(6px, 6px);
}

.ipx-media-halo {
  position: absolute;
  z-index: -2;
  inset: -26px -26px -10px;
  border-radius: 34px;
  background: radial-gradient(60% 60% at 40% 35%, rgba(152, 28, 78, 0.16), rgba(152, 28, 78, 0) 72%);
  pointer-events: none;
}

.ipx-media-frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  box-shadow:
    0 2px 6px rgba(16, 16, 16, 0.05),
    0 30px 52px -30px rgba(16, 16, 16, 0.5);
  transition: box-shadow 0.5s ease;
}

.ipx-media-frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-split-media:hover .ipx-media-frame {
  /* Tinted rather than grey: a plain black shadow under a coloured photograph
     reads as dirt, and this one reads as the picture lifting off the page. */
  box-shadow:
    0 2px 6px rgba(16, 16, 16, 0.05),
    0 36px 60px -28px rgba(152, 28, 78, 0.55);
}

.ipx-split-media:hover .ipx-media-frame img {
  transform: scale(1.05);
}

.ipx-split-copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* No eyebrow on either of these - the CMS supplies a title and nothing else,
   so the rule that would sit beside a label goes above the heading instead.
   Only the left-aligned heads: the centred ones are written here rather than
   in the CMS and have a proper label of their own. */
.ipx-split-copy .ipx-title::before,
.ipx-head:not(.is-centred) .ipx-title::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 60%, var(--primary-dark));
}

.ipx-split-btn {
  margin-top: 28px;
}

/* --- Care desk ---
   Nothing of its own: the section uses .dept-checklist, the same ticked rows
   the department pages are built from, so the two read as one site. Only the
   reveal below is added, and that is applied by class in the markup. */
/* --- Enquiry strip --- */
.ipx-call-wrap {
  padding: 78px 0 84px;
  background: var(--white);
}

.ipx-call {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 32px;
  padding: 34px 46px;
  border-radius: 26px;
  background: linear-gradient(125deg, #5c0d2d, #981c4e 55%, #6b1036);
  box-shadow: 0 34px 62px -36px rgba(152, 28, 78, 0.95);
  color: var(--white);
}

.ipx-call-glow {
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -90px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 190, 0.4), rgba(255, 140, 190, 0) 68%);
  pointer-events: none;
  animation: ipx-float-a 21s ease-in-out infinite;
}

.ipx-call-copy {
  flex: 1 1 380px;
}

.ipx-call-label {
  margin-bottom: 12px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.ipx-call-phone {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--white);
}

.ipx-call-phone:hover,
.ipx-call-phone:focus-visible {
  color: var(--white);
}

.ipx-call-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 1.15rem;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* One ring leaving the handset, on a loop. It is a border scaling outwards as
   it fades, so nothing is repainted but this element. */
.ipx-call-ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  animation: ipx-ring 2.6s ease-out infinite;
}

@keyframes ipx-ring {
  0%       { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}

.ipx-call-phone:hover .ipx-call-ring,
.ipx-call-phone:focus-visible .ipx-call-ring {
  background: var(--white);
  color: var(--primary);
  transform: scale(1.06);
}

.ipx-call-num {
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
}

.ipx-call-btn {
  flex: none;
}

/* --- Specialities ---
   Almost nothing of its own: the section reuses the home page's
   .home-feature-grid frame and its .spec-grid of hairline cells, so the two
   pages present the departments identically.

   The one addition is this paragraph. The home page never puts body copy in
   that narrow left column - on About the text sits in the other one - so the
   heading above it has no gap to give, and .home-feature-text is sized for the
   wide column rather than this one. Justified, like the rest of the body copy
   on this page. */
.ipx-aside-text {
  margin-top: 20px;
  font-size: 0.97rem;
  line-height: 1.8;
  text-align: justify;
}

/* --- Testimonials --- */
.ipx-testi-stage {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 66px;
}

/* An opening mark at the head of the quote, sitting on the first line ahead of
   the first word - not a watermark floating over the top of the block. Sized
   and coloured to read as punctuation rather than as decoration, and lifted to
   the cap height of the line it opens. */
.ipx-testi-mark {
  margin-right: 10px;
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(152, 28, 78, 0.5);
  vertical-align: 0.3em;
  pointer-events: none;
}

.ipx-testi-viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* A vertical drag has to keep scrolling the page; only sideways belongs to
     the carousel. */
  touch-action: pan-y;
}

.ipx-testi-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-testi-slide {
  display: flex;
  flex: 0 0 100%;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  /* The top padding used to be clearing a watermark that no longer floats
     there, so it is back to a normal gap under the heading. */
  padding: 22px 8px 6px;
  text-align: center;
  opacity: 0.25;
  transform: scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-testi-slide.is-on {
  opacity: 1;
  transform: none;
}

.ipx-testi-quote {
  max-width: 720px;
  margin: 0 0 20px;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.95;
  color: var(--heading-color);
  text-align: justify;
  text-align-last: center;
}

.ipx-testi-stars {
  margin-bottom: 20px;
  color: #f5b301;
  font-size: 1.45rem;
  letter-spacing: 3px;
  line-height: 1;
}

.ipx-testi-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ipx-testi-avatar {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 3px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(152, 28, 78, 0.16), 0 16px 28px -16px rgba(16, 16, 16, 0.6);
}

.ipx-testi-avatar-blank {
  background: linear-gradient(135deg, #fdeef4, #f6dce8);
  color: var(--primary);
  font-size: 1.4rem;
}

.ipx-testi-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--heading-color);
}

.ipx-testi-arrow {
  position: absolute;
  top: 45%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 12px 24px -16px rgba(16, 16, 16, 0.8);
  transform: translateY(-50%);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipx-testi-prev { left: 0; }
.ipx-testi-next { right: 0; }

/* The arrows and the dots are drawn hidden and uncovered by the page's script,
   so with JavaScript off the first quote is simply on show rather than sitting
   under three controls that do nothing. display:grid/flex below would otherwise
   outrank the UA stylesheet's [hidden] rule and leave them on screen. */
.ipx-testi-arrow[hidden],
.ipx-testi-dots[hidden] {
  display: none;
}

.ipx-testi-arrow:hover,
.ipx-testi-arrow:focus-visible {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-color: transparent;
  color: var(--white);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 20px 32px -16px rgba(152, 28, 78, 0.9);
}

.ipx-testi-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

/* The dot for the quote on screen stretches into a bar, so the row says which
   one is up as well as how many there are. */
.ipx-testi-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(152, 28, 78, 0.22);
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
}

.ipx-testi-dot:hover {
  background: rgba(152, 28, 78, 0.45);
}

.ipx-testi-dot.is-on {
  width: 28px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* --- Reveal on scroll ---
   An animation rather than a transition, because the stagger has to come from a
   delay that does not survive into the hover state - a transition-delay of half
   a second would still be sitting on card six long after it had settled, and
   every hover on it would start late. With backwards fill the card holds the
   opening frame through its delay and is governed by nothing once the animation
   is over.

   The hidden state hangs off an attribute the page's script writes, not off the
   class in the markup: if that script never runs, the content is simply visible
   instead of stranded at opacity 0. */
.ipx-reveal[data-ipx-reveal] {
  opacity: 0;
}

.ipx-reveal[data-ipx-reveal].is-in {
  opacity: 1;
  animation: ipx-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--ipx-delay, 0ms) backwards;
}

@keyframes ipx-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Narrower screens --- */
@media (max-width: 992px) {
  .ipx-hero {
    padding: 52px 0 56px;
  }

  .ipx-split {
    flex-direction: column;
    gap: 36px;
  }

  .ipx-split.is-reverse {
    flex-direction: column;
  }

  .ipx-split-media {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  /* The outlined rectangle behind the photograph needs room to the right of it
     that a full-width picture no longer has. */
  .ipx-split-media::after {
    display: none;
  }

  .ipx-call {
    padding: 30px 30px;
  }
}

@media (max-width: 768px) {
  .ipx-band {
    padding: 62px 0 66px;
  }

  .ipx-call-wrap {
    padding: 58px 0 62px;
  }

  .ipx-head {
    margin-bottom: 32px;
  }

  .ipx-hero-bar {
    gap: 20px;
  }

  .ipx-hero-stats {
    gap: 14px 22px;
  }

  .ipx-stat-num {
    font-size: 1.65rem;
  }

  .ipx-stat-num i {
    font-size: 1.3rem;
  }

  .ipx-hero-text,
  .ipx-testi-quote {
    text-align: left;
    text-align-last: auto;
  }

  .ipx-lede {
    text-align: left;
    text-align-last: auto;
  }

  /* The arrows stay either side of the quote, drawn in and shrunk so the text
     between them still has a sensible measure. They were briefly taken out of
     the flow to sit under the quote instead, which only worked if the stage
     were a flex row - it is not, so they stacked down the left margin. */
  .ipx-testi-stage {
    padding: 0 44px;
  }

  .ipx-testi-arrow {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }

  .ipx-testi-dots {
    margin-top: 20px;
  }
}

@media (max-width: 576px) {
  .ipx-hero {
    padding: 42px 0 46px;
  }

  .ipx-hero-figure {
    border-radius: 16px;
  }

  .ipx-hero-actions .ipx-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .ipx-call {
    padding: 26px 22px;
    border-radius: 20px;
  }

  .ipx-call-phone {
    gap: 14px;
  }

  .ipx-call-ring {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }

  .ipx-call-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .ipx-empty {
    padding: 42px 22px;
  }

  .ipx-media-frame {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The grid behind the hero is only motion, so with the motion gone there is
     nothing left worth painting. */
  .ipx-hero-grid,
  .ipx-hero-sheen {
    display: none;
  }

  .ipx-hero-glow,
  .ipx-call-glow,
  .ipx-call-ring::after {
    animation: none;
  }

  .ipx-hero-figure {
    animation: none;
  }

  /* The sheen is dropped and the words go back to plain white - the emphasis
     was always the weight, not the movement. */
  .ipx-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .ipx-reveal[data-ipx-reveal],
  .ipx-reveal[data-ipx-reveal].is-in {
    opacity: 1;
    animation: none;
  }

  /* The quote still changes, it simply stops sliding to get there, and the ones
     waiting their turn are not dimmed on the way. */
  .ipx-testi-track,
  .ipx-testi-slide {
    transition: none;
  }

  .ipx-testi-slide {
    opacity: 1;
    transform: none;
  }

  .ipx-btn,
  .ipx-btn::before,
  .ipx-btn i,
  .ipx-media-frame,
  .ipx-media-frame img,
  .ipx-split-media::after,
  .ipx-call-ring,
  .ipx-testi-arrow,
  .ipx-testi-dot {
    transition: none;
  }

  .ipx-btn:hover,
  .ipx-btn:focus-visible,
  .ipx-btn:hover i,
  .ipx-btn:focus-visible i,
  .ipx-split-media:hover::after,
  .ipx-split-media:hover .ipx-media-frame img,
  .ipx-call-phone:hover .ipx-call-ring,
  .ipx-call-phone:focus-visible .ipx-call-ring {
    transform: none;
  }

  /* The arrows keep their offset - without it they would jump to the top of the
     carousel the moment someone pointed at one. */
  .ipx-testi-arrow:hover,
  .ipx-testi-arrow:focus-visible {
    transform: translateY(-50%);
  }

  .ipx-btn:hover::before,
  .ipx-btn:focus-visible::before {
    left: -110%;
  }
}

/* ===== TPA & Insurance Services Page (tpa-insurance.php) =====
   One continuous document: a centred heading and intro, numbered groups of
   empanelled partners (each with its own checked sub-list), then the partner
   logo grid. Everything is CMS-managed, so each block has to hold up for any
   number of items. */
.tpa-section {
  padding: 56px 0 0;
}

/* Only the closing section carries bottom padding, so consecutive sections
   read as one page rather than a stack of separately padded bands. */
.tpa-section:last-child {
  padding-bottom: 88px;
}

.tpa-title {
  text-align: center;
  font-weight: 400;
  color: var(--body-text);
  line-height: 1.25;
  margin: 0 0 18px;
}

/* The page heading leads; later section headings step down a size so the
   hierarchy reads without changing weight or colour. */
h1.tpa-title {
  font-size: 2.5rem;
}

h2.tpa-title {
  font-size: 2rem;
}

/* Justified copy, hyphenated so word gaps stay even, with the last line left
   ragged rather than stretched - same treatment as the Blood Centre intro. */
.tpa-subtitle {
  max-width: 980px;
  margin: 0 auto;
  color: var(--body-text);
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.tpa-subtitle p:last-child {
  margin-bottom: 0;
}

/* The logo grid spans the full container, so its intro line has to start on
   the same left edge as the first card rather than sitting in the centred
   measure the heading sections use. */
.tpa-section-logos .tpa-subtitle {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.tpa-subtitle ul,
.tpa-subtitle ol {
  margin: 0 0 14px 20px;
  padding-left: 8px;
  list-style: initial;
}

.tpa-subtitle li {
  margin-bottom: 6px;
}

/* --- Numbered groups --- */
.tpa-numbered {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.tpa-num-item + .tpa-num-item {
  margin-top: 48px;
}

.tpa-num-title {
  display: flex;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--body-text);
  line-height: 1.3;
  margin: 0 0 18px;
}

.tpa-num {
  flex-shrink: 0;
}

.tpa-num-desc {
  margin: -8px 0 16px;
  color: var(--body-text);
}

/* Two balanced columns, so entries flow down the left column and continue in
   the right - the order items are added in the admin. */
.tpa-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 56px;
}

/* Block flow rather than flex: multi-column layouts break inconsistently
   around flex items, so the check icon is positioned instead. */
.tpa-sublist-item {
  position: relative;
  padding: 7px 0 7px 30px;
  color: var(--body-text);
  font-size: 0.98rem;
  line-height: 1.6;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.tpa-check-icon {
  position: absolute;
  left: 0;
  top: 13px;
  color: var(--primary);
  font-size: 0.95rem;
}

.tpa-sublist-desc {
  display: block;
  font-size: 0.88rem;
  color: #8a8a8a;
  line-height: 1.55;
}

/* --- Partner logos --- */
.tpa-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.tpa-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 152px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: var(--transition);
}

.tpa-logo-card:hover {
  border-color: rgba(152, 28, 78, 0.25);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.tpa-logo-card img {
  max-width: 100%;
  max-height: 96px;
  width: auto;
  object-fit: contain;
}

.tpa-logo-name {
  text-align: center;
  font-size: 0.9rem;
  color: var(--body-text);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .tpa-section {
    padding-top: 40px;
  }

  .tpa-section:last-child {
    padding-bottom: 56px;
  }

  h1.tpa-title {
    font-size: 1.85rem;
  }

  h2.tpa-title {
    font-size: 1.55rem;
  }

  .tpa-subtitle {
    text-align: left;
  }

  .tpa-numbered {
    margin-top: 28px;
  }

  .tpa-num-item + .tpa-num-item {
    margin-top: 36px;
  }

  .tpa-num-title {
    font-size: 1.25rem;
  }

  .tpa-sublist {
    columns: 1;
  }

  .tpa-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 14px;
  }

  .tpa-logo-card {
    min-height: 118px;
    padding: 14px;
  }

  .tpa-logo-card img {
    max-height: 72px;
  }
}

/* ===== Health Checkup (health-checkup.php + health-package.php) =====
   The listing opens on a brand-gradient hero, lays the packages out as cards
   that lift and light up under the cursor, walks through the four steps of a
   check-up and ends on the enquiry strip; the detail page stacks an oversized
   intro, a quieter second paragraph, a hairline rule, the item groups and that
   same strip. Both share the price treatment, the enquiry strip and the empty
   state.

   Built on the same parts as Careers and International Patients: a gradient
   hero with decoration drifting behind it, cards with a cursor-following
   highlight, and a reveal that staggers each row in as it arrives. Everything
   that moves animates transform, opacity or a stroke offset - nothing that
   forces the browser to lay the page out again - and all of it is switched off
   in the prefers-reduced-motion block at the end of this section. */

/* --- Listing hero --- */
.hc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 76px 0 84px;
  background:
    radial-gradient(120% 130% at 14% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
}

/* A fine grid panning behind everything. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.hc-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(64% 64% at 42% 40%, #000, transparent 100%);
  mask-image: radial-gradient(64% 64% at 42% 40%, #000, transparent 100%);
  animation: hc-drift 24s linear infinite;
}

@keyframes hc-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

/* Two soft lights. Radial gradients rather than solid circles under a blur
   filter - the gradient is soft on its own, and blurring a 500px box is the one
   thing on this page a mid-range phone would actually feel. */
.hc-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hc-hero-glow-a {
  top: -200px;
  right: -90px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.42), rgba(255, 126, 178, 0) 68%);
  animation: hc-float-a 19s ease-in-out infinite;
}

.hc-hero-glow-b {
  bottom: -260px;
  left: -150px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.26), rgba(255, 210, 130, 0) 68%);
  animation: hc-float-b 23s ease-in-out infinite;
}

@keyframes hc-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-62px, 44px, 0) scale(1.12); }
}

@keyframes hc-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(72px, -50px, 0) scale(1.09); }
}

/* The heartbeat trace along the foot of the band. It draws itself once, left to
   right, and then stays put - a line that kept redrawing would pull the eye off
   the heading for as long as the page was open. The dash length is well over
   the path's own length so one dash covers the whole of it, and the offset
   travels from that length down to zero. */
.hc-hero-trace {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 80px;
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hc-hero-trace path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: hc-trace 3.4s cubic-bezier(0.32, 0, 0.2, 1) 0.35s forwards;
}

@keyframes hc-trace {
  to { stroke-dashoffset: 0; }
}

.hc-hero-inner {
  position: relative;
  z-index: 1;
}

.hc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* The glyph beats, slowly and only twice per cycle, in time with nothing else
   on the page. It is the one thing here that says what the page is for before a
   word of it has been read. */
.hc-hero-eyebrow i {
  animation: hc-beat 2.6s ease-in-out infinite;
}

@keyframes hc-beat {
  0%, 62%, 100% { transform: scale(1); }
  70%           { transform: scale(1.22); }
  78%           { transform: scale(1); }
  86%           { transform: scale(1.14); }
}

.hc-hero-title {
  margin: 21px 0 16px;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
}

.hc-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave it invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hc-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hc-shine 7s linear infinite;
  }
}

@keyframes hc-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

.hc-hero-text {
  max-width: 660px;
  font-size: 1.04rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  text-align: justify;
}

.hc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 34px;
}

.hc-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.hc-stat-num {
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  /* The figures count up on arrival, and tabular digits stop the label under
     one shifting sideways as the number passes 9. */
  font-variant-numeric: tabular-nums;
}

/* One of the three says its piece with a glyph rather than a figure. Sized down
   to the numerals' cap height so the row still reads as one line of headings. */
.hc-stat-num i {
  font-size: 1.5rem;
  line-height: 1.5;
}

.hc-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Buttons ---
   Three of them: white on the maroon hero, outlined on the same, and the house
   gradient for a light background. All share the lift and the sheen. */
.hc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

.hc-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.hc-btn:hover::before,
.hc-btn:focus-visible::before {
  left: 110%;
}

.hc-btn > * {
  position: relative;
}

.hc-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hc-btn:hover,
.hc-btn:focus-visible {
  transform: translateY(-3px);
}

.hc-btn:hover i,
.hc-btn:focus-visible i {
  transform: scale(1.12);
}

.hc-btn-solid {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.75);
}

.hc-btn-solid:hover,
.hc-btn-solid:focus-visible {
  color: var(--primary-dark);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.85);
}

.hc-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.hc-btn-ghost:hover,
.hc-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.hc-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.hc-btn-primary:hover,
.hc-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Section headings --- */
.hc-head {
  max-width: 660px;
  margin-bottom: 36px;
}

.hc-head.is-centred {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hc-head-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 11px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.hc-head-eyebrow::before,
.hc-head.is-centred .hc-head-eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: translateY(-50%);
}

.hc-head-eyebrow::before {
  left: 0;
}

/* Centred, the label needs a rule either side or it sits off to one side of its
   own dash. The right-hand one is a mirror of the left. */
.hc-head.is-centred .hc-head-eyebrow {
  padding-right: 32px;
}

.hc-head.is-centred .hc-head-eyebrow::after {
  right: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.hc-head-title {
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--heading-color);
}

.hc-head-title strong {
  font-weight: 700;
  color: var(--primary);
}

.hc-head-text {
  color: var(--body-text);
  font-size: 0.98rem;
  line-height: 1.85;
  text-align: justify;
}

.hc-head.is-centred .hc-head-text {
  text-align: center;
}

/* --- Listing --- */
.hc-listing {
  position: relative;
  padding: 72px 0 84px;
}

/* The heading and the search box share a row and sit on the same baseline. The
   heading takes whatever is left once the box has its width, and drops the box
   onto its own line as soon as the two together stop fitting. */
.hc-listing-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: 40px;
}

.hc-listing-top .hc-head {
  flex: 1 1 420px;
  margin-bottom: 0;
}

.hc-toolbar {
  display: flex;
  justify-content: flex-end;
  /* Lifted clear of the baseline the heading's last line sits on, so the box
     lines up with the paragraph rather than hanging off the bottom of it. */
  padding-bottom: 4px;
}

/* Narrows the cards already on the page, so it is styled as a field rather than
   as a form: no button beside it, because there is nothing to submit. */
.hc-search {
  position: relative;
  flex: 0 1 340px;
}

.hc-search i {
  position: absolute;
  top: 50%;
  left: 17px;
  color: var(--body-text);
  font-size: 0.86rem;
  transform: translateY(-50%);
  transition: color 0.3s ease;
  pointer-events: none;
}

.hc-search input {
  width: 100%;
  padding: 12px 18px 12px 42px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  color: var(--heading-color);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hc-search input::placeholder {
  color: #a9a9a9;
}

.hc-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(152, 28, 78, 0.1);
}

.hc-search input:focus + i,
.hc-search:focus-within i {
  color: var(--primary);
}

.hc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}

/* --- Package card --- */
.hc-card {
  --hc-mx: 50%;
  --hc-my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 28px 24px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 24px -18px rgba(16, 16, 16, 0.35);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* The highlight that follows the cursor. Over the whole card rather than behind
   the text, which is why it is this faint - any stronger and it would wash out
   the paragraph underneath. */
.hc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    300px circle at var(--hc-mx) var(--hc-my),
    rgba(152, 28, 78, 0.09),
    rgba(152, 28, 78, 0) 62%
  );
  transition: opacity 0.4s ease;
}

.hc-card:hover::before,
.hc-card:focus-within::before {
  opacity: 1;
}

/* A rule wiping across the foot of the card. Anchored left so it reads as the
   card being picked up rather than as something arriving. */
.hc-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hc-card:hover::after,
.hc-card:focus-within::after {
  transform: scaleX(1);
}

.hc-card:hover,
.hc-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(152, 28, 78, 0.28);
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 26px 50px -26px rgba(152, 28, 78, 0.55);
}

/* The package's glyph at watermark size, behind everything. Faint enough to
   read as depth and not as a second icon. */
.hc-card-watermark {
  position: absolute;
  top: -22px;
  right: -14px;
  z-index: -1;
  font-size: 7rem;
  line-height: 1;
  color: rgba(152, 28, 78, 0.05);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.hc-card:hover .hc-card-watermark {
  transform: translate3d(-6px, 6px, 0) rotate(-8deg) scale(1.06);
  color: rgba(152, 28, 78, 0.08);
}

.hc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.hc-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(150deg, #faf3f6 0%, #f4e7ed 100%);
  color: var(--primary);
  font-size: 1.6rem;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s ease,
    box-shadow 0.45s ease;
}

.hc-card:hover .hc-card-icon {
  transform: translateY(-3px) rotate(-6deg);
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

/* An uploaded picture sits inside the same tile. It keeps its own colours on
   hover, so the tile behind it stays pale rather than turning maroon under a
   logo that was drawn for a white background. */
.hc-card-icon img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
}

.hc-card:hover .hc-card-icon:has(img) {
  background: linear-gradient(150deg, #f6eaf0 0%, #eed8e2 100%);
  box-shadow: none;
}

.hc-card:hover .hc-card-icon i {
  color: var(--white);
}

.hc-card-icon i {
  transition: color 0.45s ease;
}

/* How many tests and consultations the package holds, counted off its own
   groups. Sits opposite the icon, where a price would go on a shop card -
   because this is what a visitor is actually comparing. */
.hc-card-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid rgba(152, 28, 78, 0.18);
  border-radius: 999px;
  background: rgba(152, 28, 78, 0.05);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hc-card-count strong {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hc-card-title {
  margin-bottom: 10px;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1.45;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.hc-card:hover .hc-card-title {
  color: var(--primary);
}

.hc-card-text {
  margin-bottom: 18px;
  color: var(--body-text);
  font-size: 0.93rem;
  line-height: 1.8;
  text-align: justify;
}

/* One chip per named group, the same figures the detail hero carries. */
.hc-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.hc-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-bg);
  color: var(--body-text);
  font-size: 0.78rem;
  line-height: 1.5;
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.hc-card-chip i {
  font-size: 0.76rem;
  color: var(--primary);
}

.hc-card-chip strong {
  font-weight: 700;
  color: var(--heading-color);
  font-variant-numeric: tabular-nums;
}

.hc-card:hover .hc-card-chip {
  border-color: rgba(152, 28, 78, 0.2);
  background: rgba(152, 28, 78, 0.04);
}

/* The overflow marker is a count, not a group, so it is drawn as a quieter
   chip rather than as one more of the same. */
.hc-card-chip.is-more {
  background: transparent;
  border-style: dashed;
  font-size: 0.75rem;
}

.hc-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

/* The price is set as a label over a figure rather than as a pill: it is the
   number on the card that matters most, and a pill puts it at the same weight
   as the chips above it. */
.hc-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hc-price-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-text);
}

.hc-price-amount {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.hc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--heading-color);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.hc-card-link i {
  font-size: 0.8rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hc-card:hover .hc-card-link {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.hc-card:hover .hc-card-link i {
  transform: translateX(4px);
}

/* The whole card is clickable, but only the link is in the tab order. It sits
   above the highlight and the watermark and below nothing, so a click anywhere
   on the card lands on it. */
.hc-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 20px;
}

/* --- Search found nothing --- */
/* display:flex outranks the display:none the browser gives [hidden], so the
   line has to be told to stay down itself - otherwise it sits under a full
   grid of cards announcing that nothing matched. */
.hc-noresults[hidden] {
  display: none;
}

.hc-noresults {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  color: var(--body-text);
  font-size: 0.97rem;
  text-align: center;
}

.hc-noresults i {
  color: var(--primary);
}

.hc-reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hc-reset:hover {
  color: var(--primary-dark);
}

/* --- How it works --- */
.hc-process {
  position: relative;
  overflow: hidden;
  padding: 80px 0 88px;
  background: var(--light-bg);
  border-top: 1px solid var(--border-color);
}

/* A single soft light in the corner of the band, drawn as a radial gradient for
   the same reason as the two in the hero. */
.hc-orb {
  position: absolute;
  top: -240px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 28, 78, 0.07), rgba(152, 28, 78, 0) 70%);
  pointer-events: none;
}

.hc-process > .container {
  position: relative;
  z-index: 1;
}

.hc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One rail across the whole row, behind the discs, so the four steps read as a
   sequence. It is pinned to the centre line of the discs and stops short of the
   first and last of them rather than running off both ends. */
.hc-steps-rail {
  position: absolute;
  top: 31px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(152, 28, 78, 0.14);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.hc-steps-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.hc-steps.is-drawn .hc-steps-rail-fill {
  transform: scaleX(1);
}

.hc-step {
  position: relative;
  text-align: center;
}

.hc-step-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border: 4px solid var(--light-bg);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-dark), var(--primary) 60%, var(--primary-light));
  color: var(--white);
  font-size: 1.25rem;
  box-shadow: 0 16px 28px -16px rgba(152, 28, 78, 0.9);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hc-step:hover .hc-step-disc {
  transform: translateY(-4px) scale(1.06);
}

/* The step's number, tucked onto the shoulder of the disc. The icon says what
   the step is; this says where it comes in the order. */
.hc-step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 16, 16, 0.14);
}

.hc-step-title {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--heading-color);
}

.hc-step-text {
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: justify;
}

/* --- Reveal on scroll ---
   An animation rather than a transition, because the stagger has to come from a
   delay that does not survive into the hover state - a transition-delay of half
   a second would still be sitting on card six long after it had settled, and
   every hover on it would start late. With backwards fill the card holds the
   opening frame through its delay and is governed by nothing once it is over.

   The hidden state hangs off the class the page's script adds, not off one
   sitting in the markup: if that script never runs, the cards are simply
   visible rather than stranded at opacity 0. */
.hc-reveal {
  opacity: 0;
}

.hc-reveal.is-in {
  opacity: 1;
  animation: hc-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--hc-delay, 0ms) backwards;
}

@keyframes hc-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Detail hero ---
   A brand-gradient band carrying the icon, name, a summary chip per item
   group and the price card. The body card below overlaps its lower edge. */
.hc-phero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #5e0428 0%, var(--primary-dark) 38%, var(--primary) 78%, #b02259 100%);
  padding: 72px 0 116px;
  isolation: isolate;
}

.hc-phero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Fine dot grid, so the flat gradient reads as a surface. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
}

.hc-phero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.hc-phero-glow-a {
  top: -140px;
  right: -80px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255, 168, 205, 0.5) 0%, transparent 70%);
  animation: hcFloatA 14s ease-in-out infinite;
}

.hc-phero-glow-b {
  bottom: -180px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 248, 209, 0.28) 0%, transparent 70%);
  animation: hcFloatB 18s ease-in-out infinite;
}

@keyframes hcFloatA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-26px, 24px, 0); }
}

@keyframes hcFloatB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(30px, -20px, 0); }
}

.hc-phero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
}

.hc-phero-main {
  flex: 1 1 420px;
  min-width: 0;
}

.hc-phero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  animation: hcRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hc-phero-icon img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  /* Line-art icons are dark; invert so they sit on the gradient. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.hc-phero-icon i {
  font-size: 2rem;
  color: var(--white);
}

.hc-phero-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  animation: hcRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.hc-phero-title {
  color: var(--white);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  animation: hcRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.hc-phero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  animation: hcRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.hc-phero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  transition: var(--transition);
}

.hc-phero-chip:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.hc-phero-chip i {
  font-size: 0.85rem;
  color: var(--accent);
}

.hc-phero-chip strong {
  font-weight: 700;
}

/* Price / CTA card */
.hc-phero-card {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  animation: hcRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
  transition: var(--transition);
}

.hc-phero-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.17);
}

.hc-phero-card-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hc-phero-card-amount {
  margin-top: 8px;
  color: var(--white);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.hc-phero-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 26px;
  border-radius: 50px;
  background: var(--white);
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.hc-phero-card-cta:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

@keyframes hcRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Detail body --- */
/* Lifted over the hero's lower edge so the two sections interlock. */
.hc-body {
  padding: 0 0 80px;
}

.hc-body-card {
  position: relative;
  z-index: 2;
  margin-top: -68px;
  padding: 48px 52px 52px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 16, 16, 0.1);
}

/* Standalone body section, used by the "package not found" page. */
.hc-detail {
  padding: 60px 0 76px;
}

/* Deliberately a step up from body copy - this is the package summary. */
.hc-intro {
  font-size: 1.22rem;
  line-height: 1.75;
  color: var(--heading-color);
  font-weight: 300;
  text-align: left;
}

.hc-intro p {
  margin-bottom: 16px;
  line-height: 1.75 !important;
}

.hc-intro p:last-child {
  margin-bottom: 0;
}

.hc-secondary {
  margin-top: 20px;
  font-size: 1.02rem;
  color: var(--body-text);
  text-align: left;
}

.hc-secondary p:last-child {
  margin-bottom: 0;
}

.hc-rule {
  height: 1px;
  border: 0;
  background: var(--border-color);
  margin: 44px 0 40px;
}

.hc-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 56px;
}

.hc-group-title {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--heading-color);
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}

.hc-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-group-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  color: var(--body-text);
  font-size: 0.97rem;
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}

.hc-group-item:hover {
  background: #faf5f7;
  color: var(--heading-color);
}

/* The ringed bullet from the reference layout, drawn rather than iconed. */
.hc-bullet {
  flex: 0 0 14px;
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.hc-bullet::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--primary);
}

/* --- Enquiry strip ---
   A slim band: label, tap-to-call numbers and the enquiry link on one row,
   stacking only when there is no width left for it. */
.hc-enquiry {
  background: var(--light-bg);
  border-top: 1px solid var(--border-color);
  padding: 42px 0;
}

.hc-enquiry-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}

/* Full width, so it takes its own line above the numbers and the button. */
.hc-enquiry-label {
  flex: 0 0 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--body-text);
}

.hc-enquiry-phones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.hc-enquiry-phone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 1.62rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.hc-enquiry-phone i {
  font-size: 1rem;
  color: var(--primary);
}

.hc-enquiry-phone:hover {
  color: var(--primary);
}

.hc-enquiry-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border: 1px solid var(--primary);
  border-radius: 50px;
  color: var(--primary);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}

.hc-enquiry-cta:hover {
  background: var(--primary);
  color: var(--white);
}

/* --- Empty / not-found state ---
   Shared: the listing's "nothing published yet" panel and the detail page's
   404. The listing names its parts, so it gets the framed icon tile the other
   pages use; the 404 is still a bare <i>, <h1> and <p>, and the element rules
   below are what keep it looking like anything at all. */
.hc-empty {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 32px 52px;
  border: 1px dashed rgba(152, 28, 78, 0.28);
  border-radius: 24px;
  background: var(--light-bg);
  text-align: center;
}

.hc-empty i {
  font-size: 3rem;
  color: var(--primary);
  opacity: 0.75;
  margin-bottom: 20px;
}

.hc-empty h1,
.hc-empty h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 12px;
}

.hc-empty p {
  color: var(--body-text);
  margin-bottom: 26px;
}

/* The tile carries the glyph, so the bare-icon rule above must not also apply
   to it - hence the reset on the <i> inside. */
.hc-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.hc-empty-icon i {
  margin-bottom: 0;
  font-size: inherit;
  color: inherit;
  opacity: 1;
}

.hc-empty-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.hc-empty-text {
  margin-bottom: 26px;
  color: var(--body-text);
  line-height: 1.85;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .hc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 26px;
  }

  /* The rail only reads as one line across one row. Once the steps wrap onto
     two, it is dropped rather than drawn twice through the middle of them. */
  .hc-steps-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .hc-hero {
    padding: 60px 0 66px;
  }

  /* The box has the row to itself once the heading has stopped sharing a line
     with it, so it takes the full width rather than hugging one edge. */
  .hc-toolbar {
    flex: 1 1 100%;
    justify-content: stretch;
    padding-bottom: 0;
  }

  .hc-search {
    flex: 1 1 auto;
  }

  .hc-groups {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hc-phero {
    padding: 58px 0 104px;
  }

  .hc-phero-title {
    font-size: 2.05rem;
  }

  .hc-phero-card {
    flex: 1 1 100%;
  }

  .hc-body-card {
    padding: 36px 30px 40px;
  }
}

@media (max-width: 576px) {
  .hc-hero {
    padding: 50px 0 56px;
  }

  .hc-hero-trace {
    height: 54px;
  }

  .hc-hero-stats {
    gap: 14px 22px;
  }

  .hc-stat-num {
    font-size: 1.7rem;
  }

  /* Two buttons side by side come down to two slivers at this width, so they
     take a line each instead. */
  .hc-hero-actions .hc-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .hc-listing {
    padding: 46px 0 60px;
  }

  .hc-card {
    padding: 24px 22px 20px;
  }

  .hc-card-watermark {
    font-size: 5.4rem;
  }

  .hc-card-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 1.4rem;
  }

  .hc-card-icon img {
    max-width: 38px;
    max-height: 38px;
  }

  /* The price and the link stop sharing a line: side by side here, the price
     is squeezed onto two rows to make room for a button nobody has to hit. */
  .hc-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .hc-card-link {
    justify-content: center;
  }

  .hc-process {
    padding: 56px 0 62px;
  }

  .hc-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hc-phero {
    padding: 48px 0 96px;
  }

  .hc-phero-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 18px;
  }

  .hc-phero-icon img {
    max-width: 36px;
    max-height: 36px;
  }

  .hc-phero-icon i {
    font-size: 1.5rem;
  }

  .hc-phero-title {
    font-size: 1.7rem;
  }

  .hc-phero-meta {
    margin-top: 20px;
    gap: 8px;
  }

  .hc-phero-chip {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .hc-phero-card {
    flex: 1 1 100%;
    align-self: stretch;
    padding: 22px 24px;
  }

  .hc-phero-card-amount {
    font-size: 1.7rem;
  }

  .hc-body {
    padding: 0 0 56px;
  }

  .hc-body-card {
    margin-top: -56px;
    padding: 28px 22px 32px;
    border-radius: 18px;
  }

  .hc-detail {
    padding: 40px 0 52px;
  }

  .hc-intro {
    font-size: 1.08rem;
  }

  .hc-rule {
    margin: 32px 0 28px;
  }

  .hc-group-title {
    font-size: 1.2rem;
  }

  .hc-enquiry {
    padding: 34px 0;
  }

  .hc-enquiry-bar {
    flex-direction: column;
    gap: 12px;
  }

  .hc-enquiry-phone {
    font-size: 1.32rem;
  }
}

/* Honour a reduced-motion preference: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  /* The grid behind the hero is only motion, so with the motion gone there is
     nothing left worth painting. */
  .hc-hero-grid {
    display: none;
  }

  .hc-hero-glow,
  .hc-hero-eyebrow i {
    animation: none;
  }

  /* The trace stays - it is a drawing, not just a movement - it simply arrives
     finished rather than drawing itself in. */
  .hc-hero-trace path {
    stroke-dashoffset: 0;
    animation: none;
  }

  /* The sheen is dropped and the word goes back to plain white - the emphasis
     was always the weight, not the movement. */
  .hc-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .hc-reveal,
  .hc-reveal.is-in {
    opacity: 1;
    animation: none;
  }

  /* The rail is the thing that ties the four steps together, so it is drawn
     rather than removed - it just does not sweep in. */
  .hc-steps-rail-fill {
    transform: scaleX(1);
    transition: none;
  }

  .hc-btn,
  .hc-btn::before,
  .hc-card,
  .hc-card-icon,
  .hc-card-watermark,
  .hc-card-link i,
  .hc-step-disc {
    transition: none;
  }

  .hc-btn:hover,
  .hc-btn:focus-visible,
  .hc-btn:hover i,
  .hc-btn:focus-visible i,
  .hc-card:hover,
  .hc-card:focus-within,
  .hc-card:hover .hc-card-icon,
  .hc-card:hover .hc-card-watermark,
  .hc-card:hover .hc-card-link i,
  .hc-step:hover .hc-step-disc,
  .hc-phero-chip:hover,
  .hc-phero-card:hover,
  .hc-phero-card-cta:hover {
    transform: none;
  }

  .hc-phero-icon,
  .hc-phero-eyebrow,
  .hc-phero-title,
  .hc-phero-meta,
  .hc-phero-card,
  .hc-phero-glow-a,
  .hc-phero-glow-b {
    animation: none;
  }
}

/* ===== Postgraduate Programs (postgraduate.php) =====
   A gradient hero carrying the page's own heading, copy and picture, then one
   band per CMS section: a split of picture and copy, the seat list drawn as a
   card per speciality, and the closing line on a dark panel.

   Built on the same parts as Careers, Health Checkup and International
   Patients: decoration drifting behind the hero, cards with a cursor-following
   highlight, and a reveal that staggers each row in as it arrives. Everything
   that moves animates transform or opacity - nothing that forces the browser to
   lay the page out again - and all of it is switched off in the
   prefers-reduced-motion block at the end of this section.

   The page is entirely CMS-managed, so every grid here is auto-fit and every
   band has to hold up whether the admin has put one item in it or nine. */

/* --- Hero --- */
.pg-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 72px 0 64px;
  background:
    radial-gradient(120% 130% at 14% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
}

/* A fine grid panning behind everything. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.pg-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(64% 64% at 40% 42%, #000, transparent 100%);
  mask-image: radial-gradient(64% 64% at 40% 42%, #000, transparent 100%);
  animation: pg-drift 24s linear infinite;
}

@keyframes pg-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

/* Two soft lights. Radial gradients rather than solid circles under a blur
   filter - the gradient is soft on its own, and blurring a 500px box is the one
   thing on this page a mid-range phone would actually feel. */
.pg-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.pg-hero-glow-a {
  top: -190px;
  right: -80px;
  width: 470px;
  height: 470px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.4), rgba(255, 126, 178, 0) 68%);
  animation: pg-float-a 19s ease-in-out infinite;
}

.pg-hero-glow-b {
  bottom: -250px;
  left: -140px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.25), rgba(255, 210, 130, 0) 68%);
  animation: pg-float-b 23s ease-in-out infinite;
}

@keyframes pg-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-62px, 44px, 0) scale(1.12); }
}

@keyframes pg-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(72px, -50px, 0) scale(1.09); }
}

/* Copy and picture share the row. The copy is given the larger share: it is a
   heading and two paragraphs against a single photograph. */
.pg-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 54px;
}

.pg-hero-copy {
  flex: 1 1 54%;
  min-width: 0;
}

/* Without a picture the copy runs on its own, so it is capped rather than let
   out to the full width of the container - long lines are hard to track back
   from, and a heading set across 1200px reads as a banner, not a heading. */
.pg-hero:not(.has-figure) .pg-hero-copy {
  flex: 1 1 100%;
  max-width: 820px;
}

.pg-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.pg-hero-title {
  margin: 20px 0 16px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--white);
}

.pg-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave it invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pg-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: pg-shine 7s linear infinite;
  }
}

@keyframes pg-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

/* The intro comes out of the CMS editor carrying its own colours and sizes.
   The site-wide typography lock near the top of this file already holds it to
   one face; these rules hold it to one size and one colour on the dark band,
   which is what stops a pasted-in paragraph arriving as grey-on-maroon. */
.pg-hero-lede {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: justify;
}

.pg-hero-lede p,
.pg-hero-lede li,
.pg-hero-lede span,
.pg-hero-lede strong {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.02rem !important;
}

.pg-hero-lede strong,
.pg-hero-lede b {
  color: var(--white) !important;
}

.pg-hero-lede p {
  margin: 0 0 14px;
}

.pg-hero-lede p:last-child {
  margin-bottom: 0;
}

.pg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* The picture the page already had, framed and lit rather than cropped into a
   band. width/height come off the file itself in the page, which is what
   reserves its shape before it lands. */
.pg-hero-figure {
  position: relative;
  flex: 1 1 42%;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 40px 70px -36px rgba(0, 0, 0, 0.85);
  animation: pg-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.pg-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes pg-hero-in {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* A slow light travelling across the frame. It starts well off one side and
   ends well off the other, then waits out the rest of the cycle, so it reads as
   an occasional glint rather than as something sweeping back and forth. */
.pg-hero-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: pg-sheen 9s ease-in-out infinite;
}

@keyframes pg-sheen {
  0%        { background-position: 180% 0; }
  45%, 100% { background-position: -80% 0; }
}

.pg-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 38px;
}

.pg-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.pg-stat-num {
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  /* The figures count up on arrival, and tabular digits stop the label under
     one shifting sideways as the number passes 9. */
  font-variant-numeric: tabular-nums;
}

/* One of the three says its piece with a glyph rather than a figure. Sized down
   to the numerals' cap height so the row still reads as one line of headings. */
.pg-stat-num i {
  font-size: 1.5rem;
  line-height: 1.5;
}

.pg-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Buttons ---
   Three of them: white on the maroon panels, outlined on the same, and the
   house gradient for a light background. All share the lift and the sheen. */
.pg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

.pg-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.pg-btn:hover::before,
.pg-btn:focus-visible::before {
  left: 110%;
}

.pg-btn > * {
  position: relative;
}

.pg-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-btn:hover,
.pg-btn:focus-visible {
  transform: translateY(-3px);
}

.pg-btn:hover i,
.pg-btn:focus-visible i {
  transform: scale(1.12);
}

.pg-btn-solid {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.75);
}

.pg-btn-solid:hover,
.pg-btn-solid:focus-visible {
  color: var(--primary-dark);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.85);
}

.pg-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.pg-btn-ghost:hover,
.pg-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.pg-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.pg-btn-primary:hover,
.pg-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Bands --- */
.pg-band {
  position: relative;
  overflow: hidden;
  padding: 80px 0 88px;
  background: var(--white);
}

.pg-band.is-tint {
  background: var(--light-bg);
}

.pg-band > .container {
  position: relative;
  z-index: 1;
}

/* A single soft light in the corner of a band, drawn as a radial gradient for
   the same reason as the two in the hero. */
.pg-orb {
  position: absolute;
  top: -230px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 28, 78, 0.07), rgba(152, 28, 78, 0) 70%);
  pointer-events: none;
}

/* --- Picture beside copy --- */
.pg-split {
  display: flex;
  align-items: center;
  gap: 54px;
}

.pg-split.is-reverse {
  flex-direction: row-reverse;
}

.pg-split.is-single .pg-split-copy {
  flex: 1 1 100%;
  max-width: 860px;
}

.pg-split-media {
  position: relative;
  flex: 1 1 42%;
  min-width: 0;
}

.pg-split-copy {
  flex: 1 1 52%;
  min-width: 0;
}

/* A brand-tinted glow behind the frame, offset so it reads as light falling
   past the picture rather than as a second border around it. */
.pg-media-halo {
  position: absolute;
  inset: 14px -18px -18px 14px;
  z-index: 0;
  border-radius: 24px;
  background: linear-gradient(140deg, rgba(152, 28, 78, 0.16), rgba(194, 37, 98, 0.06));
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-media-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  box-shadow: 0 18px 44px -22px rgba(16, 16, 16, 0.55);
}

.pg-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-split-media:hover .pg-media-frame img {
  transform: scale(1.04);
}

.pg-split-media:hover .pg-media-halo {
  transform: translate3d(6px, 6px, 0);
}

.pg-title {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--heading-color);
}

/* Copy out of the CMS editor. Sized off a variable so the narrow-screen step
   further down still lands despite the !important the typography lock needs. */
.pg-prose {
  --pg-copy-size: 1rem;
  color: var(--body-text);
  font-size: var(--pg-copy-size);
  line-height: 1.9;
  text-align: justify;
}

.pg-prose p,
.pg-prose li,
.pg-prose span {
  font-size: var(--pg-copy-size) !important;
}

.pg-prose p {
  margin: 0 0 18px;
}

.pg-prose p:last-child {
  margin-bottom: 0;
}

/* --- Seats --- */
/* The grid's own label. It sits above the cards where the admin's section
   heading is not already doing that job. */
.pg-head {
  max-width: 660px;
  margin-bottom: 34px;
}

.pg-head-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 11px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.pg-head-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: translateY(-50%);
}

.pg-head-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--heading-color);
}

.pg-head-title strong {
  font-weight: 700;
  color: var(--primary);
}

.pg-seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

/* Two and four cards both come out of auto-fit with one stranded on a row of
   its own. Given their own column count they read as a pair and as a square. */
@media (min-width: 993px) {
  .pg-seat-grid.is-paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A single card stretched across the container is a band, not a card. */
.pg-seat-grid.is-one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

/* Only when there is a split above it, so a band that opens straight onto the
   seats does not start with a gap it never needed. */
.pg-seat-grid.has-split-above {
  margin-top: 52px;
}

.pg-seat-card {
  --pg-mx: 50%;
  --pg-my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow: hidden;
  padding: 24px 24px 22px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 24px -18px rgba(16, 16, 16, 0.35);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* The highlight that follows the cursor. Over the whole card rather than behind
   the text, which is why it is this faint - any stronger and it would wash out
   the wording underneath. */
.pg-seat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--pg-mx) var(--pg-my),
    rgba(152, 28, 78, 0.09),
    rgba(152, 28, 78, 0) 62%
  );
  transition: opacity 0.4s ease;
}

.pg-seat-card:hover::before {
  opacity: 1;
}

/* A rule wiping across the foot of the card. Anchored left so it reads as the
   card being picked up rather than as something arriving. */
.pg-seat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pg-seat-card:hover::after {
  transform: scaleX(1);
}

.pg-seat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(152, 28, 78, 0.28);
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 26px 50px -26px rgba(152, 28, 78, 0.55);
}

.pg-seat-glyph {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(150deg, #faf3f6 0%, #f4e7ed 100%);
  color: var(--primary);
  font-size: 1.22rem;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s ease,
    color 0.45s ease,
    box-shadow 0.45s ease;
}

.pg-seat-card:hover .pg-seat-glyph {
  transform: translateY(-3px) rotate(-6deg);
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  color: var(--white);
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.pg-seat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pg-seat-name {
  margin: 2px 0 5px;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.pg-seat-card:hover .pg-seat-name {
  color: var(--primary);
}

/* The entry route, as the admin typed it. Quieter than the name and never
   shortened: "Post MBBS Broad Specialty" is the whole of what it means. */
.pg-seat-detail {
  margin: 0;
  color: var(--body-text);
  font-size: 0.86rem;
  line-height: 1.6;
}

.pg-seat-desc {
  margin: 8px 0 0;
  color: var(--body-text);
  font-size: 0.88rem;
  line-height: 1.75;
  text-align: justify;
}

/* The count, set as a figure over a label so it reads at a glance from across
   the grid. It is the one number on the card, so it carries the brand colour. */
.pg-seat-count {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 62px;
  padding: 9px 12px;
  border: 1px solid rgba(152, 28, 78, 0.18);
  border-radius: 14px;
  background: rgba(152, 28, 78, 0.05);
  text-align: center;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.pg-seat-card:hover .pg-seat-count {
  border-color: rgba(152, 28, 78, 0.32);
  background: rgba(152, 28, 78, 0.09);
}

.pg-seat-count strong {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.pg-seat-count span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.8;
}

/* --- Closing panel --- */
.pg-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 36px;
  margin-top: 52px;
  padding: 36px 40px;
  border-radius: 24px;
  background: linear-gradient(125deg, #5c0d2d 0%, #981c4e 55%, #6b1036 100%);
  color: var(--white);
  box-shadow: 0 26px 52px -28px rgba(92, 13, 45, 0.9);
}

/* One light drifting inside the panel, so a flat block of maroon has some
   depth to it without anything moving across the wording. */
.pg-cta-glow {
  position: absolute;
  top: -160px;
  right: -90px;
  z-index: -1;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.35), rgba(255, 126, 178, 0) 68%);
  pointer-events: none;
  animation: pg-float-a 17s ease-in-out infinite;
}

/* The closing line comes out of the CMS editor carrying its own colour, which
   on this panel would be grey on maroon. */
.pg-cta-copy {
  flex: 1 1 420px;
  min-width: 0;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--white);
  text-align: justify;
}

.pg-cta-copy p,
.pg-cta-copy li,
.pg-cta-copy span {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.06rem !important;
}

.pg-cta-copy p {
  margin: 0 0 12px;
}

.pg-cta-copy p:last-child {
  margin-bottom: 0;
}

.pg-cta-btn {
  flex: 0 0 auto;
}

/* --- Nothing published yet --- */
.pg-empty {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 32px 52px;
  border: 1px dashed rgba(152, 28, 78, 0.28);
  border-radius: 24px;
  background: var(--light-bg);
  text-align: center;
}

.pg-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.pg-empty-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.pg-empty-text {
  margin-bottom: 26px;
  color: var(--body-text);
  line-height: 1.85;
}

/* --- Reveal on scroll ---
   An animation rather than a transition, because the stagger has to come from a
   delay that does not survive into the hover state - a transition-delay of half
   a second would still be sitting on card six long after it had settled, and
   every hover on it would start late. With backwards fill the card holds the
   opening frame through its delay and is governed by nothing once it is over.

   The hidden state hangs off an attribute the page's script writes, not off the
   class in the markup: if that script never runs, the content is simply visible
   instead of stranded at opacity 0. */
.pg-reveal[data-pg-reveal] {
  opacity: 0;
}

.pg-reveal[data-pg-reveal].is-in {
  opacity: 1;
  animation: pg-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--pg-delay, 0ms) backwards;
}

@keyframes pg-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pg-hero {
    padding: 56px 0 52px;
  }

  /* The picture goes under the copy rather than beside it, and leads with it -
     a photograph above a heading is a banner, and this one is not one. */
  .pg-hero-inner,
  .pg-split,
  .pg-split.is-reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }

  .pg-hero-copy,
  .pg-hero-figure,
  .pg-split-media,
  .pg-split-copy {
    flex: 1 1 auto;
    max-width: none;
  }

  .pg-band {
    padding: 60px 0 66px;
  }

  .pg-cta {
    padding: 32px 30px;
  }
}

@media (max-width: 576px) {
  .pg-hero {
    padding: 48px 0 46px;
  }

  .pg-hero-lede,
  .pg-hero-lede p,
  .pg-hero-lede li,
  .pg-hero-lede span {
    font-size: 0.97rem !important;
  }

  /* Two buttons side by side come down to two slivers at this width, so they
     take a line each instead. */
  .pg-hero-actions .pg-btn,
  .pg-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .pg-hero-stats {
    gap: 14px 22px;
    margin-top: 30px;
  }

  .pg-stat-num {
    font-size: 1.7rem;
  }

  .pg-band {
    padding: 48px 0 54px;
  }

  .pg-prose {
    --pg-copy-size: 0.95rem;
  }

  .pg-seat-grid.has-split-above {
    margin-top: 38px;
  }

  .pg-seat-card {
    padding: 20px;
    gap: 14px;
  }

  .pg-seat-glyph {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .pg-seat-count {
    min-width: 54px;
    padding: 7px 10px;
  }

  .pg-seat-count strong {
    font-size: 1.28rem;
  }

  .pg-cta {
    margin-top: 38px;
    padding: 28px 22px;
    border-radius: 20px;
  }

  .pg-cta-copy,
  .pg-cta-copy p,
  .pg-cta-copy li,
  .pg-cta-copy span {
    font-size: 0.99rem !important;
  }
}

/* Honour a reduced-motion preference: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  /* The grid behind the hero is only motion, so with the motion gone there is
     nothing left worth painting. The sheen goes with it. */
  .pg-hero-grid,
  .pg-hero-sheen {
    display: none;
  }

  .pg-hero-glow,
  .pg-hero-figure,
  .pg-cta-glow {
    animation: none;
  }

  /* The sheen is dropped and the word goes back to plain white - the emphasis
     was always the weight, not the movement. */
  .pg-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .pg-reveal[data-pg-reveal],
  .pg-reveal[data-pg-reveal].is-in {
    opacity: 1;
    animation: none;
  }

  .pg-btn,
  .pg-btn::before,
  .pg-seat-card,
  .pg-seat-glyph,
  .pg-media-halo,
  .pg-media-frame img {
    transition: none;
  }

  .pg-btn:hover,
  .pg-btn:focus-visible,
  .pg-btn:hover i,
  .pg-btn:focus-visible i,
  .pg-seat-card:hover,
  .pg-seat-card:hover .pg-seat-glyph,
  .pg-split-media:hover .pg-media-halo,
  .pg-split-media:hover .pg-media-frame img {
    transform: none;
  }
}

/* ===== Laboratory Medicine (laboratory-medicine.php) =====
   Banner, then the page heading and intro, then one card per sub-service, then
   the helpline strip and the FAQs. The cards sit in a two-up grid on desktop
   and collapse to one column below it — `align-items: start` is what stops a
   short card stretching to match a long one beside it. */

.lab-intro {
  padding: 64px 0 12px;
  background: var(--white);
}

.lab-title {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--body-text);
  margin: 0 0 26px;
}

/* Pasted-in font declarations are handled by the site-wide typography lock near
   the top of this file. Size is driven off a variable so the narrow-screen step
   below still lands despite the !important there. */
.lab-intro-copy,
.lab-service-copy,
.lab-service-closing {
  --lab-copy-size: 1rem;
  color: var(--body-text);
  font-size: var(--lab-copy-size);
  line-height: 1.9;
}

/* Paragraph-level copy only: a heading inside the editor keeps its own size. */
.lab-intro-copy p,
.lab-intro-copy li,
.lab-intro-copy span,
.lab-service-copy p,
.lab-service-copy li,
.lab-service-copy span,
.lab-service-closing p,
.lab-service-closing li,
.lab-service-closing span {
  font-size: var(--lab-copy-size) !important;
}

.lab-intro-copy p {
  margin: 0 0 18px;
}

.lab-intro-copy p:last-child,
.lab-service-copy p:last-child,
.lab-service-closing p:last-child {
  margin-bottom: 0;
}

/* --- Service cards --- */
.lab-services {
  padding: 28px 0 76px;
  background: var(--white);
}

/* Multi-column rather than grid: these cards differ a lot in height — some
   carry a checked list, some a single line — and a grid would align them into
   rows, leaving a hole under every card shorter than its neighbour. Columns
   pack each card directly under the last, which is what keeps the block tight.
   `break-inside: avoid` on the card is what stops one splitting across the
   column boundary. */
.lab-service-grid {
  columns: 2;
  column-gap: 24px;
}

@media (max-width: 860px) {
  .lab-service-grid {
    columns: 1;
  }
}

.lab-service {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 30px 32px;
  overflow: hidden;
  break-inside: avoid;
  /* The column gap only separates the columns; this is what separates the
     cards stacked within one. */
  margin-bottom: 24px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease;
}

/* The accent wipes down the left edge on hover rather than sitting there all
   the time, so a wall of cards stays quiet until one is pointed at. */
.lab-service::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lab-service:hover {
  transform: translateY(-4px);
  border-color: rgba(152, 28, 78, 0.18);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.lab-service:hover::before {
  transform: scaleY(1);
}

.lab-service-title {
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
  margin: 0 0 12px;
}

.lab-service-copy {
  text-align: left;
}

/* --- Checked list inside a card --- */
.lab-service-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.lab-service-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.lab-check-icon {
  flex-shrink: 0;
  margin-top: 5px;
  font-size: 0.98rem;
  color: var(--primary);
}

/* Matches the copy above it; the tighter leading is what keeps a list reading
   as a list rather than as more paragraphs. */
.lab-item-text {
  color: var(--body-text);
  font-size: 1rem;
  line-height: 1.6;
}

.lab-item-desc {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.85;
}

.lab-service-closing {
  margin-top: 18px;
  text-align: left;
}

/* --- Helpline strip --- */
.lab-contact {
  padding: 0 0 76px;
  background: var(--white);
}

.lab-contact-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 40px 30px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(152, 28, 78, 0.22);
}

/* A soft highlight in the top-right corner, so the flat gradient reads as a
   surface rather than a printed block. */
.lab-contact-card::after {
  content: "";
  position: absolute;
  top: -66px;
  right: -46px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.lab-contact-title {
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 18px;
}

.lab-contact-rows {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 52px;
}

/* Centred rather than top-aligned: with the label and value only two short
   lines tall, the icon reads as off-centre against them otherwise. */
.lab-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lab-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 0.92rem;
}

.lab-contact-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1px;
}

/* Numbers wrap onto their own line rather than being squeezed side by side
   once the card runs out of width. */
.lab-contact-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.lab-contact-value {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.3px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
  word-break: break-word;
}

.lab-contact-value:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

.lab-contact-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  padding: 11px 28px;
  border-radius: 50px;
  background: var(--white);
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.lab-contact-cta:hover {
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* --- FAQs ---
   The accordion itself is the shared .dept-faq / .faq-* block; this page only
   needs the band behind it to sit on white rather than the grey. */
.lab-faq {
  background: var(--light-bg);
}

@media (max-width: 992px) {
  .lab-title {
    font-size: 2.4rem;
  }

  .lab-contact-card {
    padding: 26px 30px 28px;
  }
}

@media (max-width: 768px) {
  .lab-intro {
    padding-top: 44px;
  }

  .lab-title {
    font-size: 1.95rem;
    margin-bottom: 18px;
  }

  .lab-services {
    padding-bottom: 52px;
  }

  .lab-service {
    padding: 24px 22px;
  }

  .lab-service-title {
    font-size: 1.18rem;
  }

  .lab-contact {
    padding-bottom: 52px;
  }

  .lab-contact-card {
    padding: 24px 22px 26px;
  }

  .lab-contact-title {
    font-size: 1.14rem;
    margin-bottom: 16px;
  }

  .lab-contact-rows {
    gap: 15px;
  }

  .lab-contact-value {
    font-size: 1.04rem;
  }

  .lab-contact-cta {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* Keep the shadow and the accent, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .lab-service:hover,
  .lab-contact-cta:hover {
    transform: none;
  }
}

/* ===== Photo Gallery (gallery.php) =====
   A masonry wall of uploaded photos with a category filter and a lightbox.
   Layout is CSS columns rather than a grid: the photos arrive at whatever
   aspect ratio they were shot at, and columns let each keep its own height
   instead of being cropped into a uniform box — which is the difference
   between something that reads as a gallery and something that reads as a
   product listing. `break-inside: avoid` on the tile is what stops one
   splitting across the column boundary.

   The tile carries the entrance animation and the card inside it carries the
   hover, so the two transforms never fight over the same element. */

/* --- Hero --- */
.gal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 76px 0 70px;
  background:
    radial-gradient(120% 130% at 18% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
  text-align: center;
}

/* A fine grid panning behind everything. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.gal-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(62% 62% at 50% 44%, #000, transparent 100%);
  mask-image: radial-gradient(62% 62% at 50% 44%, #000, transparent 100%);
  animation: gal-drift 24s linear infinite;
}

@keyframes gal-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

/* Two soft lights. Radial gradients rather than solid circles under a blur
   filter - the gradient is soft on its own, and blurring a 500px box is the one
   thing on this page a mid-range phone would actually feel. */
.gal-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.gal-hero-glow-a {
  top: -200px;
  right: -110px;
  width: 470px;
  height: 470px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.4), rgba(255, 126, 178, 0) 68%);
  animation: gal-float-a 19s ease-in-out infinite;
}

.gal-hero-glow-b {
  bottom: -250px;
  left: -150px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.24), rgba(255, 210, 130, 0) 68%);
  animation: gal-float-b 23s ease-in-out infinite;
}

@keyframes gal-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-58px, 42px, 0) scale(1.12); }
}

@keyframes gal-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(68px, -48px, 0) scale(1.09); }
}

.gal-hero-inner {
  position: relative;
  z-index: 1;
}

.gal-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.gal-hero-title {
  margin: 21px 0 16px;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--white);
}

.gal-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave it invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gal-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gal-shine 7s linear infinite;
  }
}

@keyframes gal-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

.gal-hero-text {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: justify;
}

/* Centred under the copy, with the dividing rules between the figures rather
   than to the left of each - a centred row led by a rule looks like a list that
   has lost its first item. */
.gal-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
  margin-top: 34px;
}

.gal-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
  padding-left: 40px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  text-align: left;
}

.gal-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Proportional figures: these are display-sized standalone numbers, and
   equal-width digits leave a figure like 121 looking loose. The minimum width
   is what keeps the row from shuffling sideways while the count runs. */
.gal-stat-num {
  min-width: 2ch;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.gal-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Button --- */
.gal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    color 0.3s ease;
}

.gal-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.gal-btn:hover::before,
.gal-btn:focus-visible::before {
  left: 110%;
}

.gal-btn > * {
  position: relative;
}

.gal-btn:hover,
.gal-btn:focus-visible {
  transform: translateY(-3px);
}

.gal-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.gal-btn-primary:hover,
.gal-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Listing --- */
.gal-listing {
  padding: 56px 0 84px;
}

/* --- Toolbar ---
   The chips and the search box share a row and both narrow the same wall. The
   chips take the space they need and the box holds its own width beside them;
   below the breakpoint each takes a line of its own. */
.gal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-bottom: 40px;
}

/* --- Category filter chips --- */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Narrows the wall already on the page, so it is styled as a field rather than
   as a form: no button beside it, because there is nothing to submit. */
.gal-search {
  position: relative;
  flex: 0 1 300px;
}

.gal-search i {
  position: absolute;
  top: 50%;
  left: 17px;
  color: var(--body-text);
  font-size: 0.86rem;
  transform: translateY(-50%);
  transition: color 0.3s ease;
  pointer-events: none;
}

.gal-search input {
  width: 100%;
  padding: 11px 18px 11px 42px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  color: var(--heading-color);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gal-search input::placeholder {
  color: #a9a9a9;
}

.gal-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(152, 28, 78, 0.1);
}

.gal-search:focus-within i {
  color: var(--primary);
}

.gal-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid rgba(152, 28, 78, 0.18);
  border-radius: 50px;
  background: var(--white);
  color: var(--body-text);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The fill sweeps in from the left rather than the background simply
   switching colour, so moving along the row of chips feels continuous. */
.gal-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

/* The chip fill is an ::before, so everything meant to sit on top of it needs
   its own stacking position - a bare text node would be painted straight over. */
.gal-filter-label,
.gal-filter-count {
  position: relative;
  z-index: 1;
}

.gal-filter:hover {
  color: var(--primary);
  border-color: rgba(152, 28, 78, 0.45);
  transform: translateY(-2px);
}

.gal-filter.is-active {
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(152, 28, 78, 0.25);
}

.gal-filter.is-active::before {
  transform: scaleX(1);
}

.gal-filter-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 50px;
  background: rgba(152, 28, 78, 0.09);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

.gal-filter.is-active .gal-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

/* --- Masonry wall --- */
.gal-grid {
  columns: 3;
  column-gap: 22px;
}

/* Columns fill left to right, so one photo published - or one left after a
   filter - would otherwise sit in the first of three columns with two empty
   ones beside it. At these counts the wall takes a shape that fits what is on
   it, and the script keeps that in step with the filter. */
.gal-grid.is-one {
  columns: 1;
  max-width: 640px;
  margin: 0 auto;
}

.gal-grid.is-two {
  columns: 2;
  max-width: 920px;
  margin: 0 auto;
}

.gal-item {
  break-inside: avoid;
  margin: 0 0 22px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--gal-delay, 0ms);
}

.gal-item.is-visible {
  opacity: 1;
  transform: none;
}

/* The tiles are filtered by toggling [hidden]; without this the display set
   above would keep beating the UA stylesheet and nothing would disappear. */
.gal-item[hidden] {
  display: none;
}

.gal-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.07);
  cursor: zoom-in;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-card:hover,
.gal-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(152, 28, 78, 0.22);
  outline: none;
}

.gal-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--light-bg);
  /* The card clips the corners, so the media needs no radius of its own -
     rounding it here would leave gaps where it meets the caption below. */
  isolation: isolate;
}

.gal-media img {
  width: 100%;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.gal-card:hover .gal-media img,
.gal-card:focus-visible .gal-media img {
  transform: scale(1.09);
  filter: saturate(1.08);
}

/* Wine tint over the photo on hover. The caption no longer sits on it, so it is
   an even wash whose only job is to set off the expand badge in the middle. */
.gal-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(152, 28, 78, 0.55) 0%,
    rgba(116, 6, 51, 0.62) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gal-card:hover .gal-shade,
.gal-card:focus-visible .gal-shade {
  opacity: 1;
}

/* A light streak sweeps diagonally across the tile once on hover. It is
   purely decorative and sits above the photo but below the caption. */
.gal-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.gal-card:hover .gal-media::after {
  animation: galSheen 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes galSheen {
  to {
    left: 130%;
  }
}

/* The expand badge unwinds into place rather than just fading, which reads as
   an invitation to click through to the full-size photo. */
.gal-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  font-size: 1.05rem;
  opacity: 0;
  transform: scale(0.35) rotate(-45deg);
  z-index: 2;
  transition: opacity 0.42s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gal-card:hover .gal-zoom,
.gal-card:focus-visible .gal-zoom {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* The card's text footer. It sits in normal flow under the photo and is always
   visible - the hover effects belong to the image above it, never to the words. */
.gal-caption {
  display: block;
  padding: 16px 18px 18px;
  background: var(--white);
  border-top: 1px solid rgba(152, 28, 78, 0.07);
}

.gal-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 11px;
  border: 1px solid rgba(152, 28, 78, 0.18);
  border-radius: 50px;
  background: rgba(152, 28, 78, 0.06);
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.gal-title {
  display: block;
  color: var(--heading-color);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.2px;
  transition: color 0.35s ease;
}

/* The heading picks up the brand colour with the card, tying the footer to the
   lift happening above it. */
.gal-card:hover .gal-title,
.gal-card:focus-visible .gal-title {
  color: var(--primary);
}

/* Clamped to three lines so one long caption cannot stretch its card far past
   its neighbours. The full text is always readable in the lightbox. */
.gal-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 7px;
  color: var(--body-text);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.65;
}

/* display:flex would outrank the display:none the browser gives [hidden], so
   the line is told to stay down itself - otherwise it sits under a full wall of
   photos announcing that nothing matched. */
.gal-no-results[hidden] {
  display: none;
}

.gal-no-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 50px 0;
  text-align: center;
  color: var(--body-text);
  font-size: 1rem;
}

.gal-no-results i {
  color: var(--primary);
}

.gal-reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gal-reset:hover {
  color: var(--primary-dark);
}

/* --- Nothing published yet --- */
.gal-empty {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 32px 52px;
  border: 1px dashed rgba(152, 28, 78, 0.28);
  border-radius: 24px;
  background: var(--light-bg);
  text-align: center;
}

.gal-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.gal-empty-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.gal-empty-text {
  margin-bottom: 26px;
  color: var(--body-text);
  line-height: 1.85;
}

/* --- Lightbox ---
   Sits above the sticky header (z-index 1000) so nothing shows through it. */
.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: rgba(14, 4, 9, 0.93);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.gal-lightbox.is-open {
  opacity: 1;
}

.gal-lb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  max-width: 100%;
}

/* Turning while the full-size file is on its way, and taken down by the script
   the moment it lands or fails. Centred on the stage rather than on the image,
   which has no size of its own until the file arrives. */
.gal-lb-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  pointer-events: none;
  animation: gal-spin 0.8s linear infinite;
}

@keyframes gal-spin {
  to { transform: rotate(360deg); }
}

.gal-lb-stage img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Set once the photo has actually decoded, so stepping to the next one never
   flashes the previous frame at the size of the new one. */
.gal-lb-stage img.is-loaded {
  opacity: 1;
  transform: none;
}

.gal-lb-info {
  max-width: min(760px, 88vw);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.gal-lb-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.gal-lb-caption {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.7;
}

.gal-lb-close,
.gal-lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gal-lb-close:hover,
.gal-lb-nav:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.09);
}

.gal-lb-close {
  top: 24px;
  right: 26px;
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
}

.gal-lb-nav {
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  font-size: 1.05rem;
}

.gal-lb-prev { left: 26px; }
.gal-lb-next { right: 26px; }

/* One photo in the set - there is nowhere to page to. */
.gal-lightbox.is-single .gal-lb-nav,
.gal-lightbox.is-single .gal-lb-counter {
  display: none;
}

/* Sits up beside the close button rather than along the bottom edge, which now
   belongs to the filmstrip. */
.gal-lb-counter {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* --- Filmstrip ---
   Built by the script from whatever is on the wall, so it is only ever as long
   as the filter the visitor chose. It scrolls sideways on its own and the
   script keeps the current thumbnail in view. */
.gal-lb-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 24px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  -webkit-overflow-scrolling: touch;
}

/* A short strip sits in the middle; a long one starts at the left and scrolls,
   because centring it would push the first thumbnails off the near edge. */
.gal-lb-strip::after {
  content: "";
  flex: 1 0 0;
}

.gal-lb-strip::before {
  content: "";
  flex: 1 0 0;
}

.gal-lb-strip::-webkit-scrollbar {
  height: 6px;
}

.gal-lb-strip::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
}

.gal-lb-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-lb-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gal-lb-thumb:hover,
.gal-lb-thumb:focus-visible {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* The one being shown. A ring rather than a border, so it does not change the
   thumbnail's size and shuffle the strip along as it moves. */
.gal-lb-thumb.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--white);
}

/* One photo in the set - there is nothing to choose between. */
.gal-lightbox.is-single .gal-lb-strip {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .gal-grid,
  .gal-grid.is-two {
    columns: 2;
  }

  .gal-hero {
    padding: 60px 0 56px;
  }
}

@media (max-width: 768px) {
  .gal-hero {
    padding: 56px 0 48px;
  }

  .gal-listing {
    padding: 44px 0 64px;
  }

  /* Each takes a line of its own: the chips need the full width to wrap
     sensibly, and the box below them reads as belonging to the same row. */
  .gal-toolbar {
    gap: 14px;
    margin-bottom: 30px;
  }

  .gal-filters,
  .gal-search {
    flex: 1 1 100%;
  }

  .gal-filters {
    gap: 8px;
  }

  .gal-filter {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .gal-zoom {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    font-size: 0.9rem;
  }

  .gal-caption {
    padding: 14px 16px 16px;
  }

  .gal-lb-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .gal-lb-counter {
    top: 22px;
  }

  .gal-lb-nav {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }

  .gal-lb-prev { left: 10px; }
  .gal-lb-next { right: 10px; }

  .gal-lb-stage img {
    max-height: 58vh;
  }

  .gal-lb-strip {
    gap: 8px;
    padding: 10px 14px 14px;
  }

  .gal-lb-thumb {
    width: 58px;
    height: 42px;
  }
}

@media (max-width: 560px) {
  .gal-hero {
    padding: 48px 0 44px;
  }

  .gal-hero-text,
  .gal-hero-text p {
    font-size: 0.97rem;
  }

  /* The figures stack, so the dividing rule goes to the left of each one - down
     here it is separating rows, not columns. */
  .gal-hero-stats {
    gap: 14px;
  }

  .gal-stat,
  .gal-stat:first-child {
    flex: 1 1 100%;
    min-height: 0;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.28);
  }

  .gal-stat-num {
    font-size: 1.7rem;
  }

  .gal-grid,
  .gal-grid.is-one,
  .gal-grid.is-two {
    columns: 1;
    max-width: none;
  }
}

/* Honour a reduced-motion preference: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  /* The grid behind the hero is only motion, so with the motion gone there is
     nothing left worth painting. */
  .gal-hero-grid {
    display: none;
  }

  .gal-hero-glow {
    animation: none;
  }

  /* The sheen is dropped and the word goes back to plain white - the emphasis
     was always the weight, not the movement. */
  .gal-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .gal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gal-btn,
  .gal-btn::before,
  .gal-lb-thumb {
    transition: none;
  }

  .gal-card:hover,
  .gal-card:focus-visible,
  .gal-filter:hover,
  .gal-btn:hover,
  .gal-btn:focus-visible,
  .gal-lb-close:hover,
  .gal-lb-nav:hover,
  .gal-lb-thumb:hover,
  .gal-lb-thumb:focus-visible {
    transform: none;
  }

  .gal-card:hover .gal-media img,
  .gal-card:focus-visible .gal-media img {
    transform: none;
  }

  .gal-card:hover .gal-media::after {
    animation: none;
  }

  /* The spinner still has to say "waiting", so it steps round rather than
     sweeping - the one piece of movement here that carries meaning. */
  .gal-lb-spinner {
    animation-duration: 2.4s;
    animation-timing-function: steps(8, end);
  }

  .gal-zoom {
    transition: opacity 0.2s ease;
  }

  .gal-card:hover .gal-zoom,
  .gal-card:focus-visible .gal-zoom {
    transform: scale(1) rotate(0deg);
  }

  /* Stepping to the next photo still swaps it, it simply does not scale in. */
  .gal-lb-stage img {
    transition: opacity 0.2s ease;
    transform: none;
  }
}


/* ===== Biomedical Waste Report (biomedical-report.php) =====
   A statutory disclosure page: a downloadable collection report and the
   month-wise waste table published per year.

   The table is the page, so it gets the care. Each bag column is keyed by a
   colour token rather than a hex value in the markup, which keeps the palette
   here and lets an editor pick "yellow" without picking a shade that fails
   contrast. Three tones are carried per token: --bmw-head is a darkened tone
   that white header text can actually sit on and that every bar and accent is
   drawn in, --bmw-dot is the true bag colour shown as a swatch so nothing is
   lost to that darkening, and --bmw-wash is the same hue at a step light enough
   to sit behind text. Yellow and white are the reason for the split - neither
   can carry white text, and both have to stay recognisable as yellow and white.

   Above each table sits one tile per category carrying that category's year
   total and its share of the whole. Every meter is measured against the same
   whole, so the bars compare across the row - which is exactly what a bar drawn
   inside each table column could not have done, each column having a range of
   its own. The figure is printed on every tile and in every cell, so nothing
   here is ever read off a colour or a bar alone.

   The month column is sticky. A six-column table has to scroll on a phone, and
   a scrolling table whose row labels slide away is a table you cannot read.

   Everything that moves animates transform, opacity or a width - and all of it
   is switched off in the prefers-reduced-motion block at the end. */

/* --- Hero --- */
.bmw-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 76px 0 72px;
  background:
    radial-gradient(120% 130% at 18% 0%, #a92159 0%, rgba(169, 33, 89, 0) 58%),
    linear-gradient(125deg, #5c0d2d 0%, #981c4e 52%, #6b1036 100%);
  color: var(--white);
  text-align: center;
}

/* An uploaded banner sits behind the gradient rather than above it as a band of
   its own. The gradient is re-declared over the picture at a weight that still
   carries white text, so the heading never lands on whatever happens to be in
   the photograph. */
.bmw-hero.has-banner {
  background:
    linear-gradient(125deg, rgba(92, 13, 45, 0.93) 0%, rgba(152, 28, 78, 0.88) 52%, rgba(107, 16, 54, 0.94) 100%),
    var(--bmw-banner) center / cover no-repeat;
}

/* A fine grid panning behind everything. It slides exactly one cell before
   repeating, so the loop has no seam, and it is masked to nothing at the edges
   so it never reaches the crisp boundary of the section. */
.bmw-hero-grid {
  position: absolute;
  inset: -40% -25%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(62% 62% at 50% 44%, #000, transparent 100%);
  mask-image: radial-gradient(62% 62% at 50% 44%, #000, transparent 100%);
  animation: bmw-drift 24s linear infinite;
}

@keyframes bmw-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(62px, 62px, 0); }
}

/* Two soft lights. Radial gradients rather than solid circles under a blur
   filter - the gradient is soft on its own, and blurring a 500px box is the one
   thing on this page a mid-range phone would actually feel. */
.bmw-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.bmw-hero-glow-a {
  top: -200px;
  right: -110px;
  width: 470px;
  height: 470px;
  background: radial-gradient(circle, rgba(255, 126, 178, 0.38), rgba(255, 126, 178, 0) 68%);
  animation: bmw-float-a 19s ease-in-out infinite;
}

.bmw-hero-glow-b {
  bottom: -250px;
  left: -150px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(146, 220, 180, 0.2), rgba(146, 220, 180, 0) 68%);
  animation: bmw-float-b 23s ease-in-out infinite;
}

@keyframes bmw-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-58px, 42px, 0) scale(1.12); }
}

@keyframes bmw-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(68px, -48px, 0) scale(1.09); }
}

.bmw-hero-inner {
  position: relative;
  z-index: 1;
}

.bmw-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.bmw-hero-eyebrow i {
  animation: bmw-spin 9s linear infinite;
}

@keyframes bmw-spin {
  0%, 62%  { transform: rotate(0deg); }
  82%, 100% { transform: rotate(360deg); }
}

.bmw-hero-title {
  margin: 21px 0 16px;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--white);
}

.bmw-hero-title strong {
  font-weight: 700;
}

/* A slow sheen travelling across the emphasised word. Guarded because without
   background-clip the same rules leave it invisible rather than plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bmw-hero-title strong {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 36%, #ffd7e6 47%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: bmw-shine 7s linear infinite;
  }
}

@keyframes bmw-shine {
  from { background-position: 165% 0; }
  to   { background-position: -65% 0; }
}

/* The intro comes out of the CMS editor carrying its own colours and sizes. The
   site-wide typography lock near the top of this file already holds it to one
   face; these hold it to one size and one colour on the dark band, which is
   what stops a pasted-in paragraph arriving as grey-on-maroon. */
.bmw-hero-copy {
  max-width: 740px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: justify;
}

.bmw-hero-copy p,
.bmw-hero-copy li,
.bmw-hero-copy span {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.02rem !important;
}

.bmw-hero-copy p + p {
  margin-top: 14px;
}

.bmw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* Centred under the copy, and the dividing rules sit between the figures rather
   than to the left of each - a centred row led by a rule looks like a list that
   has lost its first item. */
.bmw-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
  margin-top: 38px;
}

.bmw-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
  padding-left: 40px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  text-align: left;
}

.bmw-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Proportional figures, not tabular: these are display-sized standalone
   numbers, and equal-width digits leave a figure like 121 looking loose. The
   fixed minimum width is what keeps the row from shuffling sideways while the
   count runs, which is the job tabular figures would otherwise have done. */
.bmw-stat-num {
  min-width: 3ch;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.bmw-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Buttons ---
   Three of them: white on the maroon hero, outlined on the same, and the house
   gradient for a light background. All share the lift and the sheen. */
.bmw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

.bmw-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

.bmw-btn:hover::before,
.bmw-btn:focus-visible::before {
  left: 110%;
}

.bmw-btn > * {
  position: relative;
}

.bmw-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bmw-btn:hover,
.bmw-btn:focus-visible {
  transform: translateY(-3px);
}

.bmw-btn:hover i,
.bmw-btn:focus-visible i {
  transform: scale(1.12);
}

.bmw-btn-solid {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.75);
}

.bmw-btn-solid:hover,
.bmw-btn-solid:focus-visible {
  color: var(--primary-dark);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.85);
}

.bmw-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.bmw-btn-ghost:hover,
.bmw-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.bmw-btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  box-shadow: 0 14px 30px -14px rgba(152, 28, 78, 0.9);
}

.bmw-btn-primary:hover,
.bmw-btn-primary:focus-visible {
  color: var(--white);
  box-shadow: 0 22px 38px -16px rgba(152, 28, 78, 0.95);
}

/* --- Download strip --- */
.bmw-downloads {
  padding: 56px 0 0;
}

.bmw-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
}

.bmw-download-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 24px 26px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 24px -18px rgba(16, 16, 16, 0.35);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* A rule wiping across the foot of the card. Anchored left so it reads as the
   card being picked up rather than as something arriving. */
.bmw-download-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.bmw-download-card:hover::after,
.bmw-download-card:focus-within::after {
  transform: scaleX(1);
}

.bmw-download-card:hover,
.bmw-download-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(152, 28, 78, 0.28);
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 26px 50px -26px rgba(152, 28, 78, 0.5);
}

.bmw-download-icon {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(150deg, #faf3f6 0%, #f4e7ed 100%);
  color: var(--primary);
  font-size: 1.35rem;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s ease,
    color 0.45s ease,
    box-shadow 0.45s ease;
}

.bmw-download-card:hover .bmw-download-icon {
  transform: translateY(-3px) rotate(-6deg);
  background: linear-gradient(150deg, var(--primary), var(--primary-light));
  color: var(--white);
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.bmw-download-body {
  flex: 1 1 240px;
  min-width: 0;
}

.bmw-download-title {
  margin: 0 0 5px;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.bmw-download-card:hover .bmw-download-title {
  color: var(--primary);
}

.bmw-download-note {
  margin: 0;
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: justify;
}

/* What the visitor is about to open, read off the file itself. */
.bmw-download-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-bg);
  color: var(--body-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.bmw-download-meta i {
  font-size: 0.68rem;
  color: var(--primary);
}

.bmw-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(152, 28, 78, 0.9);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.bmw-download-btn:hover,
.bmw-download-btn:focus-visible {
  transform: translateY(-2px);
  color: var(--white);
  box-shadow: 0 22px 38px -18px rgba(152, 28, 78, 0.95);
}

.bmw-download-btn i {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bmw-download-btn:hover i {
  transform: translateY(2px);
}

/* --- Report card --- */
.bmw-reports {
  padding: 56px 0 0;
}

.bmw-report {
  padding: 40px 38px 34px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 18px 40px -28px rgba(16, 16, 16, 0.4);
}

.bmw-report + .bmw-report {
  margin-top: 32px;
}

.bmw-report-head {
  margin-bottom: 30px;
  text-align: center;
}

.bmw-report-org {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.bmw-report-title {
  margin: 8px 0 0;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--heading-color);
}

.bmw-report-unit {
  font-weight: 400;
  color: var(--body-text);
}

.bmw-report-unit::before { content: "("; }
.bmw-report-unit::after  { content: ")"; }

.bmw-report-year {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 20px;
  border: 1px solid rgba(152, 28, 78, 0.2);
  border-radius: 999px;
  background: rgba(152, 28, 78, 0.05);
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bmw-report-copy {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--body-text);
  font-size: 0.95rem;
  line-height: 1.85;
  text-align: justify;
}

/* --- Category tiles ---
   One per bag category, carrying that category's year total and its share of
   the whole. Every meter runs against the same whole, so a reader can compare
   across the row; the figure is printed on each tile, so the bar is never the
   only way to read a value. */
.bmw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.bmw-tile {
  padding: 18px 18px 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--white);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.bmw-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--bmw-head) 30%, var(--border-color));
  box-shadow: 0 16px 30px -22px rgba(16, 16, 16, 0.5);
}

/* Two lines are reserved whether the label needs them or not: a category named
   "BROWNISH YELLOW BAGS" wraps where the others do not, and without the reserve
   its figure, bar and share all sit a line lower than everyone else's. */
.bmw-tile-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 33px;
  margin-bottom: 10px;
}

/* The swatch is the same mark the table header carries, so a category reads the
   same in both places. Its own ring is what keeps the white bag visible. */
.bmw-tile .bmw-swatch {
  flex: 0 0 11px;
  margin: 3px 0 0;
}

.bmw-tile-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--body-text);
}

/* Proportional figures: a standalone value at this size reads loose on tabular
   ones. The unit rides alongside rather than inside the number. */
.bmw-tile-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading-color);
}

.bmw-tile-unit {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--body-text);
}

/* The track is the category's own hue at a light step, so the state reads
   across the whole bar rather than only where it is filled. */
.bmw-meter {
  display: block;
  overflow: hidden;
  height: 6px;
  margin: 12px 0 8px;
  border-radius: 999px;
  background: var(--bmw-wash, #eef1f5);
}

/* Square where it starts, rounded where it ends, and always drawn at the width
   the page printed on it.

   The growing-in is an animation laid over that resting width rather than a
   width the script has to put back. It matters which way round: held at zero
   until a script said otherwise, a bar would stay empty for good on any page
   where the observer never ran - an empty bar beside a figure of 10,437, which
   is worse than no bar at all. This way the resting state is already the true
   one and the movement is the only thing the script is responsible for. */
.bmw-meter-fill {
  display: block;
  width: var(--bmw-share, 0%);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--bmw-head, #475569);
  transform-origin: left center;
}

.bmw-tiles.is-drawn .bmw-meter-fill {
  animation: bmw-meter-grow 1s cubic-bezier(0.16, 1, 0.3, 1) var(--bmw-delay, 0ms) backwards;
}

@keyframes bmw-meter-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.bmw-tile-share {
  font-size: 0.76rem;
  color: var(--body-text);
}

/* --- Table --- */
.bmw-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

.bmw-table-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bmw-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

/* The caption is for print and for a screen reader; on screen the heading above
   the table has already said all of it. */
.bmw-table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bmw-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

.bmw-th {
  background: var(--bmw-head, #475569);
  color: var(--white);
}

.bmw-th + .bmw-th {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.bmw-th-label {
  display: block;
}

/* The true bag colour, kept visible even where the header tone behind it had
   to be darkened to carry white text. */
.bmw-swatch {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--bmw-dot, #94a3b8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* On a white tile the ring has to be ink rather than white, or the white bag's
   swatch disappears into the card. */
.bmw-tile .bmw-swatch {
  box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.22);
}

/* Selector matches the reach of `.bmw-table thead th` above, which would
   otherwise centre this cell along with the bag columns. */
.bmw-table thead .bmw-th-month {
  left: 0;
  z-index: 3;
  background: var(--light-bg);
  color: var(--heading-color);
  text-align: left;
}

/* Body */
.bmw-table tbody th,
.bmw-table tbody td,
.bmw-table tfoot th,
.bmw-table tfoot td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border-color);
}

.bmw-td {
  color: var(--heading-color);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bmw-blank {
  color: #b8bcc4;
}

.bmw-td-month {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heading-color);
  text-align: left;
  white-space: nowrap;
}

.bmw-table tbody tr:nth-child(even) .bmw-td,
.bmw-table tbody tr:nth-child(even) .bmw-td-month {
  background: #fcfcfd;
}

.bmw-table tbody tr:hover .bmw-td,
.bmw-table tbody tr:hover .bmw-td-month {
  background: rgba(152, 28, 78, 0.05);
}

/* The highest month in each column. A wash of that column's own hue with the
   figure set in ink over it - the mark is the background, never the text
   colour, and the key under the table says in words what it means. */
.bmw-td.is-peak {
  position: relative;
  font-weight: 700;
  background: var(--bmw-wash, #eef1f5);
}

.bmw-table tbody tr:nth-child(even) .bmw-td.is-peak,
.bmw-table tbody tr:hover .bmw-td.is-peak {
  background: var(--bmw-wash, #eef1f5);
}

/* A hairline of the category's full tone along the foot of the marked cell, so
   the mark is not carried by a pale wash alone. */
.bmw-td.is-peak::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--bmw-head, #475569);
}

.bmw-total-row .bmw-td,
.bmw-total-row .bmw-td-month {
  background: linear-gradient(120deg, var(--primary-dark), var(--primary) 70%, var(--primary-light));
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 0;
}

.bmw-th-month,
.bmw-td-month {
  position: sticky;
  left: 0;
  z-index: 1;
}

.bmw-td-month {
  background: var(--white);
}

/* --- Bag colour tokens ---
   --bmw-head carries white text and draws every bar and accent; --bmw-dot is
   the true bag colour on its swatch; --bmw-wash is the same hue at a step light
   enough to sit behind a figure in ink. */
.bmw-col-red {
  --bmw-head: #b32423;
  --bmw-dot: #ef4444;
  --bmw-wash: #fbe9e9;
}

.bmw-col-white {
  --bmw-head: #475569;
  --bmw-dot: #ffffff;
  --bmw-wash: #eceff3;
}

.bmw-col-amber {
  --bmw-head: #a1610a;
  --bmw-dot: #d99a20;
  --bmw-wash: #fbf0dc;
}

.bmw-col-yellow {
  --bmw-head: #927007;
  --bmw-dot: #facc15;
  --bmw-wash: #fbf3d6;
}

.bmw-col-blue {
  --bmw-head: #1e40af;
  --bmw-dot: #3b82f6;
  --bmw-wash: #e6ecfb;
}

.bmw-col-green {
  --bmw-head: #15803d;
  --bmw-dot: #22c55e;
  --bmw-wash: #e3f5ea;
}

.bmw-col-black {
  --bmw-head: #1f2937;
  --bmw-dot: #0f172a;
  --bmw-wash: #e8eaee;
}

.bmw-col-purple {
  --bmw-head: #6d28d9;
  --bmw-dot: #a855f7;
  --bmw-wash: #f0e8fd;
}

.bmw-col-neutral {
  --bmw-head: #475569;
  --bmw-dot: #94a3b8;
  --bmw-wash: #eceff3;
}

/* --- Under the table --- */
.bmw-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
}

.bmw-table-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

/* The same wash-and-hairline the marked cells carry, at key size. */
.bmw-key-mark {
  display: inline-block;
  width: 26px;
  height: 15px;
  border-radius: 4px;
  background: #eceff3;
  box-shadow: inset 0 -2px 0 0 #8792a6;
}

.bmw-scroll-hint {
  display: none;
  margin: 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

.bmw-scroll-hint i {
  margin-right: 5px;
}

/* --- Closing note --- */
.bmw-notes {
  padding: 40px 0 76px;
}

.bmw-note-card {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  border-radius: 14px;
  background: var(--light-bg);
}

.bmw-note-card + .bmw-note-card {
  margin-top: 16px;
}

.bmw-note-icon {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.05rem;
  line-height: 1.7;
}

.bmw-note-body {
  min-width: 0;
}

.bmw-note-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--heading-color);
}

.bmw-note-copy {
  color: var(--body-text);
  font-size: 0.92rem;
  line-height: 1.85;
  text-align: justify;
}

.bmw-note-copy p + p {
  margin-top: 12px;
}

/* --- Nothing published yet --- */
.bmw-empty {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 32px 52px;
  border: 1px dashed rgba(152, 28, 78, 0.28);
  border-radius: 24px;
  background: var(--light-bg);
  text-align: center;
}

.bmw-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 16px 28px -14px rgba(152, 28, 78, 0.85);
}

.bmw-empty-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--heading-color);
}

.bmw-empty-text {
  margin-bottom: 26px;
  color: var(--body-text);
  line-height: 1.85;
}

/* --- Reveal on scroll ---
   The hidden state hangs off an attribute the page's script writes, not off the
   class in the markup: if that script never runs, the content is simply visible
   instead of stranded at opacity 0. */
.bmw-reveal[data-bmw-reveal] {
  opacity: 0;
}

.bmw-reveal[data-bmw-reveal].is-in {
  opacity: 1;
  animation: bmw-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes bmw-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .bmw-hero {
    padding: 58px 0 56px;
  }

  .bmw-report {
    padding: 32px 24px 28px;
  }
}

@media (max-width: 768px) {
  .bmw-download-grid {
    grid-template-columns: 1fr;
  }

  .bmw-download-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* The table scrolls sideways from here down, so the hint earns its place. */
  .bmw-scroll-hint {
    display: block;
  }

  .bmw-table-foot {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .bmw-hero {
    padding: 48px 0 48px;
  }

  .bmw-hero-copy,
  .bmw-hero-copy p,
  .bmw-hero-copy li,
  .bmw-hero-copy span {
    font-size: 0.97rem !important;
  }

  /* Two buttons side by side come down to two slivers at this width, so they
     take a line each instead. */
  .bmw-hero-actions .bmw-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* The figures stack, so the dividing rule goes to the left of each one - down
     here it is separating rows, not columns. */
  .bmw-hero-stats {
    gap: 14px;
  }

  .bmw-stat,
  .bmw-stat:first-child {
    flex: 1 1 100%;
    min-height: 0;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.28);
  }

  .bmw-stat-num {
    font-size: 1.7rem;
  }

  .bmw-downloads,
  .bmw-reports {
    padding-top: 40px;
  }

  .bmw-report {
    padding: 26px 18px 24px;
    border-radius: 18px;
  }

  .bmw-report-org {
    font-size: 1.12rem;
  }

  .bmw-tiles {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .bmw-tile {
    padding: 15px 14px 13px;
  }

  .bmw-tile-value {
    font-size: 1.36rem;
  }

  .bmw-table tbody th,
  .bmw-table tbody td,
  .bmw-table tfoot th,
  .bmw-table tfoot td {
    padding: 11px 8px;
  }

  .bmw-td {
    font-size: 0.88rem;
  }

  .bmw-notes {
    padding: 32px 0 56px;
  }

  .bmw-note-card {
    padding: 20px 18px;
  }
}

/* Honour a reduced-motion preference: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  /* The grid behind the hero is only motion, so with the motion gone there is
     nothing left worth painting. */
  .bmw-hero-grid {
    display: none;
  }

  .bmw-hero-glow,
  .bmw-hero-eyebrow i {
    animation: none;
  }

  /* The sheen is dropped and the word goes back to plain white - the emphasis
     was always the weight, not the movement. */
  .bmw-hero-title strong {
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    animation: none;
  }

  .bmw-reveal[data-bmw-reveal],
  .bmw-reveal[data-bmw-reveal].is-in {
    opacity: 1;
    animation: none;
  }

  /* The bars are the data, so they stay drawn at their share - they simply do
     not run out to it. */
  .bmw-tiles.is-drawn .bmw-meter-fill {
    animation: none;
  }

  .bmw-btn,
  .bmw-btn::before,
  .bmw-download-card,
  .bmw-download-icon,
  .bmw-download-btn,
  .bmw-tile {
    transition: none;
  }

  .bmw-btn:hover,
  .bmw-btn:focus-visible,
  .bmw-btn:hover i,
  .bmw-btn:focus-visible i,
  .bmw-download-card:hover,
  .bmw-download-card:focus-within,
  .bmw-download-card:hover .bmw-download-icon,
  .bmw-download-btn:hover,
  .bmw-download-btn:hover i,
  .bmw-tile:hover {
    transform: none;
  }
}

/* ===== Announcements / Notice Board (announcements.php) =====
   Deliberately not shaped like the other content pages. A notice board is
   scanned rather than read start to finish, so the page is built from pieces
   that can be taken in at a glance: a scrolling ticker of headlines, one
   spotlight notice, then a filterable wall of cards. Everything that moves
   here can be stopped, and all of it stops on its own under
   prefers-reduced-motion at the bottom of this section.

   Class prefix: ann-. The older announce- classes (the floating button and the
   empty state) are further up this file and are still used by this page. */

/* Filtering sets the hidden property on cards, and a class selector would
   otherwise outrank the UA stylesheet [hidden] rule and leave them on screen. */
.ann-card[hidden],
.ann-spotlight[hidden],
.ann-card-full[hidden],
.ann-modal[hidden],
.ann-noresults[hidden] {
  display: none !important;
}

/* --- Hero --- */
.ann-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 74px;
  background: linear-gradient(120deg, #6b1036 0%, #981c4e 52%, #740633 100%);
  background-size: cover;
  background-position: center;
  color: var(--white);
  isolation: isolate;
}

/* Radar rings behind the copy - the bullhorn drawn as motion rather than as a
   second icon. Purely decorative, so they sit behind everything and are never
   announced. */
.ann-hero-rings {
  position: absolute;
  top: 50%;
  right: 7%;
  width: 260px;
  height: 260px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
}

.ann-hero-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ann-radar 4.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.ann-hero-rings i:nth-child(2) { animation-delay: 1.6s; }
.ann-hero-rings i:nth-child(3) { animation-delay: 3.2s; }

@keyframes ann-radar {
  0%   { transform: scale(0.25); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

.ann-hero-inner {
  position: relative;
  max-width: 820px;
}

.ann-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.ann-hero-title {
  margin: 20px 0 14px;
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--white);
}

.ann-hero-title strong {
  font-weight: 700;
}

.ann-hero-text {
  max-width: 620px;
  font-size: 1.04rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}

.ann-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 32px;
}

.ann-stat {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.ann-stat-num {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

/* "3 days ago" is a sentence, not a number, so it stops competing with the
   counts beside it for the same visual weight. */
.ann-stat-num-sm {
  font-size: 1.05rem;
  font-weight: 600;
  padding-top: 8px;
}

.ann-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Ticker / marquee ---
   The track holds the same list twice and slides exactly half its own width,
   so the moment the first copy leaves the viewport the second is sitting where
   it began and the loop has no seam. The duration comes from the page as
   --ann-ticker-duration, worked out from how much text is actually in it. */
.ann-ticker {
  display: flex;
  align-items: stretch;
  padding-right: 13px;
  background: var(--dark);
  color: var(--white);
  border-bottom: 3px solid var(--primary);
}

.ann-ticker-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ann-ticker-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.75);
  animation: ann-pulse 2s ease-out infinite;
}

@keyframes ann-pulse {
  70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.ann-ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  /* The first and last few pixels fade out, so a headline slides away rather
     than being cut off mid-letter at the edge of the strip. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.ann-ticker-track {
  display: flex;
  width: max-content;
  animation: ann-marquee var(--ann-ticker-duration, 40s) linear infinite;
}

@keyframes ann-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stopped on hover and while anything inside has keyboard focus - text that
   will not hold still cannot be read. Anyone who has turned motion down never
   sees it move at all; that is handled in the block at the end of this
   section. */
.ann-ticker:hover .ann-ticker-track,
.ann-ticker:focus-within .ann-ticker-track {
  animation-play-state: paused;
}

.ann-ticker-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ann-ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px 15px 0;
  margin-right: 28px;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.ann-ticker-dot {
  font-size: 0.4rem;
  color: var(--primary-light);
}

.ann-ticker-item.is-urgent {
  color: #ffc9c9;
  font-weight: 600;
}

.ann-ticker-item.is-urgent .ann-ticker-dot {
  font-size: 0.82rem;
  color: #ff6b6b;
}

.ann-ticker-date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* The link to the announcements page, at the end of the strip. A circle rather
   than a full-height block, so it reads as a button sitting on the bar instead
   of as one more panel of it - which is also why it has no divider beside it
   and is centred rather than stretched to the height of the strip. */
.ann-ticker-all {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-ticker-all i {
  font-size: 0.8rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-ticker-all:hover,
.ann-ticker-all:focus-visible {
  background: var(--primary);
  border-color: var(--primary-light);
  color: var(--white);
  transform: scale(1.08);
}

.ann-ticker-all:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Inside a circle the arrow has nowhere to travel to, so it turns on the spot
   instead of sliding out of its own button. */
.ann-ticker-all:hover i,
.ann-ticker-all:focus-visible i {
  transform: translateX(2px);
}

/* --- Listing shell --- */
.ann-listing {
  padding: 62px 0 78px;
  background: var(--light-bg);
}

/* --- Spotlight --- */
.ann-spotlight {
  --ann-mx: 50%;
  --ann-my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  margin-bottom: 44px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(16, 16, 16, 0.04), 0 18px 34px -22px rgba(16, 16, 16, 0.4);
  border: 1px solid var(--border-color);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease;
}

.ann-spotlight:hover,
.ann-spotlight:focus-within {
  transform: translateY(-5px);
  border-color: rgba(152, 28, 78, 0.22);
  box-shadow: 0 2px 6px rgba(16, 16, 16, 0.04), 0 30px 54px -26px rgba(152, 28, 78, 0.48);
}

.ann-spotlight.has-no-image {
  grid-template-columns: 1fr;
  border-left: 5px solid var(--primary);
  background: linear-gradient(115deg, rgba(152, 28, 78, 0.06) 0%, rgba(255, 255, 255, 0) 58%);
}

.ann-spotlight.has-no-image.is-urgent {
  border-left-color: #d92d20;
  background: linear-gradient(115deg, rgba(217, 45, 32, 0.07) 0%, rgba(255, 255, 255, 0) 58%);
}

.ann-spotlight.is-urgent {
  border-color: #fca5a5;
  box-shadow: 0 10px 34px rgba(217, 45, 32, 0.16);
}

.ann-spotlight-media {
  position: relative;
  min-height: 320px;
  background: var(--border-color);
}

.ann-spotlight-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-spotlight:hover .ann-spotlight-media img,
.ann-spotlight:focus-within .ann-spotlight-media img {
  transform: scale(1.06);
}

.ann-spotlight-media::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ann-spotlight:hover .ann-spotlight-media::after,
.ann-spotlight:focus-within .ann-spotlight-media::after {
  transform: translateX(100%);
}

.ann-spotlight-body {
  position: relative;
  z-index: 2;
  padding: 38px 40px;
}

.ann-spotlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ann-spotlight-title {
  margin-bottom: 14px;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
}

.ann-spotlight-text {
  margin-bottom: 18px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--body-text);
}

/* --- Flags --- */
.ann-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ann-flag-pin {
  background: rgba(152, 28, 78, 0.1);
  color: var(--primary);
}

/* Urgent breathes. The ring is a box-shadow that expands and fades, so nothing
   around it is pushed about, and it is slow enough to register as emphasis
   rather than as an alarm - this is a hospital, not a fire panel. */
.ann-flag-urgent {
  background: #fee2e2;
  color: #b42318;
  animation: ann-flag-pulse 2.8s ease-out infinite;
}

@keyframes ann-flag-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.4); }
  60%  { box-shadow: 0 0 0 8px rgba(217, 45, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

/* New catches the light every few seconds. overflow clips the band to the
   pill, and the long pause between passes is what keeps it from nagging. */
.ann-flag-new {
  position: relative;
  overflow: hidden;
  background: #dcfce7;
  color: #15803d;
}

.ann-flag-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-100%);
  animation: ann-flag-shimmer 4.5s ease-in-out infinite;
}

@keyframes ann-flag-shimmer {
  0%, 62%  { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}

.ann-flag-cat {
  background: var(--light-bg);
  color: var(--heading-color);
  border: 1px solid var(--border-color);
}

/* --- Toolbar: filters + search --- */
.ann-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.ann-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ann-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  color: var(--heading-color);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.ann-filter:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ann-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(152, 28, 78, 0.24);
}

.ann-filter-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--light-bg);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--body-text);
}

.ann-filter.is-active .ann-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.ann-search {
  position: relative;
  flex: 0 1 280px;
}

.ann-search i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #a3a3a3;
  pointer-events: none;
}

.ann-search input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9rem;
  color: var(--heading-color);
  outline: none;
  transition: var(--transition);
}

.ann-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(152, 28, 78, 0.12);
}

/* --- Card wall ---
   The cards carry most of the motion on this page. Everything below animates
   transform, opacity or a gradient position - nothing here animates a property
   that forces the browser to lay the page out again - and all of it is switched
   off in the prefers-reduced-motion block at the end of this section.

   --ann-mx / --ann-my are written by the page's pointermove handler as
   percentages across the card, and drive the highlight that follows the cursor.
   They default to the centre so a card nobody has pointed at - and every card
   on a touch screen, where that handler never runs - still looks deliberate. */
.ann-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
}

.ann-card {
  --ann-mx: 50%;
  --ann-my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 10px 20px -14px rgba(16, 16, 16, 0.3);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* The highlight that follows the cursor. It sits over the whole card rather
   than behind the text, which is why it is this faint - any stronger and it
   would wash out the paragraph underneath it. */
.ann-card::before,
.ann-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--ann-mx) var(--ann-my),
    rgba(152, 28, 78, 0.1),
    rgba(152, 28, 78, 0) 62%
  );
  transition: opacity 0.4s ease;
}

.ann-card:hover::before,
.ann-card:focus-within::before,
.ann-spotlight:hover::before,
.ann-spotlight:focus-within::before {
  opacity: 1;
}

/* A rule that wipes across the foot of the card on hover. Anchored left so it
   reads as the card being picked up rather than as something arriving, and on
   the bottom edge rather than the top because up there it would be drawn over
   the poster - and against the dark fallback tile a maroon gradient on maroon
   is no rule at all. */
.ann-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.ann-card:hover::after,
.ann-card:focus-within::after {
  transform: scaleX(1);
}

.ann-card:hover,
.ann-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(152, 28, 78, 0.22);
  /* Tinted rather than grey: a plain black shadow under a coloured card reads
     as dirt, and this one reads as the card lifting off the page. */
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 24px 42px -20px rgba(152, 28, 78, 0.45);
}

.ann-card.is-urgent {
  border-color: #fecaca;
}

.ann-card.is-urgent::before {
  background: radial-gradient(
    260px circle at var(--ann-mx) var(--ann-my),
    rgba(217, 45, 32, 0.12),
    rgba(217, 45, 32, 0) 62%
  );
}

.ann-card.is-urgent::after {
  background: linear-gradient(90deg, #ef4444, #b42318);
}

.ann-card.is-urgent:hover,
.ann-card.is-urgent:focus-within {
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 24px 42px -20px rgba(217, 45, 32, 0.5);
}

.ann-card-top {
  position: relative;
}

.ann-card-media {
  position: relative;
  height: 178px;
  overflow: hidden;
  background: var(--light-bg);
}

.ann-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-card:hover .ann-card-media img,
.ann-card:focus-within .ann-card-media img {
  /* The half-degree turn is what stops this reading as a flat zoom. */
  transform: scale(1.08) rotate(0.6deg);
}

/* A scrim under the date medallion and the flags, so white-on-photo stays
   legible whatever poster an admin uploads. Only over real photographs - the
   fallback tile below is already dark enough. */
.ann-card-media:not(.ann-card-media-blank)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.34) 0%, rgba(16, 16, 16, 0) 46%);
}

/* A band of light drawn across the poster on hover. It starts and finishes
   fully outside the frame, so at rest there is nothing to see. */
.ann-card-media::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ann-card:hover .ann-card-media::after,
.ann-card:focus-within .ann-card-media::after {
  transform: translateX(100%);
}

/* No poster uploaded: the category icon on the house gradient, so the grid
   keeps its rhythm instead of collapsing around a shorter card. */
.ann-card-media-blank {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
}

/* A light that opens out behind the icon. The scrim above is skipped for this
   tile, so ::before is free to be this instead. */
.ann-card-media-blank::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 68%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-card:hover .ann-card-media-blank::before,
.ann-card:focus-within .ann-card-media-blank::before {
  opacity: 1;
  transform: scale(1);
}

.ann-card-media-blank i {
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.82);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.ann-card:hover .ann-card-media-blank i,
.ann-card:focus-within .ann-card-media-blank i {
  transform: translateY(-5px) scale(1.1);
  color: var(--white);
}

.ann-card-date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(3px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.ann-card:hover .ann-card-date,
.ann-card:focus-within .ann-card-date {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.ann-card-day {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--primary);
}

.ann-card-mon {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--body-text);
}

.ann-card-flags {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ann-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.ann-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-bottom: 11px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.ann-card-cat i {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-card:hover .ann-card-cat i,
.ann-card:focus-within .ann-card-cat i {
  transform: translateY(-1px) rotate(-9deg) scale(1.14);
}

.ann-card-title {
  margin-bottom: 10px;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--heading-color);
}

/* The heading is the thing people aim at, so where there is a body to read it
   opens the dialog itself. A real <button> keeps that reachable from the
   keyboard; everything here is undoing the button look. No underline on hover -
   the card is already lifting, tinting and drawing a rule along its foot, and a
   line under the heading on top of all that was one cue too many. */
.ann-card-titlebtn,
.ann-spotlight-titlebtn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: color 0.35s ease;
}

.ann-card:hover .ann-card-titlebtn,
.ann-card-titlebtn:focus-visible,
.ann-spotlight:hover .ann-spotlight-titlebtn,
.ann-spotlight-titlebtn:focus-visible {
  color: var(--primary);
}

.ann-card-titlebtn:focus-visible,
.ann-spotlight-titlebtn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.ann-card-text {
  margin-bottom: 16px;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--body-text);
}

.ann-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px dashed var(--border-color);
  font-size: 0.78rem;
  color: #8b8b8b;
  transition: border-top-color 0.45s ease;
}

.ann-card:hover .ann-card-meta,
.ann-card:focus-within .ann-card-meta {
  border-top-color: rgba(152, 28, 78, 0.24);
}

.ann-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ann-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}
/* --- Buttons --- */
.ann-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-position 0.55s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.ann-btn i {
  font-size: 0.78rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The fill slides rather than cross-fading: one oversized gradient whose
   position is animated, which costs nothing to composite. */
.ann-btn-primary {
  background-image: linear-gradient(110deg, var(--primary-dark) 0%, var(--primary) 38%, var(--primary-light) 70%, var(--primary) 100%);
  background-size: 260% 100%;
  background-position: 88% 0;
  color: var(--white);
  box-shadow: 0 4px 12px -4px rgba(152, 28, 78, 0.5);
}

.ann-btn-primary:hover,
.ann-btn-primary:focus-visible {
  background-position: 0 0;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(152, 28, 78, 0.55);
}

/* The arrow moves, not the whole button - the label stays where the eye
   already is while the thing that means "onward" travels. */
.ann-btn-primary:hover i,
.ann-btn-primary:focus-visible i {
  transform: translateX(4px);
}

.ann-btn-ghost {
  border-color: var(--border-color);
  background: var(--white);
  color: var(--heading-color);
}

.ann-btn-ghost:hover,
.ann-btn-ghost:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(152, 28, 78, 0.45);
}

.ann-btn-ghost:hover i,
.ann-btn-ghost:focus-visible i {
  transform: translateY(-1px) scale(1.08);
}

/* --- Nothing matched --- */
.ann-noresults {
  padding: 46px 20px;
  text-align: center;
  font-size: 0.98rem;
  color: var(--body-text);
}

.ann-noresults i {
  display: block;
  margin-bottom: 12px;
  font-size: 1.9rem;
  color: var(--border-color);
}

.ann-reset {
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Reveal on scroll ---
   Cards rise, settle and come up to full size together. The scale is what
   makes it read as the card arriving rather than sliding, and it is small
   enough that the text inside never looks like it is being resized. */
.ann-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 0.7s ease var(--ann-delay, 0ms),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--ann-delay, 0ms);
}

.ann-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Detail dialog --- */
.ann-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ann-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ann-modal.is-open .ann-modal-backdrop {
  opacity: 1;
}

.ann-modal-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 36px 38px 30px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ann-modal.is-open .ann-modal-panel {
  opacity: 1;
  transform: none;
}

.ann-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--heading-color);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.ann-modal-close:hover {
  background: var(--primary);
  color: var(--white);
}

.ann-modal-head {
  padding-right: 44px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}

.ann-modal-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.ann-modal-title {
  margin-bottom: 12px;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.34;
  color: var(--heading-color);
}

.ann-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.8rem;
  color: #8b8b8b;
}

.ann-modal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ann-modal-body {
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--body-text);
}

.ann-modal-body p {
  margin-bottom: 14px;
}

/* The site-wide reset strips list markers, and the editor behind these
   notices offers bullet and numbered list buttons - so a list written with
   them has to actually read as one here. */
.ann-modal-body ul,
.ann-modal-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.ann-modal-body ul {
  list-style: disc;
}

.ann-modal-body ol {
  list-style: decimal;
}

.ann-modal-body li {
  margin-bottom: 7px;
}

.ann-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ann-modal-foot:empty {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .ann-spotlight {
    grid-template-columns: 1fr;
  }

  .ann-spotlight-media {
    min-height: 240px;
  }

  .ann-spotlight-body {
    padding: 30px 26px;
  }
}

@media (max-width: 768px) {
  .ann-hero {
    padding: 62px 0 54px;
  }

  .ann-hero-rings {
    width: 170px;
    height: 170px;
    right: -30px;
    opacity: 0.55;
  }

  .ann-hero-stats {
    gap: 12px 22px;
  }

  .ann-stat-num {
    font-size: 1.45rem;
  }

  .ann-ticker-label {
    padding: 0 14px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  .ann-ticker-item {
    padding: 13px 22px 13px 0;
    margin-right: 20px;
    font-size: 0.85rem;
  }


  .ann-listing {
    padding: 42px 0 56px;
  }

  .ann-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ann-search {
    flex: 1 1 auto;
  }

  .ann-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ann-modal {
    padding: 14px;
  }

  .ann-modal-panel {
    max-height: 92vh;
    padding: 30px 22px 24px;
  }
}

@media (max-width: 480px) {
  /* The label and the link are fixed width, so on a narrow screen every pixel
     they give back is a pixel of headline. Shrinking the circle is the cheapest
     way to buy that room without dropping the link - it used to be dropped here
     entirely, back when it was a word rather than an icon. */
  .ann-ticker-all {
    width: 29px;
    height: 29px;
    margin-left: 7px;
  }

  .ann-ticker-all i {
    font-size: 0.7rem;
  }

  .ann-filters {
    gap: 8px;
  }

  .ann-filter {
    padding: 8px 13px;
    font-size: 0.82rem;
  }

  .ann-card-actions .ann-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Nothing on this page moves on its own for anyone who has asked it not to.
   The ticker keeps its content rather than losing it: the animation stops and
   the viewport becomes scrollable, so every headline is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .ann-hero-rings,
  .ann-ticker-pulse {
    animation: none;
  }

  .ann-hero-rings {
    display: none;
  }

  .ann-ticker-track {
    animation: none;
  }

  .ann-ticker-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The duplicate copy is only there to make the loop seamless; with no loop
     it is just every notice listed twice. */
  .ann-ticker-list[aria-hidden="true"] {
    display: none;
  }

  /* The pills stop flashing, but keep their colour - that is what carries the
     meaning, and it was never the movement doing that work. */
  .ann-flag-urgent {
    animation: none;
  }

  .ann-flag-new::after {
    display: none;
  }

  .ann-card,
  .ann-card::before,
  .ann-card::after,
  .ann-card-media img,
  .ann-card-media::after,
  .ann-card-media-blank i,
  .ann-card-date,
  .ann-card-cat i,
  .ann-card-meta,
  .ann-card-titlebtn,
  .ann-spotlight,
  .ann-spotlight::before,
  .ann-spotlight-media img,
  .ann-spotlight-media::after,
  .ann-spotlight-titlebtn,
  .ann-btn,
  .ann-btn i,
  .ann-filter,
  .ann-modal-panel,
  .ann-modal-backdrop,
  .ann-reveal {
    transition: none;
  }

  /* Every hover that moved something is flattened. The colour changes and the
     underline on a heading stay, so a card still answers when pointed at. */
  .ann-card:hover,
  .ann-card:focus-within,
  .ann-spotlight:hover,
  .ann-spotlight:focus-within,
  .ann-btn-primary:hover,
  .ann-btn-primary:focus-visible,
  .ann-btn-ghost:hover,
  .ann-btn-ghost:focus-visible {
    transform: none;
  }

  .ann-card:hover .ann-card-media img,
  .ann-card:focus-within .ann-card-media img,
  .ann-card:hover .ann-card-media-blank i,
  .ann-card:focus-within .ann-card-media-blank i,
  .ann-card:hover .ann-card-date,
  .ann-card:focus-within .ann-card-date,
  .ann-card:hover .ann-card-cat i,
  .ann-card:focus-within .ann-card-cat i,
  .ann-spotlight:hover .ann-spotlight-media img,
  .ann-spotlight:focus-within .ann-spotlight-media img,
  .ann-btn-primary:hover i,
  .ann-btn-primary:focus-visible i,
  .ann-btn-ghost:hover i,
  .ann-btn-ghost:focus-visible i,
  .ann-ticker-all:hover i,
  .ann-ticker-all:focus-visible i,
  .ann-ticker-all:hover,
  .ann-ticker-all:focus-visible {
    transform: none;
  }

  /* The sweeps have nowhere to travel to, so they are removed rather than
     parked mid-frame across the poster. */
  .ann-card-media::after,
  .ann-spotlight-media::after {
    display: none;
  }

  /* The aura behind a fallback icon simply stays on. */
  .ann-card-media-blank::before {
    transition: none;
    opacity: 1;
    transform: scale(1);
  }

  /* The rule along the foot arrives at full width instead of wiping in, so the
     hover state still reads. */
  .ann-card:hover::after,
  .ann-card:focus-within::after {
    transform: scaleX(1);
  }

  .ann-reveal {
    opacity: 1;
    transform: none;
  }
}
/* ===== Blog article page (blog.php) =====
   The listing at blogs.php keeps the older "Blog Cards" block further up this
   file - .blogs-grid, .blog-card, .blog-title and the rest. Nothing here may
   reuse those names, which is why the cards in the "Continue Reading" strip at
   the foot of an article are .blog-post-card rather than .blog-card: two rules
   of the same name, one of them appended later, would have quietly restyled
   the listing page as well.

   Class prefix: blog-post-. Built from the same pieces as the notice board
   (.ann-) above, because those are the two places on this site where dated
   things are browsed and then opened.

   --blog-mx / --blog-my are written by the page's pointermove handler as
   percentages across a card and drive the highlight that follows the cursor.
   They default to the centre, so a card nobody has pointed at - and every card
   on a touch screen, where that handler never runs - still looks deliberate. */

/* --- Reading progress ---
   Fixed rather than sticky, and above the header's z-index: the header is
   sticky at top: 0 itself, so anything below it in the stack is covered the
   moment the page moves. Scaled from the left rather than having its width set,
   so the page is never laid out again mid-scroll.

   It only ever sits over the maroon of the top bar or the header, which is why
   the track is white and the fill is the cream from the logo - the house maroon
   on maroon would be no bar at all. */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  height: 3px;
  /* It is only a readout, and it lies across the top edge of the nav bar - it
     must not be the thing a click lands on. */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.18);
}

/* JS hides the whole strip for a post that fits on one screen. A class selector
   would otherwise outrank the UA stylesheet's [hidden] rule. */
.blog-progress[hidden],
.blog-share-done[hidden] {
  display: none !important;
}

.blog-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #e8649a 55%, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Article hero --- */
.blog-post-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  padding: 120px 0 56px;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
  isolation: isolate;
}

/* Without a cover there is no photograph to sit the title on, so the house
   gradient takes its place and the band gets shorter - there is less to look
   at, and holding the same height would just be empty maroon. */
.blog-post-hero.has-no-image {
  min-height: 0;
  padding: 74px 0 52px;
  background: linear-gradient(120deg, #6b1036 0%, #981c4e 52%, #740633 100%);
}

.blog-post-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.blog-post-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Dark enough at the foot for white text to hold up over any photograph, and
   carrying the house colour so the band reads as part of this site rather than
   as a stock image with a caption on it. */
.blog-post-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16, 16, 16, 0.9) 0%, rgba(16, 16, 16, 0.55) 45%, rgba(16, 16, 16, 0.25) 100%),
    linear-gradient(115deg, rgba(107, 16, 54, 0.75) 0%, rgba(107, 16, 54, 0) 62%);
}

.blog-post-hero-inner {
  position: relative;
  max-width: 900px;
}

.blog-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}

.blog-crumbs a {
  color: rgba(255, 255, 255, 0.88);
}

.blog-crumbs a:hover {
  color: var(--white);
  text-decoration: underline;
}

.blog-crumbs i {
  font-size: 0.6rem;
  opacity: 0.6;
}

.blog-post-title {
  margin-bottom: 20px;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1.24;
  color: var(--white);
  /* The covers are photographs, and no scrim is dark everywhere - this keeps
     the heading legible over whatever happens to be behind a given word. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.86);
}

.blog-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-post-byline {
  padding: 5px 15px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.blog-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.blog-post-avatar-blank {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
}

/* --- Article shell ---
   Two columns on a wide screen: a narrow sticky rail for the share buttons and
   the article itself. Below 1100px the rail becomes a row above the text, which
   is the same markup with the grid turned off. */
.blog-post-shell {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  padding-top: 46px;
  padding-bottom: 20px;
  max-width: 1000px;
}

.blog-share {
  position: sticky;
  /* Clear of the sticky header, which is why this is not simply 20px. */
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.blog-share-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3a3a3;
  writing-mode: vertical-rl;
  margin-bottom: 4px;
}

.blog-share-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--white);
  color: var(--heading-color);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.blog-share-btn:hover,
.blog-share-btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 20px -8px rgba(152, 28, 78, 0.6);
}

.blog-share-done {
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
}

.blog-post-body {
  min-width: 0;
}

/* The sentence under the headline. Set larger and lighter than the body, with a
   rule down its edge, so it reads as a standfirst rather than as a first
   paragraph that someone italicised by hand. */
.blog-post-standfirst {
  margin-bottom: 28px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary);
  font-size: 1.1rem;
  line-height: 1.75;
  font-weight: 500;
  color: var(--heading-color);
  text-align: justify;
}

/* The posts are pasted in from a word processor and arrive carrying their own
   inline font sizes and colours, which no selector here can outrank. What this
   can do is set the measure and the rhythm around them. Justified, like every
   other block of body copy on this site - .content-area, which this sits
   inside, sets that already. */
.blog-post-content {
  font-size: 1.02rem;
  line-height: 1.95;
}

.blog-post-content p {
  margin-bottom: 20px;
}

.blog-post-content h2,
.blog-post-content h3 {
  margin-top: 34px;
}

.blog-post-content img {
  margin: 26px 0;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 16, 16, 0.05), 0 18px 34px -24px rgba(16, 16, 16, 0.5);
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 0 0 20px 22px;
}

.blog-post-content ul { list-style: disc; }
.blog-post-content ol { list-style: decimal; }

.blog-post-content li {
  margin-bottom: 9px;
}

.blog-post-content a {
  color: var(--primary);
  text-decoration: underline;
}

.blog-post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-color);
}

/* --- Buttons --- */
.blog-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-position 0.55s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.blog-btn i {
  font-size: 0.78rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The fill slides rather than cross-fading: one oversized gradient whose
   position is animated, which costs nothing to composite. */
.blog-btn-primary {
  background-image: linear-gradient(110deg, var(--primary-dark) 0%, var(--primary) 38%, var(--primary-light) 70%, var(--primary) 100%);
  background-size: 260% 100%;
  background-position: 88% 0;
  color: var(--white);
  box-shadow: 0 4px 12px -4px rgba(152, 28, 78, 0.5);
}

.blog-btn-primary:hover,
.blog-btn-primary:focus-visible {
  background-position: 0 0;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(152, 28, 78, 0.55);
}

/* The arrow moves, not the whole button - the label stays where the eye already
   is while the thing that means "onward" travels. */
.blog-btn-primary:hover i,
.blog-btn-primary:focus-visible i {
  transform: translateX(4px);
}

.blog-btn-ghost {
  border-color: var(--border-color);
  background: var(--white);
  color: var(--heading-color);
}

.blog-btn-ghost:hover,
.blog-btn-ghost:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(152, 28, 78, 0.45);
}

/* This one's arrow points back the way it came, so it travels that way too. */
.blog-btn-ghost:hover i,
.blog-btn-ghost:focus-visible i {
  transform: translateX(-4px);
}

/* --- Author card --- */
.blog-author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding: 24px 26px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  border-radius: 16px;
  background: linear-gradient(115deg, rgba(152, 28, 78, 0.05) 0%, rgba(255, 255, 255, 0) 60%), var(--white);
}

.blog-author-photo {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--white);
  box-shadow: 0 6px 18px -8px rgba(16, 16, 16, 0.5);
}

.blog-author-photo-blank {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  color: var(--white);
  font-size: 1.8rem;
}

.blog-author-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.blog-author-name {
  margin: 4px 0 2px;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--heading-color);
}

.blog-author-role {
  margin-bottom: 8px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--body-text);
}

.blog-author-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
}

.blog-author-link i {
  font-size: 0.7rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-author-link:hover i {
  transform: translateX(4px);
}

/* --- Continue reading --- */
.blog-more {
  padding: 58px 0 74px;
  background: var(--light-bg);
}

.blog-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.blog-more-title {
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 300;
  color: var(--heading-color);
}

.blog-more-title strong {
  font-weight: 700;
  color: var(--primary);
}

.blog-more-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary);
}

.blog-more-all i {
  font-size: 0.72rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-more-all:hover i {
  transform: translateX(4px);
}

/* --- The cards in that strip ---
   Everything below animates transform, opacity or a gradient position, so
   nothing here forces the browser to lay the page out again, and all of it is
   switched off in the prefers-reduced-motion block at the end of this
   section. */
.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
}

.blog-post-card {
  --blog-mx: 50%;
  --blog-my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 10px 20px -14px rgba(16, 16, 16, 0.3);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

/* The highlight that follows the cursor. It sits over the whole card rather
   than behind the text, which is why it is this faint - any stronger and it
   would wash out the paragraph underneath it. */
.blog-post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--blog-mx) var(--blog-my),
    rgba(152, 28, 78, 0.1),
    rgba(152, 28, 78, 0) 62%
  );
  transition: opacity 0.4s ease;
}

.blog-post-card:hover::before,
.blog-post-card:focus-within::before {
  opacity: 1;
}

/* A rule that wipes across the foot of the card on hover. Anchored left, so it
   reads as the card being picked up rather than as something arriving. */
.blog-post-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.blog-post-card:hover::after,
.blog-post-card:focus-within::after {
  transform: scaleX(1);
}

.blog-post-card:hover,
.blog-post-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(152, 28, 78, 0.22);
  /* Tinted rather than grey: a plain black shadow under a coloured card reads
     as dirt, and this one reads as the card lifting off the page. */
  box-shadow: 0 2px 4px rgba(16, 16, 16, 0.04), 0 24px 42px -20px rgba(152, 28, 78, 0.45);
}

.blog-post-card-top {
  position: relative;
}

/* A ratio rather than a fixed height: every cover on this site is 16:9-ish, so
   at this shape almost nothing is cropped, and a card that is handed something
   else still lines up with its neighbours in the row. */
.blog-post-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--light-bg);
}

.blog-post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centred, so the little that is trimmed comes off both edges evenly rather
     than taking the caption off the bottom of a poster. */
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-post-card:hover .blog-post-card-media img,
.blog-post-card:focus-within .blog-post-card-media img {
  transform: scale(1.07);
}

/* Keeps the white date tile readable over a pale photograph. */
.blog-post-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0.3) 0%, rgba(16, 16, 16, 0) 42%);
}

.blog-post-card-media-blank {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
}

/* The scrim above would be invisible on this tile, so ::after is free to be a
   light opening out behind the icon instead. */
.blog-post-card-media-blank::after {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 68%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-post-card:hover .blog-post-card-media-blank::after,
.blog-post-card:focus-within .blog-post-card-media-blank::after {
  opacity: 1;
  transform: scale(1);
}

.blog-post-card-media-blank i {
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.82);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.blog-post-card:hover .blog-post-card-media-blank i,
.blog-post-card:focus-within .blog-post-card-media-blank i {
  transform: translateY(-5px) scale(1.1);
  color: var(--white);
}

.blog-post-card-date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(3px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.blog-post-card:hover .blog-post-card-date,
.blog-post-card:focus-within .blog-post-card-date {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.blog-post-card-day {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--primary);
}

.blog-post-card-mon {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--body-text);
}

/* Catches the light every few seconds. overflow clips the band to the pill, and
   the long pause between passes is what keeps it from nagging. */
.blog-post-flag-new {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  overflow: hidden;
  padding: 5px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.blog-post-flag-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-100%);
  animation: blog-shimmer 4.5s ease-in-out infinite;
}

@keyframes blog-shimmer {
  0%, 62%   { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}

.blog-post-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.blog-post-card-author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: 11px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-bg);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--heading-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-post-card-author i {
  flex: 0 0 auto;
  color: var(--primary);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-post-card:hover .blog-post-card-author i,
.blog-post-card:focus-within .blog-post-card-author i {
  transform: scale(1.15);
}

.blog-post-card-title {
  margin-bottom: 9px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.42;
}

/* Colour only on hover - no rule under the heading. The card already lifts,
   tints and slides its arrow, which is plenty of answer to a pointer. */
.blog-post-card-title a {
  color: var(--heading-color);
  transition: color 0.35s ease;
}

.blog-post-card:hover .blog-post-card-title a,
.blog-post-card-title a:focus-visible {
  color: var(--primary);
}

/* The heading's link covers the whole card, so the cover, the blurb and the
   arrow below are all part of the one target - without the markup nesting a
   heading inside an anchor and handing a screen reader the entire card as link
   text. */
.blog-post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.blog-post-card-title a:focus-visible::after {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: 18px;
}

/* Justified, like every other block of body copy on this site. */
.blog-post-card-text {
  margin-bottom: 16px;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--body-text);
  text-align: justify;
}

.blog-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px dashed var(--border-color);
  font-size: 0.78rem;
  color: #8b8b8b;
  transition: border-top-color 0.45s ease;
}

.blog-post-card:hover .blog-post-card-meta,
.blog-post-card:focus-within .blog-post-card-meta {
  border-top-color: rgba(152, 28, 78, 0.24);
}

.blog-post-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--primary);
}

.blog-post-card-more i {
  font-size: 0.72rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The arrow moves, not the words - the label stays where the eye already is
   while the thing that means "onward" travels. */
.blog-post-card:hover .blog-post-card-more i,
.blog-post-card:focus-within .blog-post-card-more i {
  transform: translateX(5px);
}

/* --- Reveal on scroll ---
   Cards rise, settle and come up to full size together. The scale is what makes
   it read as the card arriving rather than sliding, and it is small enough that
   the text inside never looks like it is being resized. */
.blog-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 0.7s ease var(--blog-delay, 0ms),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--blog-delay, 0ms);
}

.blog-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Responsive --- */
@media (max-width: 1099px) {
  /* The rail has nowhere to stick on a narrow screen, so it lies down above the
     article as an ordinary row of buttons. */
  .blog-post-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .blog-share {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
  }

  .blog-share-label {
    writing-mode: horizontal-tb;
    margin: 0 4px 0 0;
  }
}

@media (max-width: 768px) {
  .blog-post-hero {
    min-height: 340px;
    padding: 90px 0 40px;
  }

  .blog-post-shell {
    padding-top: 34px;
  }

  .blog-post-standfirst {
    font-size: 1.02rem;
  }

  .blog-author-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
  }

  .blog-more {
    padding: 44px 0 56px;
  }

  .blog-post-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .blog-post-foot .blog-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Nothing on this page moves on its own for anyone who has asked it not to.
   The colour changes stay - that is what carries the meaning, and it was never
   the movement doing that work. */
@media (prefers-reduced-motion: reduce) {
  .blog-post-flag-new::after {
    display: none;
  }

  .blog-post-card,
  .blog-post-card::before,
  .blog-post-card::after,
  .blog-post-card-media img,
  .blog-post-card-media-blank::after,
  .blog-post-card-media-blank i,
  .blog-post-card-date,
  .blog-post-card-author i,
  .blog-post-card-meta,
  .blog-post-card-more i,
  .blog-post-card-title a,
  .blog-btn,
  .blog-btn i,
  .blog-share-btn,
  .blog-author-link i,
  .blog-more-all i,
  .blog-reveal {
    transition: none;
  }

  .blog-post-card:hover,
  .blog-post-card:focus-within,
  .blog-btn-primary:hover,
  .blog-btn-primary:focus-visible,
  .blog-btn-ghost:hover,
  .blog-btn-ghost:focus-visible,
  .blog-share-btn:hover,
  .blog-share-btn:focus-visible {
    transform: none;
  }

  .blog-post-card:hover .blog-post-card-media img,
  .blog-post-card:focus-within .blog-post-card-media img,
  .blog-post-card:hover .blog-post-card-media-blank i,
  .blog-post-card:focus-within .blog-post-card-media-blank i,
  .blog-post-card:hover .blog-post-card-date,
  .blog-post-card:focus-within .blog-post-card-date,
  .blog-post-card:hover .blog-post-card-author i,
  .blog-post-card:focus-within .blog-post-card-author i,
  .blog-post-card:hover .blog-post-card-more i,
  .blog-post-card:focus-within .blog-post-card-more i,
  .blog-btn-primary:hover i,
  .blog-btn-primary:focus-visible i,
  .blog-btn-ghost:hover i,
  .blog-btn-ghost:focus-visible i,
  .blog-author-link:hover i,
  .blog-more-all:hover i {
    transform: none;
  }

  /* The light behind a fallback icon simply stays on. */
  .blog-post-card-media-blank::after {
    opacity: 1;
    transform: scale(1);
  }

  /* The rule along the foot arrives at full width instead of wiping in, so the
     hover state still reads. */
  .blog-post-card:hover::after,
  .blog-post-card:focus-within::after {
    transform: scaleX(1);
  }

  .blog-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== Floating Chat Assistant (includes/chatbot.php) =====
   The launcher and the panel share one fixed container in the bottom corner:
   the panel is positioned against that container rather than against the
   viewport, so the pair moves as a unit and flipping the widget to the other
   corner for Arabic is a single rule in rtl.css.

   This corner already had the back-to-top button. The assistant takes the
   corner itself and back-to-top moves up above it - the same stack the
   WhatsApp and announcements buttons form on the other side. Both overrides
   live at the end of this block, next to the measurements they depend on.

   Everything is drawn from the house maroon and Poppins, the same as the rest
   of the site. The widget's own values are declared once on .chatbot below
   rather than repeated down the file, so the whole thing can be re-tinted from
   one place. */
.chatbot {
  /* Surfaces: a near-white panel over a faintly tinted canvas, so the white
     message bubbles have something to sit on and read as raised. */
  --cb-surface: #ffffff;
  --cb-canvas: #faf7fb;
  --cb-ink: #3c3540;
  /* Dark enough for the small print. The disclaimer under the input is
     ~11px, so it needs 4.5:1 on white like any other body text - a lighter
     grey looked tidier and measured 3.55, which is not a legible line. */
  --cb-muted: #78707f;
  --cb-line: rgba(152, 28, 78, 0.1);
  --cb-glow: rgba(152, 28, 78, 0.38);
  --cb-radius: 26px;
  /* A touch of overshoot - things arrive, settle, and stop. The site's own
     --transition is a plain ease for small state changes; a panel springing
     open wants more life than that. */
  --cb-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --cb-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Poppins", sans-serif;
}

/* --- The assistant's face ------------------------------------------------ */
/* One drawing (the symbol in includes/chatbot.php), three sizes. The head
   follows the surrounding text colour; --cb-bot-face is the colour behind the
   head, so the eyes and smile read as cut out of it rather than painted on. */
.chatbot-bot-icon {
  width: 1em;
  height: 1em;
  display: block;
  overflow: visible;
}

.chatbot-bot-face {
  fill: var(--cb-bot-face, #ffffff);
  stroke: var(--cb-bot-face, #ffffff);
}

/* --- Launcher ------------------------------------------------------------ */
.chatbot-launcher {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* Three stops rather than two: the mid tone keeps the orb from looking
     like a flat disc with a dark edge. */
  background: linear-gradient(145deg, var(--primary-light) 0%, var(--primary) 48%, var(--primary-dark) 100%);
  color: var(--white);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 30px var(--cb-glow),
    0 2px 8px rgba(0, 0, 0, 0.14),
    /* A hairline of light along the top edge, which is what reads as a
       raised surface rather than a printed circle. */
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.4s var(--cb-spring), box-shadow 0.35s ease;
}

/* A sheen that sweeps across the orb when it is pointed at. Clipped by the
   launcher's own overflow, so it stays a circle. */
.chatbot-launcher::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    75deg,
    transparent 38%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0.75s var(--cb-ease);
  pointer-events: none;
}

.chatbot-launcher:hover,
.chatbot-launcher:focus-visible {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 18px 40px var(--cb-glow),
    0 3px 10px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.chatbot-launcher:hover::before,
.chatbot-launcher:focus-visible::before {
  transform: translateX(120%);
}

.chatbot-launcher:active {
  transform: translateY(-1px) scale(0.98);
}

.chatbot-launcher:focus-visible {
  outline: 3px solid rgba(194, 37, 98, 0.45);
  outline-offset: 3px;
}

/* Until the widget has been opened once this session, the orb breathes: the
   glow swells and settles rather than flashing. An invitation, not an alarm.
   On the shadow alone, so nothing moves and nothing is repainted around it. */
.chatbot-launcher.has-dot {
  animation: chatbotBreathe 3.2s ease-in-out infinite;
}

@keyframes chatbotBreathe {
  0%, 100% {
    box-shadow:
      0 10px 30px var(--cb-glow),
      0 0 0 0 rgba(194, 37, 98, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  50% {
    box-shadow:
      0 14px 34px var(--cb-glow),
      0 0 0 14px rgba(194, 37, 98, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}

.chatbot-launcher:hover,
.chatbot-launcher:focus-visible {
  animation: none;
}

/* The two glyphs sit on top of each other and trade places, so the button
   turns from "chat" into "close" without the icon jumping. */
.chatbot-launcher-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  transition: opacity 0.3s ease, transform 0.5s var(--cb-spring);
}

/* White head on the maroon orb, with the orb showing through its eyes. */
.chatbot-launcher .chatbot-bot-icon {
  width: 2.45rem;
  height: 2.45rem;
  --cb-bot-face: var(--primary);
}

.chatbot-launcher-shut {
  opacity: 0;
  transform: rotate(-120deg) scale(0.4);
}

.chatbot.is-open .chatbot-launcher-open {
  opacity: 0;
  transform: rotate(120deg) scale(0.4);
}

.chatbot.is-open .chatbot-launcher-shut {
  opacity: 1;
  transform: none;
}

/* Unread-style dot. Carried by the launcher until the panel is opened. */
.chatbot-launcher-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #35c47a;
  border: 2.5px solid var(--white);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.3s ease, transform 0.45s var(--cb-spring);
  z-index: 2;
}

.chatbot-launcher.has-dot .chatbot-launcher-dot {
  opacity: 1;
  transform: none;
}

/* --- Nudge --------------------------------------------------------------- */
.chatbot-teaser {
  position: absolute;
  right: calc(100% + 16px);
  bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: 244px;
  padding: 13px 13px 13px 16px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line);
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 18px 40px rgba(60, 20, 40, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  opacity: 0;
  transform: translateX(14px) scale(0.94);
  transform-origin: bottom right;
  transition: opacity 0.4s ease, transform 0.55s var(--cb-spring);
}

.chatbot-teaser.is-shown {
  opacity: 1;
  transform: none;
}

.chatbot-teaser:hover {
  box-shadow: 0 22px 46px rgba(60, 20, 40, 0.2);
}

.chatbot-teaser-text {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--heading-color);
}

.chatbot-teaser-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: -2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f4eff3;
  color: #908a97;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.chatbot-teaser-close:hover {
  background: var(--primary);
  color: var(--white);
  transform: rotate(90deg);
}

/* --- Panel --------------------------------------------------------------- */
.chatbot-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 170px));
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  overflow: hidden;
  /* Layered rather than one big blur: a tight contact shadow to seat it, a
     wide soft one for depth, and a maroon-tinted spread so it belongs to the
     page rather than floating in neutral grey. */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 24px 50px rgba(60, 20, 40, 0.18),
    0 40px 90px rgba(116, 6, 51, 0.16);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.5s var(--cb-spring);
}

.chatbot.is-open .chatbot-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --- Panel header -------------------------------------------------------- */
.chatbot-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 16px 18px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 52%, var(--primary-dark) 100%);
  color: var(--white);
  overflow: hidden;
  /* Its own top corners, matching the panel's. The panel already clips with
     overflow: hidden, but the drifting lights below are animated, which puts
     this header on its own compositing layer - and a composited layer is not
     clipped by an ancestor's rounded corners, so the top-left came out square.
     Rounding the header itself holds whether it is composited or not. */
  border-start-start-radius: var(--cb-radius);
  border-start-end-radius: var(--cb-radius);
}

/* Two soft lights drifting behind the header, slowly and out of step, so the
   band has some depth and movement without anything legible moving. */
.chatbot-head::before,
.chatbot-head::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.chatbot-head::before {
  top: -120%;
  right: -10%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 70%);
  animation: chatbotDrift 14s ease-in-out infinite;
}

.chatbot-head::after {
  bottom: -150%;
  left: 8%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 248, 209, 0.18) 0%, rgba(255, 248, 209, 0) 70%);
  animation: chatbotDrift 18s ease-in-out infinite reverse;
}

@keyframes chatbotDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-26px, 18px); }
}

.chatbot-avatar {
  position: relative;
  flex: 0 0 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
  z-index: 1;
}

/* On the header's own translucent disc, so the eyes take the maroon behind it. */
.chatbot-avatar .chatbot-bot-icon {
  width: 1.95rem;
  height: 1.95rem;
  --cb-bot-face: var(--primary);
}

.chatbot-avatar-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #35c47a;
  border: 2px solid var(--primary);
  /* A quiet "we are here" pulse, slow enough to be noticed only once. */
  animation: chatbotOnline 2.6s ease-in-out infinite;
}

@keyframes chatbotOnline {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 196, 122, 0.6); }
  70%      { box-shadow: 0 0 0 7px rgba(53, 196, 122, 0); }
}

.chatbot-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  z-index: 1;
}

.chatbot-head-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.chatbot-head-status {
  display: flex;
  align-items: center;
  font-size: 0.74rem;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-head-close {
  margin-inline-start: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 0.88rem;
  cursor: pointer;
  z-index: 1;
  transition: background 0.25s ease, transform 0.35s var(--cb-spring);
}

.chatbot-head-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* --- Conversation -------------------------------------------------------- */
.chatbot-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cb-canvas);
  scrollbar-width: thin;
  scrollbar-color: #ded5e1 transparent;
}

.chatbot-log::-webkit-scrollbar {
  width: 6px;
}

.chatbot-log::-webkit-scrollbar-thumb {
  background: #ded5e1;
  border-radius: 999px;
}

.chatbot-log::-webkit-scrollbar-thumb:hover {
  background: #cdc0d2;
}

.chatbot-msg {
  display: flex;
  /* Beside the first line, not the last: against a bubble five lines tall an
     avatar pinned to the bottom floats away from the name it belongs to. */
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  animation: chatbotMsgIn 0.5s var(--cb-spring) both;
}

@keyframes chatbotMsgIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.chatbot-msg-avatar {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(194, 37, 98, 0.16), rgba(152, 28, 78, 0.1));
  border: 1px solid rgba(152, 28, 78, 0.12);
  color: var(--primary);
  font-size: 0.76rem;
}

/* Beside a reply the head is maroon on a pale tint, so the face is the tint. */
.chatbot-msg-avatar .chatbot-bot-icon {
  width: 1.3rem;
  height: 1.3rem;
  --cb-bot-face: #f7eef3;
}

.chatbot-bubble {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 18px;
  /* The corner nearest its avatar is the clipped one, which is what points a
     bubble at its speaker. Now that the avatar sits at the top, so does it. */
  border-start-start-radius: 6px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line);
  box-shadow: 0 3px 14px rgba(60, 20, 40, 0.07);
}

.chatbot-bubble-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--cb-ink);
  white-space: pre-line;
  /* Each line takes its direction from its own words. The assistant answers
     in English, the Arabic page runs right to left, and a visitor may type in
     either: without this an English reply in the Arabic page hangs its full
     stops and bullets off the wrong end of the line. */
  unicode-bidi: plaintext;
  text-align: start;
}

/* The visitor's own messages: no avatar, pushed to the far side, and in the
   house colour so the two voices never have to be read apart. */
.chatbot-msg-user {
  justify-content: flex-end;
}

.chatbot-msg-user .chatbot-bubble {
  margin-inline-start: auto;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  border-color: transparent;
  border-radius: 18px;
  border-start-end-radius: 6px;
  box-shadow: 0 6px 18px rgba(152, 28, 78, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chatbot-msg-user .chatbot-bubble-text {
  color: var(--white);
}

/* --- Links inside an answer ---------------------------------------------- */
/* Named, never spelled out: the assistant writes "[Contact page](url)" and
   chatbot.js renders the label alone. The underline grows in from the start
   on hover rather than simply appearing. */
.chatbot-link {
  position: relative;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.25s ease;
}

.chatbot-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.45;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s var(--cb-ease), opacity 0.25s ease;
}

.chatbot-link:hover,
.chatbot-link:focus-visible {
  color: var(--primary-dark);
}

.chatbot-link:hover::after,
.chatbot-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1.02);
}

/* --- Typing indicator ---------------------------------------------------- */
.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px;
}

.chatbot-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-light);
  opacity: 0.45;
  animation: chatbotTyping 1.3s ease-in-out infinite;
}

.chatbot-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.chatbot-typing-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes chatbotTyping {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  30%           { transform: translateY(-6px) scale(1.12); opacity: 1; }
}

/* --- Suggested questions ------------------------------------------------- */
.chatbot-chips {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--cb-surface);
  border-top: 1px solid var(--cb-line);
  scrollbar-width: none;
  /* The row scrolls sideways and the bar is hidden, so the trailing edge is
     faded out: a chip cut off mid-word reads as a clipping bug, a chip fading
     out reads as "there is more along here". */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}

.chatbot-chips::-webkit-scrollbar {
  display: none;
}

/* While the chat is still empty the suggestions take that space instead, as a
   list rather than a strip: full width, wrapped, nothing cut off, and large
   enough to be an easy tap. chatbot.js moves the row here and back again. */
.chatbot-chips.is-welcome {
  flex-wrap: wrap;
  margin-top: auto;
  padding: 0;
  overflow: visible;
  background: none;
  border-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
  animation: chatbotMsgIn 0.5s var(--cb-spring) both;
  animation-delay: 0.1s;
}

.chatbot-chips.is-welcome .chatbot-chip {
  flex: 1 0 auto;
  justify-content: flex-start;
  padding: 11px 16px;
  font-size: 0.82rem;
  border-color: rgba(152, 28, 78, 0.18);
  box-shadow: 0 2px 8px rgba(60, 20, 40, 0.06);
}

.chatbot-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid rgba(152, 28, 78, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fdf8fb 100%);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(60, 20, 40, 0.05);
  transition: background 0.3s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.35s var(--cb-spring), box-shadow 0.3s ease;
}

.chatbot-chip i {
  font-size: 0.78rem;
  color: var(--primary-light);
  transition: color 0.25s ease, transform 0.35s var(--cb-spring);
}

.chatbot-chip:hover,
.chatbot-chip:focus-visible {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(152, 28, 78, 0.3);
}

.chatbot-chip:hover i,
.chatbot-chip:focus-visible i {
  color: var(--white);
  transform: scale(1.12);
}

.chatbot-chip:active {
  transform: translateY(0) scale(0.97);
}

/* --- Composer ------------------------------------------------------------ */
.chatbot-form {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px 9px;
  background: var(--cb-surface);
}

.chatbot-input {
  flex: 1;
  min-width: 0;
  padding: 13px 17px;
  border: 1.5px solid #ece5ec;
  border-radius: 999px;
  background: #faf7fb;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--heading-color);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease;
}

/* Dark enough to read against the field's tinted fill. A placeholder is the
   only label this input has, so it has to clear the same bar as body text. */
.chatbot-input::placeholder {
  color: #726b7c;
}

.chatbot-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(194, 37, 98, 0.13);
}

.chatbot-send {
  flex: 0 0 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color: var(--white);
  font-size: 0.94rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(152, 28, 78, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.4s var(--cb-spring), box-shadow 0.3s ease, opacity 0.2s ease;
}

.chatbot-send i {
  display: inline-block;
  transition: transform 0.4s var(--cb-spring);
}

.chatbot-send:hover,
.chatbot-send:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(152, 28, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* The plane takes off a little in the direction it is pointing. */
.chatbot-send:hover i,
.chatbot-send:focus-visible i {
  transform: translate(2px, -2px);
}

.chatbot-send:active {
  transform: scale(0.95);
}

/* While a reply is on its way: one question at a time. */
.chatbot-send:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.chatbot-send:disabled i {
  transform: none;
}

.chatbot-note {
  margin: 0;
  padding: 0 18px 13px;
  background: var(--cb-surface);
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
  color: var(--cb-muted);
}

/* --- The rest of the corner ---------------------------------------------- */
/* Back to top gives up the corner to the assistant and stacks above it: 24px
   offset plus the 64px launcher plus an 18px gap. */
.scroll-to-top {
  bottom: 106px;
}

/* While the panel is open it would otherwise float over the conversation. */
body.chatbot-open .scroll-to-top {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  .chatbot {
    bottom: 16px;
    right: 16px;
  }

  .chatbot-launcher {
    width: 56px;
    height: 56px;
  }

  .chatbot-launcher-face {
    font-size: 1.4rem;
  }

  /* Pinned to the viewport rather than to the launcher, so the panel can use
     the full width of a phone instead of the width of a 56px button. */
  /* Slightly tighter on a phone. Set on the container so the panel and the
     header round by the same amount - see the header's own radius above. */
  .chatbot {
    --cb-radius: 22px;
  }

  .chatbot-panel {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 84px;
    width: auto;
    height: min(74vh, 540px);
  }

  /* The nudge stays beside the launcher rather than above it: above is where
     back to top sits once the visitor has scrolled, and the card would cover
     it. Narrowed to what is left of the width beside a 56px button. */
  .chatbot-teaser {
    bottom: 6px;
    max-width: min(230px, calc(100vw - 100px));
  }

  .scroll-to-top {
    bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-launcher.has-dot,
  .chatbot-typing-dot,
  .chatbot-avatar-dot,
  .chatbot-head::before,
  .chatbot-head::after,
  .chatbot-msg {
    animation: none;
  }

  .chatbot-launcher::before {
    display: none;
  }

  .chatbot-launcher:hover,
  .chatbot-launcher:focus-visible,
  .chatbot-launcher:active,
  .chatbot-send:hover,
  .chatbot-send:active,
  .chatbot-chip:hover,
  .chatbot-chip:active,
  .chatbot-head-close:hover,
  .chatbot-teaser-close:hover,
  .chatbot-send:hover i,
  .chatbot-chip:hover i {
    transform: none;
  }

  .chatbot-panel,
  .chatbot-teaser {
    transition: opacity 0.2s ease;
    transform: none;
  }
}