/*
Theme Name: Heatherton Estates
Template: rentnow
Version: 1.0.0
Description: Heatherton Estates — RentNow child theme. Branding, colors and fonts are driven by the RentNow ACF Site Settings; this sheet only adds property-specific polish on top of the parent layout.
Author: Resident360
*/

/* Brand palette reference
   Charcoal #1F2326 · Orange #F06A2A · Ivory #F8F7F4
   Taupe #A69B8B · Taupe Light #D7D1C9
   (colors themselves are set through Appearance → Site Settings on import) */

/* Header logo — keep the stacked mark compact in the slim header */
.site_logo img {
    max-height: 88px;
    width: auto;
}

/* #44 header nav centered on the logo's vertical axis: the parent
   top-anchors the nav (fixed 30px li padding in a stretched column),
   which sits ~11px high next to the 88px stacked mark. Center the nav
   content in the column and let item padding track the text. */
@media (min-width: 992px) {
    .site_nav {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0;
    }
    .site_nav ul {
        display: flex;
        align-items: center;
    }
    .site_nav ul > li {
        padding: 12px 0;
    }
}

/* Header nav — active/hover state is orange text, not the parent's
   top-border indicator strip. */
.site_nav ul li.active {
    border-top: none;
}
.site_nav ul li.active a {
    color: #F06A2A;
}

/* Tablet widths get the stacked mobile nav (hamburger + buttons) instead
   of the parent's squeezed single-row desktop nav. The parent only does
   this below 768px; extend it to 1024px and keep the CTA a filled button. */
@media all and (max-width: 1024px) {
    .site_main_header .row > .col-md-2,
    .site_main_header .row > .col-md-10 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .site_nav {
        display: none;
        padding: 20px 0;
        border-top: none;
        margin-top: 0;
    }
    .site_nav.active {
        display: block;
    }
    .site_nav ul li {
        display: block;
        margin: 0;
        padding: 0;
    }
    .site_nav ul li a,
    .site_nav ul li {
        text-align: center;
        display: block;
        padding: 10px 0;
    }
    .site_nav ul li.active {
        border: 0;
    }
    .site_nav ul li.active a,
    .site_nav ul li a:hover {
        color: #F06A2A !important;
    }
    .site_nav ul li.menu_btn_item a {
        background: #F06A2A;
        color: #fff !important;
        padding: 10px 30px;
        margin: 10px auto;
        max-width: 260px;
        border-radius: 3px;
    }
    .site_nav ul li.menu_btn_item a:hover {
        background: #1F2326;
        color: #fff !important;
    }
    .site_logo {
        position: relative;
        padding: 10px 0;
    }
    .site_logo img {
        max-width: none;
        max-height: 72px;
    }
    .mobile_navigation {
        position: absolute;
        display: block;
        right: 0;
        top: 24px;
        width: 40px;
        cursor: pointer;
    }
    .mobile_navigation span {
        display: block;
        width: 100%;
        height: 3px;
        margin: 8px 0;
        background: #1F2326;
        border-radius: 2px;
    }
}

/* Orange focus/selection accents */
::selection {
    background: #F06A2A;
    color: #fff;
}

/* Hero — slightly stronger overlay for the charcoal/orange palette */
.header_hero {
    background-size: cover;
    background-position: center;
}

/* Availability banner sits on the accent (charcoal) — nudge text to ivory */
.availability-banner h3 {
    color: #F8F7F4;
}

/* Floorplan cards */
.floorplan_item .floorplan_title h2 {
    font-family: 'Montserrat', sans-serif;
}

/* Reviews panel backdrop */
.home_location_section_box {
    background-size: cover;
    background-position: center;
}

/* Footer */
.footer {
    background: #1F2326;
    color: #F8F7F4;
}
.footer a {
    color: #F8F7F4;
}

/* ---------------------------------------------------------------
 * Social buttons (04 GLOBAL WEBSITE SETTINGS) — plain glyphs,
 * no circle backgrounds.
 * ------------------------------------------------------------- */
.he-socials {
    display: flex;
    gap: 18px;
    align-items: center;
}
.he-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #F06A2A;
    font-size: 22px;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}
.he-socials a:hover,
.he-socials a:focus {
    color: #1F2326;
    transform: translateY(-2px);
    text-decoration: none;
}
.he-footer-socials {
    justify-content: flex-end;
}
.footer .he-socials a {
    color: #F8F7F4;
    font-size: 20px;
}
.footer .he-socials a:hover,
.footer .he-socials a:focus {
    color: #F06A2A;
}
/* Contact info: Follow Us on its own centered row on mobile; desktop
   (below) puts all four items — Location / Contact / Hours / Follow Us —
   in one row of equal columns. */
.he-contact-socials {
    flex-basis: 100%;
    width: 100%;
    margin: 26px 0 0;
    text-align: center;
}
.he-contact-socials .he-socials {
    justify-content: center;
    margin-top: 10px;
}

@media all and (min-width: 992px) {
    .contact_information ul {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .contact_information ul li {
        flex: 1 1 0;
        margin: 0 12px;
        text-align: center;
    }
    .he-contact-socials {
        flex-basis: auto;
        width: auto;
        margin: 0 12px;
    }
}

/* Footer quick links row */
.footer_quick_links {
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.he-footer-menu,
.he-footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}
.he-footer-menu a {
    color: #F8F7F4;
    font-size: 14px;
}
.he-footer-menu a:hover {
    color: #F06A2A;
    text-decoration: none;
}

/* ---------------------------------------------------------------
 * AppFolio listing embed (floor plans section + /floor-plans/)
 * ------------------------------------------------------------- */
.appfolio-listing {
    width: 100%;
    min-height: 520px;
    margin: 0 auto;
}
.floorplans_view_all .he-view-all {
    display: inline-block;
    background: #F06A2A;
    color: #fff;
    padding: 10px 26px;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.floorplans_view_all .he-view-all:hover,
.he-plan-cta:hover {
    background: #1F2326;
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------------
 * Interior pages (Amenities / Floor Plans / Gallery)
 * Page styling keys off the dynamic he-page-{slug}/he-legal body
 * classes — never hardcoded page IDs (the parent's .page-id-510/516
 * rules only worked on the original template DB).
 * ------------------------------------------------------------- */
.single_page_content {
    padding: 60px 0 80px;
}
.he-legal .page_header {
    margin-top: 70px;
}
.he-legal .single_page_content {
    padding: 50px 0;
}
.single_page_content h3 {
    color: #1F2326;
    font-weight: 600;
    margin-bottom: 10px;
}
.he-amenities h4 {
    color: #A69B8B;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.he-amenities ul,
.he-pet-policy p {
    color: #1F2326;
}
.he-amenities ul {
    list-style: none;
    padding: 0;
}
.he-amenities ul li {
    padding: 7px 0 7px 26px;
    position: relative;
    border-bottom: 1px solid #E7E3DC;
}
.he-amenities ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #F06A2A;
    position: absolute;
    left: 0;
    font-size: 13px;
}
.he-pet-policy {
    margin-top: 40px;
    background: #F8F7F4;
    border-left: 4px solid #F06A2A;
    padding: 22px 26px;
}

/* ---------------------------------------------------------------
 * Floor Plans page — tabbed layout modeled on 1000 King (360broadway),
 * re-skinned to the Heatherton palette.
 * ------------------------------------------------------------- */
.floorplan_filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.floorplan_filter ul li {
    cursor: pointer;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    color: #1F2326;
}
.floorplan_filter ul li span {
    position: relative;
}
.floorplan_filter ul li span::after {
    content: "";
    height: 1px;
    background: #F06A2A;
    width: 0;
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: all .3s;
}
.floorplan_filter ul li:hover span::after,
.floorplan_filter ul li.activeplan span::after {
    width: 100%;
}
.floorplan_filter ul li.activeplan {
    color: #F06A2A;
}

.sightmap-embed {
    min-height: 520px;
}

.floorplan_item {
    border: 1px solid #1F2326;
    margin-bottom: 30px;
    cursor: pointer;
    background: #fff;
}
.floorplan_item_content {
    padding: 20px 15px;
    text-align: center;
}
.floorplan_item_image {
    height: 240px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 15px;
    transition: all .3s;
}
.floorplan_item:hover .floorplan_item_image {
    transform: scale(1.08);
}
.floorplan_item_text h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #1F2326;
    font-weight: 600;
}
.floorplan_item_text p {
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
    color: #A69B8B;
}
/* Details button — the standard site CTA (header/modal recipe): brand
   orange, white Montserrat uppercase, charcoal on hover. */
.floorplan_item_details {
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    background: #F06A2A;
    color: #fff;
    border: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 30px;
    transition: background .2s ease, color .2s ease;
}
.floorplan_item_details:hover,
.floorplan_item_details:focus {
    background: #1F2326;
    color: #fff;
}
.floorplan_filter ul li button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    width: 100%;
}

/* Plan detail modal.
   The parent's style.css globally sets .modal-content to a demo upload
   (now deleted -> transparent) and .modal-body to the accent overlay;
   scope a clean white surface for this modal. */
.floorplan_modal .modal-dialog {
    max-width: 900px;
}
.floorplan_modal .modal-content {
    background: #fff;
    color: #1F2326;
    border-radius: 0;
    position: relative;
}
.floorplan_modal .modal-body {
    background: transparent;
    padding: 34px 30px 30px;
}
.floorplan_modal .close {
    color: #1F2326;
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 2;
    font-size: 30px;
    opacity: .75;
    text-shadow: none;
}
.floorplan_modal_content_col_inner {
    max-width: 240px;
}
.floorplan_modal_content_col_inner h2 {
    font-size: 32px;
    letter-spacing: 1px;
    color: #F06A2A;
    margin-bottom: 10px;
    font-weight: 600;
}
.floorplan_modal_content_col_inner ul {
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}
.floorplan_modal_content_col_inner ul.floorplan_main_info li {
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 1px solid #D7D1C9;
    margin-bottom: 5px;
    padding-bottom: 5px;
    letter-spacing: 1px;
    color: #1F2326;
}
.floorplan_modal_content_col_inner ul li:last-child {
    border: 0;
    padding: 0;
    margin: 0;
}
.floorplan_modal_content_btns {
    margin-top: 30px;
}
/* Modal CTA (opens from the card Details button) — same styling as the
   header Check Availability button: brand orange at rest, charcoal on
   hover, Montserrat uppercase. */
.floorplan_modal_content_btns a {
    font-family: "Montserrat", sans-serif;
    background: #F06A2A;
    color: #fff;
    border: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 30px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    display: block;
    transition: background .2s ease, color .2s ease;
}
.floorplan_modal_content_btns a:hover,
.floorplan_modal_content_btns a:focus {
    background: #1F2326;
    color: #fff;
    text-decoration: none;
}
.floorplan-images {
    width: 100%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.floorplan-images img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 767px) {
    .floorplans_tabs .floorplan_filter {
        margin-bottom: 24px;
    }
    .floorplan_filter ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
    }
    .floorplan-images { height: 300px; }
    .floorplan_modal_content_col_inner { max-width: none; margin-bottom: 20px; }
}

/* Gallery grid */
.he-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.he-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    transition: transform .2s ease, box-shadow .2s ease;
}
.he-gallery-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 8px 22px rgba(31, 35, 38, .18);
}
@media (max-width: 991px) {
    .he-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .he-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .he-gallery-item img { height: 130px; }
    .he-footer-socials { justify-content: center; }
    .footer_quick_links .col-md-8 { text-align: center; }
    .he-footer-menu { justify-content: center; }
}

/* ---------------------------------------------------------------
 * Buttons — primary (filled) buttons carry no border; hover keeps
 * the accent color background via the theme's --cta-hover-color /
 * --button-hover-color vars (charcoal). Nothing extra needed here.
 * ------------------------------------------------------------- */

/* Availability banner submit (first form on the homepage). The parent's
   style.css styles this exact selector with charcoal bg + charcoal text
   on hover (invisible) — match its specificity so this wins: orange at
   rest, 50% orange with white text on hover. */
.availability-banner .contact_field input.wpcf7-submit {
    background: #C4501A;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    padding: 12px 32px;
    transition: background .2s ease, color .2s ease;
}
.availability-banner .contact_field input.wpcf7-submit:hover,
.availability-banner .contact_field input.wpcf7-submit:focus {
    background: rgba(240, 106, 42, .5);
    border-color: rgba(240, 106, 42, .5);
    color: #fff;
}

/* Contact form panel: drop the parent's 2px white frame. */
.contact_section_form_inner {
    border: none;
}

/* ---------------------------------------------------------------
 * AOS: fade-left/fade-right blocks sit 100px off-side before they
 * animate in, which pushes a horizontal scrollbar onto the page.
 * Clip at the section wrappers (not .main — that would break the
 * sticky header). Never add .contact_section_inner here: the contact
 * panel uses margin-top:-100px and would get its headline clipped.
 * ------------------------------------------------------------- */
.about_us .container,
.amenities_two_col_box,
.get_in_touch_inner {
    overflow: hidden;
}

/* Print/print-safe tweaks are inherited from the parent theme */


/* ---------------------------------------------------------------
 * QA REVISION PASS (pre-launch report 2026-09-23) — issue numbers
 * reference the QA report.
 * ------------------------------------------------------------- */

/* #21 skip link */
.he-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #1F2326;
    color: #fff;
    padding: 10px 18px;
    z-index: 100000;
}
.he-skip-link:focus {
    left: 0;
}

/* #22 header logo: crop the illegible tagline strip from the lockup */
.site_logo img {
    clip-path: inset(0 0 13% 0);
}

/* #8 hamburger: button reset + close state */
button.mobile_navigation {
    background: none;
    border: 0;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
}
button.mobile_navigation span {
    transition: transform .25s ease, opacity .25s ease;
}
button.mobile_navigation[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
button.mobile_navigation[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
button.mobile_navigation[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* #31/#9 eyebrows (replacing H4-in-ACF-content) */
.eyebrow,
.header_content p.eyebrow,
.availability-banner p.eyebrow {
    font-family: 'Montserrat', sans-serif;
    color: #F06A2A;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0 0 10px;
}
.availability-banner p.eyebrow,
.header_content p.eyebrow {
    color: #F8F7F4;
}

/* #40 hero heading: keep approved casing (parent forces Title Case) */
.header_content h1 {
    text-transform: none;
}

/* #41 hero content aligned to the header grid */
.header_hero .container-fluid {
    max-width: 1140px;
    margin: 0 auto;
}

/* #43 sitewide container widened 1140 → 1200 (header nav + every .container
   section, plus the hero grid so they stay aligned). Applies from 1280px up
   so the layout always keeps side margins; below that the stock 1140 holds. */
@media (min-width: 1280px) {
    .container,
    .header_hero .container-fluid {
        max-width: 1200px;
    }
}

/* #42 hero heading on a single line: the parent pins .header_content to a
   620px box and 40px text needs ~1089px, so unpin the box and auto-fit the
   h1 (caps at 38px where the full line fits with margin). Below 992px the
   parent's wrapping mobile styles apply. */
@media all and (min-width: 992px) {
    .header_content {
        width: auto;
        max-width: 100%;
    }
    .header_content h1 {
        white-space: nowrap;
        font-size: min(3.2vw, 38px);
    }
}

/* #28 pet policy on the charcoal community band — readable ivory */
.amenities_two_col_box_blue .amenities_two_col_content p {
    color: #F8F7F4;
}

/* Pet & Parking band: taupe-light panel (brand D7D1C9) instead of the
   charcoal blue-band treatment — charcoal text, keeps the flipped layout. */
#pet-parking-policies .amenities_two_col_box_content {
    background: #D7D1C9;
}
#pet-parking-policies .amenities_two_col_content,
#pet-parking-policies .amenities_two_col_content h2,
#pet-parking-policies .amenities_two_col_content h4,
#pet-parking-policies .amenities_two_col_content ul,
#pet-parking-policies .amenities_two_col_content p {
    color: #1F2326;
}

/* Community amenities list in two columns (field items stay editable —
   this is layout only). Items flow down the first column, then the
   second; single column below 992px. The li margin-top is truncated at
   the top of the second column by CSS fragmentation, so zeroing the
   first item's margin keeps both columns starting level. */
@media all and (min-width: 992px) {
    .amenities_two_col_box_blue .amenities_two_col_content ul {
        columns: 2;
        column-gap: 36px;
    }
    .amenities_two_col_box_blue .amenities_two_col_content ul li {
        break-inside: avoid;
    }
    .amenities_two_col_box_blue .amenities_two_col_content ul li:first-child {
        margin-top: 0;
    }
}

/* #29 apartment features band (taupe-light bg) — charcoal text */
.amenities_two_col_box:not(.amenities_two_col_box_blue) .amenities_two_col_content,
.amenities_two_col_box:not(.amenities_two_col_box_blue) .amenities_two_col_content h2,
.amenities_two_col_box:not(.amenities_two_col_box_blue) .amenities_two_col_content h4,
.amenities_two_col_box:not(.amenities_two_col_box_blue) .amenities_two_col_content ul {
    color: #1F2326;
}

/* features/amenities lists — space before the footnote <p> ("*In Select Units",
   pet policy): parent main.css zeroes ul margin and only gives li margin-top */
.amenities_two_col_content ul {
    margin-bottom: 20px;
}

/* Contact info headings — medium (500) */
.contact_information ul li h2 {
    font-weight: 500;
}

/* Contact form fields — uniform surface. Parent leaves them
   background: transparent, so the photo behind showed through unevenly
   (the select read darker than its row-mates), and a fully transparent
   select falls back to its native white surface in WebKit. Same
   charcoal tone as the form overlay, still slightly translucent.
   Submit excluded to keep its button-color background. */
.contact_section_form .contact_field input:not([type="submit"]),
.contact_section_form .contact_field textarea,
.contact_section_form .contact_field select {
    background: rgba(31, 35, 38, 0.75);
}

/* Light dropdown popup — parent colors select options #000, which is
   unreadable on the dark popup dark-mode visitors get otherwise. */
.contact_section_form .contact_field select {
    color-scheme: light;
}

/* Placeholder text — match the select's "I'm interested in..." prompt:
   the UA default placeholder color (60% white) read gray next to it. */
.contact_section_form .contact_field input::placeholder,
.contact_section_form .contact_field textarea::placeholder {
    color: #fff;
    opacity: 1;
}

/* Field FA icons — white at full opacity to match the field text.
   z-index is required: since the fields got an explicit background
   (above), Chromium paints the input surface OVER the absolutely
   positioned icons unless they're raised out of z-index:auto. */
.contact_section_form .contact_field i {
    color: #fff;
    opacity: 1;
    z-index: 1;
}

/* Contact form panel: fixed brand-charcoal overlay (#1F2326 at 70%) over
   the background photo — replaces var(--accent-color-rgba), which drifts
   per-site (teal in the reference dump). */
.contact_section_form_inner {
    background: rgba(31,35,38,0.7);
}

/* #30 availability banner form: stack below 992 instead of one cramped row */
@media all and (max-width: 991px) {
    .availability-banner .row {
        flex-wrap: wrap;
    }
    .availability-banner .contact_field[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 12px;
    }
}
@media all and (max-width: 575px) {
    .availability-banner .contact_field[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* #38 amenities two-column bands stack below 992 */
@media all and (max-width: 991px) {
    .amenities_two_col_box .row > [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .amenities_two_col_box_image {
        min-height: 260px;
    }
}

/* #39 phone number never wraps */
.get_in_touch_btn a strong,
.he-inner-cta-phone,
.footer .he-footer-contact a {
    white-space: nowrap;
}

/* #42 lighter validation red on dark surfaces */
.availability-banner .wpcf7-not-valid-tip,
.contact_section_form_inner .wpcf7-not-valid-tip,
.get_in_touch .wpcf7-not-valid-tip {
    color: #FFB4A9;
}

/* #37 tour band secondary CTA — standard button recipe (brand orange,
   Montserrat uppercase, charcoal hover), stretched to the phone link's
   width by the stacked column below. */
.get_in_touch_btn {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}
.get_in_touch_btn .he-tour-cta {
    display: block;
    margin-top: 12px;
    background: #F06A2A;
    color: #fff;
    padding: 10px 30px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease;
}
.get_in_touch_btn .he-tour-cta:hover {
    background: #1F2326;
    color: #fff;
    text-decoration: none;
}

/* #46 pricing disclaimer */
.he-pricing-disclaimer {
    text-align: center;
    color: #A69B8B;
    font-size: 13px;
    margin: 18px 0 0;
}

/* #7 inner-page CTA band + global footer NAP + EHO (#3) */
.he-inner-cta {
    background: #1F2326;
    color: #F8F7F4;
    text-align: center;
    padding: 54px 0;
}
.he-inner-cta h2 {
    color: #F8F7F4;
    margin-bottom: 8px;
}
.he-inner-cta p {
    color: #D7D1C9;
    margin-bottom: 22px;
}
.he-inner-cta-primary {
    display: inline-block;
    background: #C4501A;
    color: #fff;
    padding: 12px 30px;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    margin: 0 10px 10px 0;
}
.he-inner-cta-primary:hover {
    background: #F06A2A;
    color: #fff;
    text-decoration: none;
}
.he-inner-cta-phone {
    display: inline-block;
    border: 1px solid #F8F7F4;
    color: #F8F7F4;
    padding: 12px 26px;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    margin: 0 0 10px 10px;
}
.he-inner-cta-phone:hover {
    background: #F8F7F4;
    color: #1F2326;
    text-decoration: none;
}
.he-footer-nap {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 14px;
    color: #F8F7F4;
}
.he-footer-nap p {
    margin: 0 0 4px;
}
.he-footer-nap .he-footer-address {
    color: #F8F7F4;
    letter-spacing: .02em;
}
.he-footer-contact a {
    color: #F06A2A;
    font-weight: 600;
    text-decoration: none;
    margin-right: 14px;
}
.he-footer-hours {
    color: #D7D1C9;
    font-size: 14px;
}
.he-eho {
    clear: both;
    padding-top: 14px;
    margin: 10px 0 0;
    color: rgba(248, 247, 244, .75);
    font-size: 12px;
    line-height: 1.6;
}

/* #9 page-title H1 in the page header (parent styled H2 only) */
.page_header_inner h1 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
@media (max-width: 767px) {
    .page_header_inner h1 { font-size: 28px; }
}

/* 404 page */
.he-404-header {
    background: #1F2326 !important;
    margin-top: 70px;
}
.he-404 {
    text-align: center;
    padding-bottom: 90px;
}
.he-404-cta,
.he-404-home {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    margin: 8px;
}
.he-404-cta { background: #C4501A; color: #fff; }
.he-404-cta:hover { background: #1F2326; color: #fff; text-decoration: none; }
.he-404-home { border: 1px solid #1F2326; color: #1F2326; }
.he-404-home:hover { background: #1F2326; color: #fff; text-decoration: none; }

/* #52 amenities page: intro, photo pairings, photo grid */
.he-amen-intro { font-size: 18px; max-width: 760px; margin: 0 auto 44px; text-align: center; }
.single_page_content .he-amenities { margin-bottom: 46px; align-items: center; }
.he-amen-photo img { width: 100%; border-radius: 4px; box-shadow: 0 6px 18px rgba(31,35,38,.12); }
.he-amen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 10px 0 40px; }
.he-amen-grid img { width: 100%; height: 190px; object-fit: cover; border-radius: 4px; }
.he-directions { color: #fff; font-weight: 600; text-decoration: underline; }
.he-directions:hover { color: #F06A2A; }
@media (max-width: 767px) { .he-amen-grid { grid-template-columns: repeat(2, 1fr); } }

.main {
	background: #F8F7F4;
}

.contact_section_form_inner {
	    margin-top: 100px;

}

#contact {
    background-color: #F8F7F4;
}

/* Pet & Parking section: Fees & Deposits + Rental Requirements (client review #5/#6) */
#pet-parking-policies .he-policy-heading{font-size:22px;font-weight:500;margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid #f06a2a}
#pet-parking-policies .he-fee-list,#pet-parking-policies .he-req-list{list-style:none;margin:0;padding:0}
#pet-parking-policies .he-fee-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(31,35,38,.15)}
#pet-parking-policies .he-fee-label{font-weight:500}
#pet-parking-policies .he-fee-value{text-align:right}
#pet-parking-policies .he-req-list li{position:relative;padding:7px 0 7px 22px;line-height:1.5}
#pet-parking-policies .he-req-list li:before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;background:#f06a2a}
#pet-parking-policies .he-fee-list li:last-child{border-bottom:0}
#pet-parking-policies .he-fee-list{column-count:1 !important;columns:auto !important}
#pet-parking-policies .he-fee-list li,#pet-parking-policies .he-req-list li{list-style:none !important;break-inside:avoid}
#pet-parking-policies .he-req-list{column-gap:32px}