/* ==========================================================================
   Homepage sections from inc/home.php. Every selector starts with the section
   class: the Elementor kit styles bare h1, p and a at higher specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Fills the first screen under the 72px header bar, so the headline and the
   first button are visible without scrolling on a 1366x768 laptop and a phone.
   -------------------------------------------------------------------------- */

.mast-hero {
  /* Makalu's summit in the photo. The crop uses the same point, so the pin
     stays on the summit whatever the screen shape. */
  --summit-x: 28.8%;
  --summit-y: 7.1%;
  --trail-h: clamp(64px, 10vw, 140px);

  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - 72px), 980px);
  background: var(--mast-navy);
  color: var(--mast-white);
}

.mast-hero .mast-hero__photo {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(220px, 30vw, 360px);
  overflow: hidden;
}

.mast-hero .mast-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--summit-x) var(--summit-y);
}

.mast-hero .mast-hero__pin {
  position: absolute;
  left: var(--summit-x);
  top: var(--summit-y);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mast-rhodo);
  box-shadow: 0 0 0 2.5px var(--mast-white);
  transform: translate(-50%, -50%);
}

.mast-hero .mast-hero__pin-label {
  position: absolute;
  left: 54px;
  top: 38px;
  padding: 7px 12px;
  background: var(--mast-navy);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Leader from the dot's edge to the label's corner. Navy, so it shows on snow. */
.mast-hero .mast-hero__pin-label::before {
  content: "";
  position: absolute;
  left: -41px;
  top: -28px;
  width: 50px;
  height: 2px;
  background: var(--mast-navy);
  transform-origin: 0 0;
  transform: rotate(33.7deg);
}

.mast-hero .mast-hero__trail {
  position: relative;
  z-index: 1;
  flex: none;
  height: var(--trail-h);
  margin-top: calc(-1 * var(--trail-h));
}

/* Runs 2px past the bottom so the photo's last pixel row can't show as a seam. */
.mast-hero .mast-hero__trail svg {
  position: absolute;
  inset: 0 0 -2px;
  width: 100%;
  height: calc(100% + 2px);
}

.mast-hero .mast-hero__trail-fill {
  fill: var(--mast-navy);
}

.mast-hero .mast-hero__trail-line {
  fill: none;
  stroke: var(--mast-barley);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

/* The two ends of the trail sit on the gutter, at the height the path has
   there: about 90% down at the left end, 10% at the right. */
.mast-hero .mast-hero__stop {
  position: absolute;
  padding-top: 14px;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mast-barley);
  white-space: nowrap;
}

.mast-hero .mast-hero__stop::before {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mast-hero .mast-hero__stop--start {
  left: var(--mast-gutter);
  top: 90%;
}

.mast-hero .mast-hero__stop--start::before {
  left: 0;
  background: var(--mast-navy);
  box-shadow: inset 0 0 0 2px var(--mast-barley);
  transform: translateY(-50%);
}

.mast-hero .mast-hero__stop--end {
  right: var(--mast-gutter);
  top: 10%;
  padding-top: 18px;
}

.mast-hero .mast-hero__stop--end::before {
  right: 0;
  background: var(--mast-rhodo);
  box-shadow: 0 0 0 2px var(--mast-white);
  transform: translateY(-50%);
}

.mast-hero .mast-hero__band {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--mast-space-6) clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding: 2.75rem var(--mast-gutter) clamp(2rem, 4vw, 3.5rem);
}

.mast-hero .mast-hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h1);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--mast-white);
  text-wrap: balance;
}

.mast-hero .mast-hero__side {
  display: grid;
  gap: var(--mast-space-6);
  max-width: 34rem;
}

.mast-hero .mast-hero__text {
  margin: 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: rgb(255 255 255 / 0.88);
}

.mast-hero .mast-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mast-space-3);
}

.mast-hero .mast-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.75rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s var(--mast-ease);
}

.mast-hero .mast-hero__btn:focus-visible {
  outline: 3px solid var(--mast-barley);
  outline-offset: 3px;
}

.mast-hero .mast-hero__btn--primary {
  background: var(--mast-rhodo);
  color: var(--mast-white);
}

.mast-hero .mast-hero__btn--primary:hover {
  background: var(--mast-rhodo-dark);
  color: var(--mast-white);
}

.mast-hero .mast-hero__btn--outline {
  border-color: var(--mast-white);
  color: var(--mast-white);
}

.mast-hero .mast-hero__btn--outline:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--mast-white);
}

@media (max-width: 767px) {
  /* The trail is short here, so the label has to drop clear of the line. */
  .mast-hero .mast-hero__stop--end {
    padding-top: 24px;
  }

  .mast-hero .mast-hero__band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mast-space-4);
    padding-top: 2.5rem;
  }

  .mast-hero .mast-hero__text {
    font-size: var(--mast-fs-body);
  }

  .mast-hero .mast-hero__actions {
    flex-direction: column;
  }

  .mast-hero .mast-hero__btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   Shared section frame
   Every section below the hero: one background, the page gutter, the same
   vertical rhythm, the same heading. Grounds alternate so neighbours separate
   without rules: paper, white, navy.
   -------------------------------------------------------------------------- */

.mast-sec {
  --sec-fg: var(--mast-ink);
  --sec-muted: var(--mast-ink-muted);
  --sec-label: var(--mast-ink);
  --sec-rule: var(--mast-barley);
  --sec-link-line: var(--mast-rhodo);

  background: var(--sec-bg);
  color: var(--sec-fg);
}

.mast-sec--paper {
  --sec-bg: var(--mast-parchment);
}

.mast-sec--white {
  --sec-bg: var(--mast-white);
}

.mast-sec--navy {
  --sec-bg: var(--mast-navy);
  --sec-fg: var(--mast-white);
  --sec-muted: rgb(255 255 255 / 0.82);
  --sec-label: var(--mast-barley);
  --sec-link-line: var(--mast-barley);
}

.mast-sec .mast-sec__in {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: var(--mast-section-pad) var(--mast-gutter);
}

.mast-sec .mast-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mast-space-4) var(--mast-space-8);
}

.mast-sec .mast-sec__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--mast-space-3);
  margin: 0 0 var(--mast-space-3);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-label);
}

.mast-sec .mast-sec__eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--sec-rule);
}

.mast-sec .mast-sec__title {
  margin: 0;
  max-width: 28ch;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sec-fg);
  text-wrap: balance;
}

.mast-sec .mast-sec__link {
  justify-self: start;
  padding-block: var(--mast-space-2);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-button);
  font-weight: 700;
  color: var(--sec-fg);
  text-decoration: underline;
  text-decoration-color: var(--sec-link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.mast-sec .mast-sec__link:hover {
  color: var(--sec-link-line);
}

.mast-sec .mast-sec__link[target="_blank"]::after {
  content: " ↗";
}

/* Card lists share one reset. Elementor's `.elementor-widget:not(…) ul li`
   (0,2,2) gives every <li> but the last display: block and a 25px bottom
   margin, which doubles row gaps and stretches the last card, so the item
   rules below are written at (0,3,x). */
.mast-sec ul[class$="__grid"],
.mast-sec ol[class$="__steps"],
.mast-sec .mast-about__reasons,
.mast-sec .mast-closing__logos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-sec .mast-sec__in li[class$="__item"],
.mast-sec .mast-sec__in .mast-about__reason,
.mast-sec .mast-sec__in .mast-closing__logo,
.mast-sec .mast-gives__steps > .mast-gives__step {
  margin: 0;
}

.mast-sec a[class$="__card"]:focus-visible,
.mast-sec .mast-sec__link:focus-visible {
  outline: 3px solid var(--mast-rhodo);
  outline-offset: 3px;
}

/* Buttons outside the hero: the .mast-btn from components.css, in the hero's
   sentence-case, 54px form. */
.mast-sec .mast-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.75rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-button);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transform: none;
  transition: background-color 0.18s var(--mast-ease);
}

.mast-sec .mast-btn:focus-visible {
  outline: 3px solid var(--mast-barley);
  outline-offset: 3px;
}

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

.mast-sec .mast-btn--primary:hover {
  background: var(--mast-rhodo-dark);
  color: var(--mast-white);
}

.mast-sec .mast-btn--outline {
  border-color: var(--sec-fg);
  background: transparent;
  color: var(--sec-fg);
}

.mast-sec .mast-btn--outline:hover {
  background: var(--sec-fg);
  color: var(--sec-bg);
}

/* --------------------------------------------------------------------------
   Where we trek
   -------------------------------------------------------------------------- */

.mast-regions .mast-sec__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mast-regions .mast-sec__eyebrow {
  justify-content: center;
}

.mast-regions .mast-regions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.mast-regions .mast-regions__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--mast-space-2) var(--mast-space-4);
  height: 100%;
  padding-bottom: var(--mast-space-4);
  background: var(--mast-white);
  color: var(--mast-ink);
  text-decoration: none;
}

.mast-regions .mast-regions__photo {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  overflow: hidden;
  margin-bottom: var(--mast-space-2);
}

.mast-regions .mast-regions__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mast-regions .mast-regions__tag {
  position: absolute;
  top: var(--mast-space-3);
  left: var(--mast-space-3);
  padding: 5px 9px;
  background: var(--mast-rhodo);
  color: var(--mast-white);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mast-regions .mast-regions__name {
  margin: 0;
  padding-left: var(--mast-space-4);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-lead);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mast-ink);
}

.mast-regions .mast-regions__card:hover .mast-regions__name {
  color: var(--mast-rhodo);
}

.mast-regions .mast-regions__meta {
  padding-right: var(--mast-space-4);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--mast-slate);
}

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

/* Two compact columns on a phone: six full-width cards were a 2,250px scroll. */
@media (max-width: 600px) {
  .mast-regions .mast-regions__grid {
    gap: var(--mast-space-3);
  }

  .mast-regions .mast-regions__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-bottom: var(--mast-space-3);
  }

  .mast-regions .mast-regions__photo {
    aspect-ratio: 4 / 3;
  }

  .mast-regions .mast-regions__tag {
    top: var(--mast-space-2);
    left: var(--mast-space-2);
    padding: 3px 6px;
    font-size: var(--mast-fs-label);
  }

  .mast-regions .mast-regions__name,
  .mast-regions .mast-regions__meta {
    padding-inline: var(--mast-space-3);
  }

  .mast-regions .mast-regions__name {
    font-size: var(--mast-fs-body);
  }
}

/* --------------------------------------------------------------------------
   About MAST
   -------------------------------------------------------------------------- */

.mast-about .mast-about__in {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--mast-space-8);
}

.mast-about .mast-about__photo {
  margin: 0;
  height: 100%;
  min-height: 420px;
}

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

.mast-about .mast-about__body {
  display: grid;
  gap: var(--mast-space-6);
  justify-items: start;
}

.mast-about .mast-sec__head {
  justify-self: stretch;
  justify-content: center;
  text-align: center;
}

.mast-about .mast-sec__eyebrow {
  justify-content: center;
}

.mast-about .mast-about__text {
  margin: 0;
  max-width: 58ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-about .mast-about__text p {
  margin: 0 0 0.75em;
}

.mast-about .mast-about__text p:last-child {
  margin-bottom: 0;
}

.mast-about .mast-about__text a {
  color: var(--mast-ink);
  text-decoration: underline;
  text-decoration-color: var(--mast-rule);
  text-underline-offset: 0.2em;
}

.mast-about .mast-about__text a:hover {
  color: var(--mast-rhodo);
  text-decoration-color: var(--mast-rhodo);
}

/* The facts: numbers first, label under each, hairlines above and below. */
.mast-about .mast-about__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: var(--mast-space-2) 0;
  border-block: 1px solid var(--mast-rule);
}

.mast-about .mast-about__facts > div {
  display: flex;
  flex-direction: column-reverse;
  /* Numbers on one line even when a label wraps to two. */
  justify-content: flex-end;
  gap: 4px;
  padding: var(--mast-space-4) var(--mast-space-4) var(--mast-space-4) 0;
}

.mast-about .mast-about__facts > div + div {
  padding-left: var(--mast-space-4);
  border-left: 1px solid var(--mast-rule);
}

.mast-about .mast-about__facts dd {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--mast-navy);
}

.mast-about .mast-about__facts dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--mast-slate);
}

.mast-about .mast-about__reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mast-space-6) var(--mast-space-8);
  width: 100%;
}

.mast-sec.mast-about .mast-about__reason {
  display: grid;
  gap: 4px;
  padding-left: var(--mast-space-4);
  border-left: 2px solid var(--mast-barley);
}

.mast-about .mast-about__reason strong {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: 700;
  color: var(--mast-ink);
}

.mast-about .mast-about__reason span {
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

@media (max-width: 900px) {
  .mast-about .mast-about__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-about .mast-about__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .mast-about .mast-about__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mast-about .mast-about__facts > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .mast-about .mast-about__facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--mast-rule);
  }
}

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

/* --------------------------------------------------------------------------
   Popular treks
   -------------------------------------------------------------------------- */

.mast-treks .mast-sec__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mast-treks .mast-sec__eyebrow {
  justify-content: center;
}

.mast-treks .mast-treks__intro {
  justify-self: center;
  margin: calc(-1 * var(--mast-space-4)) 0 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-treks .mast-treks__all {
  justify-self: center;
  margin-top: calc(-1 * var(--mast-space-4));
}

.mast-treks .mast-treks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.mast-treks .mast-treks__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mast-white);
  color: var(--mast-ink);
  text-decoration: none;
}

.mast-treks .mast-treks__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.mast-treks .mast-treks__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mast-treks .mast-treks__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--mast-space-2);
  padding: var(--mast-space-4) var(--mast-space-4) var(--mast-space-6);
}

.mast-treks .mast-treks__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--mast-slate);
}

.mast-treks .mast-treks__meta > span + span::before {
  content: "·";
  margin-inline: 0.5em;
}

.mast-treks .mast-treks__name {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mast-ink);
}

.mast-treks .mast-treks__card:hover .mast-treks__name {
  color: var(--mast-rhodo);
}

.mast-treks .mast-treks__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

/* Pinned to the bottom so prices line up across a row. */
.mast-treks .mast-treks__price {
  margin-top: auto;
  padding-top: var(--mast-space-3);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

.mast-treks .mast-treks__price strong {
  font-size: var(--mast-fs-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mast-ink);
}

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

/* A swipe row on a phone: six stacked trek cards were a 3,300px scroll. The
   next card peeks in so it reads as a row you can move along. */
@media (max-width: 600px) {
  .mast-treks .mast-treks__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--mast-space-3);
    margin-inline: calc(-1 * var(--mast-gutter));
    padding-inline: var(--mast-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mast-gutter);
    scrollbar-width: none;
  }

  .mast-treks .mast-treks__item {
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   Every trek gives back
   -------------------------------------------------------------------------- */

.mast-gives {
  --dot: 12px;
}

.mast-gives .mast-sec__head {
  justify-content: center;
  text-align: center;
}

.mast-gives .mast-sec__eyebrow {
  justify-content: center;
}

.mast-gives .mast-sec__link {
  justify-self: center;
}

.mast-gives .mast-gives__route {
  position: relative;
  width: 100%;
}

.mast-gives .mast-gives__trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
}

.mast-gives .mast-gives__trail path {
  fill: none;
  stroke: var(--mast-barley);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.mast-gives .mast-gives__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mast-space-8) clamp(2rem, 4vw, 4rem);
}

.mast-gives .mast-gives__steps > .mast-gives__step {
  position: relative;
  display: grid;
  gap: var(--mast-space-2);
  align-content: start;
  padding-top: 56px;
}

/* Each dot sits where the trail is at the start of its column: 30px, 25px and
   19px down the 40px strip. The path is flat around those points. */
.mast-gives .mast-gives__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--dot-y, 30px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--mast-navy);
  box-shadow: inset 0 0 0 2px var(--mast-barley);
  transform: translateY(-50%);
}

.mast-gives .mast-gives__step:nth-child(2) {
  --dot-y: 25px;
}

.mast-gives .mast-gives__step:nth-child(3) {
  --dot-y: 19px;
}

.mast-gives .mast-gives__step:last-child::before {
  background: var(--mast-rhodo);
  box-shadow: 0 0 0 2px var(--mast-white);
}

.mast-gives .mast-gives__num {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--mast-barley);
}

.mast-gives .mast-gives__step-title {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mast-white);
}

.mast-gives .mast-gives__text {
  margin: 0;
  max-width: 34ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--sec-muted);
}

/* A vertical timeline on small screens: the steps stack and the trail runs
   down the left edge through each dot. */
@media (max-width: 767px) {
  .mast-gives .mast-gives__trail {
    display: none;
  }

  /* (0,3,0) so it beats the shared list reset, which zeroes padding. */
  .mast-sec.mast-gives .mast-gives__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mast-space-8);
    padding-left: var(--mast-space-8);
    border-left: 2px solid var(--mast-barley);
    margin-left: calc(var(--dot) / 2 - 1px);
  }

  .mast-gives .mast-gives__steps > .mast-gives__step {
    padding-top: 0;
  }

  .mast-gives .mast-gives__step::before {
    left: calc(-1 * var(--mast-space-8) - var(--dot) / 2 - 1px);
    top: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   What trekkers say
   -------------------------------------------------------------------------- */

.mast-reviews .mast-sec__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mast-reviews .mast-sec__eyebrow {
  justify-content: center;
}

.mast-reviews .mast-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.mast-reviews .mast-reviews__card {
  display: flex;
  flex-direction: column;
  gap: var(--mast-space-4);
  height: 100%;
  margin: 0;
  padding: var(--mast-space-6);
  background: var(--mast-parchment);
}

.mast-reviews .mast-reviews__stars {
  font-size: var(--mast-fs-body);
  letter-spacing: 0.15em;
  color: var(--mast-rhodo);
}

/* The parent theme boxes every blockquote in grey with a large blue quote
   mark; the card is the box here. */
.mast-reviews .mast-reviews__quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.mast-reviews .mast-reviews__quote::before,
.mast-reviews .mast-reviews__quote::after {
  content: none;
}

.mast-reviews .mast-reviews__quote p {
  margin: 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  font-style: normal;
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

/* Pinned to the bottom so the names line up across the row. */
.mast-reviews .mast-reviews__by {
  margin-top: auto;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

.mast-reviews .mast-reviews__by strong {
  font-weight: 700;
  color: var(--mast-ink);
}

@media (max-width: 900px) {
  .mast-reviews .mast-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   From the blog
   -------------------------------------------------------------------------- */

.mast-blog .mast-sec__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mast-blog .mast-sec__eyebrow {
  justify-content: center;
}

.mast-blog .mast-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.mast-blog .mast-blog__card {
  display: flex;
  flex-direction: column;
  gap: var(--mast-space-2);
  height: 100%;
  padding-bottom: var(--mast-space-6);
  background: var(--mast-white);
  color: var(--mast-ink);
  text-decoration: none;
}

.mast-blog .mast-blog__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--mast-space-2);
}

.mast-blog .mast-blog__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mast-blog .mast-blog__date,
.mast-blog .mast-blog__title {
  padding-inline: var(--mast-space-4);
}

.mast-blog .mast-blog__date {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

.mast-blog .mast-blog__title {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.mast-blog .mast-blog__card:hover .mast-blog__title {
  color: var(--mast-rhodo);
}

@media (max-width: 900px) {
  .mast-blog .mast-blog__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-blog .mast-blog__card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 4px var(--mast-space-4);
    padding: 0;
  }

  .mast-blog .mast-blog__photo {
    grid-row: 1 / 3;
    aspect-ratio: 1;
    margin: 0;
  }

  .mast-blog .mast-blog__date,
  .mast-blog .mast-blog__title {
    padding-inline: 0 var(--mast-space-3);
  }

  .mast-blog .mast-blog__date {
    align-self: end;
    padding-top: var(--mast-space-3);
  }

  .mast-blog .mast-blog__title {
    font-size: var(--mast-fs-h4);
  }
}

/* --------------------------------------------------------------------------
   Closing: next step, then who MAST is registered with
   -------------------------------------------------------------------------- */

.mast-closing .mast-closing__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mast-space-6) var(--mast-space-12);
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--mast-rule);
}

.mast-closing .mast-closing__text {
  margin: var(--mast-space-3) 0 0;
  max-width: 52ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-closing .mast-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mast-space-3);
}

.mast-closing .mast-closing__trust {
  display: grid;
  gap: var(--mast-space-6);
}

.mast-closing .mast-closing__trust .mast-sec__eyebrow {
  margin: 0;
}

/* One height for six logos of six shapes. Grey until hovered, so no single
   brand colour outshouts the others. */
.mast-closing .mast-closing__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mast-space-6) clamp(1.5rem, 4vw, 3.5rem);
}

.mast-closing .mast-sec__eyebrow {
  justify-content: center;
}

.mast-closing .mast-closing__logo a {
  display: block;
}

.mast-closing .mast-closing__logo img {
  display: block;
  width: auto;
  height: 84px;
}

@media (max-width: 600px) {
  .mast-closing .mast-closing__actions {
    flex-direction: column;
    width: 100%;
  }

  .mast-closing .mast-closing__actions .mast-btn {
    width: 100%;
  }

  .mast-closing .mast-closing__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
  }

  .mast-closing .mast-closing__logo img {
    height: 52px;
  }
}

/* --------------------------------------------------------------------------
   Trek list page: navy page head, then every trek in the homepage card
   -------------------------------------------------------------------------- */

.mast-list-head .mast-sec__in {
  justify-items: center;
  gap: var(--mast-space-4);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.mast-list-head .mast-sec__eyebrow {
  justify-content: center;
}

/* A page that opens with a section leaves the parent theme's 1320px box and its 72px top and bottom
   margin, so the navy head runs edge to edge and meets the header and footer. */
.container:has(> .main-content-wrapper > .site-main > .mast-sec:first-child) {
  max-width: none;
  padding-inline: 0;
}
body:not(.single-trip) .main-content-wrapper:has(> .site-main > .mast-sec:first-child) {
  margin-block: 0;
}
.site-main:has(> .mast-sec:first-child) {
  flex: 1 1 100%;
  min-width: 0;
}

.mast-list-head .mast-list-head__crumbs {
  justify-self: start;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: rgb(255 255 255 / 0.7);
}

.mast-list-head .mast-list-head__crumbs a {
  color: rgb(255 255 255 / 0.7);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mast-list-head .mast-list-head__crumbs a:hover {
  color: var(--mast-white);
}

.mast-list-head .mast-sec__title {
  font-size: var(--mast-fs-h1);
}

.mast-list-head .mast-list-head__text {
  margin: 0;
  max-width: 60ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--sec-muted);
}

/* On a phone the full list is compact rows, not 18 full cards. */
@media (max-width: 600px) {
  .mast-sec.mast-treks--all .mast-treks__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .mast-treks--all .mast-treks__card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    flex-direction: row;
  }

  .mast-treks--all .mast-treks__photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 128px;
  }

  .mast-treks--all .mast-treks__body {
    gap: 4px;
    padding: var(--mast-space-3);
  }

  .mast-treks--all .mast-treks__name {
    font-size: var(--mast-fs-h4);
  }

  .mast-treks--all .mast-treks__excerpt {
    display: none;
  }

  .mast-treks--all .mast-treks__price {
    padding-top: 2px;
  }
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.mast-who .mast-who__in {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--mast-space-8);
}

.mast-who .mast-who__body {
  display: grid;
  gap: var(--mast-space-6);
}

.mast-who .mast-who__text,
.mast-story .mast-story__text {
  margin: 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

/* The founding slogan, set as a pull quote. */
.mast-who .mast-who__quote {
  margin: 0;
  padding-left: var(--mast-space-6);
  border-left: 3px solid var(--mast-barley);
}

.mast-who .mast-who__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.mast-who .mast-who__quote blockquote::before,
.mast-who .mast-who__quote blockquote::after {
  content: none;
}

.mast-who .mast-who__quote p {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: clamp(1.556rem, 1.1rem + 1.4vw, 2.222rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mast-navy);
}

.mast-who .mast-who__quote figcaption {
  margin-top: var(--mast-space-3);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

.mast-story .mast-story__in {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--mast-space-8);
}

.mast-story .mast-story__photo {
  margin: 0;
}

.mast-story .mast-story__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
}

.mast-story .mast-story__photo figcaption {
  margin-top: var(--mast-space-2);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

.mast-story .mast-story__body {
  display: grid;
  gap: var(--mast-space-4);
}

.mast-story .mast-story__h,
.mast-drives .mast-drives__item h3 {
  margin: var(--mast-space-2) 0 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mast-ink);
}

.mast-drives .mast-sec__head {
  justify-content: center;
  text-align: center;
}

.mast-drives .mast-sec__eyebrow {
  justify-content: center;
}

.mast-drives .mast-drives__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mast-space-8) clamp(2rem, 4vw, 4rem);
}

.mast-drives .mast-drives__item {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--mast-space-3);
  text-align: center;
  padding-top: var(--mast-space-4);
  border-top: 2px solid var(--mast-barley);
}

.mast-drives .mast-drives__item h3 {
  margin: 0;
}

.mast-drives .mast-drives__item p,
.mast-drives .mast-drives__values dd {
  margin: 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-drives .mast-drives__values {
  display: grid;
  gap: var(--mast-space-3);
  margin: 0;
}

.mast-drives .mast-drives__values dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: 700;
  color: var(--mast-ink);
}

.mast-team .mast-sec__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mast-team .mast-sec__eyebrow {
  justify-content: center;
}

.mast-team .mast-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mast-space-8) clamp(1rem, 2vw, 1.5rem);
}

/* (0,3,0) to beat Elementor's list rule, which makes every <li> a block. */
.mast-sec.mast-team .mast-team__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.mast-team .mast-team__photo {
  display: block;
  align-self: stretch;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: var(--mast-space-2);
  background: var(--mast-white);
}

.mast-team .mast-team__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.mast-team .mast-team__name {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: 700;
  color: var(--mast-ink);
}

.mast-team .mast-team__role {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  color: var(--mast-slate);
}

@media (max-width: 900px) {
  .mast-who .mast-who__in,
  .mast-story .mast-story__in,
  .mast-drives .mast-drives__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .mast-team .mast-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mast-space-6) var(--mast-space-3);
  }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.mast-contact .mast-contact__in {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.mast-contact .mast-contact__h {
  margin: 0 0 var(--mast-space-6);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mast-ink);
}

/* Contact Form 7: labels above fields, one field style, the brand button. */
.mast-contact .wpcf7-form p {
  margin: 0 0 var(--mast-space-4);
}

.mast-contact .wpcf7-form label {
  display: grid;
  gap: 6px;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  font-weight: 600;
  color: var(--mast-ink);
}

.mast-contact .wpcf7-form input:not([type="submit"]),
.mast-contact .wpcf7-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--mast-rule);
  border-radius: 2px;
  background: var(--mast-white);
  color: var(--mast-ink);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: 400;
}

.mast-contact .wpcf7-form textarea {
  min-height: 160px;
}

.mast-contact .wpcf7-form input:focus,
.mast-contact .wpcf7-form textarea:focus {
  border-color: var(--mast-navy);
  outline: 2px solid var(--mast-navy);
  outline-offset: 0;
}

.mast-contact .wpcf7-form input[type="submit"] {
  min-height: 54px;
  padding: 0 var(--mast-space-8);
  border: 0;
  border-radius: 2px;
  background: var(--mast-rhodo);
  color: var(--mast-white);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.mast-contact .wpcf7-form input[type="submit"]:hover {
  background: var(--mast-rhodo-dark);
}

/* The office details: a navy panel, label over value, hairlines between. */
.mast-contact .mast-contact__details {
  padding: var(--mast-space-6) var(--mast-space-8);
  background: var(--mast-navy);
  color: var(--mast-white);
}

.mast-contact .mast-contact__list {
  display: grid;
  margin: 0;
}

.mast-contact .mast-contact__list > div {
  display: grid;
  gap: 4px;
  padding-block: var(--mast-space-4);
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.mast-contact .mast-contact__list > div:last-child {
  border-bottom: 0;
}

.mast-contact .mast-contact__list dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mast-barley);
}

.mast-contact .mast-contact__list dd {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.88);
}

.mast-contact .mast-contact__list a {
  color: var(--mast-white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.2em;
}

.mast-contact .mast-contact__list a:hover {
  text-decoration-color: var(--mast-barley);
}

.mast-contact .mast-contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--mast-space-4);
}

.mast-map .mast-map__frame {
  aspect-ratio: 16 / 7;
  max-width: 100%;
  border: 1px solid var(--mast-rule);
  background: var(--mast-white);
}

.mast-map .mast-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .mast-contact .mast-contact__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-map .mast-map__frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 600px) {
  .mast-contact .mast-contact__details {
    margin-inline: calc(-1 * var(--mast-gutter));
    padding-inline: var(--mast-gutter);
  }
}

/* --------------------------------------------------------------------------
   Donate page
   -------------------------------------------------------------------------- */

.mast-donate .mast-donate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-sec.mast-donate .mast-donate__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--mast-white);
}

.mast-donate .mast-donate__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.mast-donate .mast-donate__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mast-donate .mast-donate__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mast-space-3);
  padding: var(--mast-space-6);
}

.mast-donate .mast-donate__title {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mast-ink);
}

.mast-donate .mast-donate__text {
  margin: 0 0 var(--mast-space-2);
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-donate .mast-btn {
  margin-top: auto;
}

.mast-donate .mast-btn::after {
  content: " ↗";
}

.mast-ways .mast-drives__item .mast-sec__link {
  margin-top: var(--mast-space-2);
}

@media (max-width: 767px) {
  .mast-donate .mast-donate__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-donate .mast-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Community projects and volunteering
   -------------------------------------------------------------------------- */

.mast-btn--ext::after {
  content: " ↗";
}

.mast-project .mast-story__body {
  justify-items: start;
}

/* Alternate the photo side so two project rows don't read as one. */
@media (min-width: 901px) {
  .mast-project .mast-project--flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .mast-project .mast-project--flip .mast-story__photo {
    order: 2;
  }
}

.mast-impact .mast-sec__in {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.mast-impact .mast-impact__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.mast-impact .mast-impact__list > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: var(--mast-space-2) var(--mast-space-6);
  border-left: 1px solid var(--mast-rule);
}

.mast-impact .mast-impact__list > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.mast-impact .mast-impact__list dd {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--mast-navy);
}

.mast-impact .mast-impact__list dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small);
  color: var(--mast-slate);
}

/* Five numbered ways: a real sequence, so the numbers stay. */
/* Three over two, so the fifth way doesn't sit alone on a row. */
.mast-vol .mast-vol__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--mast-space-8) clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-sec.mast-vol .mast-vol__item {
  display: grid;
  align-content: start;
  gap: var(--mast-space-2);
  margin: 0;
  padding-top: var(--mast-space-4);
  border-top: 2px solid var(--mast-barley);
}

.mast-sec.mast-vol .mast-vol__item {
  grid-column: span 2;
}

.mast-sec.mast-vol .mast-vol__item:nth-child(n + 4) {
  grid-column: span 3;
}

.mast-vol .mast-gives__num {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--mast-barley);
}

.mast-vol .mast-vol__item h3 {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mast-ink);
}

.mast-vol .mast-vol__item p,
.mast-vol-how .mast-vol-how__list dd,
.mast-vol-how .mast-vol-how__rules li {
  margin: 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-vol-how .mast-story__body {
  justify-items: start;
}

.mast-vol-how .mast-vol-how__list {
  display: grid;
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--mast-rule);
}

.mast-vol-how .mast-vol-how__list > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--mast-space-4);
  padding-block: var(--mast-space-3);
  border-bottom: 1px solid var(--mast-rule);
}

.mast-vol-how .mast-vol-how__list dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small);
  font-weight: 700;
  color: var(--mast-ink);
}

.mast-vol-how .mast-vol-how__side {
  display: grid;
  gap: var(--mast-space-6);
}

.mast-vol-how .mast-vol-how__rules {
  display: grid;
  gap: var(--mast-space-3);
  padding: var(--mast-space-6);
  border-left: 3px solid var(--mast-barley);
  background: var(--mast-paper);
}

.mast-vol-how .mast-vol-how__rules ul {
  display: grid;
  gap: var(--mast-space-2);
  margin: 0;
  padding-left: 1.1em;
}

.mast-sec.mast-vol-how .mast-vol-how__rules li {
  margin: 0;
}

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

  .mast-impact .mast-impact__list > div {
    padding: var(--mast-space-3) 0;
    border-left: 0;
    border-top: 1px solid var(--mast-rule);
  }

  .mast-impact .mast-impact__list > div:first-child {
    border-top: 0;
  }

  .mast-vol-how .mast-vol-how__list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .mast-vol .mast-vol__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-sec.mast-vol .mast-vol__item,
  .mast-sec.mast-vol .mast-vol__item:nth-child(n + 4) {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   Study and research: places as photo cards with one line each
   -------------------------------------------------------------------------- */

.mast-places .mast-places__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2rem) clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-places .mast-places__item {
  display: grid;
  align-content: start;
  gap: var(--mast-space-2);
  margin: 0;
}

.mast-places .mast-places__photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--mast-space-2);
}

.mast-places .mast-places__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mast-places .mast-places__name {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mast-ink);
}

.mast-places .mast-places__text {
  margin: 0;
  max-width: 45ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

/* The closing band on Get Involved pages: one line and one button. */
.mast-places-cta .mast-sec__in {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.mast-places-cta .mast-places-cta__text {
  margin: var(--mast-space-3) 0 0;
  max-width: 60ch;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--sec-muted);
}

@media (max-width: 900px) {
  .mast-places .mast-places__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .mast-places-cta .mast-sec__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Trip types: the region card with one line under the name
   -------------------------------------------------------------------------- */

.mast-types .mast-types__text {
  grid-column: 1 / -1;
  padding-inline: var(--mast-space-4);
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

/* Four across, so the types fill their rows instead of leaving one card alone. */
.mast-types .mast-regions__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mast-types .mast-regions__card {
  align-content: start;
}

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

/* One compact row per type on a phone: photo on the left, name, count and line beside it. */
@media (max-width: 600px) {
  .mast-types .mast-regions__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mast-types .mast-regions__card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 2px var(--mast-space-4);
    padding: 0;
  }

  .mast-types .mast-regions__photo {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: 1;
    margin: 0;
  }

  .mast-types .mast-regions__name {
    padding: var(--mast-space-3) var(--mast-space-3) 0 0;
  }

  .mast-types .mast-regions__meta,
  .mast-types .mast-types__text {
    grid-column: 2;
    padding: 0 var(--mast-space-3) 0 0;
  }

  .mast-types .mast-types__text {
    padding-bottom: var(--mast-space-3);
    font-size: var(--mast-fs-small);
  }
}

/* --------------------------------------------------------------------------
   Local products: photo, name and four facts
   -------------------------------------------------------------------------- */

.mast-products .mast-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-products .mast-products__item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin: 0;
  background: var(--mast-white);
}

.mast-products .mast-products__photo {
  display: block;
  min-height: 100%;
  overflow: hidden;
}

.mast-products .mast-products__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.mast-products .mast-products__body {
  display: grid;
  align-content: start;
  gap: var(--mast-space-4);
  padding: var(--mast-space-6);
}

.mast-products .mast-products__name {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mast-ink);
}

.mast-products .mast-products__facts {
  display: grid;
  gap: var(--mast-space-3);
  margin: 0;
}

.mast-products .mast-products__facts dt {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mast-slate);
}

.mast-products .mast-products__facts dd {
  margin: 2px 0 0;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

@media (max-width: 1100px) {
  .mast-products .mast-products__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .mast-products .mast-products__photo {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .mast-products .mast-products__photo img {
    min-height: 0;
  }

  .mast-products .mast-products__body {
    padding: var(--mast-space-4);
  }
}

/* --------------------------------------------------------------------------
   Article text: blog posts and document pages show their Elementor text in
   one reading column with the site's type.
   -------------------------------------------------------------------------- */


.mast-sec :is(.mast-post__body, .mast-doc__body) :is(.e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor {
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor :is(p, li) {
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text) !important;
  line-height: var(--mast-lh-text);
  text-align: left;
  color: var(--mast-ink-muted);
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor p {
  margin: 0 0 1.25em;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor :is(ul, ol) {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor li {
  margin: 0 0 0.5em;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor :is(h2, h3, h4) {
  margin: 1.8em 0 0.6em;
  font-family: var(--mast-font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--mast-ink);
  text-wrap: balance;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor h2 {
  font-size: var(--mast-fs-h2) !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor h3 {
  font-size: var(--mast-fs-h3) !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor h4 {
  font-size: var(--mast-fs-h4) !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor > :first-child,
.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor .elementor-widget-container > :first-child {
  margin-top: 0;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor a {
  color: var(--mast-ink);
  text-decoration: underline;
  text-decoration-color: var(--mast-rhodo);
  text-underline-offset: 0.2em;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor a:hover {
  color: var(--mast-rhodo);
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor :is(img, figure) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em 0 0.5em;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor figcaption,
.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor .wp-caption-text {
  margin: 0 0 2em;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-caption);
  text-align: left;
  color: var(--mast-slate);
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-variant-numeric: tabular-nums;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-text-editor :is(th, td) {
  padding: var(--mast-space-2) var(--mast-space-3);
  border-bottom: 1px solid var(--mast-rule);
  text-align: left;
}

/* Share buttons: a quiet row of text links under the article. */
.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-widget-share-buttons {
  margin-top: var(--mast-space-8);
  padding-top: var(--mast-space-6);
  border-top: 1px solid var(--mast-rule);
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-share-btn {
  height: auto !important;
  padding: var(--mast-space-2) var(--mast-space-3);
  border: 1px solid var(--mast-rule) !important;
  border-radius: 2px;
  background: transparent !important;
  color: var(--mast-ink) !important;
  font-size: var(--mast-fs-small) !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-share-btn :is(.elementor-share-btn__icon, .elementor-share-btn__text) {
  padding: 0;
  background: transparent !important;
  color: inherit !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-share-btn__icon {
  width: auto !important;
  margin-right: var(--mast-space-2);
  font-size: var(--mast-fs-body) !important;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-share-btn__title {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small) !important;
  font-weight: 600;
}

.mast-sec :is(.mast-post__body, .mast-doc__body) .elementor-share-btn__icon svg {
  fill: currentColor !important;
}

/* --------------------------------------------------------------------------
   Document pages: the page's Elementor text in one reading column. Its old
   photo banner (first section) and repeated title (second section) are hidden.
   -------------------------------------------------------------------------- */

.mast-doc .mast-doc__body {
  min-width: 0;
}

.mast-doc .mast-doc__body .elementor > .elementor-element {
  min-height: 0 !important;
  background: none !important;
}

/* Some pages embed the old sidebar (contact form and trek list, template 16611) in a column of
   their own. The page head and footer already offer contact, so the text takes the full column. */
.mast-doc .mast-doc__body .e-con:has(> .e-con-inner > .elementor-widget-template),
.mast-doc .mast-doc__body .e-con:has(> .elementor-widget-template) {
  display: none !important;
}

.mast-doc .mast-doc__body .e-con {
  --width: 100% !important;
  width: 100% !important;
}

.mast-doc .mast-doc__body .e-con > .e-con-inner,
.mast-doc .mast-doc__body .e-con.e-flex {
  flex-direction: column !important;
}

/* Numbered sections written as one-item ordered lists around each h2: the number moves into the
   heading, counted across the whole text block. */
.mast-doc .mast-doc__body .elementor-widget-text-editor {
  counter-reset: mast-doc-section;
}

.mast-doc .mast-doc__body ol:has(> li > h2) {
  padding-left: 0;
  list-style: none;
}

.mast-doc .mast-doc__body ol:has(> li > h2) > li > h2::before {
  counter-increment: mast-doc-section;
  content: counter(mast-doc-section) ". ";
}

.mast-doc .mast-doc__body .elementor-widget:not(:last-child) {
  margin-bottom: var(--mast-space-6);
}

.mast-doc .mast-doc__body .elementor-widget-heading .elementor-heading-title {
  margin: var(--mast-space-8) 0 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h3) !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-align: left !important;
  color: var(--mast-ink) !important;
}

.mast-doc .mast-doc__body .elementor-widget-text-editor :is(p, li) {
  text-align: left !important;
}

/* TablePress tables: hairline rows, a quiet header, no zebra stripes. */
.mast-doc .mast-doc__body .tablepress-scroll,
.mast-doc .mast-doc__body .dataTables_wrapper {
  overflow-x: auto;
}

.mast-doc .mast-doc__body .tablepress {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  font-variant-numeric: tabular-nums;
  color: var(--mast-ink-muted);
}

.mast-doc .mast-doc__body .tablepress :is(th, td) {
  padding: var(--mast-space-3) var(--mast-space-4) var(--mast-space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--mast-rule);
  background: none !important;
  text-align: left;
  vertical-align: top;
  line-height: var(--mast-lh-text);
}

.mast-doc .mast-doc__body .tablepress thead th {
  border-bottom: 2px solid var(--mast-ink);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mast-slate);
}

.mast-doc .mast-doc__body .tablepress td:first-child {
  width: 1%;
  white-space: nowrap;
  color: var(--mast-slate);
  font-variant-numeric: tabular-nums;
}

.mast-doc .mast-doc__body .tablepress a {
  color: var(--mast-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mast-rhodo);
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Legal documents: each certificate as a thumbnail with its name
   -------------------------------------------------------------------------- */

.mast-docs .mast-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mast-docs .mast-docs__item {
  margin: 0;
}

.mast-docs .mast-docs__item a {
  display: grid;
  gap: var(--mast-space-3);
  height: 100%;
  padding: var(--mast-space-4);
  background: var(--mast-white);
  color: var(--mast-ink);
  text-decoration: none;
}

.mast-docs .mast-docs__photo {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mast-parchment);
}

.mast-docs .mast-docs__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mast-docs .mast-docs__name {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small);
  font-weight: 600;
  line-height: 1.35;
}

.mast-docs .mast-docs__item a:hover .mast-docs__name {
  color: var(--mast-rhodo);
}

@media (max-width: 600px) {
  .mast-docs .mast-docs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mast-space-3);
  }

  .mast-docs .mast-docs__item a {
    padding: var(--mast-space-3);
  }
}

/* --------------------------------------------------------------------------
   WP Travel Engine pages (wishlist, booking, checkout, account): the plugin's
   own markup, brought onto the page gutter and the site's buttons and fields.
   -------------------------------------------------------------------------- */

.mast-plugin .mast-plugin__body {
  max-width: 560px;
  font-family: var(--mast-font-body);
  font-size: var(--mast-fs-text);
  line-height: var(--mast-lh-text);
  color: var(--mast-ink-muted);
}

.mast-plugin .wpte_empty-items-box {
  display: grid;
  justify-items: start;
  gap: var(--mast-space-3);
  text-align: left !important;
}

.mast-plugin .wpte_empty-items-img {
  display: none;
}

.mast-plugin :is(.wpte_empty-items-title, .wpte-lrf-title) {
  margin: 0;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-h3);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: var(--mast-ink);
}

.mast-plugin .wpte_empty-items-box p {
  margin: 0;
}

.mast-plugin :is(.wpte-button, .wpte-form-submit input[type="submit"], .wpte-lrf-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: var(--mast-space-3);
  padding: 0 1.75rem;
  border: 0;
  border-radius: 2px;
  background: var(--mast-rhodo) !important;
  color: var(--mast-white) !important;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-button);
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
}

.mast-plugin :is(.wpte-button, .wpte-form-submit input[type="submit"], .wpte-lrf-btn):hover {
  background: var(--mast-rhodo-dark) !important;
}

.mast-plugin .wpte-lrf-wrap,
.mast-plugin .wpte-lrf-top,
.mast-plugin .wpte-lrf,
.mast-plugin .wpte-lrf-right {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.mast-plugin .wpte-lrf-head {
  margin-bottom: var(--mast-space-6);
}

.mast-plugin .wpte-form-field {
  margin: 0 0 var(--mast-space-4);
}

.mast-plugin .wpte-form-field input:is([type="text"], [type="password"], [type="email"]) {
  width: 100%;
  min-height: 54px;
  padding: 0 var(--mast-space-4);
  border: 1px solid var(--mast-slate);
  border-radius: 2px;
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  color: var(--mast-ink);
}

.mast-plugin .wpte-form-field input:focus {
  border-color: var(--mast-navy);
  outline: 2px solid var(--mast-navy);
  outline-offset: 0;
}

.mast-plugin .lrf-rememberme {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mast-space-3);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small);
}

.mast-plugin .lrf-rememberme a {
  color: var(--mast-ink);
  text-decoration: underline;
  text-decoration-color: var(--mast-rhodo);
  text-underline-offset: 0.2em;
}

.mast-plugin .wpte-form-submit input[type="submit"] {
  width: 100%;
}

/* Sections placed as Mast widgets sit flush, like one page; Elementor spaces widgets 20px apart. */
.elementor .elementor-widget[class*="elementor-widget-mast-"]:not(:last-child) {
  margin-block-end: 0;
}

/* Pages drawn by templates/mast-page.php have no sidebar, but the parent theme still pads for one. */
body.rightsidebar #primary:has(> .mast-sec) {
  padding-right: 0;
}