/* MIdS Green Office — modern experience layer
   This file intentionally sits after the mirrored Assan theme. */

:root {
  --mids-forest: #073b2a;
  --mids-green: #0b6b47;
  --mids-leaf: #21a366;
  --mids-lime: #b7dc67;
  --mids-cream: #f6f7f1;
  --mids-paper: #ffffff;
  --mids-ink: #14251e;
  --mids-muted: #64736c;
  --mids-line: #dce6df;
  --mids-shadow: 0 18px 55px rgba(7, 59, 42, 0.11);
  --mids-shadow-soft: 0 8px 26px rgba(7, 59, 42, 0.08);
  --mids-radius: 24px;

  /* One width for everything the reader looks at, so the content lines up
     with the menu above it instead of sitting in a narrower column. */
  --mids-container: 1380px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  background: var(--mids-cream);
  color: var(--mids-ink);
  font-family: "Prompt", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(183, 220, 103, 0.17), transparent 30rem),
    radial-gradient(circle at 96% 72%, rgba(33, 163, 102, 0.11), transparent 32rem);
}

::selection {
  background: var(--mids-lime);
  color: var(--mids-forest);
}

a {
  color: var(--mids-green);
}

a[data-unavailable="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

a[data-unavailable="true"]::after {
  content: " • ยังไม่มีไฟล์";
  font-size: 0.78em;
  font-weight: 500;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(33, 163, 102, 0.45) !important;
  outline-offset: 3px;
}

/*
 * Every image in content/ carries its intrinsic width and height so the
 * browser can reserve the right box before the file arrives. But those
 * attributes are presentational sizes as well as a ratio, and this theme sizes
 * most images from CSS — usually the width alone, as in style="width:48px".
 * Without height:auto the attribute fixes the height at the file's own: the
 * footer's QR code, capped at 120px wide, was drawn 735px tall.
 *
 * An element selector is deliberate. Every rule that genuinely sets a height —
 * the achievement logo, a cropped card, the navbar mark — is written against a
 * class and still wins, while this catches everything that is not.
 */
img {
  max-width: 100%;
  height: auto;
}

#preloader {
  display: none !important;
}

.mids-skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: white;
  color: var(--mids-forest);
  box-shadow: var(--mids-shadow-soft);
  transform: translateY(-150%);
}

.mids-skip-link:focus {
  transform: translateY(0);
}

.mids-scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 4px;
  background: linear-gradient(90deg, var(--mids-lime), #53d38c);
  box-shadow: 0 0 16px rgba(183, 220, 103, 0.7);
  transition: width 80ms linear;
}

/* Navigation */
.navbar.navbar-transparent,
.navbar.navbar-transparent.nav-sticky.nav-stick-top {
  position: fixed;
  z-index: 1050;
  top: 16px;
  right: 20px;
  left: 20px;
  width: auto;
  min-height: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.91) !important;
  box-shadow: 0 12px 42px rgba(7, 59, 42, 0.14);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.navbar > .container {
  width: min(100%, var(--mids-container));
  max-width: var(--mids-container);
}

.navbar-brand,
.navbar-transparent:not(.nav-sticky) .navbar-brand {
  display: flex;
  align-items: center;
  min-width: 78px;
  margin-right: 18px;
  padding: 2px 10px;
  border-radius: 14px;
  background: transparent;
}

.navbar-brand .logo.logo-dark,
.navbar-brand #impact-logo.logo-light {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: 48px !important;
  object-fit: contain;
  opacity: 1 !important;
  visibility: visible !important;
}

.navbar .logo-light {
  display: none !important;
}

.navbar .logo-dark {
  display: block !important;
}

.navbar-expand-lg .navbar-nav .nav-item {
  margin-left: 2px;
}

/* The top-level menu row, stated once and completely.
   
   Two things in the mirrored theme pulled the entries out of line with each
   other. It centres each <li> on its own content, so a label that wraps to two
   lines and one that does not end up on different axes. And its dropdown caret
   is a 14px FontAwesome glyph — larger than the 13px label — nudged down 5px,
   which made every entry that opens a menu sit differently from every entry
   that just links somewhere: Home, News, Documents and Criteria against the
   rest.

   Rather than correcting each symptom, every entry is given the same height
   and its label is centred within it. That holds however the labels wrap and
   whatever the caret does. */
@media (min-width: 992px) {
  .navbar.navbar-transparent .navbar-nav {
    align-items: stretch;
  }

  .navbar.navbar-transparent .navbar-nav > .nav-item {
    display: flex;
    align-items: stretch;
  }

  .navbar.navbar-transparent .navbar-nav > .nav-item > .nav-link {
    display: flex;
    height: auto;
    align-items: center;
  }

  /* Out of the flow's way: the caret decorates the label, it does not get to
     decide how tall the link is. */
  .navbar.navbar-transparent .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    position: static;
    top: auto;
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
  }
}

.navbar.navbar-transparent .nav-item .nav-link,
.navbar.navbar-transparent.nav-sticky.nav-stick-top .nav-item .nav-link {
  padding: 12px 10px;
  border-radius: 10px;
  color: #234038 !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.1px;
  white-space: normal;
}

.navbar.navbar-transparent .nav-item .nav-link:hover,
.navbar.navbar-transparent .nav-item.show > .nav-link,
.navbar.navbar-transparent .nav-item .nav-link.active {
  background: #e9f5ed;
  color: var(--mids-green) !important;
}

.navbar-toggler {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #e9f5ed;
}

.dropdown-menu {
  min-width: 260px;
  max-width: min(420px, 90vw);
  padding: 10px;
  border: 1px solid var(--mids-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--mids-shadow);
}

.dropdown-menu .dropdown-item {
  padding: 10px 12px;
  border-radius: 10px;
  color: #365148;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: #e9f5ed;
  color: var(--mids-green);
}

/* Hero */
/* The image comes from the hero section in the admin, passed in as
   --mids-hero-image. The url() here is the fallback for a hero with no image
   chosen; !important is needed because the mirrored theme sets a background
   on this element too. */
.bg-parallax.fullscreen {
  isolation: isolate;
  min-height: 760px;
  background:
    linear-gradient(100deg, rgba(3, 27, 29, 0.82) 0%, rgba(4, 45, 36, 0.48) 50%, rgba(5, 62, 41, 0.08) 100%),
    var(--mids-hero-image, url("/images/mids/green-office-hero.webp")) center / cover no-repeat !important;
}

.bg-parallax.fullscreen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(4, 30, 22, 0.05), rgba(4, 30, 22, 0.4)),
    repeating-linear-gradient(120deg, transparent 0 84px, rgba(255, 255, 255, 0.025) 84px 85px);
}

.bg-parallax.fullscreen::after {
  position: absolute;
  right: -100px;
  bottom: -170px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 56px rgba(255, 255, 255, 0.03),
    0 0 0 112px rgba(255, 255, 255, 0.025);
}

.fullscreen .d-flex {
  min-height: 760px;
}

.fullscreen .row {
  justify-content: flex-start;
}

.fullscreen .col-lg-10 {
  max-width: 850px;
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.hero-text-style1 {
  position: relative;
  padding-top: 90px;
}

.hero-text-style1::before {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  content: "MIdS • GREEN OFFICE";
  background: rgba(255, 255, 255, 0.1);
  color: #e5f7d0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  backdrop-filter: blur(8px);
}

.hero-text-style1 h4 {
  max-width: 720px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 400;
  line-height: 1.65;
  text-transform: none !important;
}

.hero-text-style1 h1,
.hero-text-style1 h2 {
  max-width: 820px;
  margin-bottom: 12px;
  color: #fff !important;
  font-size: clamp(3rem, 6.7vw, 6.6rem) !important;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -3px;
  text-transform: none !important;
  text-wrap: balance;
}

.hero-text-style1 .lead {
  display: inline-flex;
  margin-top: 14px;
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--mids-lime);
  color: var(--mids-forest) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

/* Global section rhythm */
main > div > section,
main > div > .container,
main > div > .bg-white,
main > div > .bg-faded,
main > div > .bg-primary {
  position: relative;
}

section {
  padding-block: clamp(56px, 7vw, 108px);
}

section[id] {
  scroll-margin-top: 112px;
}

section:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.68);
}

section .container {
  width: min(100% - 40px, var(--mids-container));
  max-width: var(--mids-container);
}

section h2,
section h3,
.title-heading1 h2,
.title-heading1 h3 {
  color: var(--mids-forest) !important;
  font-weight: 650 !important;
  letter-spacing: -0.7px;
  text-wrap: balance;
}

section h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
}

section h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
}

.title-heading1 {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 42px;
}

.title-heading1::before {
  display: block;
  width: 52px;
  height: 5px;
  margin: 0 auto 22px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--mids-leaf), var(--mids-lime));
}

hr {
  border-top-color: var(--mids-line);
}

/* MIdS achievement banner and editorial image panels */
#award2025.mids-achievement {
  z-index: 2;
  margin-top: -84px;
  padding: 0 0 54px;
  background: transparent;
}

#award2025.mids-achievement .container {
  padding-inline: 0;
}

.mids-achievement-card {
  position: relative;
  display: grid;
  min-height: 510px;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--mids-radius);
  /* The photo is chosen in the admin and arrives as --mids-achievement-image;
     the url() here is what a card with no image chosen falls back to. */
  background:
    linear-gradient(90deg, transparent 0 43%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.86) 78%, rgba(255, 255, 255, 0.96) 100%),
    var(--mids-achievement-image, url("/images/mids/green-office-achievement.webp"))
      center / cover no-repeat;
  box-shadow: var(--mids-shadow);
}

.mids-achievement-copy {
  align-self: center;
  width: min(48%, 560px);
  margin-left: auto;
  padding: clamp(34px, 5vw, 76px);
  color: var(--mids-forest);
}

.mids-achievement-logo {
  display: block;
  width: auto;
  max-width: min(100%, 310px);
  height: 62px;
  margin-bottom: 30px;
  object-fit: contain;
  object-position: left center;
}

.mids-achievement-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(7, 59, 42, 0.08);
  color: var(--mids-green);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1.5px;
}

.mids-achievement-copy h2 {
  margin-bottom: 8px;
  color: var(--mids-forest) !important;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.1;
}

.mids-achievement-copy strong {
  display: block;
  margin-bottom: 18px;
  color: #a57413;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.mids-achievement-copy p {
  margin: 0;
  color: #496057;
  font-size: 1rem;
  line-height: 1.7;
}

/* Complete MIdS visual story */
.mids-visual-section {
  position: relative;
  padding: clamp(72px, 8vw, 118px) 0;
  background: var(--mids-paper);
}

.mids-visual-section:nth-of-type(even) {
  background: #f5f8f4;
}

.mids-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--mids-green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.mids-section-kicker::before {
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mids-leaf), var(--mids-lime));
  content: "";
}

.mids-section-head {
  max-width: 790px;
  margin: 0 auto 44px;
  text-align: center;
}

.mids-section-head .mids-section-kicker {
  justify-content: center;
}

.mids-section-head h2,
.mids-editorial-copy h2,
.mids-wide-story-copy h2,
.mids-waste-copy h2 {
  margin-bottom: 16px;
  color: var(--mids-forest) !important;
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 720 !important;
  line-height: 1.12;
  letter-spacing: -1.4px;
  text-wrap: balance;
}

.mids-section-head p,
.mids-editorial-copy > p,
.mids-wide-story-copy p,
.mids-waste-copy > p {
  color: var(--mids-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
}

.mids-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.84fr);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--mids-line);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--mids-shadow);
}

.mids-editorial-image,
.mids-waste-image {
  min-height: 100%;
  overflow: hidden;
}

.mids-editorial-image img,
.mids-wide-story > img,
.mids-waste-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mids-editorial-copy {
  align-self: center;
  padding: clamp(36px, 5vw, 76px);
}

.mids-inline-logo {
  display: block;
  width: auto;
  max-width: 210px;
  height: 50px;
  margin-bottom: 34px;
  object-fit: contain;
  object-position: left center;
}

.mids-editorial-copy ul {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.mids-editorial-copy li {
  position: relative;
  padding-left: 30px;
  color: #2d483e;
  line-height: 1.6;
}

.mids-editorial-copy li::before {
  position: absolute;
  top: 0.25em;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2f5e8;
  color: var(--mids-green);
  content: "✓";
  font-size: 12px;
  font-weight: 800;
  place-items: center;
}

.mids-people-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(153, 206, 63, 0.18), transparent 32%),
    var(--mids-forest) !important;
}

.mids-wide-story {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 34px 90px rgba(1, 31, 21, 0.35);
}

.mids-wide-story::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 35, 24, 0.92), rgba(2, 35, 24, 0.58) 42%, transparent 72%);
  content: "";
}

.mids-wide-story-copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(30px, 6vw, 82px);
  width: min(520px, calc(100% - 60px));
  transform: translateY(-50%);
}

.mids-wide-story-copy .mids-section-kicker {
  color: var(--mids-lime);
}

.mids-wide-story-copy h2,
.mids-wide-story-copy p {
  color: #fff !important;
}

.mids-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mids-pillar-card {
  min-height: 225px;
  padding: 30px;
  border: 1px solid var(--mids-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--mids-shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mids-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mids-shadow);
}

.mids-pillar-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--mids-green), var(--mids-leaf));
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  place-items: center;
}

.mids-pillar-card:nth-child(3n + 2) > span {
  background: linear-gradient(135deg, #5d3c97, #8064c3);
}

.mids-pillar-card h3,
.mids-image-card h3,
.mids-campaign-grid h3,
.mids-bin-grid h3 {
  margin-bottom: 9px;
  color: var(--mids-forest) !important;
  font-size: 1.18rem;
  font-weight: 700 !important;
}

.mids-pillar-card p,
.mids-image-card p,
.mids-bin-grid p {
  margin: 0;
  color: var(--mids-muted);
  line-height: 1.65;
}

.mids-resource-section {
  background:
    linear-gradient(180deg, #f2f8f4, #fff 64%) !important;
}

.mids-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.mids-image-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--mids-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--mids-shadow-soft);
}

.mids-image-card img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.mids-image-card > div {
  align-self: center;
  padding: 28px;
}

.mids-manage-section {
  padding: 28px 0;
  background: #fff !important;
}

.mids-manage-banner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 74px);
  padding: 30px clamp(28px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% -20%, rgba(123, 94, 180, 0.52), transparent 36%),
    linear-gradient(115deg, var(--mids-forest), #0d6446);
  box-shadow: var(--mids-shadow);
}

.mids-manage-banner > img {
  width: min(240px, 28%);
  max-height: 86px;
  padding: 12px;
  border-radius: 15px;
  background: #fff;
  object-fit: contain;
}

.mids-manage-banner p {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.mids-manage-banner span {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.9rem;
}

.mids-campaign-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.mids-campaign-grid article {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--mids-shadow-soft);
}

.mids-campaign-grid article::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(1, 27, 18, 0.92));
  content: "";
}

.mids-campaign-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.mids-campaign-grid article:hover img {
  transform: scale(1.045);
}

.mids-campaign-grid h3 {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  left: 24px;
  margin: 0;
  color: #fff !important;
}

.mids-learning-section {
  background:
    radial-gradient(circle at 6% 2%, rgba(183, 224, 103, 0.2), transparent 28%),
    linear-gradient(180deg, #f7faf5, #eef5f0) !important;
}

.mids-learning-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--mids-line);
}

.mids-learning-head > div {
  max-width: 760px;
}

.mids-learning-head h2 {
  margin-bottom: 12px;
  color: var(--mids-forest) !important;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 750 !important;
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.mids-learning-head p {
  margin: 0;
  color: var(--mids-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.mids-learning-head > img {
  width: auto;
  max-width: 210px;
  height: 58px;
  object-fit: contain;
}

.mids-learning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.mids-learning-card {
  overflow: hidden;
  border: 1px solid rgba(17, 83, 59, 0.1);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(6, 57, 39, 0.09);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mids-learning-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(6, 57, 39, 0.16);
}

.mids-learning-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: #e7efe9;
}

.mids-learning-image::after {
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(transparent, rgba(2, 35, 24, 0.2));
  content: "";
}

.mids-learning-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.mids-learning-card:hover .mids-learning-image img {
  transform: scale(1.045);
}

.mids-learning-image span {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--mids-green);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  place-items: center;
}

.mids-learning-copy {
  min-height: 168px;
  padding: 23px 22px 25px;
}

.mids-learning-copy h3 {
  margin-bottom: 9px;
  color: var(--mids-forest) !important;
  font-size: 1.14rem;
  font-weight: 720 !important;
  line-height: 1.35;
}

.mids-learning-copy p {
  margin: 0;
  color: var(--mids-muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

.mids-waste-section {
  background: #edf5f0 !important;
}

.mids-waste-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--mids-shadow);
}

.mids-waste-copy {
  align-self: center;
  padding: clamp(36px, 5vw, 70px);
}

.mids-bin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.mids-bin-grid article {
  padding: 18px;
  border-top: 4px solid var(--bin, var(--mids-green));
  border-radius: 14px;
  background: #f7faf8;
}

.mids-bin-grid article[data-bin="2"] {
  --bin: #3f65a6;
}

.mids-bin-grid article[data-bin="3"] {
  --bin: #e8b92c;
}

.mids-bin-grid article[data-bin="4"] {
  --bin: #cf4f45;
}

.mids-bin-grid h3 {
  font-size: 1rem;
}

.mids-bin-grid p {
  font-size: 0.88rem;
}

#poster01 img,
#poster02 img,
#poster03 img,
#misterbin img,
#archplan img,
#arch_dome img,
#arch_fireext img,
#arch_fireexit img,
#arch_oldbuild img {
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--mids-shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#poster01 a:hover img,
#poster02 a:hover img,
#poster03 a:hover img,
#misterbin a:hover img,
#archplan a:hover img {
  transform: translateY(-5px);
  box-shadow: var(--mids-shadow);
}

iframe {
  width: 100%;
  max-width: 860px;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--mids-shadow);
  aspect-ratio: 16 / 9;
}

.mySlides,
.mySlides0 {
  display: none;
}

.mySlides:first-of-type,
.mySlides0:first-of-type {
  display: block;
}

/* Cards, news, campaigns, galleries */
.entry-card,
.card,
.ibox,
.pricing-card,
.service-box,
.feature-box {
  overflow: hidden;
  border: 1px solid var(--mids-line) !important;
  border-radius: 18px !important;
  background: var(--mids-paper);
  box-shadow: var(--mids-shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-card:hover,
.card:hover,
.ibox:hover {
  transform: translateY(-5px);
  box-shadow: var(--mids-shadow);
}

.entry-card img,
.act_cover {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.entry-card .entry-content,
.entry-card .card-body,
.card-body {
  padding: 22px;
}

.entry-card h4,
.entry-card h3,
.entry-card h2 {
  color: var(--mids-ink) !important;
  font-size: 1.08rem;
  line-height: 1.55;
}

.cbp,
.cbp-wrapper,
.cbp-wrapper-outer {
  max-width: 100% !important;
}

.cbp-item {
  padding: 8px;
}

.cbp-caption-defaultWrap,
.cbp-caption {
  overflow: hidden;
  border-radius: 16px;
}

.cbp-l-filters-buttonCenter .cbp-filter-item {
  margin: 4px;
  padding: 8px 15px;
  border: 1px solid var(--mids-line);
  border-radius: 999px;
  background: white;
  color: var(--mids-muted);
}

.cbp-l-filters-buttonCenter .cbp-filter-item.cbp-filter-item-active {
  border-color: var(--mids-green);
  background: var(--mids-green);
  color: #fff;
}

/* Resource metrics */
#energydata {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(7, 59, 42, 0.98), rgba(11, 107, 71, 0.94)),
    url("/images/mids/green-office-energy.webp") center / cover;
  color: white;
}

#energydata h2,
#energydata h3,
#energydata h4,
#energydata p,
#energydata .text-dark,
#energydata .text-muted {
  color: white !important;
}

#energydata .card,
#energydata .ibox,
#energydata [class*="col-"] > div {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Forms and tables */
input.form-control,
select.form-control,
select {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #cbdad1;
  border-radius: 12px;
  background: #fff;
  color: var(--mids-ink);
}

.table-responsive {
  margin-block: 24px;
  border: 1px solid var(--mids-line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--mids-shadow-soft);
}

.table {
  margin-bottom: 0;
  color: #31463e;
}

.table th,
.table td {
  padding: 16px !important;
  border-color: #e4ebe7 !important;
  vertical-align: top;
}

.bg-headtext,
.bg-darkgreen {
  background: var(--mids-green) !important;
}

.bg-headtext h5,
.bg-darkgreen h4 {
  margin: 0;
  color: #fff !important;
}

.table-hover tbody tr:hover {
  background: #f0f8f3;
}

/* Article pages.
   The attribute sits on <main> rather than <body>: the page kind is known by
   the route, and only the route segment renders — the root layout that owns
   <body> never sees it. min-height keeps the tint covering the viewport on
   short pages, which is what the body background used to do. */
main[data-page-kind="article"] {
  min-height: 100vh;
  padding-top: 108px;
  background: #f3f6f2;
}

[data-page-kind="article"] .bg-parallax:not(.fullscreen) {
  min-height: 300px;
  border-radius: 0 0 36px 36px;
  background:
    linear-gradient(100deg, rgba(3, 35, 24, 0.94), rgba(11, 107, 71, 0.76)),
    url("/images/mids/green-office-hero.webp") center 47% / cover !important;
}

[data-page-kind="article"] .bg-parallax:not(.fullscreen) h2,
[data-page-kind="article"] .bg-parallax:not(.fullscreen) h3 {
  color: #fff !important;
}

[data-page-kind="article"] .ibox {
  margin-block: 30px;
  padding: 14px;
}

/* Footer */
.footer,
.footer.footer-dark,
.bg-dark,
footer {
  background: var(--mids-forest) !important;
}

.footer {
  position: relative;
  overflow: hidden;
  padding-top: 70px;
}

.footer::before {
  position: absolute;
  top: -190px;
  right: -120px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025);
}

.footer h3,
.footer h4,
.footer p,
.footer span,
.footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

.footer a:hover {
  color: var(--mids-lime) !important;
}

/* Floating utility actions */
.mids-quick-access {
  position: fixed;
  z-index: 1030;
  right: 22px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--mids-shadow);
  backdrop-filter: blur(16px);
}

.mids-quick-access a,
.mids-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mids-forest);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.mids-quick-access a:hover {
  background: #e9f5ed;
  color: var(--mids-green);
}

.mids-back-to-top {
  width: 42px;
  padding: 0;
  background: var(--mids-green);
  color: #fff;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mids-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}

@media (max-width: 1199.98px) {
  .navbar.navbar-transparent .nav-item .nav-link,
  .navbar.navbar-transparent.nav-sticky.nav-stick-top .nav-item .nav-link {
    padding-inline: 7px;
    font-size: 12px;
  }
}

@media (max-width: 991.98px) {
  .navbar.navbar-transparent,
  .navbar.navbar-transparent.nav-sticky.nav-stick-top {
    top: 10px;
    right: 12px;
    left: 12px;
    min-height: 66px;
    border-radius: 17px;
  }

  .navbar-brand .logo.logo-dark {
    height: 42px !important;
  }

  .navbar-collapse {
    max-height: calc(100vh - 100px);
    margin-top: 10px;
    padding: 12px;
    overflow-y: auto;
    border-top: 1px solid var(--mids-line);
    background: #fff;
  }

  .navbar-collapse:not(.show) {
    display: none !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar .dropdown-menu {
    position: static !important;
    display: none;
    width: 100%;
    max-width: none;
    margin: 4px 0 8px;
    border: 0;
    background: #f4f8f5;
    box-shadow: none;
  }

  .navbar .dropdown.show > .dropdown-menu {
    display: block;
  }

  .bg-parallax.fullscreen,
  .fullscreen .d-flex {
    min-height: 690px;
  }

  .hero-text-style1 {
    padding-top: 110px;
  }

  .hero-text-style1 h1,
  .hero-text-style1 h2 {
    letter-spacing: -2px;
  }

  #award2025 {
    margin-top: -52px;
  }

  .mids-achievement-card {
    min-height: 460px;
    background-position: 42% center;
  }

  .mids-achievement-copy {
    width: 54%;
    padding: 40px;
  }

  .mids-editorial-split,
  .mids-waste-layout {
    grid-template-columns: 1fr;
  }

  .mids-editorial-image,
  .mids-waste-image {
    min-height: 430px;
  }

  .mids-pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mids-resource-grid {
    grid-template-columns: 1fr;
  }

  .mids-campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mids-learning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 15px;
  }

  section {
    padding-block: 52px;
  }

  section .container {
    width: min(100% - 28px, var(--mids-container));
  }

  .bg-parallax.fullscreen,
  .fullscreen .d-flex {
    min-height: 650px;
  }

  .bg-parallax.fullscreen {
    background-position: 61% center !important;
  }

  .hero-text-style1 h1,
  .hero-text-style1 h2 {
    font-size: clamp(2.45rem, 12.5vw, 3.6rem) !important;
  }

  .hero-text-style1 h4 {
    font-size: 0.95rem;
  }

  #award2025.mids-achievement {
    margin-top: -34px;
    padding-bottom: 22px;
  }

  .mids-achievement-card {
    align-items: end;
    min-height: 660px;
    border-width: 5px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, transparent 0 37%, rgba(255, 255, 255, 0.82) 58%, rgba(255, 255, 255, 0.98) 76%),
      url("/images/mids/green-office-achievement.webp") 27% center / auto 100% no-repeat;
  }

  .mids-achievement-copy {
    width: 100%;
    margin: 0;
    padding: 32px 26px;
  }

  .mids-achievement-logo {
    height: 48px;
    margin-bottom: 18px;
  }

  .mids-achievement-copy h2 {
    font-size: 2.25rem;
  }

  .mids-visual-section {
    padding-block: 58px;
  }

  .mids-editorial-split,
  .mids-wide-story,
  .mids-waste-layout {
    border-radius: 20px;
  }

  .mids-editorial-image,
  .mids-waste-image {
    min-height: 300px;
  }

  .mids-editorial-copy,
  .mids-waste-copy {
    padding: 30px 24px;
  }

  .mids-inline-logo {
    height: 42px;
    margin-bottom: 26px;
  }

  .mids-wide-story {
    min-height: 590px;
  }

  .mids-wide-story::after {
    background: linear-gradient(180deg, transparent 22%, rgba(2, 35, 24, 0.94) 72%);
  }

  .mids-wide-story-copy {
    top: auto;
    right: 24px;
    bottom: 30px;
    left: 24px;
    width: auto;
    transform: none;
  }

  .mids-pillar-grid,
  .mids-campaign-grid {
    grid-template-columns: 1fr;
  }

  .mids-pillar-card {
    min-height: 0;
  }

  .mids-image-card {
    grid-template-columns: 1fr;
  }

  .mids-image-card img {
    min-height: 230px;
    aspect-ratio: 16 / 10;
  }

  .mids-manage-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px;
  }

  .mids-manage-banner > img {
    width: min(230px, 75%);
  }

  .mids-campaign-grid article {
    min-height: 330px;
  }

  .mids-learning-head {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 22px;
  }

  .mids-learning-head > img {
    display: none;
  }

  .mids-learning-grid {
    grid-template-columns: 1fr;
  }

  .mids-learning-card {
    display: grid;
    grid-template-columns: minmax(138px, 0.8fr) minmax(0, 1.2fr);
    border-radius: 18px;
  }

  .mids-learning-copy {
    align-self: center;
    min-height: 0;
    padding: 20px;
  }

  .mids-learning-copy h3 {
    font-size: 1rem;
  }

  .mids-learning-copy p {
    font-size: 0.82rem;
  }

  .mids-learning-image span {
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .mids-bin-grid {
    grid-template-columns: 1fr;
  }

  iframe {
    height: auto;
    min-height: 210px;
  }

  .mids-quick-access {
    right: 18px;
    bottom: 10px;
    left: 10px;
    gap: 4px;
    justify-content: space-between;
    padding: 6px;
    border-radius: 16px;
  }

  .mids-quick-access a,
  .mids-back-to-top {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 4px;
    font-size: 9.5px;
    white-space: nowrap;
  }

  .mids-quick-access a:nth-child(3) {
    display: none;
  }

  .mids-quick-access a:nth-child(4) {
    display: none;
  }

  .mids-back-to-top {
    flex: 0 0 42px;
  }

  .mids-back-to-top:not(.is-visible) {
    display: none;
  }

  .table th,
  .table td {
    min-width: 180px;
    padding: 12px !important;
  }
}

/* ---------------------------------------------------------------
   News — section on the home page and the single-entry page.
   Managed from the admin UI; the markup lives in home-visuals.ts.
   --------------------------------------------------------------- */

.mids-news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.mids-news-card {
  overflow: hidden;
  border-radius: var(--mids-radius);
  background: var(--mids-paper);
  box-shadow: var(--mids-shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

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

.mids-news-card > a {
  display: block;
  height: 100%;
  color: inherit !important;
  text-decoration: none !important;
}

.mids-news-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mids-cream);
}

.mids-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.mids-news-card:hover .mids-news-image img {
  transform: scale(1.045);
}

.mids-news-copy {
  padding: 20px 22px 24px;
}

.mids-news-copy time {
  display: block;
  margin-bottom: 8px;
  color: var(--mids-leaf);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mids-news-copy h2,
.mids-news-copy h3 {
  margin: 0 0 10px;
  color: var(--mids-forest) !important;
  font-size: 1.12rem;
  font-weight: 640 !important;
  line-height: 1.4;
}

.mids-news-copy p {
  margin: 0;
  color: var(--mids-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* single news entry */

.mids-news-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 130px 20px 90px;
}

.mids-news-article a.mids-news-back {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--mids-green);
  font-weight: 600;
  text-decoration: none;
}

.mids-news-article h1 {
  margin-bottom: 14px;
  color: var(--mids-forest);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

.mids-news-article time {
  display: block;
  margin-bottom: 26px;
  color: var(--mids-leaf);
  font-weight: 600;
}

.mids-news-article img.mids-news-cover {
  width: 100%;
  margin-bottom: 30px;
  border-radius: var(--mids-radius);
  box-shadow: var(--mids-shadow-soft);
}

.mids-news-article p {
  margin-bottom: 18px;
  color: var(--mids-ink);
  font-size: 1.05rem;
  line-height: 1.85;
}

@media (max-width: 1100px) {
  .mids-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mids-news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mids-news-article {
    padding-top: 100px;
  }

  .mids-news-index {
    padding: 104px 16px 72px;
  }

  .mids-news-index > header {
    margin-bottom: 30px;
    padding-bottom: 22px;
  }

  .mids-news-index .mids-news-grid {
    gap: 20px;
  }

  .mids-pagination a,
  .mids-pagination > span[aria-hidden="true"] {
    padding: 9px 18px;
  }
}

/* Status pages (404, render failure). Deliberately plain: they must render
   even when the mirrored theme or the content pipeline is the thing at
   fault, so they lean on nothing but these rules. */
.mids-status-page {
  display: grid;
  min-height: 100vh;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 40px 24px;
  background: #f3f6f2;
  text-align: center;
}

.mids-status-code {
  margin: 0;
  color: var(--mids-lime, #b7dc67);
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
}

.mids-status-page h1 {
  margin: 0;
  color: var(--mids-forest, #073b2a);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
}

.mids-status-page p {
  max-width: 46ch;
  margin: 0;
  color: var(--mids-muted, #4a5b52);
  line-height: 1.7;
}

.mids-status-digest {
  font-size: 0.85rem;
  opacity: 0.7;
}

.mids-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.mids-status-actions a,
.mids-status-actions button {
  padding: 11px 22px;
  border: 1px solid rgba(7, 59, 42, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--mids-forest, #073b2a);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.mids-status-actions .mids-status-primary {
  border-color: transparent;
  background: var(--mids-forest, #073b2a);
  color: #fff;
}

/* News index. Reuses .mids-news-grid / .mids-news-card from the home page so
   a card looks the same wherever it appears; what is added here is the page
   around them and the trimming that keeps a row of cards level. */
.mids-news-index {
  max-width: var(--mids-container);
  margin: 0 auto;
  padding: 132px 24px 96px;
}

.mids-news-index > header {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--mids-line, #dce6df);
}

.mids-news-index .mids-news-back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--mids-green, #0b6b47);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.mids-news-index .mids-news-back:hover {
  color: var(--mids-forest, #073b2a);
  text-decoration: underline;
}

/* Title and count share a line and wrap together, so the count stays with the
   heading it belongs to rather than drifting onto its own row. */
.mids-news-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.mids-news-index h1 {
  margin: 0;
  color: var(--mids-forest, #073b2a);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mids-news-count {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(33, 163, 102, 0.12);
  color: var(--mids-green, #0b6b47);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mids-news-index > header p {
  margin: 12px 0 0;
  color: var(--mids-muted, #64736c);
  font-size: 1rem;
}

/* Cards size themselves rather than being forced into four columns: five
   entries in a four-wide grid left one stranded on a row of its own. */
.mids-news-index .mids-news-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}

.mids-news-index .mids-news-card > a {
  display: flex;
  flex-direction: column;
}

.mids-news-index .mids-news-image {
  position: relative;
}

/* Stands in for a picture the main site never set, so the card keeps the
   height of its neighbours instead of standing a head shorter. */
.mids-news-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--mids-cream, #f6f7f1), rgba(183, 220, 103, 0.35));
  color: rgba(7, 59, 42, 0.28);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* On the picture rather than above the headline: the date is a label for the
   entry, and the headline reads better as the first line of text. */
.mids-news-date {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(7, 59, 42, 0.16);
  color: var(--mids-forest, #073b2a);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mids-news-index .mids-news-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

/* Titles and summaries run to any length. Trimmed to a fixed number of lines,
   every card in a row ends where its neighbours do. */
.mids-news-index .mids-news-copy h2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 10px;
  font-size: 1.08rem;
  line-height: 1.45;
}

.mids-news-index .mids-news-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Pushed to the bottom of the card by the margin, so it sits on one line
   across the row however long the summary above it runs. */
.mids-news-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--mids-green, #0b6b47);
  font-size: 0.85rem;
  font-weight: 700;
}

.mids-news-card:hover .mids-news-readmore {
  text-decoration: underline;
}

/* The whole card is one link, so the ring belongs around the card. */
.mids-news-card > a:focus-visible {
  outline: 3px solid var(--mids-leaf, #21a366);
  outline-offset: 3px;
  border-radius: var(--mids-radius, 24px);
}

.mids-news-empty {
  padding: 56px 24px;
  border: 1px dashed var(--mids-line, #dce6df);
  border-radius: var(--mids-radius, 24px);
  color: var(--mids-muted, #64736c);
  text-align: center;
}

.mids-news-more {
  margin: 30px 0 0;
  text-align: center;
}

.mids-news-more a {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid rgba(7, 59, 42, 0.22);
  border-radius: 999px;
  color: var(--mids-forest, #073b2a);
  text-decoration: none;
}

.mids-news-more a:hover {
  border-color: transparent;
  background: var(--mids-forest, #073b2a);
  color: #fff;
}

.mids-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 56px;
}

.mids-pagination a,
.mids-pagination > span[aria-hidden="true"] {
  padding: 10px 22px;
  border: 1px solid var(--mids-line, #dce6df);
  border-radius: 999px;
  color: var(--mids-forest, #073b2a);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mids-pagination a:hover {
  border-color: transparent;
  background: var(--mids-forest, #073b2a);
  color: #fff;
}

.mids-pagination a:focus-visible {
  outline: 3px solid var(--mids-leaf, #21a366);
  outline-offset: 2px;
}

/* Ends of the range stay in place rather than disappearing, so the row does
   not jump as the reader pages through. */
.mids-pagination > span[aria-hidden="true"] {
  opacity: 0.4;
}

.mids-pagination-count {
  color: var(--mids-muted, #4a5b52);
  font-size: 0.92rem;
}

/* Rendered Markdown in a news post. */
.mids-news-body {
  color: #26332c;
  line-height: 1.85;
}

.mids-news-body h2,
.mids-news-body h3,
.mids-news-body h4 {
  margin: 1.6em 0 0.5em;
  color: var(--mids-forest, #073b2a);
}

.mids-news-body p {
  margin: 0 0 1.1em;
}

.mids-news-body ul,
.mids-news-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.mids-news-body li {
  margin-bottom: 0.4em;
}

.mids-news-body img {
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: 14px;
}

.mids-news-body blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--mids-lime, #b7dc67);
  color: var(--mids-muted, #4a5b52);
  font-style: italic;
}

.mids-news-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef3ee;
  font-size: 0.92em;
}

.mids-news-body hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid rgba(7, 59, 42, 0.14);
}

.mids-news-body a {
  color: #0b6b47;
  text-decoration: underline;
}

.mids-draft-banner {
  margin: 0 0 22px;
  padding: 11px 16px;
  border: 1px solid #e2c56b;
  border-radius: 12px;
  background: #fdf6e0;
  color: #6b5311;
  font-size: 0.92rem;
}

/* Published documents */
.mids-document-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mids-document-list li + li {
  margin-top: 10px;
}

.mids-document-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid rgba(7, 59, 42, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--mids-forest, #073b2a);
  text-decoration: none;
}

.mids-document-list a:hover {
  border-color: rgba(7, 59, 42, 0.3);
  box-shadow: 0 6px 18px rgba(7, 59, 42, 0.07);
}

.mids-document-name {
  font-weight: 600;
}

.mids-document-meta {
  color: var(--mids-muted, #64736c);
  font-size: 0.86rem;
  white-space: nowrap;
}

/* Pages written in the admin. They share the site's header and footer but
   none of the mirrored page furniture, so the type has to stand on its own. */
.mids-page {
  padding: 132px 0 80px;
}

.mids-page .container {
  width: min(100% - 40px, var(--mids-container));
  max-width: var(--mids-container);
}

.mids-page-head h1 {
  margin: 0 0 12px;
  color: var(--mids-forest, #073b2a);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  line-height: 1.3;
}

.mids-page-summary {
  margin: 0;
  color: var(--mids-muted, #64736c);
  font-size: 1.05rem;
  line-height: 1.75;
}

.mids-page-cover {
  margin: 30px 0;
}

.mids-page-cover img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* The body is the same rendered Markdown as a news post. */
.mids-page-body {
  margin-top: 28px;
  color: #26332c;
  line-height: 1.85;
}

.mids-page-body h2,
.mids-page-body h3,
.mids-page-body h4 {
  margin: 1.7em 0 0.5em;
  color: var(--mids-forest, #073b2a);
}

.mids-page-body p {
  margin: 0 0 1.1em;
}

.mids-page-body ul,
.mids-page-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.mids-page-body li {
  margin-bottom: 0.4em;
}

.mids-page-body img {
  max-width: 100%;
  height: auto;
  margin: 1.3em 0;
  border-radius: 14px;
}

.mids-page-body blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--mids-lime, #b7dc67);
  color: var(--mids-muted, #64736c);
  font-style: italic;
}

.mids-page-body a {
  color: #0b6b47;
  text-decoration: underline;
}

.mids-page-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef3ee;
  font-size: 0.92em;
}

.mids-page-body hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid rgba(7, 59, 42, 0.14);
}

/* Sits above the page furniture so a draft is never mistaken for the live
   version, whatever the page itself looks like. */
.mids-draft-banner--floating {
  position: fixed;
  z-index: 10001;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
}

/* ---------- moving between the pages of one document ---------- */

.mids-series {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 26px;
}

.mids-page-body + .mids-series {
  margin: 44px 0 0;
}

.mids-series-step {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(7, 59, 42, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--mids-forest, #073b2a);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mids-series-step:hover {
  border-color: transparent;
  background: var(--mids-forest, #073b2a);
  color: #fff;
}

/* The end of the document keeps its place rather than collapsing, so the row
   does not shift as the reader moves through it. */
.mids-series-step.is-off {
  opacity: 0.32;
  pointer-events: none;
}

.mids-series-picker {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mids-series-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid rgba(7, 59, 42, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--mids-forest, #073b2a);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.mids-series-picker > summary::-webkit-details-marker {
  display: none;
}

.mids-series-picker[open] > summary {
  border-color: var(--mids-forest, #073b2a);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.mids-series-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mids-series-caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  margin-top: -4px;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.mids-series-picker[open] .mids-series-caret {
  margin-top: 3px;
  transform: rotate(225deg);
}

.mids-series-list {
  position: absolute;
  z-index: 40;
  top: 100%;
  right: 0;
  left: 0;
  overflow-y: auto;
  max-height: min(58vh, 420px);
  border: 1px solid var(--mids-forest, #073b2a);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(7, 59, 42, 0.18);
}

.mids-series-list a {
  display: block;
  padding: 12px 18px;
  border-top: 1px solid rgba(7, 59, 42, 0.08);
  color: #26332c;
  font-size: 0.9rem;
  text-decoration: none;
}

.mids-series-list a:first-child {
  border-top: 0;
}

.mids-series-list a:hover {
  background: #f0f6f2;
}

.mids-series-list a[aria-current="page"] {
  background: #eaf4ee;
  color: var(--mids-forest, #073b2a);
  font-weight: 600;
}

@media (max-width: 640px) {
  .mids-series {
    flex-wrap: wrap;
  }

  .mids-series-picker {
    order: -1;
    flex: 1 0 100%;
  }

  .mids-series-step {
    flex: 1;
    justify-content: center;
  }
}

/* ---------- the criteria document ---------- */

/* Deep links land on the heading, not underneath the floating navbar. */
[data-series="criteria"] :where(h2, h3)[id] {
  scroll-margin-top: 120px;
}

/* The contents list the importer puts at the top of each chapter. */
[data-series="criteria"] .mids-page-body > ul:first-child {
  display: grid;
  gap: 2px;
  margin: 0 0 40px;
  padding: 8px;
  border: 1px solid rgba(7, 59, 42, 0.12);
  border-radius: 16px;
  background: #f6faf7;
  list-style: none;
}

[data-series="criteria"] .mids-page-body > ul:first-child li {
  margin: 0;
}

[data-series="criteria"] .mids-page-body > ul:first-child a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  color: #26332c;
  font-size: 0.92rem;
  text-decoration: none;
}

[data-series="criteria"] .mids-page-body > ul:first-child a:hover {
  background: #e6f0ea;
  color: var(--mids-forest, #073b2a);
}

/* A numbered section: 1.1, 1.2, …
   The !important is not decoration: `section h2` earlier in this file forces
   every heading inside a <section> to the dark green, which on this banner is
   the same colour as its background — the text was there, in the same green,
   invisible. Only an !important beats an !important. */
[data-series="criteria"] .mids-page-body h2 {
  margin: 52px 0 20px;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--mids-forest, #073b2a), #0f6b4a);
  color: #fff !important;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  line-height: 1.5;
}

[data-series="criteria"] .mids-page-body h2:first-child {
  margin-top: 0;
}

/* One indicator: 1.1.1, 1.1.2, … Same reason for the !important as above —
   without it this colour is decided by `section h3`, not by this rule. */
[data-series="criteria"] .mids-page-body h3 {
  margin: 30px 0 12px;
  padding-left: 16px;
  border-left: 4px solid var(--mids-lime, #b7dc67);
  color: var(--mids-forest, #073b2a) !important;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* The (1) (2) (3) under an indicator. */
[data-series="criteria"] .mids-page-body ul:not(:first-child) {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

[data-series="criteria"] .mids-page-body ul:not(:first-child) li {
  position: relative;
  margin: 0 0 8px;
  padding: 11px 16px 11px 44px;
  border: 1px solid rgba(7, 59, 42, 0.09);
  border-radius: 12px;
  background: #fbfdfb;
  font-size: 0.94rem;
  line-height: 1.75;
}

[data-series="criteria"] .mids-page-body ul:not(:first-child) li::before {
  position: absolute;
  top: 15px;
  left: 17px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(7, 59, 42, 0.28);
  border-radius: 5px;
  content: "";
}

/* "กรณีบรรลุเป้าหมาย" and the like, introducing a set of points. */
[data-series="criteria"] .mids-page-body p > strong:only-child {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #e6f0ea;
  color: var(--mids-forest, #073b2a);
  font-size: 0.87rem;
}

[data-series="criteria"] .mids-page-body blockquote {
  margin: 8px 0 22px;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid #e0b64a;
  border-radius: 0 12px 12px 0;
  background: #fdf7e8;
  color: #6b5311;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.75;
}

/* The chapter list on /article. */
[data-series="criteria"] .mids-page-body ol {
  margin: 0;
  padding: 0;
  counter-reset: chapter;
  list-style: none;
}

[data-series="criteria"] .mids-page-body ol li {
  margin-bottom: 12px;
  counter-increment: chapter;
}

[data-series="criteria"] .mids-page-body ol li a {
  position: relative;
  display: block;
  padding: 18px 22px 18px 74px;
  border: 1px solid rgba(7, 59, 42, 0.12);
  border-radius: 16px;
  background: #fff;
  color: var(--mids-forest, #073b2a);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

[data-series="criteria"] .mids-page-body ol li a::before {
  position: absolute;
  top: 50%;
  left: 20px;
  display: grid;
  width: 38px;
  height: 38px;
  content: counter(chapter);
  place-items: center;
  transform: translateY(-50%);
  border-radius: 12px;
  background: #e6f0ea;
  color: var(--mids-forest, #073b2a);
  font-size: 1rem;
}

[data-series="criteria"] .mids-page-body ol li a:hover {
  border-color: transparent;
  background: var(--mids-forest, #073b2a);
  color: #fff;
  box-shadow: 0 12px 30px rgba(7, 59, 42, 0.16);
}

[data-series="criteria"] .mids-page-body ol li a:hover::before {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---------- navbar dropdowns ---------- */

/* The theme's dropdowns were opened by Bootstrap's JavaScript, which this site
   no longer loads. The rule that shows an open menu lived inside the mobile
   media query, so on a wide screen the three menus with children could not be
   opened at all — clicking their parent did nothing, because its href is "/#".
   Here they open on hover, on keyboard focus, and on the click the behaviour
   script sets. */
.navbar .dropdown.show > .dropdown-menu {
  display: block;
}

@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  /* Bridges the gap between the parent and its menu so the menu does not
     close while the pointer travels to it. */
  .navbar .dropdown > .dropdown-menu {
    margin-top: 0;
    padding-top: 10px;
  }
}

/* ---------- nested menu (a dropdown entry holding its own links) ---------- */

/* The submenu reuses the .dropdown machinery, so it opens on hover, on focus
   and on the click the behaviour script sets, exactly like a top-level one.
   Only its position differs. */
.navbar .dropdown-submenu {
  position: relative;
}

.navbar .dropdown-submenu > .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* The caret points down on a phone, where the submenu opens underneath, and
   sideways on a wide screen, where it opens alongside. */
.navbar .dropdown-submenu > .dropdown-toggle::after {
  flex: 0 0 auto;
  content: "\203A";
  transform: rotate(90deg);
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.navbar .dropdown-submenu.show > .dropdown-toggle::after {
  transform: rotate(-90deg);
}

@media (max-width: 991.98px) {
  /* Indented under its parent rather than floating over it — there is no room
     beside it on a phone. */
  .navbar .dropdown-submenu > .dropdown-menu {
    padding-left: 14px;
    border-left: 2px solid var(--mids-line, #dce6df);
    margin-left: 6px;
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown-submenu > .dropdown-toggle::after {
    transform: none;
  }

  .navbar .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 2px;
  }

  /* Near the right edge there is no room to the side, so it flips. */
  .navbar .nav-item:last-child .dropdown-submenu > .dropdown-menu,
  .navbar .nav-item:nth-last-child(2) .dropdown-submenu > .dropdown-menu {
    right: 100%;
    left: auto;
    margin-right: 2px;
    margin-left: 0;
  }
}

/* ---------- the introductory clip ---------- */

.mids-video-section {
  padding: 64px 0 24px;
}

.mids-video-section h2 {
  margin: 0 0 10px;
  color: var(--mids-forest, #073b2a) !important;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.mids-video-section > .container > p {
  max-width: 62ch;
  margin: 0 auto 26px;
  color: var(--mids-muted, #64736c);
  line-height: 1.75;
  text-align: center;
}

/* aspect-ratio rather than the old fixed 664x374, which overflowed a phone.
   The iframe fills the box, so the frame decides the size at every width. */
.mids-video-frame {
  position: relative;
  overflow: hidden;
  width: min(100%, 900px);
  margin: 26px auto 0;
  border-radius: 22px;
  aspect-ratio: 16 / 9;
  background: #0a2a1e;
  box-shadow: 0 26px 60px rgba(7, 59, 42, 0.22);
}

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

/* ---------- usage figures ---------- */

.mids-usage-section {
  padding: 66px 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(153, 206, 63, 0.16), transparent 38%),
    linear-gradient(120deg, var(--mids-forest, #073b2a), #0c5c3f);
}

.mids-usage-section h2 {
  margin: 0 0 8px;
  color: #fff !important;
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-align: center;
  text-wrap: balance;
}

.mids-usage-section > .container > p {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.mids-usage-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 34px;
}

.mids-usage-tile {
  display: grid;
  gap: 6px;
  padding: 26px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}

a.mids-usage-tile:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.mids-usage-value {
  color: var(--mids-lime, #b7dc67);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
}

.mids-usage-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
}

/* A tile that links away says so, rather than looking identical to one that
   does nothing when tapped. */
a.mids-usage-tile .mids-usage-label::after {
  content: " ↗";
  opacity: 0.6;
}

/* Embedded players from the mirrored pages. They arrived at a fixed 664x374;
   scripts/normalize-fragments.mjs strips those attributes and this gives them
   a box that fits the space they are in. */
.mids-embed {
  display: block;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  border: 0;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  background: #0a2a1e;
}

/* A text link that leaves the site says so. Image links are excluded — the
   marker would land beside a picture with nothing to attach to. */
#mids-legacy-root a[target="_blank"]:not(:has(img))::after,
.mids-page-body a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.65;
}

/* ---------- galleries ---------- */

.mids-gallery-section,
.mids-plans-section {
  padding: 66px 0;
}

.mids-plans-section {
  background: #f3f7f4;
}

.mids-gallery-section > .container > h2,
.mids-plans-section > .container > h2,
.mids-clips-section > .container > h2 {
  margin: 0 0 28px;
  color: var(--mids-forest, #073b2a) !important;
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-align: center;
  text-wrap: balance;
}

/* The heading over one run of a gallery. */
.mids-gallery-section h3,
.mids-plans-section h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 18px;
  color: var(--mids-forest, #073b2a) !important;
  font-size: clamp(1rem, 2.2vw, 1.16rem);
}

.mids-gallery-section h3::after,
.mids-plans-section h3::after {
  flex: 1;
  height: 1px;
  background: rgba(7, 59, 42, 0.14);
  content: "";
}

.mids-gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.mids-gallery-cell {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(7, 59, 42, 0.1);
  border-radius: 16px;
  background: #fff;
  line-height: 0;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

a.mids-gallery-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(7, 59, 42, 0.16);
}

.mids-gallery-cell img {
  width: 100%;
  height: auto;
}

/* ---------- banner strip ---------- */

.mids-banner-strip {
  padding: 12px 0 46px;
}

.mids-banner-strip > .container {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mids-banner-strip img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ---------- extra clips ---------- */

.mids-clips-section {
  padding: 60px 0;
}

.mids-clip-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.mids-clip-grid .mids-embed {
  max-width: none;
}

/* ---------- feedback ---------- */

.mids-feedback-section {
  padding: 56px 0 76px;
}

.mids-feedback-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(7, 59, 42, 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(7, 59, 42, 0.08);
}

.mids-feedback-qr {
  display: block;
  flex: none;
  width: min(160px, 40vw);
}

.mids-feedback-qr img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.mids-feedback-card h2 {
  margin: 0 0 8px;
  color: var(--mids-forest, #073b2a) !important;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.45;
}

.mids-feedback-card p {
  margin: 0 0 18px;
  color: var(--mids-muted, #64736c);
}

.mids-feedback-link {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--mids-forest, #073b2a);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.mids-feedback-link:hover {
  background: #0f6b4a;
  color: #fff;
}

/* The intro sits opposite the policy block above it. */
.mids-editorial-split--reverse {
  direction: rtl;
}

.mids-editorial-split--reverse > * {
  direction: ltr;
}

/* ---------------------------------------------------------------
   Attachments — files and links hung off a heading of a page,
   used by the Green Office criteria to carry evidence per clause.
   --------------------------------------------------------------- */

.mids-attachments {
  margin: 10px 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mids-page-attachments .mids-attachments {
  margin-top: 0;
}

.mids-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--mids-line, #dce6df);
  border-radius: 999px;
  background: var(--mids-paper, #fff);
  color: var(--mids-green, #0b6b47) !important;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.mids-attachment:hover {
  border-color: var(--mids-leaf, #21a366);
  background: #f2f9f5;
  transform: translateY(-1px);
}

/* The mark says what happens on click — a file downloads or opens in a
   viewer, an outside link leaves the site. */
.mids-attachment::before {
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
  content: "\1F4CE";
}

.mids-attachment[data-kind="external"]::before {
  content: "\2197";
  font-weight: 700;
}

.mids-attachment[data-kind="internal"]::before {
  content: "\1F517";
}

/* ---------------------------------------------------------------
   Footer.

   Built in site-footer.ts from the settings, not sliced out of the mirrored
   markup, so this stylesheet owns its spacing rather than working around a
   column of stacked <br> tags.
   --------------------------------------------------------------- */

.mids-footer {
  margin-top: 64px;
  padding: 56px 0 28px;
  background: var(--mids-forest, #073b2a);
  color: rgba(255, 255, 255, 0.86);
}

.mids-footer a {
  color: inherit;
  text-decoration: none;
}

/* Contact on the left, the code on the right; both wrap to full width and
   centre when there is no room for the pair. */
.mids-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.mids-footer-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.mids-footer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mids-footer-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.09);
}

.mids-footer-card:focus-visible {
  outline: 3px solid var(--mids-lime, #b7dc67);
  outline-offset: 3px;
}

/* A badge at a readable size. The mirrored footer set these to 4x the text,
   which is what made that row read as three posters rather than as contact
   details. */
.mids-footer-card-icon {
  display: flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(183, 220, 103, 0.16);
  color: var(--mids-lime, #b7dc67);
  font-size: 1.05rem;
}

.mids-footer-card-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.mids-footer-card-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mids-footer-card-value {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mids-footer-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

/* On a white plate: the code is dark, and dark on dark green does not scan. */
.mids-footer-qr img {
  width: 92px;
  height: 92px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
}

.mids-footer-qr span {
  max-width: 150px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
  line-height: 1.5;
}

.mids-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mids-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}

.mids-footer-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.mids-footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mids-footer-social-label {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.mids-footer-social-link {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.95rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mids-footer-social-link:hover {
  border-color: transparent;
  background: var(--mids-lime, #b7dc67);
  color: var(--mids-forest, #073b2a) !important;
}

.mids-footer-social-link:focus-visible {
  outline: 3px solid var(--mids-lime, #b7dc67);
  outline-offset: 3px;
}

@media (max-width: 880px) {
  .mids-footer {
    padding: 44px 0 24px;
  }

  .mids-footer-top,
  .mids-footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .mids-footer-cards {
    justify-content: center;
  }

  .mids-footer-brand {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .mids-footer-card {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   Criteria table.

   The markup carries the theme's own table classes, so most of this is
   already done by the rules above — .bg-headtext, .bg-darkgreen h4, .table
   and .table-hover. What is left is the parts the faculty's page declared
   inline.
   --------------------------------------------------------------- */

.mids-criteria-intro {
  margin-bottom: 26px;
}

/* Declared inline on the page this follows. */
.smallbox {
  padding-left: 20px;
}

.mids-criteria .smallbox {
  color: #666666;
  font-size: 0.9rem;
  line-height: 1.75;
}

/* Indented the way it is indented on paper, so a clause reads as inside the
   section above it rather than beside it. */
.mids-criteria .mids-clause {
  padding-left: 40px !important;
}

.mids-criteria .mids-clause-item {
  margin: 0;
  padding-left: 18px;
}

.mids-criteria .mids-clause-item li {
  color: #31463e;
  line-height: 1.6;
}

.mids-criteria strong {
  color: var(--mids-forest, #073b2a);
  font-size: 1.02rem;
}

/* Icon above its line's own size, as on the page this follows, with the label
   sitting on the middle of it rather than the baseline. */
.mids-criteria .mids-evidence {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666666 !important;
  font-size: 0.92rem;
  line-height: 1.5;
  text-decoration: none;
}

.mids-criteria .mids-evidence + .mids-evidence {
  margin-top: 10px;
}

.mids-criteria .mids-evidence:hover {
  color: var(--mids-green, #0b6b47) !important;
  text-decoration: underline;
}

.mids-criteria .mids-evidence i {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .mids-criteria .mids-clause {
    padding-left: 22px !important;
  }

  .mids-criteria .smallbox {
    padding-left: 10px;
  }
}

/* ---------------------------------------------------------------
   Lightbox.

   Following a plan used to leave the reader on a bare image file with the
   site gone and no way to reach the next plan in the set.
   --------------------------------------------------------------- */

.mids-lightbox {
  position: fixed;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: max(20px, 3vh) max(16px, 3vw);
  background: rgba(6, 26, 18, 0.88);
  backdrop-filter: blur(6px);
  inset: 0;
  animation: mids-lightbox-in 0.18s ease-out;
}

@keyframes mids-lightbox-in {
  from {
    opacity: 0;
  }
}

/* Sized by the picture, so the caption bar is exactly as wide as what it
   describes rather than as wide as the screen. */
.mids-lightbox-figure {
  display: flex;
  overflow: hidden;
  max-width: min(100%, 1400px);
  max-height: 100%;
  flex-direction: column;
  margin: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.mids-lightbox-figure img {
  min-height: 0;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  background: #0d1f17;
}

.mids-lightbox-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 13px 18px;
  color: var(--mids-forest, #073b2a);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mids-lightbox-caption {
  min-width: 0;
  flex: 1;
  font-weight: 600;
}

.mids-lightbox-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--mids-muted, #64736c);
  font-size: 0.84rem;
  white-space: nowrap;
}

.mids-lightbox-meta a {
  color: var(--mids-green, #0b6b47);
  text-decoration: none;
}

.mids-lightbox-meta a:hover {
  text-decoration: underline;
}

.mids-lightbox-close,
.mids-lightbox-step {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mids-lightbox-close:hover,
.mids-lightbox-step:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.24);
}

.mids-lightbox-close:focus-visible,
.mids-lightbox-step:focus-visible {
  outline: 3px solid var(--mids-lime, #b7dc67);
  outline-offset: 3px;
}

.mids-lightbox-step {
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
}

/* Out of the picture's way, in the corner of the screen it covers. */
.mids-lightbox-close {
  position: absolute;
  top: max(14px, 2vh);
  right: max(14px, 2vw);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

/* Narrow: the arrows sit over the picture rather than beside it, because
   beside it there is no room left for the picture. */
@media (max-width: 720px) {
  .mids-lightbox {
    padding: 56px 10px 10px;
  }

  .mids-lightbox-step {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    transform: translateY(-50%);
  }

  .mids-lightbox-step.is-prev {
    left: 8px;
  }

  .mids-lightbox-step.is-next {
    right: 8px;
  }

  .mids-lightbox-figure img {
    max-height: calc(100vh - 200px);
  }
}

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