/* The original Xara layout above 1199px is deliberately untouched. */
#mobile-site { display: none; }

@media (max-width: 1199px) {
  #xr_xrii,
  body > .xr_stickie,
  body > .xr_xpos { display: none !important; }

  html, body { min-width: 0 !important; width: 100%; overflow-x: clip; }
  body { margin: 0; background: #fffcf8 !important; }

  #mobile-site {
    --m-ink: #213333;
    --m-green: #116b62;
    --m-pale: #eaf4ef;
    display: block;
    position: relative;
    z-index: 200;
    width: 100%;
    min-height: 100vh;
    background: #fffcf8;
    color: var(--m-ink);
    font: 400 1rem/1.62 Arial, 'Open Sans', sans-serif;
    text-align: left;
    -webkit-text-size-adjust: 100%;
  }
  #mobile-site, #mobile-site * { box-sizing: border-box; }
  #mobile-site img { display: block; max-width: 100%; }
  #mobile-site a { color: inherit; text-decoration: none; }
  #mobile-site a:focus-visible,
  #mobile-site summary:focus-visible { outline: 3px solid #f29a64; outline-offset: 3px; }
  #mobile-site .m-skip { position: absolute; top: -100px; left: 12px; z-index: 1000; background: white; padding: 10px 14px; }
  #mobile-site .m-skip:focus { top: 8px; }

  #mobile-site .m-head {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 18px 5px 16px;
    background: #fffcf8;
    box-shadow: 0 3px 14px rgb(42 50 43 / 10%);
    position: relative;
    z-index: 5;
  }
  #mobile-site .m-brand { display: flex; align-items: center; min-height: 65px; }
  #mobile-site .m-brand img { width: 76px; height: 65px; object-fit: contain; }
  #mobile-site .m-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #e4ded5;
    border-radius: 10px;
    color: var(--m-green);
    background: white;
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 700;
    list-style: none;
  }
  #mobile-site .m-menu summary::-webkit-details-marker { display: none; }
  #mobile-site .m-menu-icon { display: grid; gap: 4px; width: 19px; }
  #mobile-site .m-menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  #mobile-site .m-menu nav {
    position: absolute;
    top: 70px;
    right: 12px;
    left: 12px;
    max-height: min(72vh, 620px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgb(30 51 42 / 18%);
  }
  #mobile-site .m-menu nav a {
    display: block;
    min-height: 45px;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: .9375rem;
  }
  #mobile-site .m-menu nav a[aria-current="page"] { background: var(--m-pale); color: var(--m-green); font-weight: 700; }

  #mobile-site .m-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(236px, 68vw, 330px);
    overflow: hidden;
    color: white;
    background: #324a42;
  }
  #mobile-site .m-hero > img,
  #mobile-site .m-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  #mobile-site .m-hero > img { object-fit: cover; object-position: 54% center; z-index: -2; }
  #mobile-site .m-hero-shade { background: linear-gradient(0deg, rgb(11 30 28 / 79%), rgb(11 30 28 / 16%) 79%); z-index: -1; }
  #mobile-site .m-hero-copy { width: 100%; padding: 48px 22px 24px; }
  #mobile-site .m-hero-copy p { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
  #mobile-site h1 { margin: 0; max-width: 24ch; color: white; font-size: clamp(1.75rem, 7vw, 2.45rem); line-height: 1.14; letter-spacing: -.025em; }

  #mobile-site .m-body { max-width: 760px; margin: 0 auto; padding: 26px 20px 46px; }
  #mobile-site .m-section { margin: 0 0 30px; }
  #mobile-site .m-section h2 { margin: 0 0 10px; color: #155b55; font-size: clamp(1.32rem, 5vw, 1.65rem); line-height: 1.28; letter-spacing: -.012em; }
  #mobile-site .m-section p { margin: 0 0 12px; overflow-wrap: anywhere; }
  #mobile-site .m-section p:last-child { margin-bottom: 0; }
  #mobile-site .m-feature { width: 100%; max-height: 290px; margin: 6px 0 30px; border-radius: 14px; object-fit: cover; }
  #mobile-site .m-cards { display: grid; gap: 14px; margin-top: 18px; }
  #mobile-site .m-card {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: white;
    border: 1px solid #e6ebe4;
    border-radius: 15px;
    box-shadow: 0 4px 14px rgb(21 67 49 / 5%);
  }
  #mobile-site .m-card > img { width: 100%; aspect-ratio: 1.9; object-fit: cover; }
  #mobile-site .m-card-copy,
  #mobile-site .m-list { padding: 18px; }
  #mobile-site .m-card h3 { margin: 0 0 8px; color: #164f49; font-size: 1.125rem; line-height: 1.3; }
  #mobile-site .m-card p { margin: 0 0 12px; }
  #mobile-site .m-card-link { display: inline-flex; gap: 6px; min-height: 42px; align-items: center; color: var(--m-green); font-weight: 700; }
  #mobile-site .m-card-link span { font-size: 1.3em; }
  #mobile-site .m-list ul { margin: 8px 0 0; padding-left: 21px; }
  #mobile-site .m-list li { padding: 3px 0; }
  #mobile-site .m-features { display: grid; gap: 7px; margin: 0 0 18px; padding-left: 22px; }
  #mobile-site .m-review { padding: 19px; border-left: 4px solid #ef8b7e; }
  #mobile-site .m-review p { margin: 0 0 9px; }
  #mobile-site .m-review cite { color: var(--m-green); font-size: .875rem; font-style: normal; font-weight: 700; }
  #mobile-site .m-quote { padding: 16px 18px; border-left: 4px solid #ed8b7e; background: #fff3ef; border-radius: 0 12px 12px 0; }
  #mobile-site .m-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #mobile-site .m-gallery figure { min-width: 0; margin: 0; }
  #mobile-site .m-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #eee; }
  #mobile-site .m-gallery figcaption { padding: 7px 0 2px; font-size: .875rem; line-height: 1.35; }
  #mobile-site .m-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #mobile-site .m-linked-award { overflow: hidden; border: 1px solid #e6ebe4; border-radius: 14px; background: #fff; }
  #mobile-site .m-linked-award img { border-radius: 0; }
  #mobile-site .m-linked-award figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 9px; }
  #mobile-site .m-linked-award figcaption strong { flex-basis: 100%; color: #164f49; font-size: .9375rem; }
  #mobile-site .m-award-button { display: inline-flex; width: 100%; align-items: center; justify-content: center; min-height: 44px; padding: 8px 5px; border-radius: 9px; background: var(--m-green); color: #fff; font-size: .875rem; font-weight: 700; text-align: center; }
  #mobile-site .m-research img { aspect-ratio: 231 / 173; object-fit: contain; }
  #mobile-site .m-acc-social { display: flex; flex-wrap: wrap; gap: 10px; }
  #mobile-site .m-acc-social a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #d5e7dc; border-radius: 9px; color: var(--m-green); font-weight: 700; font-size: .875rem; }

  #mobile-site .m-btn {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 2px solid var(--m-green);
    border-radius: 10px;
    background: var(--m-green);
    color: white;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }
  #mobile-site .m-outline { background: transparent; color: var(--m-green); }
  #mobile-site .m-text-link { display: block; padding: 9px 0; color: var(--m-green); font-weight: 700; overflow-wrap: anywhere; }
  #mobile-site .m-contact { display: grid; gap: 12px; }
  #mobile-site .m-contact address { font-style: normal; }
  #mobile-site .m-donate { padding: 20px; border-radius: 14px; background: #fff1e9; }
  #mobile-site .m-legal { line-height: 1.55; }
  #mobile-site .m-legal .m-legal-heading { margin: 25px 0 8px; }
  #mobile-site .m-legal .m-legal-line { margin: 0 0 8px; }
  #mobile-site .m-callout { margin-top: 38px; padding: 22px; border-radius: 16px; background: var(--m-pale); }
  #mobile-site .m-callout .m-btn { margin-top: 8px; }
  #mobile-site .m-foot { padding: 28px 22px 38px; background: #75452a; color: white; font-size: .9375rem; }
  #mobile-site .m-foot strong { font-size: 1.125rem; }
  #mobile-site .m-foot p { margin: 12px 0; max-width: 38ch; }
  #mobile-site .m-foot a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  #mobile-site .m-foot-links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 19px; }
}

@media (min-width: 520px) and (max-width: 1199px) {
  #mobile-site .m-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mobile-site .m-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #mobile-site .m-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}