/* The Backyard Collection, featured beyond its own page: the homepage band below
   the hero (.aph) and the services hub strip (.aph-hub). Both open
   /services/adu/floor-plans/. */
.aph{background:linear-gradient(180deg,#ECE5D8 0%,#F4F0E8 100%);color:#1E3341}
.aph-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,5.5vw,92px);align-items:center;width:min(1280px,90%);margin-inline:auto;padding-block:clamp(76px,8vw,118px)}
.aph .eyebrow{color:#8a6638}
.aph h2{margin:16px 0 20px;font:500 clamp(40px,4vw,60px)/1.02 Editorial,Georgia,serif;letter-spacing:-.035em;color:#1E3341}
.aph-copy>p:not(.eyebrow){max-width:480px;margin:0 0 30px;font:400 16px/1.8 Manrope,Arial,sans-serif;color:#3f505c}
.aph-index{list-style:none;margin:0 0 34px;padding:0;border-top:1px solid #d7cfc2;max-width:520px}
.aph-index a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:baseline;gap:12px;min-height:44px;padding:13px 0;border-bottom:1px solid #d7cfc2;color:#1E3341;text-decoration:none}
.aph-index span{font:700 10px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;color:#BB9259}
.aph-index strong{font:500 23px/1.15 Editorial,Georgia,serif;letter-spacing:-.01em}
.aph-index small{font:600 11px/1.3 Manrope,Arial,sans-serif;letter-spacing:.05em;color:#5b6a73;text-align:right}
.aph-index a:hover strong,.aph-index a:focus-visible strong{text-decoration:underline;text-decoration-color:#BB9259;text-underline-offset:5px}
.aph-media{position:relative;display:block;overflow:hidden;border-radius:10px;aspect-ratio:3/2;background:#e2dbcd;box-shadow:0 40px 70px -40px #1e334180}
.aph-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.aph-media:hover img{transform:scale(1.03)}
.aph-tag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;background:#101e28c9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#F4F0E8;font:600 12px/1.3 Manrope,Arial,sans-serif;letter-spacing:.02em}
.aph-tag b{display:inline-flex;align-items:center;padding:3px 7px 2px;border-radius:999px;background:#EACA92;color:#1E3341;font:700 9px/1.2 Manrope,Arial,sans-serif;letter-spacing:.12em}

.aph-hub{width:min(1280px,90%);margin:0 auto 72px}
.aph-hub-inner{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,60px);padding:18px clamp(18px,3vw,40px) 18px 18px;border-radius:12px;background:radial-gradient(120% 140% at 85% 10%,#2a4a5e 0%,#18303f 52%,#0f202b 100%);color:#F4F0E8;text-decoration:none;box-shadow:0 30px 60px -36px #1e3341a6}
.aph-hub-media{display:block;overflow:hidden;border-radius:8px;aspect-ratio:16/9;background:#18303f}
.aph-hub-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.aph-hub-inner:hover .aph-hub-media img{transform:scale(1.04)}
.aph-hub-copy{display:grid;gap:12px;justify-items:start}
.aph-hub .eyebrow{margin:0;color:#FFE1AE}
.aph-hub-copy strong{font:500 clamp(30px,3vw,44px)/1.06 Editorial,Georgia,serif;letter-spacing:-.03em}
.aph-hub-copy>span:not(.eyebrow):not(.aph-hub-go){max-width:560px;font:400 15px/1.75 Manrope,Arial,sans-serif;color:#d9dfdc}
.aph-hub-go{margin-top:4px;padding-bottom:3px;border-bottom:1px solid #EACA92;font:600 13px/1.4 Manrope,Arial,sans-serif;color:#FFE1AE}
.aph-hub-inner:focus-visible{outline:2px solid #EACA92;outline-offset:4px}

@media(max-width:1100px){
 .aph-inner{grid-template-columns:1fr;gap:38px}
 .aph-media{order:-1}
 .aph-copy>p:not(.eyebrow),.aph-index{max-width:640px}
}
@media(max-width:760px){
 .aph-inner{padding-block:56px 64px;gap:30px}
 .aph h2{font-size:clamp(38px,10.5vw,48px)}
 .aph-copy>p:not(.eyebrow){font-size:15px}
 .aph-tag{left:12px;bottom:12px;padding:7px 12px 7px 8px;font-size:11px}
 .aph-index a{grid-template-columns:30px minmax(0,1fr);row-gap:3px}
 .aph-index small{grid-column:2;text-align:left}
 .aph-hub{margin-bottom:52px}
 .aph-hub-inner{grid-template-columns:1fr;padding:14px 14px 24px}
 .aph-hub-copy{padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){.aph-media img,.aph-hub-media img{transition:none}.aph-media:hover img,.aph-hub-inner:hover .aph-hub-media img{transform:none}}