/**
 * Yard Ready Home - Homepage template
 * Hero, about, services, why-choose-us banner, gallery, FAQ + quote form.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.yrh-hero {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  background: var(--yrh-green);
  clip-path: polygon(
    100% 63.25%,
    60% 80%,
    37.86% 89.27%,
    0% 80%,
    0% 0%,
    100% 0%
  );
}

.yrh-header--overlay + .yrh-site-content .yrh-hero {
  padding-top: var(--yrh-header-height);
}

.yrh-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.yrh-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #8daa284d;
}

.yrh-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.yrh-hero__card {
  position: relative;
  max-width: 745px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--yrh-green);
  box-shadow: var(--yrh-shadow-lg);
  margin-top: 100px;
}

.yrh-hero__title {
  margin-bottom: 10px;
  color: var(--yrh-white);
  line-height: 1.3;
}

.yrh-hero__title .yrh-heading__accent {
  color: var(--yrh-heading-accent);
}

.yrh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yrh-space-4);
  right: 0;
  bottom: -35px;
  position: absolute;
}

/* Tablets */
@media (max-width: 1024px) {
  .yrh-hero {
    min-height: 560px;
  }

  .yrh-hero__card {
    max-width: 520px;
    margin-top: 72px;
  }
}

/* 641-1024px only: the card's own text wraps onto more lines here than at
   desktop widths (same font size, narrower card), so it can grow taller
   than .yrh-hero's floor above. When that happens the section's height
   auto-grows to fit the card, but .yrh-hero__actions is absolutely
   positioned so it isn't counted in that auto-height and gets cropped by
   overflow:hidden, and the desktop clip-path's aggressive dip - tuned
   for a short 2-3 line card - slices into the card text itself. Below
   640px the button becomes static and the card gets its own narrower
   styles, so this stays out of that range. */
@media (min-width: 641px) and (max-width: 1024px) {
  .yrh-hero {
    padding-bottom: 70px;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
.yrh-about{
  margin-top: 50px;
}
  .yrh-hero__card {
    max-width: 600px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .yrh-hero {
    min-height: clamp(420px, 92vw, 520px);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }

  .yrh-hero__card {
    max-width: none;
    margin-top: 40px;
    padding: 1.5rem;
  }

  .yrh-hero__title {
    font-size: var(--yrh-fs-h3);
  }

  .yrh-hero__actions {
    position: static;
    margin-top: var(--yrh-space-5);
  }
}

/* ==========================================================================
   2. About
   ========================================================================== */

.yrh-about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--yrh-space-12);
}

.yrh-about__copy {
  margin-block: var(--yrh-space-5) var(--yrh-space-8);
  max-width: 95%;
}

.yrh-about__media {
  position: relative;
  height: 100%;
}

.yrh-about__media-a,
.yrh-about__media-b,
.yrh-about__media-c {
  position: absolute;
  border-radius: var(--yrh-radius-lg);
  object-fit: cover;
  box-shadow: var(--yrh-shadow-md);
}

/* Large photo, bottom-right */
.yrh-about__media-a {
  right: 0;
  bottom: 0;
  width: 300px;
  height: 450px;
  z-index: 2;
}

/* Medium photo, upper-right */
.yrh-about__media-b {
  bottom: 270px;
  left: 10%;
  width: 315px;
  height: 293px;
  z-index: 1;
}

/* Small photo, bottom-left */
.yrh-about__media-c {
  bottom: 0;
  left: 0;
  width: 257px;
  height: 242px;
  z-index: 1;
}

/* The photos above are sized in fixed pixels for the desktop grid's
   ~585px media column (reached once the .yrh-container hits its max
   width around 1440px+). Below that, down to where the layout stacks,
   the 0.95fr column is narrower than 300+315px, so the photos collide
   into each other instead of just tucking together. Size them as
   percentages of the column instead - matching the same 300/315/257
   out of ~585px ratios - so they scale down together and keep the
   same proportional overlap the desktop design uses on purpose. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .yrh-about__media-a {
    width: 51%;
  }

  .yrh-about__media-b {
    width: 54%;
  }

  .yrh-about__media-c {
    width: 44%;
  }
}

@media (max-width: 1024px) {
  /* The 3-photo collage uses fixed pixel widths/offsets sized for the
     desktop 2-column grid's ~0.95fr media column. Between 900-1024px
     that column narrows enough for the photos to overlap each other, so
     stack to a single column early - already the working fallback below
     900px - rather than trying to rescale a fixed-pixel layout. */
  .yrh-about__grid {
    grid-template-columns: 1fr;
  }

  .yrh-about__media {
    order: -1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    /* .yrh-about__media-a is a fixed 450px tall and bottom-anchored, so
       the container must be at least that tall or the photo pokes out
       above it - crowding the section above (hero, page header, etc). */
    height: clamp(320px, 80vw, 460px);
  }
}

@media (max-width: 560px) {
  /* The three-photo collage is sized in fixed pixels for the desktop
     layout; below 560px those widths (plus their left/right offsets)
     no longer fit the viewport and force the whole page to scroll
     horizontally. Fall back to a single full-width photo instead of
     trying to rescale the collage. */
  .yrh-about__media {
    height: clamp(240px, 70vw, 320px);
  }

  .yrh-about__media-a {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .yrh-about__media-b,
  .yrh-about__media-c {
    display: none;
  }
}

/* ==========================================================================
   3. Services (What We Do)
   ========================================================================== */

.yrh-section-head {
  max-width: 46rem;
  margin-bottom: var(--yrh-space-10);
  margin-inline: auto;
  text-align: center;
}

.yrh-services__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yrh-space-8);
}

.yrh-service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--yrh-radius-lg);
  background: var(--yrh-white);
  box-shadow: var(--yrh-shadow-md);
  overflow: hidden;
  /* Cards backed by a Service post render as <a>, not <article> - keep
     the link from tinting its own text and add a hover affordance. */
  color: inherit;
  transition: box-shadow var(--yrh-transition), transform var(--yrh-transition);
}

a.yrh-service-card:hover,
a.yrh-service-card:focus-visible {
  color: inherit;
  box-shadow: var(--yrh-shadow-lg);
  transform: translateY(-2px);
}

.yrh-service-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.yrh-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--yrh-transition-slow);
}

.yrh-service-card:hover .yrh-service-card__media img {
  transform: scale(1.05);
}

.yrh-service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yrh-space-3);
  padding: var(--yrh-space-6);
}

.yrh-service-card__title {
  margin: 0;
  color: var(--yrh-ink);
  font-size: var(--yrh-fs-h4);
}

.yrh-service-card__text {
  margin: 0;
  color: var(--yrh-body-color);
  font-size: var(--yrh-fs-sm);
}

@media (max-width: 900px) {
  .yrh-services__track {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--yrh-space-2);
    -webkit-overflow-scrolling: touch;
  }

  .yrh-services__track > * {
    scroll-snap-align: start;
  }
}

.yrh-carousel-dots {
  display: none;
  justify-content: center;
  gap: var(--yrh-space-2);
  margin-top: var(--yrh-space-6);
}

@media (max-width: 900px) {
  .yrh-carousel-dots {
    display: flex;
  }
}

.yrh-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--yrh-radius-circle);
  background: var(--yrh-grey-100);
}

.yrh-carousel-dots button.is-active {
  background: var(--yrh-green);
  width: 22px;
}

/* ==========================================================================
   4. Why choose us / transform banner
   ========================================================================== */

.yrh-why {
  position: relative;
  /* Bottom space belongs to this section, not the band, so the cards -
     not a gap of green - are the last thing the section renders. */
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6.5rem);
}

/* Full-bleed sloped green band. Holds only the photo + copy, so nothing
   inside it needs to overflow its own clipped box - the cards live
   outside this element entirely, so they can never get sliced by the
   slope no matter how far they overlap it. */
.yrh-why__band {
  position: relative;
  background: var(--yrh-green);
  clip-path: polygon(0 9%, 100% 0%, 100% 91%, 0% 100%);

  /* Bottom padding here is the space BEFORE the icon cards. */
  padding-block: clamp(4rem, 2rem + 8vw, 8rem) clamp(5rem, 3rem + 8vw, 9rem);
}

.yrh-why__banner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, var(--yrh-space-10));
}

.yrh-why__media {
  height: 100%;
  min-height: 280px;
  border-radius: var(--yrh-radius-lg);
  overflow: hidden;
}

.yrh-why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yrh-why__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yrh-space-2);
  color: var(--yrh-white);
}

.yrh-why__content .yrh-eyebrow {
  color: var(--yrh-lime);
}

.yrh-why__content .yrh-heading {
  color: var(--yrh-white);
}

.yrh-why__text {
  margin-bottom: var(--yrh-space-6);
  color: var(--yrh-on-dark-70);
}

@media (max-width: 780px) {
  .yrh-why__banner {
    grid-template-columns: 1fr;
  }

  .yrh-why__media {
    min-height: 240px;
  }
}

.yrh-why__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--yrh-space-6);
  /* Sits mostly below the sloped green background; only a small strip
     of each card's top edge tucks up underneath it. */
  margin-top: -2.5rem;
}

.yrh-why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--yrh-space-4);
  flex: 1 1 300px;
  padding: var(--yrh-space-6);
  border-radius: var(--yrh-radius-lg);
  background: var(--yrh-white);
  box-shadow: var(--yrh-shadow-lg);
}

.yrh-why-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--yrh-radius-circle);
  background: var(--yrh-lime-10);
  color: var(--yrh-green);
}

.yrh-why-card__icon img {
  width: 26px;
  height: 26px;
}

.yrh-why-card__title {
  margin: 0 0 var(--yrh-space-2);
  font-size: var(--yrh-fs-h5);
}

.yrh-why-card__text {
  margin: 0;
  font-size: var(--yrh-fs-sm);
}

/* ==========================================================================
   5. Gallery / recent works
   ========================================================================== */

.yrh-gallery__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--yrh-space-6);
}

.yrh-gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--yrh-space-3);
}

.yrh-gallery__track {
  align-items: end;
}

.yrh-gallery__media {
  /* Alternating column heights - odd cards shorter, even cards taller -
     for the staggered look in the design. Captions simply follow their
     own image, so they land at different heights automatically. */
  aspect-ratio: 4 / 5;
  border-radius: var(--yrh-radius-lg);
  overflow: hidden;
}

.yrh-gallery__item:nth-child(even) .yrh-gallery__media {
  aspect-ratio: 3 / 5;
}

.yrh-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--yrh-transition-slow);
}

.yrh-gallery__item:hover .yrh-gallery__media img {
  transform: scale(1.05);
}

.yrh-gallery__item figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.yrh-gallery__tags {
  color: var(--yrh-grey-500);
  font-size: var(--yrh-fs-xs);
}

.yrh-gallery__title {
  color: var(--yrh-ink);
  font-size: var(--yrh-fs-h5);
  font-weight: var(--yrh-fw-bold);
}

@media (max-width: 640px) {
  .yrh-gallery__track {
    /* Must match grid-auto-columns below - the explicit first track and
       the implicit ones it creates for the rest need the same width, or
       the first card renders far narrower than the others. */
    grid-template-columns: 68%;
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--yrh-space-2);
    -webkit-overflow-scrolling: touch;
  }

  .yrh-gallery__track > * {
    scroll-snap-align: start;
  }

  .yrh-gallery__item:nth-child(even) .yrh-gallery__media {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   6. FAQ + Get A Free Quote
   ========================================================================== */

.yrh-faq .yrh-section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.yrh-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--yrh-space-4) var(--yrh-space-6);
  align-content: start;
}

.yrh-faq__item {
  padding: var(--yrh-space-5) var(--yrh-space-6);
  border-radius: var(--yrh-radius-md);
  background: var(--yrh-grey-50);
}

.yrh-faq__question {
  display: flex;
  align-items: flex-start;
  gap: var(--yrh-space-3);
  cursor: pointer;
  list-style: none;
  color: var(--yrh-ink);
  font-weight: var(--yrh-fw-semibold);
}

.yrh-faq__question::-webkit-details-marker {
  display: none;
}

.yrh-faq__toggle {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  position: relative;
}

.yrh-faq__toggle::before,
.yrh-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--yrh-green);
  transform: translate(-50%, -50%);
  transition: transform var(--yrh-transition);
}

.yrh-faq__toggle::before {
  width: 2px;
  height: 12px;
}

.yrh-faq__toggle::after {
  width: 12px;
  height: 2px;
}

.yrh-faq__item[open] .yrh-faq__toggle::before {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.yrh-faq__answer {
  margin-top: var(--yrh-space-3);
  padding-left: calc(18px + var(--yrh-space-3));
  color: var(--yrh-grey-500);
  font-size: var(--yrh-fs-sm);
}

@media (max-width: 720px) {
  .yrh-faq__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. Get In Touch + Get A Free Quote
   ========================================================================== */

.yrh-quote-band {
  background: var(--yrh-white);
}

.yrh-quote-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--yrh-space-12);
}

.yrh-quote-band__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yrh-space-5);
}

.yrh-quote-band__text {
  margin: 0;
  max-width: 30rem;
  line-height: var(--yrh-lh-loose);
}

.yrh-quote-band__contact {
  display: flex;
  flex-direction: column;
  gap: var(--yrh-space-4);
  font-size: var(--yrh-fs-sm);
}

.yrh-quote-band__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--yrh-space-3);
  margin: 0;
}

.yrh-quote-band__contact-item svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--yrh-green);
}

.yrh-quote-band .yrh-socials a {
  background: var(--yrh-grey-50);
  color: var(--yrh-ink);
}

.yrh-quote-band .yrh-socials a:hover {
  background: var(--yrh-lime);
  color: var(--yrh-ink);
}

@media (max-width: 780px) {
  .yrh-quote-band__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------------
   Quote card
   ------------------------------------------------------------------------ */

.yrh-quote__card {
  padding: clamp(1.5rem, 1.1rem + 1.5vw, var(--yrh-space-8));
  border: var(--yrh-border);
  border-radius: var(--yrh-radius-xl);
  background: var(--yrh-white);
  color: var(--yrh-ink);
  box-shadow: var(--yrh-shadow-lg);
}

.yrh-quote__title {
  margin-bottom: var(--yrh-space-5);
  color: var(--yrh-ink);
  font-size: var(--yrh-fs-h4);
}

.yrh-quote__notice {
  margin-bottom: var(--yrh-space-5);
  padding: var(--yrh-space-3) var(--yrh-space-4);
  border-radius: var(--yrh-radius-md);
  font-size: var(--yrh-fs-sm);
}

.yrh-quote__notice--success {
  background: var(--yrh-lime-10);
  color: var(--yrh-green-dark);
}

.yrh-quote__notice--error {
  background: rgba(200, 60, 60, 0.1);
  color: #b3261e;
}

.yrh-quote__form {
  display: flex;
  flex-direction: column;
  gap: var(--yrh-space-4);
}

.yrh-quote__form input,
.yrh-quote__form select {
  height: 54px;
}

.yrh-quote__form textarea {
  height: 90px;
}

.yrh-quote__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.yrh-quote__actions {
  margin-top: var(--yrh-space-2);
}

/* ==========================================================================
   8. Page banner
   Shared "page header" band used at the top of the About Us and Contact
   Us templates (see template-parts/sections/banner.php and intro.php).
   ========================================================================== */

.yrh-page-banner {
  position: relative;
  overflow: hidden;
  background: var(--yrh-green);
  color: var(--yrh-white);
  padding-top: var(--yrh-pt, clamp(3rem, 1.5rem + 6vw, 6.5rem));
  padding-bottom: var(--yrh-pb, clamp(3rem, 1.5rem + 6vw, 6.5rem));
}

.yrh-page-banner__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.16;
}

.yrh-page-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.yrh-page-banner__crumbs {
  display: flex;
  align-items: center;
  gap: var(--yrh-space-2);
  margin-bottom: var(--yrh-space-5);
  color: var(--yrh-on-dark-70);
  font-size: var(--yrh-fs-sm);
}

.yrh-page-banner__crumbs a {
  color: var(--yrh-on-dark-70);
}

.yrh-page-banner__crumbs a:hover {
  color: var(--yrh-lime);
}

.yrh-page-banner .yrh-eyebrow {
  color: var(--yrh-lime);
}

.yrh-page-banner .yrh-heading {
  color: var(--yrh-white);
}

.yrh-page-banner__text {
  margin: var(--yrh-space-4) 0 0;
  color: var(--yrh-on-dark-70);
  line-height: var(--yrh-lh-loose);
}

/* ==========================================================================
   9. Testimonials
   ========================================================================== */

.yrh-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yrh-space-6);
}

.yrh-testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--yrh-space-4);
  padding: var(--yrh-space-6);
  border-radius: var(--yrh-radius-lg);
  background: var(--yrh-grey-50);
}

.yrh-testimonial-card__stars {
  display: flex;
  gap: 2px;
}

.yrh-testimonial-card__stars .is-filled {
  color: var(--yrh-heading-accent);
}

.yrh-testimonial-card__stars .is-empty {
  color: var(--yrh-grey-100);
}

.yrh-testimonial-card__text {
  margin: 0;
  color: var(--yrh-body-color);
  font-style: italic;
  line-height: var(--yrh-lh-loose);
}

.yrh-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--yrh-space-3);
  margin-top: auto;
}

.yrh-testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--yrh-radius-circle);
  object-fit: cover;
}

.yrh-testimonial-card__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yrh-lime-10);
  color: var(--yrh-green);
}

.yrh-testimonial-card__who {
  display: flex;
  flex-direction: column;
}

.yrh-testimonial-card__name {
  font-weight: var(--yrh-fw-semibold);
  color: var(--yrh-ink);
}

.yrh-testimonial-card__role {
  font-size: var(--yrh-fs-xs);
  color: var(--yrh-grey-500);
}

@media (max-width: 900px) {
  .yrh-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .yrh-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. Owl Carousel (Services / Testimonials sliders)
   Used only once a section has more than 3 items - see
   template-parts/sections/services.php and testimonials.php.
   ========================================================================== */

/* owl.carousel.min.css hides the .owl-carousel element itself until Owl
   adds "owl-loaded" - fall back to a plain stacked list if the script
   ever fails to run, instead of hiding the section outright. */
.yrh-owl.owl-carousel {
  display: block;
}

.yrh-owl .owl-stage-outer {
  overflow: hidden;
}

.yrh-owl .owl-item > * {
  width: 100%;
  height: 100%;
}

.yrh-owl .owl-nav {
  display: flex;
  justify-content: center;
  gap: var(--yrh-space-3);
  margin-top: var(--yrh-space-6);
}

.yrh-owl .owl-nav button.owl-prev,
.yrh-owl .owl-nav button.owl-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--yrh-radius-circle);
  background: var(--yrh-grey-50);
  color: var(--yrh-ink);
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--yrh-transition), color var(--yrh-transition);
}

.yrh-owl .owl-nav button.owl-prev:hover,
.yrh-owl .owl-nav button.owl-next:hover {
  background: var(--yrh-green);
  color: var(--yrh-white);
}

.yrh-owl .owl-nav button.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.yrh-owl .owl-dots {
  display: flex;
  justify-content: center;
  gap: var(--yrh-space-2);
  margin-top: var(--yrh-space-4);
}

.yrh-owl .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--yrh-radius-circle);
  background: var(--yrh-grey-100);
  transition: background-color var(--yrh-transition), width var(--yrh-transition);
}

.yrh-owl .owl-dot.active span {
  background: var(--yrh-green);
  width: 22px;
}

/* ==========================================================================
   11. Legal page (Privacy Policy, Terms and Conditions, etc)
   ========================================================================== */

.yrh-legal .yrh-entry-content h2,
.yrh-legal .yrh-entry-content h3 {
  margin-top: var(--yrh-space-10);
}

.yrh-legal .yrh-entry-content ul,
.yrh-legal .yrh-entry-content ol {
  padding-left: var(--yrh-space-6);
}

.yrh-legal .yrh-entry-content li + li {
  margin-top: var(--yrh-space-2);
}

/* ==========================================================================
   12. Services listing page
   Full, non-slider grid of every Service post - see
   template-parts/sections/servicelist.php. Wraps to one column on small
   screens instead of the Homepage teaser's horizontal scroll, since the
   point here is to see everything.
   ========================================================================== */

@media (max-width: 900px) {
  .yrh-services__track--static {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}