/* Rocky Mountain Old English Sheepdog Rescue
   Built from the "Happy Pet Care" Figma redesign, with the lilac of the
   original swapped for the pink of the RMOESR logo.

   Every design variable carries the rm- prefix. Page builders set their own
   custom properties on every container (Elementor sets --gap, for one), and an
   unprefixed name would be silently overridden. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

@font-face {
  font-family: "Alfa Slab One";
  src: url("../fonts/alfa-slab-one-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* The rescue's brand colours, September 2026. Every one of them is light,
     so type and icons sitting on them are the brand's own Black Nose. The
     deep pink is Blanket Pink darkened to 4.6:1, for small text on white. */
  --rm-pink: #f53dd7;
  --rm-pink-deep: #d50bb4;
  --rm-pink-darker: #a00887;
  --rm-pink-soft: #ea9edd;
  --rm-pink-tint: #fcf3fb;
  --rm-pink-brand: #ff89ff;
  --rm-pink-pale: #faeaf8;
  --rm-green: #88da43;
  --rm-blue: #00c3ff;
  --rm-blue-light: #73deff;
  --rm-blue-pale: #9ee8ff;
  --rm-violet: #a479ef;
  --rm-ink: #000000;
  --rm-ink-dark: #000000;
  --rm-ink-warm: #000000;
  --rm-line: #999999;
  --rm-field-line: #cccccc;
  --rm-white-soft: #ffffff;
  --rm-required: #c9202a;

  --rm-font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --rm-font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --rm-font-text: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --rm-wrap: 1168px;
  --rm-gutter: clamp(16px, 4.4vw, 56px);
  --rm-section: clamp(64px, 8vw, 100px);
  --rm-radius-card: 15px;
  --rm-radius-photo: 10px;
  --rm-shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --rm-shadow-soft: 0 8px 24px rgba(51, 54, 63, 0.08);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--rm-ink);
  font-family: var(--rm-font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0 0 1em;
}

h1,
h2,
h3 {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--rm-pink-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.rm-wrap {
  width: 100%;
  max-width: calc(var(--rm-wrap) + 2 * var(--rm-gutter));
  margin-inline: auto;
  padding-inline: var(--rm-gutter);
}

.rm-center {
  text-align: center;
}

.rm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rm-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 25px;
  background: var(--rm-pink);
  color: var(--rm-ink);
  font-family: var(--rm-font-head);
  font-weight: 600;
  text-decoration: none;
}

.rm-skip:focus {
  top: 16px;
}

.rm-accent {
  color: var(--rm-pink-deep);
}

/* ---------- Buttons ---------- */

.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 25px;
  font-family: var(--rm-font-display);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.rm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(51, 54, 63, 0.18);
}

.rm-btn:active {
  transform: translateY(0);
}

.rm-btn svg {
  flex: none;
  width: 29px;
  height: 27px;
}

/* The brand's colours are all light, so a button label on one of them is
   set in the brand's own black. The rescue asked for one button colour across
   the site (2026-09-29), and that colour is Waterbowl Blue. */
.rm-btn--blue {
  background: var(--rm-blue);
  color: var(--rm-ink-dark);
}

.rm-btn--pink {
  background: var(--rm-pink);
  color: var(--rm-ink);
}

.rm-btn--pink:hover {
  background: var(--rm-pink-deep);
  color: #fff;
}

/* The one on the call to action band is the same blue, a size larger. */
.rm-btn--blue-lg {
  font-size: 25px;
}

.rm-btn--outline {
  background: transparent;
  color: var(--rm-pink-deep);
  box-shadow: inset 0 0 0 3px var(--rm-pink-deep);
}

.rm-btn--outline:hover {
  background: var(--rm-pink);
  color: var(--rm-ink);
  box-shadow: inset 0 0 0 3px var(--rm-pink-deep), 0 6px 16px rgba(51, 54, 63, 0.18);
}

.rm-btn--ghost {
  background: transparent;
  color: var(--rm-ink);
  box-shadow: inset 0 0 0 3px var(--rm-ink);
}

.rm-btn--ghost:hover {
  background: var(--rm-ink);
  color: #fff;
  box-shadow: inset 0 0 0 3px var(--rm-ink), 0 6px 16px rgba(51, 54, 63, 0.18);
}

.rm-btn--outline svg {
  width: 24px;
  height: 24px;
}

.rm-btn--sm {
  min-height: 54px;
  padding: 0 26px;
  font-size: 18px;
}

.rm-btn--block {
  display: flex;
  width: 100%;
}

/* ---------- Header ---------- */

.rm-header {
  position: relative;
  z-index: 30;
  background: #fff;
}

.rm-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
  min-height: 110px;
  padding-block: 12px;
}

/* The logo never gives up width to the menu: squeezed, its two lines of
   name break into four. Below the width where both fit, the menu folds
   into the burger instead. */
.rm-logo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
}

.rm-logo img {
  width: 84px;
  height: auto;
}

.rm-logo__name {
  font-family: var(--rm-font-display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--rm-pink-deep);
}

.rm-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--rm-font-head);
  font-size: 18px;
  color: var(--rm-ink-warm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.rm-nav__list a:hover,
.rm-nav__list a[aria-current="page"] {
  color: var(--rm-pink-deep);
}

.rm-nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 11px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--rm-blue);
  -webkit-mask: url("../img/shapes/heart.svg") center / contain no-repeat;
  mask: url("../img/shapes/heart.svg") center / contain no-repeat;
}

.rm-nav__donate {
  display: none;
}

/* On a phone the logo gives way before the menu button does: a smaller mark
   and name, so the blue button always fits beside them. */
@media (max-width: 520px) {
  .rm-header__inner {
    gap: 12px;
  }

  .rm-logo {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }

  .rm-logo img {
    width: 56px;
  }

  .rm-logo__name {
    font-size: 15px;
  }
}

/* The menu button on a phone: large and in the brand's blue, so it reads as
   the way into the site (Eliana, 2026-09-30). */
.rm-burger {
  flex: none;
  display: none;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rm-blue);
  color: var(--rm-ink);
  cursor: pointer;
}

.rm-burger svg {
  width: 34px;
  height: 34px;
  margin: auto;
  stroke-width: 2.4;
}

.rm-burger .rm-burger__close {
  display: none;
}

.rm-burger[aria-expanded="true"] .rm-burger__open {
  display: none;
}

.rm-burger[aria-expanded="true"] .rm-burger__close {
  display: block;
}

@media (max-width: 1200px) {
  .rm-burger {
    display: grid;
    order: 3;
  }

  .rm-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px var(--rm-gutter) 28px;
    background: #fff;
    box-shadow: 0 18px 30px rgba(51, 54, 63, 0.12);
  }

  .rm-nav.is-open {
    display: block;
  }

  .rm-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .rm-nav__list a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rm-pink-tint);
  }

  .rm-nav__list a[aria-current="page"]::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .rm-header__inner {
    min-height: 84px;
  }

  .rm-logo img {
    width: 60px;
  }

  .rm-logo__name {
    font-size: 16px;
  }

  .rm-header__cta {
    display: none;
  }

  .rm-nav__donate {
    display: block;
    margin-top: 20px;
  }
}

/* ---------- Hero (home and inner pages) ---------- */

.rm-hero {
  /* How much of the width the photograph's panel takes, the rim it wears and
     the air the words keep from that rim. */
  --rm-hero-photo: 62cqw;
  --rm-hero-air: 48px;
  --rm-ruffle: url("../img/shapes/ruffle-left.svg");
  --rm-rim: var(--rm-blue);
  position: relative;
  overflow: hidden;
}

/* The band carries the design's wave on its lower edge. The mask cuts the
   photograph along the same line, as the Figma image fill does. The height
   follows the width so a photograph keeps the same crop on every desktop. */
.rm-hero__band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(400px, 30vw, 520px);
  padding-bottom: 30px;
  background: var(--rm-pink);
  color: var(--rm-ink);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 29px) no-repeat,
    url("../img/shapes/hero-bottom.svg") 0 100% / 100% 31px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 29px) no-repeat,
    url("../img/shapes/hero-bottom.svg") 0 100% / 100% 31px no-repeat;
}

.rm-hero__inner {
  position: relative;
  z-index: 3;
}

.rm-hero__copy {
  width: calc(50% - 40px);
  padding-block: 64px 56px;
}

.rm-hero__title {
  font-family: var(--rm-font-display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--rm-ink);
  animation: rm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}

.rm-hero__title .rm-accent {
  color: #fff;
}

.rm-hero__deck {
  max-width: 557px;
  margin: 22px 0 0;
  font-family: var(--rm-font-head);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rm-ink);
  animation: rm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

.rm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
  animation: rm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

.rm-hero__visual {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rm-hero-photo, 50%);
  animation: rm-slide-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

/* The rescue asked for the frill of the bands on the heroes too (2026-09-29),
   so the photograph is cut with a ruffled edge instead of an arc and the rim
   of colour behind it follows the same line. */
.rm-hero__rim {
  position: absolute;
  inset: 0 0 0 -18px;
  background: var(--rm-rim);
  -webkit-mask: var(--rm-ruffle) center / 100% 100% no-repeat;
  mask: var(--rm-ruffle) center / 100% 100% no-repeat;
}

.rm-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: var(--rm-ruffle) center / 100% 100% no-repeat;
  mask: var(--rm-ruffle) center / 100% 100% no-repeat;
}

.rm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rm-pos, 50% 50%);
  scale: var(--rm-zoom, 1);
  animation: rm-kenburns 20s ease-in-out 1s infinite alternate;
}

.rm-hero__hearts {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 3%;
  width: 96px;
  height: 76px;
  pointer-events: none;
}

.rm-hero__hearts svg {
  position: absolute;
  width: 28px;
  height: 26px;
  animation:
    rm-pop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both,
    rm-float 3.2s ease-in-out infinite alternate;
}

.rm-hero__hearts svg:nth-child(1) {
  left: 0;
  top: 30px;
  color: var(--rm-blue);
  rotate: -18deg;
  animation-delay: 0.9s, 1.5s;
}

.rm-hero__hearts svg:nth-child(2) {
  left: 36px;
  top: 0;
  color: #fff;
  rotate: 12deg;
  animation-delay: 1.05s, 1.2s;
  animation-duration: 0.6s, 2.6s;
}

.rm-hero__hearts svg:nth-child(3) {
  left: 66px;
  top: 38px;
  color: var(--rm-green);
  rotate: -6deg;
  animation-delay: 1.2s, 1.9s;
  animation-duration: 0.6s, 3.8s;
}

/* Home: the largest of the three heroes. */
.rm-hero--home .rm-hero__band {
  min-height: clamp(520px, 42vw, 700px);
}

.rm-hero--home .rm-hero__copy {
  padding-block: 76px 116px;
  container-type: inline-size;
}

/* Sized from the width of its column, so the name always breaks the same
   way: Rocky Mountain, Old English, Sheepdog Rescue. */
.rm-hero--home .rm-hero__title {
  font-size: clamp(38px, 12.4cqi, 76px);
  line-height: 1.04;
}

.rm-hero--home .rm-hero__deck {
  margin-top: 26px;
  font-size: clamp(18px, 1.6vw, 22px);
}

.rm-hero--home .rm-hero__actions {
  margin-top: 38px;
}

.rm-hero__bubbles span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: rm-drift 9s ease-in-out infinite alternate;
}

.rm-hero__bubbles span:nth-child(1) {
  left: -90px;
  top: -130px;
  width: 340px;
  height: 340px;
}

.rm-hero__bubbles span:nth-child(2) {
  left: 30%;
  bottom: -70px;
  width: 190px;
  height: 190px;
  animation-name: rm-drift-back;
  animation-duration: 12s;
}

.rm-hero__bubbles span:nth-child(3) {
  left: 41%;
  top: 44px;
  width: 84px;
  height: 84px;
  animation-duration: 7s;
}

.rm-hero__bubbles span:nth-child(4) {
  left: 14%;
  bottom: 16%;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.14);
  animation-name: rm-drift-back;
  animation-duration: 6s;
}

.rm-hero__bubbles span:nth-child(5) {
  left: 44%;
  top: 56%;
  width: 34px;
  height: 34px;
  background: rgba(247, 206, 114, 0.5);
  animation-duration: 5s;
}

/* Paw prints that walk along the foot of the band. */
.rm-hero__paws {
  position: absolute;
  left: var(--rm-gutter);
  bottom: 14px;
  width: 300px;
  height: 66px;
  color: var(--rm-pink-soft);
  pointer-events: none;
}

.rm-hero__paws svg {
  position: absolute;
  width: 38px;
  height: 35px;
  rotate: 78deg;
  opacity: 0;
  animation: rm-step 5.2s ease-in-out infinite;
}

.rm-hero__paws svg:nth-child(1) {
  left: 0;
  top: 30px;
  animation-delay: 1.4s;
}

.rm-hero__paws svg:nth-child(2) {
  left: 70px;
  top: 0;
  animation-delay: 1.85s;
}

.rm-hero__paws svg:nth-child(3) {
  left: 140px;
  top: 30px;
  animation-delay: 2.3s;
}

.rm-hero__paws svg:nth-child(4) {
  left: 210px;
  top: 0;
  animation-delay: 2.75s;
}

/* Every inner hero, one shape: the photograph's panel takes 62% of the band
   and is 16:9, the band as tall as the panel, so what was framed is what
   shows. */
.rm-hero--page .rm-hero__band,
.rm-hero--blue .rm-hero__band {
  min-height: clamp(340px, calc(var(--rm-hero-photo) * 0.5625), 760px);
}

.rm-hero--page .rm-hero__visual,
.rm-hero--blue .rm-hero__visual {
  width: var(--rm-hero-photo);
}


/* Form pages: the blue band with the photograph on the left. */
.rm-hero--blue {
  --rm-ruffle: url("../img/shapes/ruffle-right.svg");
  --rm-rim: var(--rm-pink-soft);
}

.rm-hero--blue .rm-hero__band {
  background: var(--rm-blue-pale);
  color: var(--rm-pink-deep);
}

.rm-hero--blue .rm-hero__inner {
  display: flex;
  justify-content: flex-end;
}

/* One rule for every inner hero: the words fill what the photograph leaves,
   30px clear of the rim of colour that edges it (the rim reaches 18px past
   the panel) and a gutter clear of the window, centred on the band's height.
   Everything is measured on the band, never the window. */
.rm-hero--page .rm-hero__band,
.rm-hero--blue .rm-hero__band {
  container-type: inline-size;
}

/* The wrap steps aside so the words are placed against the band itself. */
.rm-hero--page .rm-hero__inner,
.rm-hero--blue .rm-hero__inner {
  position: static;
}

.rm-hero--page .rm-hero__copy,
.rm-hero--blue .rm-hero__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: auto;
  margin: 0;
  padding: 0;
  transform: translateY(calc(-50% - 12px));
}

.rm-hero--blue .rm-hero__copy {
  left: calc(var(--rm-hero-photo) + var(--rm-hero-air));
  right: var(--rm-gutter);
}

/* The pink heroes' words sit in the middle of the colour, between the window
   and the frill (Eliana, 2026-10-01). The frill's wave runs 8.35% of the rim
   in from its inner edge (shapes/ruffle-left.svg) and the rim is 18px wider
   than the panel, so the colour ends 91.65% of the rim from the band's edge. */
.rm-hero--page .rm-hero__copy {
  left: var(--rm-gutter);
  right: calc((var(--rm-hero-photo) + 18px) * 0.9165 + var(--rm-gutter));
  width: fit-content;
  margin-inline: auto;
}

.rm-hero--page .rm-hero__title,
.rm-hero--blue .rm-hero__title {
  font-size: clamp(30px, 3.3cqw, 54px);
}

.rm-hero--blue .rm-hero__title {
  color: var(--rm-ink);
}

.rm-hero--blue .rm-hero__deck {
  color: var(--rm-pink-deep);
}

.rm-hero--blue .rm-hero__visual {
  left: 0;
  right: auto;
  width: var(--rm-hero-photo);
  animation-name: rm-slide-in-left;
}

.rm-hero--blue .rm-hero__rim {
  inset: 0 -16px 0 0;
}

.rm-hero--blue .rm-hero__hearts {
  left: auto;
  right: 2%;
}

.rm-hero--blue .rm-hero__hearts svg:nth-child(1) {
  color: var(--rm-pink-soft);
}

.rm-hero--blue .rm-hero__hearts svg:nth-child(2) {
  color: var(--rm-pink-deep);
}

/* A studio photograph on white. The white turns to the pale pink of the site
   towards the edges and stays white behind the dog, so the coat keeps its
   colour. The picture is also held a little larger, around the face. */
.rm-hero__media--studio {
  background: radial-gradient(ellipse 40% 72% at 47% 52%, #fff 0 50%, var(--rm-pink-pale) 100%);
}

.rm-hero__media--studio img {
  mix-blend-mode: multiply;
  transform: scale(1.3);
  transform-origin: 47% 38%;
  animation-name: rm-kenburns-studio;
}

@keyframes rm-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes rm-slide-in {
  from {
    opacity: 0;
    transform: translateX(64px);
  }
}

@keyframes rm-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-64px);
  }
}

@keyframes rm-slide-up {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

@keyframes rm-kenburns {
  to {
    transform: scale(1.07);
  }
}

@keyframes rm-kenburns-studio {
  to {
    transform: scale(1.38);
  }
}

@keyframes rm-pop {
  from {
    scale: 0;
  }
  60% {
    scale: 1.25;
  }
}

@keyframes rm-float {
  to {
    translate: 0 -10px;
  }
}

@keyframes rm-drift {
  to {
    translate: 46px -40px;
    scale: 1.18;
  }
}

@keyframes rm-drift-back {
  to {
    translate: -42px 30px;
    scale: 0.84;
  }
}

@keyframes rm-step {
  0%,
  100% {
    opacity: 0;
  }
  10%,
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .rm-hero,
  .rm-hero--blue {
    --rm-clip: ellipse(125% 100% at 50% 100%);
  }

  .rm-hero__band,
  .rm-hero--home .rm-hero__band,
  .rm-hero--blue .rm-hero__band {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .rm-hero__copy,
  .rm-hero--home .rm-hero__copy,
  .rm-hero--blue .rm-hero__copy {
    width: auto;
    max-width: 640px;
    padding-block: 44px 40px;
  }

  .rm-hero--blue .rm-hero__inner {
    display: block;
  }

  .rm-hero__visual,
  .rm-hero--blue .rm-hero__visual,
  .rm-hero--page .rm-hero__visual {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    animation-name: rm-slide-up;
  }

  .rm-hero--page .rm-hero__media,
  .rm-hero--page .rm-hero__rim,
  .rm-hero--blue .rm-hero__media,
  .rm-hero--blue .rm-hero__rim {
    -webkit-mask: none;
    mask: none;
  }

  .rm-hero--page .rm-hero__rim,
  .rm-hero--blue .rm-hero__rim {
    display: none;
  }

  .rm-hero--page .rm-hero__band,
  .rm-hero--blue .rm-hero__band {
    min-height: 0;
    /* The picture runs into the band's wave, no strip of colour under it. */
    padding-bottom: 0;
  }

  .rm-hero--page .rm-hero__copy,
  .rm-hero--blue .rm-hero__copy {
    position: static;
    width: auto;
    margin: 0;
    padding-block: 36px 28px;
    transform: none;
  }

  .rm-hero--page .rm-hero__title,
  .rm-hero--blue .rm-hero__title {
    font-size: clamp(32px, 9vw, 44px);
  }

  .rm-hero--home .rm-hero__visual {
    height: clamp(300px, 80vw, 440px);
  }

  .rm-hero__rim,
  .rm-hero--blue .rm-hero__rim {
    inset: -12px 0 0 0;
  }

  .rm-hero__media img {
    object-position: var(--rm-pos-m, 50% 50%);
  }

  .rm-hero__hearts,
  .rm-hero--blue .rm-hero__hearts {
    left: auto;
    right: 9%;
    top: 4px;
  }

  .rm-hero__paws {
    display: none;
  }
}

/* ---------- Section headings ---------- */

.rm-section {
  padding-block: var(--rm-section);
}

.rm-h2 {
  font-family: var(--rm-font-head);
  font-size: clamp(25px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rm-ink);
}

.rm-lead {
  max-width: 860px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.75;
}

.rm-lead p:last-child {
  margin-bottom: 0;
}

/* ---------- Hero with the photograph faded into the colour ---------- */

/* No edge between the picture and the band: the colour crosses the photograph
   in a wide gradient, the way the Education Elevated heroes do it. */
.rm-hero--fade .rm-hero__band {
  --rm-hero-base: var(--rm-pink);
  display: block;
  background: var(--rm-hero-base);
  color: var(--rm-ink);
  overflow: hidden;
}

.rm-hero--fade .rm-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(430px, 48vw, 900px);
  padding-block: clamp(48px, 6vw, 88px) clamp(64px, 7vw, 104px);
}

.rm-hero--fade .rm-hero__copy {
  width: min(560px, 100%);
}

/* Pushed a touch past the edge, so the animal sits clear of the words. */
.rm-hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -110px;
  width: min(74%, 1360px);
  z-index: 1;
}

/* The whole animal, never cut: the picture is fitted inside the band and
   pinned to its bottom right, and the gradient covers the air it leaves. */
.rm-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The clip sits over the photograph, which stays as the still behind it. */
.rm-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .rm-hero__video {
    display: none;
  }
}

/* Two veils: one crossing the picture from the colour, one over its top edge
   so the band never cuts a straight line above the animal. */
.rm-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--rm-hero-base) 0%,
    var(--rm-hero-base) 11%,
    color-mix(in srgb, var(--rm-hero-base) 46%, transparent) 19%,
    color-mix(in srgb, var(--rm-hero-base) 14%, transparent) 26%,
    transparent 34%
  );
}

/* On a phone the picture stops being a backdrop and becomes the lower half of
   the hero: the words sit on clean colour and the photograph, full width
   underneath, still melts into it along its top edge. */
@media (max-width: 860px) {
  .rm-hero--fade .rm-hero__band {
    display: flex;
    flex-direction: column;
    /* No strip of colour under the picture: it runs into the wave itself. */
    padding-bottom: 0;
  }

  .rm-hero--fade .rm-hero__inner {
    min-height: 0;
    padding-block: 40px 30px;
  }

  /* Relative, not static: the veil is positioned against the picture rather
     than against the whole band, which would wash over the words. */
  .rm-hero__photo {
    position: relative;
    right: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .rm-hero__photo::after {
    background: linear-gradient(
      to bottom,
      var(--rm-hero-base) 0%,
      color-mix(in srgb, var(--rm-hero-base) 55%, transparent) 14%,
      color-mix(in srgb, var(--rm-hero-base) 12%, transparent) 30%,
      transparent 44%
    );
  }
}

/* ---------- Bands with the design's wavy edges ---------- */

.rm-band {
  position: relative;
  padding-block: calc(var(--rm-section) + 10px);
  -webkit-mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 43px) no-repeat,
    url("../img/shapes/band-bottom.svg") 0 100% / 100% 28px no-repeat;
  mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 43px) no-repeat,
    url("../img/shapes/band-bottom.svg") 0 100% / 100% 28px no-repeat;
}

.rm-band--pale {
  background: var(--rm-pink-pale);
}

/* The brand's sheepy fur, under a light wash of the pale pink so the words on
   top stay readable. The call to action carries the same fur so the texture
   runs from the band into the pink band below it without a break; both hold
   it still against the window, which is what keeps the two in step. */
.rm-band--fur {
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent),
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent)
    ),
    url("../img/sheepy-fur-1600.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 860px) {
  .rm-band--fur,
  .rm-cta {
    background-attachment: scroll;
  }
}

/* A band that runs straight into the call to action: its foot is flat, and
   since the call to action carries the same pale pink behind its own band the
   two read as one colour with a single wave between them instead of a white
   strip. */
.rm-band--to-cta {
  -webkit-mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
  mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
}


/* The button label is small enough to need 4.5:1, which the deeper pink
   reaches on the pale band and the main pink does not. */
.rm-band--pale .rm-btn--outline {
  color: var(--rm-pink-deep);
  box-shadow: inset 0 0 0 3px var(--rm-pink-deep);
}

.rm-band--pale .rm-btn--outline:hover {
  background: var(--rm-pink-deep);
  color: #fff;
}

/* ---------- How you can help (cards) ---------- */

.rm-help__head {
  text-align: center;
}

.rm-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.rm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 262px;
  padding: 28px 20px 30px;
  border: 1px solid var(--rm-pink);
  border-radius: var(--rm-radius-card);
  background: #fff;
  box-shadow: var(--rm-shadow-card);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.rm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(51, 54, 63, 0.18);
}

.rm-card__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--rm-pink-tint);
  color: var(--rm-pink-deep);
}

.rm-card__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.rm-card__title {
  margin-top: auto;
  font-family: var(--rm-font-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rm-pink-deep);
}

.rm-card__title a {
  text-decoration: none;
}

.rm-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rm-radius-card);
}

.rm-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rm-font-display);
  font-size: 18px;
  color: var(--rm-pink-deep);
}

.rm-card__more svg {
  width: 24px;
  height: 24px;
}

.rm-card__icon,
.rm-card__title,
.rm-card__more {
  transition: color 0.18s ease, background-color 0.18s ease;
}

/* A card fills with pink when it is pointed at or reached with the keyboard,
   as the design draws its highlighted card. */
.rm-card--filled,
.rm-card:hover,
.rm-card:focus-within {
  background: var(--rm-pink);
  border-color: var(--rm-pink-deep);
}

.rm-card--filled .rm-card__icon,
.rm-card:hover .rm-card__icon,
.rm-card:focus-within .rm-card__icon {
  background: #fff;
}

.rm-card--filled .rm-card__title,
.rm-card--filled .rm-card__more,
.rm-card:hover .rm-card__title,
.rm-card:hover .rm-card__more,
.rm-card:focus-within .rm-card__title,
.rm-card:focus-within .rm-card__more {
  color: var(--rm-ink);
}

/* At rest the first card carries the fill. While another card has it, the
   first one hands it over, so only one card is ever filled. */
.rm-cards:has(.rm-card:not(.rm-card--filled):is(:hover, :focus-within)) .rm-card--filled {
  background: #fff;
}

.rm-cards:has(.rm-card:not(.rm-card--filled):is(:hover, :focus-within)) .rm-card--filled .rm-card__icon {
  background: var(--rm-pink-tint);
}

.rm-cards:has(.rm-card:not(.rm-card--filled):is(:hover, :focus-within)) .rm-card--filled .rm-card__title,
.rm-cards:has(.rm-card:not(.rm-card--filled):is(:hover, :focus-within)) .rm-card--filled .rm-card__more {
  color: var(--rm-pink-deep);
}

@media (max-width: 1024px) {
  .rm-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rm-cards {
    grid-template-columns: 1fr;
  }

  .rm-card {
    min-height: 0;
  }
}

/* ---------- Success stories: home carousel ---------- */

.rm-stories__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.rm-stories__controls[hidden] {
  display: none;
}

.rm-stories__controls {
  display: flex;
  gap: 12px;
}

.rm-round-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--rm-pink-deep);
  box-shadow: inset 0 0 0 2px var(--rm-pink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.rm-round-btn:hover {
  background: var(--rm-pink);
  color: var(--rm-ink);
}

.rm-round-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  background: #fff;
  color: var(--rm-pink-deep);
}

.rm-round-btn svg {
  width: 24px;
  height: 24px;
}

.rm-round-btn--prev svg {
  transform: scaleX(-1);
}

.rm-stories__track {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 40px 0 0;
  padding: 8px max(var(--rm-gutter), calc((100vw - var(--rm-wrap)) / 2)) 72px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--rm-gutter), calc((100vw - var(--rm-wrap)) / 2));
  scrollbar-width: none;
  list-style: none;
}

/* No scrollbar line under the cards: the arrows, a swipe or the keyboard
   move the carousel. */
.rm-stories__track::-webkit-scrollbar {
  display: none;
}

.rm-story-card {
  position: relative;
  flex: 0 0 336px;
  padding: 18px 18px 26px;
  border-radius: var(--rm-radius-photo);
  background: #fff;
  box-shadow: var(--rm-shadow-soft);
  scroll-snap-align: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* The staggered rhythm of the design's review cards. */
.rm-story-card:nth-child(even) {
  margin-top: 64px;
}

.rm-story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(51, 54, 63, 0.14);
}

/* Every story photograph wears Instagram's portrait, 4:5 (1080x1350), like the
   posts: the rescue's pictures for Instagram fit here as they are
   (2026-09-30). */
.rm-story-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--rm-pos, 50% 50%);
  border-radius: var(--rm-radius-photo);
}

.rm-story-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--rm-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--rm-ink);
}

.rm-story-card__name svg {
  width: 22px;
  height: 20px;
  color: var(--rm-pink-soft);
}

.rm-story-card__name a {
  text-decoration: none;
}

.rm-story-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rm-radius-photo);
}

.rm-story-card__excerpt {
  margin: 12px 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rm-ink);
}

.rm-story-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rm-font-display);
  font-size: 18px;
  color: var(--rm-pink-deep);
}

.rm-story-card__more svg {
  width: 24px;
  height: 24px;
}

.rm-stories__all {
  margin-top: 8px;
  text-align: center;
}

@media (max-width: 640px) {
  .rm-story-card {
    flex-basis: 80vw;
  }

  .rm-story-card:nth-child(even) {
    margin-top: 32px;
  }

  .rm-stories__controls {
    display: none;
  }
}

/* ---------- Success stories: full list ---------- */

.rm-dog-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-dog-index a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--rm-font-head);
  font-size: 18px;
  color: #7a7d86;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rm-dog-index a:hover {
  color: var(--rm-pink-deep);
}

.rm-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  padding-block: clamp(48px, 6vw, 80px);
  scroll-margin-top: 24px;
}

.rm-story + .rm-story {
  border-top: 1px solid var(--rm-pink-tint);
}

.rm-story__media {
  position: sticky;
  top: 24px;
  margin: 0;
}

.rm-story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--rm-pos, 50% 50%);
  border: 2px solid var(--rm-white-soft);
  border-radius: var(--rm-radius-photo);
}

/* Upright photographs keep their shape, held narrower so they do not tower
   over a short story. The two small originals are never stretched. */
/* One shape for every story, whatever shape the photograph came in. */
.rm-story__media {
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

.rm-story:nth-child(even) .rm-story__media {
  order: 2;
}

.rm-story__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--rm-font-head);
  font-size: clamp(26px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rm-pink-deep);
}

.rm-story__name svg {
  width: 28px;
  height: 26px;
  color: var(--rm-blue);
}

.rm-story__body p {
  font-size: 18px;
  line-height: 1.75;
}

.rm-story__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .rm-story {
    grid-template-columns: 1fr;
  }

  .rm-story__media {
    position: static;
  }

  .rm-story:nth-child(even) .rm-story__media {
    order: 0;
  }
}

/* ---------- About: our story ---------- */

.rm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.rm-split__media {
  margin: 0;
}

.rm-split__media img {
  width: 100%;
  aspect-ratio: 523 / 463;
  object-fit: cover;
  object-position: var(--rm-pos, 50% 50%);
  border: 2px solid var(--rm-white-soft);
  border-radius: var(--rm-radius-photo);
  box-shadow: var(--rm-shadow-soft);
}

.rm-split__body .rm-h2 {
  margin-bottom: 22px;
}

.rm-split__body p {
  font-size: 18px;
  line-height: 1.75;
}

.rm-split__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .rm-split {
    grid-template-columns: 1fr;
  }
}

/* ---------- About: the people behind the rescue ---------- */

.rm-team__head {
  text-align: center;
}

.rm-team__head .rm-lead {
  max-width: 640px;
}

.rm-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.rm-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 22px 30px;
  border-radius: var(--rm-radius-card);
  background: #fff;
  box-shadow: var(--rm-shadow-soft);
  text-align: center;
}

.rm-person__photo {
  width: 150px;
  height: 150px;
  margin-bottom: 14px;
  border: 6px solid var(--rm-pink-tint);
  border-radius: 50%;
  object-fit: cover;
}

.rm-person__name {
  font-family: var(--rm-font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rm-ink);
}

.rm-person__role {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-pink-deep);
}

.rm-person__bio {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .rm-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rm-people {
    grid-template-columns: 1fr;
  }
}

/* ---------- Blog: the listing, its filters and one post ---------- */

/* The row of labels above the listing: all posts, then one per label in use.
   It is the design's row of dog names, with a state for the one chosen. */
.rm-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.rm-chips a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--rm-font-head);
  font-size: 18px;
  color: #7a7d86;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rm-chips a:hover,
.rm-chips a[aria-current="page"] {
  color: var(--rm-pink-deep);
}

.rm-chips a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 11px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--rm-blue);
  -webkit-mask: url("../img/shapes/heart.svg") center / contain no-repeat;
  mask: url("../img/shapes/heart.svg") center / contain no-repeat;
}

.rm-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 26px;
  border-radius: var(--rm-radius-photo);
  background: #fff;
  box-shadow: var(--rm-shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rm-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(51, 54, 63, 0.14);
}

/* Instagram's portrait post, 4:5 (1080x1350): the rescue can use the same
   picture in both places. A picture of any other shape is shown whole, never
   cut, on the pale pink (2026-09-30). */
.rm-post-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--rm-pink-pale);
  border-radius: var(--rm-radius-photo);
}

/* A post with no picture of its own keeps the shape of the others, filled
   with the pale pink and a paw. */
.rm-post-card__img--none {
  display: grid;
  place-items: center;
  background: var(--rm-pink-pale);
  color: var(--rm-pink-soft);
}

.rm-post-card__img--none svg {
  width: 54px;
  height: 50px;
}

.rm-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-pink-deep);
}

.rm-post-card__title {
  margin: 8px 0 0;
  font-family: var(--rm-font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rm-ink);
}

.rm-post-card__title a {
  text-decoration: none;
}

.rm-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rm-radius-photo);
}

.rm-post-card__excerpt {
  margin: 10px 0 16px;
  font-size: 15px;
  line-height: 1.6;
}

.rm-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--rm-font-display);
  font-size: 18px;
  color: var(--rm-pink-deep);
}

.rm-post-card__more svg {
  width: 24px;
  height: 24px;
}

/* The latest posts on the home page, under the success stories and on the
   same fur, which runs on into the call to action: heading and button on one
   line, the blog's own cards under them. */
.rm-news {
  padding-block: 8px var(--rm-section);
  background-color: var(--rm-pink-pale);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent),
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent)
    ),
    url("../img/sheepy-fur-1600.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 860px) {
  .rm-news {
    background-attachment: scroll;
  }
}

.rm-news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  margin-bottom: 40px;
}

/* Sheepy News is a slider: two wide cards in view, the picture on the left
   and the words on the right, always showing; arrows or a swipe bring the
   next ones in. On a phone one card is in view, picture on top. */
.rm-news__track {
  display: flex;
  gap: 28px;
  margin: 36px 0 0;
  padding: 8px max(var(--rm-gutter), calc((100vw - var(--rm-wrap)) / 2)) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--rm-gutter), calc((100vw - var(--rm-wrap)) / 2));
  scrollbar-width: none;
  list-style: none;
}

.rm-news__track::-webkit-scrollbar {
  display: none;
}

/* Fewer cards than the row holds sit in the middle. Auto margins centre them
   while there is room and fall to nothing once the row overflows, so a full
   slider is never cut on its left. */
.rm-news__track > :first-child {
  margin-left: auto;
}

.rm-news__track > :last-child {
  margin-right: auto;
}

.rm-news-card {
  --rm-news-img: clamp(200px, 19vw, 256px);
  position: relative;
  flex: 0 0 calc((min(100vw - 2 * var(--rm-gutter), var(--rm-wrap)) - 28px) / 2);
  display: grid;
  grid-template-columns: var(--rm-news-img) minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
  border: 3px solid var(--rm-pink);
  border-radius: var(--rm-radius-card);
  background: #fff;
  box-shadow: var(--rm-shadow-soft);
  scroll-snap-align: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rm-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(51, 54, 63, 0.14);
}

/* The picture is Instagram's portrait, 4:5, at a fixed size; the words beside
   it are held to its height. */
.rm-news-card__img {
  width: var(--rm-news-img);
  height: calc(var(--rm-news-img) * 1.25);
  object-fit: contain;
  background: var(--rm-pink-pale);
}

.rm-news-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(var(--rm-news-img) * 1.25);
  padding: 18px 20px 16px;
  overflow: hidden;
}

.rm-news-card .rm-post-meta {
  margin: 0;
}

.rm-news-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: var(--rm-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rm-news-card__title a {
  color: var(--rm-ink);
  text-decoration: none;
}

.rm-news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rm-news-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.rm-news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--rm-font-display);
  font-size: 18px;
  color: var(--rm-pink-deep);
}

.rm-news-card__more svg {
  width: 22px;
  height: 22px;
}

/* The blog's listing wears the home page's cards: two across, one on a
   phone (Eliana, 2026-10-01). */
.rm-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.rm-news__all {
  margin-top: 8px;
  text-align: center;
}

@media (max-width: 860px) {
  .rm-news-card {
    flex-basis: 84vw;
    grid-template-columns: 1fr;
  }

  .rm-news-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .rm-news-card__body {
    height: auto;
  }
}

.rm-posts__all {
  margin: 56px 0 0;
  text-align: center;
}

/* Nothing written yet, or a label with nothing under it. */
.rm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px;
  border: 2px dashed var(--rm-pink-soft);
  border-radius: var(--rm-radius-card);
  background: var(--rm-pink-tint);
  text-align: center;
}

.rm-empty svg {
  width: 44px;
  height: 41px;
  color: var(--rm-pink-soft);
}

.rm-empty p {
  margin: 0;
  font-size: 17px;
}

.rm-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}

.rm-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 23px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--rm-pink-tint);
  font-family: var(--rm-font-head);
  font-weight: 600;
  color: var(--rm-ink);
  text-decoration: none;
}

.rm-pagination .page-numbers:hover {
  box-shadow: inset 0 0 0 2px var(--rm-pink);
  color: var(--rm-pink-deep);
}

.rm-pagination .page-numbers.current {
  background: var(--rm-pink);
  box-shadow: none;
  color: #fff;
}

/* One post. The words sit in a single column, as the stories do. */
.rm-post {
  max-width: 760px;
  margin-inline: auto;
}

.rm-post__figure {
  margin: 0 0 36px;
}

.rm-post__figure img {
  width: 100%;
  border-radius: var(--rm-radius-photo);
}

.rm-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rm-pink-tint);
  list-style: none;
}

.rm-post__tags a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--rm-pink-tint);
  font-size: 14px;
  font-weight: 600;
  color: var(--rm-pink-deep);
  text-decoration: none;
}

.rm-post__tags a:hover {
  background: var(--rm-pink);
  color: #fff;
}

.rm-post__back {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 1024px) {
  .rm-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .rm-posts {
    grid-template-columns: 1fr;
  }
}

/* ---------- Call to action band ---------- */

/* The band runs straight into the footer: its foot is flat and the footer,
   pulled up over it by the height of its own wave, cuts that wave out of the
   band's pink instead of out of the white of the page. */
.rm-cta {
  position: relative;
  padding-block: 150px 0;
  margin-bottom: -17px;
  background-color: var(--rm-pink-pale);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent),
      color-mix(in srgb, var(--rm-pink-pale) 55%, transparent)
    ),
    url("../img/sheepy-fur-1600.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  -webkit-mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
  mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
}

/* Where a pale band already runs into it there is nothing to cut: the two
   are the same colour and a wave between them would only draw a line. */
body:has(.rm-band--to-cta) .rm-cta {
  -webkit-mask: none;
  mask: none;
}

.rm-cta__band {
  position: relative;
  padding-block: 64px 60px;
  background: var(--rm-pink);
  -webkit-mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 14px no-repeat,
    linear-gradient(#000 0 0) 0 13px / 100% 100% no-repeat;
  mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 14px no-repeat,
    linear-gradient(#000 0 0) 0 13px / 100% 100% no-repeat;
}

.rm-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

.rm-cta__title {
  font-family: var(--rm-font-head);
  font-size: clamp(27px, 2.8vw, 35px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rm-white-soft);
}

.rm-cta__inner .rm-btn {
  min-width: min(345px, 100%);
}

.rm-cta__pic {
  position: absolute;
  z-index: 2;
  border: 8px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--rm-pos, 50% 50%);
  box-shadow: 0 10px 30px rgba(51, 54, 63, 0.18);
}

.rm-cta__pic--left {
  left: max(16px, calc((100vw - var(--rm-wrap)) / 2 - 40px));
  top: 40px;
  width: 280px;
  height: 280px;
}

.rm-cta__pic--right {
  right: max(16px, calc((100vw - var(--rm-wrap)) / 2 - 20px));
  top: 96px;
  width: 210px;
  height: 210px;
}

@media (max-width: 1100px) {
  .rm-cta {
    padding-top: 40px;
  }

  .rm-cta__pic {
    display: none;
  }
}

/* ---------- Form pages ---------- */

.rm-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0 clamp(32px, 5vw, 72px);
}

.rm-apply__main {
  min-width: 0;
}

.rm-apply__intro {
  font-size: 18px;
  line-height: 1.75;
}

.rm-apply__intro strong {
  font-weight: 700;
}

.rm-apply__fallback {
  margin-top: 22px;
  font-size: 15px;
  color: #5b5e68;
}

.rm-apply__fallback a {
  color: var(--rm-pink-deep);
  font-weight: 600;
}

.rm-apply__aside {
  padding-left: clamp(32px, 4vw, 56px);
  border-left: 1px solid var(--rm-line);
}

.rm-aside__title {
  margin-bottom: 18px;
  font-family: var(--rm-font-head);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rm-pink-deep);
}

.rm-aside__title + .rm-aside__list {
  margin-bottom: 44px;
}

.rm-aside__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-aside__list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--rm-ink);
  text-decoration: none;
}

.rm-aside__list a:hover {
  color: var(--rm-pink-deep);
}

.rm-aside__list svg {
  flex: none;
  width: 25px;
  height: 25px;
  color: var(--rm-pink-deep);
}

@media (max-width: 900px) {
  .rm-apply__grid {
    grid-template-columns: 1fr;
  }

  .rm-apply__aside {
    margin-top: 56px;
    padding: 40px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rm-line);
  }
}

/* The application forms are Cognito Forms. Nothing loads from Cognito until
   the visitor asks for the form, so the page itself makes no third party
   request. */
.rm-embed {
  margin-top: 36px;
}

.rm-embed__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 44px clamp(20px, 4vw, 48px);
  border: 2px dashed var(--rm-pink-soft);
  border-radius: var(--rm-radius-card);
  background: var(--rm-pink-tint);
  text-align: center;
}

.rm-embed__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  color: var(--rm-pink-deep);
}

.rm-embed__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.rm-embed__title {
  font-family: var(--rm-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--rm-ink);
}

.rm-embed__placeholder .rm-btn {
  width: min(420px, 100%);
}

.rm-embed__note {
  margin: 0;
  font-size: 14px;
  color: #5b5e68;
}

.rm-embed__form[hidden],
.rm-embed__placeholder[hidden] {
  display: none;
}

/* Cognito's seamless embed renders into the page, so it takes the site's
   type and colours from here. */
.rm-embed__form {
  --rm-cog-radius: 6px;
  font-family: var(--rm-font-text);
}

/* Cognito styles its forms with CSS variables of its own, declared through
   :root:root:root selectors so a site's styles cannot reach them by
   accident. Setting the same variables here, marked important, dresses the
   form in the site's type and colours without touching anything else. */
.rm-embed__form .cog-cognito {
  --font-family: var(--rm-font-text) !important;
  --font-size: 16px !important;
  --color: var(--rm-ink) !important;
  --heading__font-family: var(--rm-font-head) !important;
  --heading__color: var(--rm-ink) !important;
  --header__font-family: var(--rm-font-head) !important;
  --header__color: var(--rm-pink) !important;
  --label__font-family: var(--rm-font-text) !important;
  --label__font-size: 1em !important;
  --label__color: var(--rm-ink) !important;
  --primary: var(--rm-pink) !important;
  --button-primary__background-color: var(--rm-pink) !important;
  --button-primary__border-color: var(--rm-pink) !important;
  --button-primary__color: #fff !important;
  --button-primary__font-family: var(--rm-font-display) !important;
  --button-primary__font-size: 1.4em !important;
  --button-primary__border-radius: 25px !important;
  --button-secondary__color: var(--rm-pink-deep) !important;
  --button-secondary__border-color: var(--rm-pink) !important;
  --button-secondary__font-family: var(--rm-font-display) !important;
  --button-secondary__font-size: 1.3em !important;
  --button-secondary__border-radius: 25px !important;
  --a__color: var(--rm-pink-deep) !important;
  --highlight: var(--rm-pink) !important;
  --input-highlight: var(--rm-pink) !important;
  --input__border-color: var(--rm-field-line) !important;
  --input__border-radius: 6px !important;
  --input__padding-v: 10px !important;
  --form__width: 100% !important;
  --form__background-color: transparent !important;
  --page__background-color: transparent !important;
  --negative: var(--rm-required) !important;
}

/* ---------- Native form (contact) ---------- */

.rm-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
  margin-top: 36px;
}

.rm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-field--full {
  grid-column: 1 / -1;
}

.rm-field label {
  font-size: 15px;
  font-weight: 700;
  color: var(--rm-ink);
}

.rm-field label .rm-req {
  color: var(--rm-required);
}

/* The same shape as the Cognito forms on the other pages: a thin grey rule,
   soft corners and no shadow. */
.rm-field input,
.rm-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--rm-ink);
}

.rm-field textarea {
  min-height: 150px;
  resize: vertical;
}

.rm-field input:focus,
.rm-field textarea:focus {
  outline: 2px solid var(--rm-pink-deep);
  outline-offset: 0;
  border-color: var(--rm-pink-deep);
}

/* The line that tells an applicant the whole form is not compulsory. */
.rm-apply__required {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rm-ink);
}

.rm-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rm-form__submit {
  grid-column: 1 / -1;
  margin-top: 18px;
}

.rm-form__submit .rm-btn {
  font-size: 25px;
}

.rm-thanks {
  margin-top: 36px;
  padding: 44px 32px;
  border-radius: var(--rm-radius-card);
  background: var(--rm-pink-tint);
  text-align: center;
}

.rm-thanks[hidden] {
  display: none;
}

.rm-thanks__title {
  font-family: var(--rm-font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--rm-pink-deep);
}

.rm-thanks p {
  margin: 10px 0 0;
  font-size: 18px;
}

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

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

.rm-footer {
  position: relative;
  padding-block: 70px 28px;
  background: var(--rm-pink-brand);
  color: var(--rm-ink-dark);
  -webkit-mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
  mask:
    url("../img/shapes/band-top.svg") 0 0 / 100% 18px no-repeat,
    linear-gradient(#000 0 0) 0 17px / 100% 100% no-repeat;
}

.rm-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.rm-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: start;
  text-decoration: none;
}

.rm-footer__brand img {
  width: 96px;
}

.rm-footer__brand span {
  font-family: var(--rm-font-display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--rm-ink-dark);
}

.rm-footer__title {
  margin-bottom: 14px;
  font-family: var(--rm-font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--rm-ink-dark);
}

.rm-footer__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rm-ink-dark);
}

.rm-footer__list a {
  text-decoration: none;
}

.rm-footer__list a:hover {
  color: #000;
  text-decoration: underline;
}

.rm-footer__contact {
  font-size: 14px;
  font-weight: 700;
}

.rm-social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-social a {
  display: block;
  color: var(--rm-ink-dark);
  transition: transform 0.15s ease, color 0.15s ease;
}

.rm-social a:hover {
  color: #000;
  transform: translateY(-2px);
}

.rm-social svg {
  width: 36px;
  height: 36px;
}

.rm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(43, 45, 53, 0.25);
}

.rm-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each affiliation sits on a white tile, so the one logo that ships with a
   white background looks the same as the two that do not. */
.rm-partners a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.15s ease;
}

.rm-partners a:hover {
  transform: translateY(-2px);
}

.rm-partners img {
  width: auto;
  height: 56px;
}

.rm-partners li:last-child img {
  height: 44px;
}

.rm-footer__legal {
  margin: 0;
  font-size: 13px;
  color: var(--rm-ink-dark);
}

.rm-footer__legal a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rm-footer__legal a:hover {
  color: #000;
}

/* The heart in the credit line stands for the word love, in the white of
   the logo. Its wrapper names it, so read aloud the line is "Designed and
   donated with love by Planet Media". */
.rm-footer__heart {
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-inline: 1px;
  vertical-align: -1px;
  color: #fff;
}

@media (max-width: 1024px) {
  .rm-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rm-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .rm-footer__grid {
    grid-template-columns: 1fr;
  }
}