.aynew-page,
.aynew-page *,
.aynew-footer,
.aynew-footer * {
  box-sizing: border-box;
}

.aynew-page {
  --aynew-red: #ef0808;
  --aynew-button-font: Oswald, "Arial Narrow", Arial, sans-serif;

  container-type: inline-size;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  color: #111;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.aynew-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 1;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: #fff;
}

.aynew-animals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 8 / 3;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: #fff;
}

.aynew-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #ececea;
}

.aynew-photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.aynew-randy-photo > img {
  object-position: 42% center;
}

.aynew-camping-photo > img {
  object-position: center 54%;
}

.aynew-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-right: 3px solid #fff;
  pointer-events: none;
}

.aynew-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 0.85cqw, 14px);
  min-width: 0;
  min-height: 0;
  padding: clamp(22px, 2.5cqw, 48px);
}

.aynew-copy h2 {
  margin: 0;
  padding: 0;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3.5cqw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

.aynew-copy p {
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 1.35cqw, 21px);
  line-height: 1.45;
}

.aynew-copy .aynew-eyebrow {
  color: var(--aynew-red);
  font-size: clamp(13px, 1.3cqw, 20px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.aynew-copy .aynew-subtitle {
  color: var(--aynew-red);
  font-weight: 700;
  line-height: 1.2;
}

.aynew-copy .aynew-quote {
  font-size: clamp(13px, 1.3cqw, 20px);
  line-height: 1.25;
}

.aynew-quote em {
  font-weight: 700;
}

.aynew-center {
  align-items: center;
  text-align: center;
}

.aynew-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 9px 20px;
  border: 0;
  border-radius: 0;
  background: var(--aynew-red);
  color: #fff;
  font-family: var(--aynew-button-font);
  font-size: clamp(14px, 1.5cqw, 23px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.aynew-button:hover {
  background: #c90000;
  color: #fff;
}

.aynew-button:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.aynew-animal-copy {
  padding: clamp(14px, 1.6cqw, 30px);
}

.aynew-animal-copy h2 {
  font-size: clamp(25px, 2.8cqw, 46px);
}

.aynew-animal-copy p {
  font-size: clamp(13px, 1.2cqw, 18px);
}

.aynew-animal-copy .aynew-button {
  padding-inline: 12px;
  font-size: clamp(13px, 1.35cqw, 21px);
}

.aynew-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(11px, 1cqw, 16px);
  line-height: 1.3;
}

.aynew-features li::before {
  content: "•";
  margin-right: 5px;
  color: var(--aynew-red);
}

.aynew-footer {
  margin: 0;
  padding: 30px 24px 24px;
  color: #fff;
  background: #171717;
  font-family: Arial, Helvetica, sans-serif;
}

.aynew-footer-inner {
  width: min(100%, 1100px);
  margin-inline: auto;
}

.aynew-footer-columns {
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) minmax(230px, 1.35fr) repeat(2, minmax(130px, 1fr));
  gap: 28px;
}

.aynew-footer h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.aynew-footer p,
.aynew-footer a {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.aynew-footer a {
  text-decoration: none;
}

.aynew-footer a:hover {
  text-decoration: underline;
}

.aynew-footer nav a {
  display: block;
}

.aynew-footer-contact-list {
  display: grid;
  gap: 12px;
}

.aynew-footer-contact-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.aynew-footer-contact-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--aynew-red, #d71920);
}

.aynew-footer-contact-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: #fff;
}

.aynew-footer-contact-item h3 {
  margin: 0 0 2px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.aynew-footer-contact-item address {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
}

.aynew-footer-contact-item p {
  line-height: 1.45;
}

.aynew-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

.aynew-footer-bottom span {
  color: #f22;
}

@media (max-width: 999px) {
  .aynew-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .aynew-row > .aynew-photo {
    aspect-ratio: 3 / 2;
  }

  /* Keep each section's photo directly above its own text on mobile. */
  .aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-photo,
  .aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"] > .aynew-photo,
  .aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] > .aynew-photo {
    grid-row: 1;
  }

  .aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-copy,
  .aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"] > .aynew-copy,
  .aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] > .aynew-copy {
    grid-row: 2;
  }

  .aynew-copy {
    gap: 12px;
    padding: 28px 22px;
  }

  .aynew-copy h2 {
    font-size: clamp(28px, 5vw, 40px);
  }

  .aynew-copy p {
    font-size: 16px;
  }

  .aynew-copy .aynew-eyebrow,
  .aynew-copy .aynew-quote {
    font-size: 15px;
  }

  .aynew-button,
  .aynew-animal-copy .aynew-button {
    font-size: 17px;
  }

  .aynew-animals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .aynew-portrait {
    aspect-ratio: 2 / 3;
  }

  .aynew-animal-copy {
    grid-column: 1 / -1;
  }

  .aynew-features {
    font-size: 13px;
  }

  .aynew-footer-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .aynew-footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}

/* Four equal desktop columns: three photos and the existing text panel.
   Each photo is one quarter of the row width, and the row height
   matches that width so the photo frames are square. */
.aynew-page .aynew-animals {
  aspect-ratio: 4 / 1;
  grid-template-rows: minmax(0, 1fr);
}

.aynew-page .aynew-animals > .aynew-photo {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.aynew-page .aynew-animals > .aynew-photo > img {
  object-fit: cover;
}

/* Mobile: keep the three existing photo columns square;
   keep the existing text panel beneath them. */
@media (max-width: 999px) {
  .aynew-page .aynew-animals {
    aspect-ratio: auto;
    grid-template-rows: auto auto;
  }

  .aynew-page .aynew-animals > .aynew-photo {
    aspect-ratio: 1 / 1;
  }
}

/* Family portraits are transparent circular PNGs. Scale them inside their
   existing square frames so the transparent edge is cropped away and each
   photo fills the rectangular frame without distortion or gray margins. */
.aynew-page .aynew-animals > .aynew-photo > img {
  transform: scale(1.5);
  transform-origin: center;
}

/* Homepage-specific text alignment: Safe Haven left, Family right. */
.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-copy {
  align-items: flex-start;
  text-align: left;
}

.aynew-page > .aynew-animals > .aynew-animal-copy {
  align-items: flex-end;
  text-align: right;
}

/* Homepage family layout: align the portrait row to the page edge and keep
   a narrow, visible gap between the cards while retaining the 2:3 frames. */
.aynew-page > .aynew-animals > .aynew-portrait {
  justify-self: start;
  width: 95%;
}

.aynew-page > .aynew-animals > .aynew-animal-copy {
  align-items: flex-start;
  text-align: left;
}

/* Safe Haven image is a real Randy-with-dogs slideshow. */
.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-haven-slideshow > .aynew-haven-slide {
  z-index: 0;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-haven-slideshow > .aynew-haven-slide.is-active {
  z-index: 1;
  opacity: 1;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-haven-slideshow [data-haven-photo-id="randy-01"] {
  object-position: center center;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-haven-slideshow [data-haven-photo-id="randy-02"] {
  object-position: 52% 48%;
}

/* Founder section background treatment */
.aynew-page > .aynew-row:nth-of-type(2) {
  background-image: url("/assets/art/homepage/approved/01-safe-haven-mountains.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.aynew-page > .aynew-row:nth-of-type(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 0;
}

.aynew-page > .aynew-row:nth-of-type(2) > .aynew-copy {
  position: relative;
  z-index: 1;
}

/* Match the hero container's rounded corners and clip each section's contents. */
.aynew-page .aynew-row,
.aynew-page .aynew-animals {
  border-radius: var(--container-radius);
  overflow: hidden;
}

/* Align all below-hero sections with the hero's centered 95vw container. */
.aynew-page {
  width: var(--homepage-section-width, 95vw);
  margin-inline: auto;
}

/* Round all four corners of standard-section photo frames, including
   the inside corners beside their text panels. Family photos are excluded. */
.aynew-page .aynew-row > .aynew-photo {
  border-radius: var(--container-radius);
}

/* Match the desktop Founder row to the square-photo Family row. */
@media (min-width: 1000px) {
  .aynew-page > .aynew-row:nth-of-type(2) {
    aspect-ratio: 3 / 1;
  }

  .aynew-page > .aynew-row:nth-of-type(2) > .aynew-photo {
    height: 100%;
  }

  .aynew-page > .aynew-row:nth-of-type(2) > .aynew-photo > img {
    object-fit: cover;
    object-position: center;
  }
}

/* Meet the Animals We Call Family: three equal 2:3 category slideshows. */
.aynew-page > .aynew-animals {
  align-items: center;
}

.aynew-page > .aynew-animals > .aynew-portrait {
  justify-self: start;
  width: 95%;
  height: auto;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #ececea;
  box-shadow: none;
  outline: none;
}

.aynew-page > .aynew-animals > .aynew-portrait::after {
  display: none;
}

.aynew-page > .aynew-animals > .aynew-portrait > .aynew-animal-slide {
  z-index: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: var(--animal-focus, center);
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease;
  will-change: opacity;
}

.aynew-page > .aynew-animals > .aynew-portrait > .aynew-animal-slide.is-active {
  z-index: 1;
  opacity: 1;
}

.aynew-page > .aynew-animals [data-photo-id="dogs-01"] { --animal-focus: 49% 45%; }
.aynew-page > .aynew-animals [data-photo-id="dogs-02"] { --animal-focus: 42% 43%; }
.aynew-page > .aynew-animals [data-photo-id="dogs-03"] { --animal-focus: 52% 44%; }
.aynew-page > .aynew-animals [data-photo-id="cats-01"] { --animal-focus: 60% 43%; }
.aynew-page > .aynew-animals [data-photo-id="cats-02"] { --animal-focus: 43% 42%; }
.aynew-page > .aynew-animals [data-photo-id="cats-03"] { --animal-focus: 50% 45%; }
.aynew-page > .aynew-animals [data-photo-id="other-animals-01"] { --animal-focus: 60% 45%; }
.aynew-page > .aynew-animals [data-photo-id="other-animals-02"] { --animal-focus: 42% 38%; }
.aynew-page > .aynew-animals [data-photo-id="other-animals-03"] { --animal-focus: 38% 44%; }

@media (max-width: 999px) {
  .aynew-page > .aynew-animals > .aynew-portrait {
    justify-self: start;
    width: 96%;
    margin-block: 16px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aynew-page > .aynew-animals > .aynew-portrait > .aynew-animal-slide {
    transition: none;
  }

  .aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-haven-slideshow > .aynew-haven-slide {
    transition: none;
  }
}

/* Keep the Family band at the same desktop height as the standard rows. */
@media (min-width: 1000px) {
  .aynew-page > .aynew-animals {
    aspect-ratio: 8 / 3;
    grid-template-rows: minmax(0, 1fr);
  }

  /* Keep the three animal photo panels on the left and the copy on the right. */
  .aynew-page > .aynew-animals > [data-animal-category="dogs"] {
    grid-column: 1;
  }

  .aynew-page > .aynew-animals > [data-animal-category="cats"] {
    grid-column: 2;
  }

  .aynew-page > .aynew-animals > [data-animal-category="other-animals"] {
    grid-column: 3;
  }

  .aynew-page > .aynew-animals > .aynew-animal-copy {
    grid-column: 4;
  }

  /* Keep the text and all three portraits in the same desktop row. The
     explicit row prevents the copy from dropping below the portrait track. */
  .aynew-page > .aynew-animals > .aynew-portrait,
  .aynew-page > .aynew-animals > .aynew-animal-copy {
    grid-row: 1;
  }

  /* Center the copy group while letting the portraits settle toward the
     lower edge of the shared band. */
  .aynew-page > .aynew-animals > .aynew-animal-copy {
    align-self: center;
  }

  .aynew-page > .aynew-animals > .aynew-portrait {
    align-self: end;
  }

  .aynew-page > .aynew-animals > .aynew-photo {
    aspect-ratio: 2 / 3;
    height: auto;
  }
}

/* Approved pale artwork inside the three designated text panels. */
.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-copy,
.aynew-page > .aynew-row[aria-labelledby="aynew-together-title"] > .aynew-copy,
.aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] > .aynew-copy {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] > .aynew-copy {
  background-image: url("/assets/art/homepage/approved/01-safe-haven-mountains.png");
  background-position: center center;
  background-size: cover;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-together-title"] > .aynew-copy {
  background-image: url("/assets/art/homepage/approved/02-together-hills.png");
  background-position: center center;
  background-size: cover;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] > .aynew-copy {
  background-image: url("/assets/art/homepage/approved/03-camping-road.png");
  background-position: right bottom;
  background-size: cover;
}

/* Typographic pause between the founder story and animal portraits. */
.aynew-page > .aynew-message-moment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2cqw, 28px);
  min-height: clamp(320px, 27cqw, 430px);
  margin: 0 0 12px;
  padding: clamp(44px, 5.5cqw, 88px) clamp(24px, 7cqw, 112px);
  border-radius: var(--container-radius);
  overflow: hidden;
  background: #111;
  color: #fff;
  text-align: center;
}

.aynew-message-rule {
  display: block;
  width: clamp(48px, 5cqw, 72px);
  height: 4px;
  flex: 0 0 auto;
  background: var(--aynew-red);
}

.aynew-message-moment h2 {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(40px, 5.1cqw, 74px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.aynew-message-moment p {
  max-width: 850px;
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 1.7cqw, 24px);
  line-height: 1.55;
}

@media (max-width: 999px) {
  .aynew-page > .aynew-message-moment {
    min-height: 0;
    gap: 20px;
    padding: 44px 28px 48px;
  }

  .aynew-page > .aynew-message-moment h2 {
    font-size: clamp(36px, 7vw, 54px);
  }

  .aynew-page > .aynew-message-moment p {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Keep the Together section intentionally shorter than the standard desktop
   story rows while preserving its centered copy and red rule. */
@media (min-width: 1000px) {
  .aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"] {
    margin-bottom: calc(12px + 1.875cqw);
  }

  .aynew-page > .aynew-message-moment {
    height: calc(100cqw / 4.5);
    min-height: 0;
    gap: clamp(10px, 1.2cqw, 16px);
    padding: clamp(26px, 2.6cqw, 36px) clamp(24px, 5.5cqw, 96px);
  }

  .aynew-page > .aynew-message-moment h2 {
    font-size: clamp(46px, 5.1cqw, 74px);
    line-height: 1.04;
    margin-bottom: clamp(12px, 1.8cqw, 24px);
  }

  .aynew-page > .aynew-message-moment p {
    font-size: clamp(14px, 1.35cqw, 21px);
    line-height: 1.45;
  }
}

@media (max-width: 999px) {
  .aynew-page > .aynew-message-moment h2 {
    font-size: clamp(37px, 8.3vw, 50px);
    margin-bottom: clamp(12px, 3vw, 20px);
  }
}

/* Homepage desktop section proportions: Safe Haven is the baseline and the
   remaining content bands scale from it without changing the shared width. */
@media (min-width: 1000px) {
  .aynew-page {
    --aynew-safe-height: calc(95vw / 3);
  }

  .aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"],
  .aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] {
    height: var(--aynew-safe-height);
    aspect-ratio: auto;
  }

  .aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"] {
    height: calc(var(--aynew-safe-height) * .9);
    aspect-ratio: auto;
    margin-bottom: 12px;
  }

  .aynew-page > .aynew-message-moment {
    height: calc(var(--aynew-safe-height) * .75);
    min-height: 0;
  }

  .aynew-page > .aynew-animals {
    height: calc(var(--aynew-safe-height) * .9);
    aspect-ratio: auto;
    grid-template-rows: minmax(0, 1fr);
  }

  .aynew-page > .aynew-animals > .aynew-photo {
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
  }

  .aynew-page > .aynew-animals > .aynew-animal-copy {
    padding-block: clamp(8px, 1.2cqw, 18px);
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .aynew-page > .aynew-animals > .aynew-animal-copy {
    gap: 6px;
    padding-block: 5px;
  }
}

/* Mirrored depth spacing between the five content bands. The outer gaps
   remain the existing 12px, while the inner gaps grow toward the center. */
.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"] {
  margin-bottom: 24px;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"],
.aynew-page > .aynew-message-moment {
  margin-bottom: 36px;
}

.aynew-page > .aynew-animals {
  margin-bottom: 24px;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] {
  margin-bottom: 12px;
}

/* Uniform 20px spacing from the hero through the footer. */
.aynew-page {
  padding-top: 20px;
}

.aynew-page > .aynew-row[aria-labelledby="aynew-haven-title"],
.aynew-page > .aynew-row[aria-labelledby="aynew-randy-title"],
.aynew-page > .aynew-message-moment,
.aynew-page > .aynew-animals,
.aynew-page > .aynew-row[aria-labelledby="aynew-camping-title"] {
  margin-bottom: 20px;
}