/* Nosotros: an editorial, architectural reading of La Casona's story and commitments. */
.about-hero { position: relative; overflow: hidden; color: var(--white); background: var(--charcoal-deep); }
.about-hero::before { position: absolute; top: -220px; right: 8%; width: 520px; height: 520px; content: ""; background: var(--orange); border-radius: 50%; opacity: .86; }
.about-hero::after { position: absolute; right: -6%; bottom: -180px; width: 680px; height: 310px; content: ""; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: rotate(-14deg); }
.about-hero__layout { position: relative; z-index: 1; display: grid; min-height: 650px; padding-block: 88px; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: center; gap: 80px; }
.about-hero__copy { max-width: 690px; }
.about-hero__copy h1 { max-width: 700px; margin-bottom: 24px; font-family: var(--serif); font-weight: 500; }
.about-hero__copy h1 em { color: var(--orange-light); font-weight: 400; }
.about-hero__copy > p:not(.eyebrow) { max-width: 570px; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.about-hero__poster { position: relative; display: flex; width: min(100%, 390px); min-height: 410px; margin-inline: auto; padding: 35px; flex-direction: column; justify-content: space-between; color: var(--charcoal-deep); background: var(--orange-light); border: 12px solid rgba(255,255,255,.16); border-radius: 47% 47% 20px 20px; box-shadow: 18px 22px 0 rgba(255,255,255,.08); transform: rotate(4deg); }
.about-hero__poster::before { position: absolute; inset: 15px; content: ""; border: 1px solid rgba(23,23,23,.42); border-radius: 45% 45% 14px 14px; }
.about-hero__poster > * { position: relative; z-index: 1; }
.about-hero__poster > p { margin: 0; font-size: .7rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.about-hero__poster > p strong { font-size: .95rem; }
.about-hero__poster-orbit { position: absolute !important; display: block; border: 1px solid rgba(23,23,23,.3); border-radius: 50%; }
.about-hero__poster-orbit--one { top: 58px; right: 17px; width: 105px; height: 105px; }
.about-hero__poster-orbit--two { right: 43px; bottom: 76px; width: 45px; height: 45px; background: var(--leaf-green); border: 0; }
.about-hero__building { position: relative; display: grid; width: 205px; height: 178px; margin: 0 auto; padding: 25px 15px 17px; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: end; background: var(--charcoal-deep); border-radius: 8px 8px 0 0; box-shadow: 15px 15px 0 rgba(23,23,23,.13); }
.about-hero__building::before { position: absolute; top: -27px; left: 0; width: 0; height: 0; content: ""; border-right: 102px solid transparent; border-bottom: 27px solid var(--charcoal-deep); border-left: 103px solid transparent; }
.about-hero__building span { display: block; height: 75px; background: var(--orange-light); border: 5px solid rgba(255,255,255,.12); }
.about-hero__building span:nth-child(2) { height: 101px; background: var(--orange); }
.about-hero__building span:nth-child(3) { height: 56px; background: var(--leaf-green); }
.about-hero__building strong { position: absolute; right: 14px; bottom: 12px; color: var(--white); font-family: var(--serif); font-size: 1.1rem; line-height: .9; text-align: right; }
.about-hero__poster--image { display: block; overflow: hidden; min-height: 410px; padding: 0; color: var(--white); background: var(--charcoal-deep); transform: rotate(2deg); }
.about-hero__poster--image::after { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(180deg, rgba(23,23,23,.04) 38%, rgba(23,23,23,.82) 100%); }
.about-hero__poster--image img { display: block; width: 100%; height: 410px; object-fit: cover; object-position: center; }
.about-hero__poster--image figcaption { position: absolute; z-index: 1; right: 24px; bottom: 24px; left: 24px; display: flex; justify-content: flex-end; align-items: end; gap: 15px; }
.about-hero__poster--image figcaption > p { margin: 0; color: var(--white); font-size: .7rem; font-weight: 900; letter-spacing: .15em; text-align: right; text-transform: uppercase; }

.about-story { background: var(--ivory); }
.about-story__layout { display: grid; grid-template-columns: 90px minmax(0, 1fr) 270px; align-items: start; gap: 45px; }
.about-story__marker { display: flex; padding-top: 9px; flex-direction: column; align-items: center; color: var(--orange); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.about-story__marker i { display: block; width: 1px; height: 115px; margin: 13px 0; background: var(--orange); opacity: .55; }
.about-story__copy h2 { max-width: 720px; margin-bottom: 25px; font-family: var(--serif); font-weight: 500; }
.about-story__copy p { max-width: 680px; color: var(--muted); }
.about-story__aside { margin-top: 62px; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px 24px 24px 5px; box-shadow: var(--shadow-small); }
.about-story__aside .eyebrow { margin-bottom: 20px; }
.about-story__aside > strong { display: block; color: var(--orange); font-family: var(--serif); font-size: 5rem; font-weight: 500; line-height: .8; }
.about-story__aside p { margin: 19px 0 24px; color: var(--muted); font-size: .82rem; }
.about-story__aside .quiet-link { font-size: .74rem; }

.about-facts { padding-block: 98px; color: var(--white); background: var(--orange); }
.about-facts .section-heading { margin-bottom: 38px; }
.about-facts .section-heading > p { color: rgba(255,255,255,.76); }
.about-facts .eyebrow { color: var(--orange-light); }
.about-facts h2 { color: var(--white); }
.about-facts__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.about-fact { min-height: 170px; padding: 22px 17px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 16px 16px 16px 3px; }
.about-fact:nth-child(2n) { background: rgba(255,255,255,.2); transform: translateY(15px); }
.about-fact strong { display: block; font-family: var(--serif); font-size: clamp(2.05rem, 3vw, 3.2rem); font-weight: 500; line-height: .85; }
.about-fact strong small { margin-left: 3px; font-family: var(--sans); font-size: .68rem; font-weight: 900; }
.about-fact span { max-width: 13ch; font-size: .68rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; }

.about-purpose { background: var(--paper); }
.about-purpose__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.purpose-card { min-height: 390px; padding: 35px; border-radius: 28px 28px 28px 6px; }
.purpose-card--mission { color: var(--white); background: var(--charcoal-deep); }
.purpose-card--vision { color: var(--charcoal-deep); background: var(--orange-soft); border: 1px solid var(--line); }
.purpose-card__number { display: block; margin-bottom: 58px; color: var(--orange-light); font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.purpose-card--vision .purpose-card__number { color: var(--orange-dark); }
.purpose-card h3 { max-width: 390px; margin-bottom: 19px; font-family: var(--serif); font-size: 2.3rem; font-weight: 500; }
.purpose-card p { max-width: 570px; margin-bottom: 14px; color: rgba(255,255,255,.76); font-size: .82rem; }
.purpose-card--vision p { color: var(--muted); }

.about-objectives { padding-block: 96px; color: var(--white); background: var(--charcoal-deep); }
.about-objectives__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr); align-items: end; gap: 70px; }
.about-objectives__heading .eyebrow { grid-column: 1 / -1; margin-bottom: -50px; color: var(--orange-light); }
.about-objectives h2 { max-width: 650px; margin: 0; font-family: var(--serif); font-weight: 500; }
.about-objectives__heading > p:last-child { margin: 0 0 8px; color: rgba(255,255,255,.68); font-size: .84rem; }
.about-objectives__list { display: grid; margin: 55px 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 45px; list-style: none; }
.about-objectives__list li { display: grid; padding: 20px 0; grid-template-columns: 48px 1fr; gap: 15px; border-top: 1px solid rgba(255,255,255,.18); }
.about-objectives__list li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(255,255,255,.18); }
.about-objectives__list span { color: var(--orange-light); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.about-objectives__list p { margin: 0; color: rgba(255,255,255,.82); font-size: .82rem; line-height: 1.45; }
.about-objectives__list p strong { color: var(--white); font-weight: 900; }

.about-sgi { background: var(--ivory); }
.about-sgi__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 90px; align-items: start; }
.about-sgi__intro { position: sticky; top: calc(var(--header-offset) + 25px); }
.about-sgi__intro h2 { margin-bottom: 25px; font-family: var(--serif); font-weight: 500; }
.about-sgi__intro > p { color: var(--muted); font-size: .84rem; }
.about-sgi__stamp { display: inline-block; margin-top: 18px; padding: 10px 14px; color: var(--orange-dark); border: 1px solid var(--orange); border-radius: 10px; font-size: .6rem; font-weight: 900; letter-spacing: .08em; line-height: 1.05; text-transform: uppercase; transform: rotate(-3deg); }
.about-sgi__stamp strong { font-size: .76rem; }
.principles-list { border-top: 1px solid var(--line); }
.principle-item { border-bottom: 1px solid var(--line); }
.principle-item summary { display: grid; padding: 20px 0; grid-template-columns: 42px 1fr 25px; align-items: center; gap: 10px; color: var(--charcoal-deep); font-size: .88rem; font-weight: 900; list-style: none; cursor: pointer; }
.principle-item summary::-webkit-details-marker { display: none; }
.principle-item summary span { color: var(--orange); font-size: .67rem; }
.principle-item summary b { color: var(--orange); font-size: 1.25rem; font-weight: 400; text-align: right; }
.principle-item[open] summary b { transform: rotate(45deg); }
.principle-item p { max-width: 650px; margin: -4px 35px 22px 52px; color: var(--muted); font-size: .8rem; }

.about-resources { background: var(--paper); }
.about-resources__list { border-top: 1px solid var(--line); }
.about-resources__list a { display: grid; padding: 18px 0; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 18px; color: var(--charcoal-deep); border-bottom: 1px solid var(--line); text-decoration: none; }
.about-resources__list a:hover strong { color: var(--orange); }
.about-resources__list a > span { color: var(--orange); font-size: .67rem; font-weight: 900; }
.about-resources__list strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; transition: color 180ms ease; }
.about-resources__list small { color: var(--muted); font-size: .68rem; font-weight: 900; }
.about-resources__list small b { color: var(--orange); font-size: 1rem; }

.about-pets { padding-block: 100px; color: var(--white); background: var(--orange); }
.about-pets__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 90px; align-items: start; }
.about-pets__intro { position: sticky; top: calc(var(--header-offset) + 25px); }
.about-pets__intro h2 { max-width: 500px; margin-bottom: 23px; color: var(--white); font-family: var(--serif); font-weight: 500; }
.about-pets__intro > p:not(.eyebrow) { max-width: 420px; color: rgba(255,255,255,.78); font-size: .86rem; }
.about-pets__intro .button { margin-top: 18px; }
.pet-rules { border-top: 1px solid rgba(255,255,255,.3); }
.pet-rule { border-bottom: 1px solid rgba(255,255,255,.3); }
.pet-rule summary { display: flex; padding: 15px 0; justify-content: space-between; align-items: center; gap: 20px; list-style: none; cursor: pointer; }
.pet-rule summary::-webkit-details-marker { display: none; }
.pet-rule summary span { font-size: .75rem; font-weight: 900; }
.pet-rule summary b { color: var(--orange-light); font-size: 1.35rem; font-weight: 400; }
.pet-rule[open] summary b { transform: rotate(45deg); }
.pet-rule p { max-width: 630px; margin: -2px 45px 18px 0; color: rgba(255,255,255,.78); font-size: .79rem; }

.about-contact { color: var(--white); background: var(--charcoal-deep); }
.about-contact__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr) auto; align-items: center; gap: 55px; }
.about-contact h2 { max-width: 650px; margin-bottom: 20px; color: var(--white); font-family: var(--serif); font-weight: 500; }
.about-contact__layout > div > p:not(.eyebrow) { max-width: 500px; color: rgba(255,255,255,.72); font-size: .88rem; }
.about-contact dl { margin: 0; }
.about-contact dl div { padding-block: 11px; border-bottom: 1px solid rgba(255,255,255,.18); }
.about-contact dt { margin-bottom: 3px; color: var(--orange-light); font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.about-contact dd { margin: 0; color: rgba(255,255,255,.82); font-size: .77rem; }
.about-contact dd a { color: var(--white); font-weight: 900; }

@media (max-width: 1000px) {
  .about-hero__layout { gap: 45px; }
  .about-facts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-fact:nth-child(2n) { transform: none; }
  .about-sgi__layout, .about-pets__layout { gap: 50px; }
  .about-contact__layout { grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr); }
  .about-contact__layout > .button { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (max-width: 850px) {
  .about-hero__layout { min-height: 0; padding-block: 68px; grid-template-columns: 1fr; }
  .about-hero__poster { width: min(100%, 350px); margin-inline: 0; }
  .about-story__layout { grid-template-columns: 55px minmax(0, 1fr); gap: 25px; }
  .about-story__aside { grid-column: 2; margin-top: 0; }
  .about-purpose__grid, .about-sgi__layout, .about-pets__layout { grid-template-columns: 1fr; }
  .about-sgi__intro, .about-pets__intro { position: static; }
  .about-pets__layout { gap: 45px; }
  .about-contact__layout { grid-template-columns: 1fr; gap: 30px; }
  .about-contact__layout > .button { grid-column: auto; grid-row: auto; justify-self: start; }
  .about-purpose .section-heading--editorial,
  .about-resources .section-heading--editorial {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .about-purpose .section-heading--editorial > p,
  .about-resources .section-heading--editorial > p {
    margin: 0;
  }
}

@media (max-width: 620px) {
  .about-hero__layout { padding-block: 52px; }
  .about-hero__poster { min-height: 350px; padding: 25px; }
  .about-hero__poster--image { height: 350px; min-height: 350px; padding: 0; }
  .about-hero__poster--image img { height: 350px; }
  .about-hero__poster--image figcaption { right: 17px; bottom: 20px; left: 17px; }
  .about-hero__building { transform: scale(.84); transform-origin: bottom center; }
  .about-story__layout { grid-template-columns: 1fr; gap: 20px; }
  .about-story__marker { display: none; }
  .about-story__aside { grid-column: auto; }
  .about-facts { padding-block: 70px; }
  .about-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-fact { min-height: 145px; padding: 18px 14px; }
  .purpose-card { min-height: 0; padding: 25px; }
  .purpose-card__number { margin-bottom: 40px; }
  .purpose-card h3 { font-size: 1.9rem; }
  .about-objectives { padding-block: 70px; }
  .about-objectives__heading { display: block; }
  .about-objectives__heading .eyebrow { margin-bottom: 12px; }
  .about-objectives__heading > p:last-child { margin-top: 20px; }
  .about-objectives__list { display: block; margin-top: 35px; }
  .about-objectives__list li:nth-last-child(-n + 2) { border-bottom: 0; }
  .about-objectives__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
  .about-resources__list a { grid-template-columns: 35px minmax(0, 1fr); gap: 10px; }
  .about-resources__list small { grid-column: 2; }
  .about-pets { padding-block: 70px; }
  .principle-item p { margin-left: 0; }
}

/* Keep the original editorial rhythm while softening this section's background. */
.about-pets {
    color: var(--charcoal-deep);
    background: var(--sand);
}

.about-pets__layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 90px;
}

.about-pets__intro {
    color: var(--charcoal-deep);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.about-pets__intro .eyebrow {
    color: var(--orange-dark);
}

.about-pets__intro h2 {
    margin-top: 0;
    color: var(--charcoal-deep);
}

.about-pets__intro > p:not(.eyebrow) {
    color: var(--muted);
}

.pet-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
}

.pet-rule {
    color: var(--charcoal-deep);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(23, 23, 23, .045);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pet-rule:hover,
.pet-rule[open] {
    border-color: var(--orange);
    box-shadow: 0 10px 24px rgba(23, 23, 23, .08);
    transform: translateY(-2px);
}

.pet-rule summary {
    min-height: 72px;
    padding: 16px 18px;
    color: var(--charcoal-deep);
}

.pet-rule summary span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
}

.pet-rule summary span::before {
    width: 8px;
    height: 8px;
    content: "";
    background: var(--orange);
    border-radius: 50%;
}

.pet-rule summary b {
    color: var(--orange);
}

.pet-rule p {
    margin: 0;
    padding: 0 18px 19px;
    color: var(--muted);
    font-size: .76rem;
}

@media (max-width: 620px) {
    .pet-rules {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .about-facts .section-heading--editorial {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }

    .about-facts .section-heading--editorial > p {
        max-width: 48ch;
        margin: 0;
    }

    .about-facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 6px;
    }

    .about-fact,
    .about-fact:nth-child(2n) {
        min-width: 0;
        min-height: 195px;
    }
}

@media (max-width: 620px) {
    .about-facts .section-heading {
        margin-bottom: 34px;
    }

    .about-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 6px;
    }

    .about-fact,
    .about-fact:nth-child(2n) {
        min-height: 175px;
    }

    .about-fact__icon {
        width: 88px;
        height: 88px;
        margin-bottom: 9px;
    }

    .about-fact strong {
        font-size: 1rem;
    }

    .about-fact > span:not(.about-fact__icon) {
        max-width: 14ch;
        margin-top: 6px;
        font-size: .66rem;
    }
}

/* Let the numbers breathe on a quiet surface instead of another full orange block. */
.about-facts {
    color: var(--charcoal-deep);
    background: var(--ivory);
}

.about-facts .eyebrow {
    color: var(--orange-dark);
}

.about-facts h2 {
    color: var(--charcoal-deep);
}

.about-facts .section-heading > p {
    color: var(--muted);
}

.about-fact {
    color: var(--charcoal-deep);
    background: var(--paper);
    border-color: var(--line);
    box-shadow: 0 9px 25px rgba(23, 23, 23, .06);
}

.about-fact:nth-child(2n) {
    background: var(--orange-soft);
    border-color: rgba(232, 91, 36, .18);
}

.about-fact strong {
    color: var(--orange-dark);
}

.about-fact span {
    color: var(--muted);
}

/* Numbers showcase: use the existing family image as a restrained parallax backdrop. */
.about-facts {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background-color: var(--charcoal-deep);
    background-image: linear-gradient(rgba(23, 23, 23, .72), rgba(23, 23, 23, .78)), url("/assets/images/banners/la-casona-family-banner.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.about-facts .container {
    position: relative;
    z-index: 1;
}

.about-facts .eyebrow {
    color: var(--orange-light);
}

.about-facts h2,
.about-facts .section-heading > p {
    color: var(--white);
}

.about-facts__grid {
    width: min(100%, 1080px);
    margin-inline: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.about-fact,
.about-fact:nth-child(2n) {
    min-height: 225px;
    padding: 8px 8px 0;
    align-items: center;
    color: var(--white);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.about-fact__icon {
    display: grid;
    width: 142px;
    height: 142px;
    margin-bottom: 18px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--white) !important;
    border: 0;
    border-radius: 0;
}

.about-fact__icon svg,
.about-fact__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.about-fact strong {
    color: var(--white);
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}

.about-fact strong small {
    margin-left: 2px;
    color: var(--white);
    font-family: var(--sans);
    font-size: .62rem;
}

.about-fact > span:not(.about-fact__icon) {
    max-width: 18ch;
    margin-top: 8px;
    color: rgba(255, 255, 255, .9);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
}

@media (max-width: 850px) {
    .about-facts {
        background-attachment: scroll;
    }

    .about-fact__icon {
        width: 108px;
        height: 108px;
    }

    .about-fact__icon svg,
.about-fact__icon img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 620px) {
    .about-fact,
    .about-fact:nth-child(2n) {
        min-height: 185px;
        padding-inline: 3px;
    }

    .about-fact__icon {
        width: 96px;
        height: 96px;
        margin-bottom: 12px;
    }

    .about-fact__icon svg,
    .about-fact__icon img {
        width: 100%;
        height: 100%;
    }

    .about-fact strong {
        font-size: 1.05rem;
    }
}

/* Keep all rules visible at a glance without oversized empty cards. */
.pet-rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
}

.pet-rule {
    align-self: start;
    border-radius: 12px;
}

.pet-rule summary {
    min-height: 48px;
    padding: 10px 12px;
}

.pet-rule summary span {
    gap: 8px;
    font-size: .67rem;
}

.pet-rule summary span::before {
    width: 7px;
    height: 7px;
}

.pet-rule summary b {
    font-size: 1.05rem;
}

.pet-rule p {
    padding: 0 12px 13px;
    font-size: .7rem;
    line-height: 1.4;
}

@media (max-width: 1050px) {
    .pet-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .pet-rules {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .about-pets__layout {
        grid-template-columns: 1fr;
    }

}

/* Give the care commitments section a warm, pet-friendly visual backdrop. */
.about-pets {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(23, 23, 23, .84) 0%, rgba(23, 23, 23, .68) 43%, rgba(23, 23, 23, .38) 100%),
        url("/assets/images/about/pet-friendly-background.webp") center / cover no-repeat;
}

.about-pets > .container {
    position: relative;
    z-index: 1;
}

.about-pets__intro {
    color: var(--white);
}

.about-pets__intro .eyebrow {
    color: var(--orange-light);
}

.about-pets__intro h2 {
    color: var(--white);
}

.about-pets__intro > p:not(.eyebrow) {
    color: rgba(255, 255, 255, .84);
}

.pet-rule {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
}

/* Final mobile overrides for the parallax facts section. */
@media (max-width: 850px) {
    .about-facts .section-heading--editorial {
        display: block;
    }

    .about-facts .section-heading--editorial > p {
        max-width: 48ch;
        margin-top: 20px;
    }

    .about-facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 6px;
    }
}

@media (max-width: 620px) {
    .about-facts .section-heading--editorial > p {
        margin-top: 18px;
    }

    .about-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 6px;
    }

    .about-fact,
    .about-fact:nth-child(2n) {
        min-height: 175px;
    }
}

/* Keep each metric grouped: icon, value and label should read as one unit. */
.about-fact,
.about-fact:nth-child(2n) {
    justify-content: flex-start;
}

.about-fact__icon {
    margin-bottom: 10px;
}

@media (max-width: 620px) {
    .about-fact__icon {
        margin-bottom: 8px;
    }
}

/* Keep each metric's icon and copy grouped without inherited flex spacing. */
.about-fact,
.about-fact:nth-child(2n) {
    display: grid;
    align-content: start;
    justify-content: initial;
    justify-items: center;
    row-gap: 5px;
}

.about-fact__icon,
.about-fact strong,
.about-fact > span:not(.about-fact__icon) {
    margin-top: 0;
    margin-bottom: 0;
}

.about-careers { color: var(--white); background: var(--orange); }
.about-careers__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 80px; align-items: center; }
.about-careers h2 { max-width: 700px; margin-bottom: 20px; color: var(--white); font-family: var(--serif); font-weight: 500; }
.about-careers__layout > div:first-child > p:last-child { max-width: 54ch; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: .95rem; }
.about-careers__card { display: flex; padding: 30px; flex-direction: column; background: rgba(23,23,23,.2); border: 1px solid rgba(255,255,255,.28); border-radius: 24px; }
.about-careers__card > span { margin-bottom: 12px; color: var(--orange-light); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.about-careers__card a { color: var(--white); font-size: clamp(1rem, 2vw, 1.20rem); font-weight: 900; overflow-wrap: anywhere; }
.about-careers__card small { margin-top: 16px; color: rgba(255,255,255,.76); font-size: .78rem; line-height: 1.5; }

@media (max-width: 850px) {
    .about-careers__layout { grid-template-columns: 1fr; gap: 38px; }
    .about-careers__card { max-width: 620px; }
}
