/* ==========================================================================
   14ELMS — narrow screens.
   Three steps, matching the reference: tablet (<=991), large phone (<=767)
   and phone (<=479). Values stay in em so everything keeps scaling with the
   viewport, exactly as on desktop.
   ========================================================================== */

/* ==========================================================================
   <= 991px
   ========================================================================== */
@media screen and (max-width: 991px) {

  /* the swipeable plans strip must not drag the page sideways with it */
  body { overflow-x: clip; }

  /* header ---------------------------------------------------------------- */
  .header {
    width: 100vw;
    overflow: hidden;
  }

  .wrapper_header { padding: 1.35em 1.35rem; }

  /* the bar keeps its three columns here, so the pill stays centred */
  .grid_header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    row-gap: 1.2em;
  }

  .logo { font-size: 2.25em; }

  /* over the hero photo the pill is frosted glass, not a solid slab */
  body.is-hero .menu { background-color: rgba(0, 0, 0, 0.11); }
  body.is-light .menu,
  body.is-dark .menu { background-color: var(--black); }

  body.is-hero .logo,
  body.is-dark .logo { color: var(--white); }
  body.is-light .logo { color: var(--black); }

  .logo_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* the pill leaves the header and becomes a bar of its own */
  .menu {
    justify-self: auto;
    width: 20rem;
    padding: 0.55em 0.6em 0.55em 1.2em;
    border-radius: 4px;
  }

  .menu_fs {
    position: static;
    inset: 7.5rem 0% auto;
    z-index: 99;
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    border-radius: 0.4rem;
    background-color: var(--primary);
    overflow: hidden;
  }

  .flex_menu {
    justify-content: space-between;
    column-gap: 2.6rem;
  }

  .menu_link { font-size: 1.6em; }

  .header_button {
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 4px;
    font-size: 1.5em;
  }

  .apply_button { height: 100%; }

  /* buttons --------------------------------------------------------------- */
  .button {
    align-items: stretch;
    column-gap: 0.4em;
    height: 4.6em;
    min-height: auto;
    font-size: 1vw;
  }

  .button.header_cta {
    height: 4.5em;
    min-height: auto;
  }

  .icon_box.is-left { display: none; }

  .icon_box.is-right {
    position: static;
    width: auto;
    height: auto;
    min-height: auto;
    border-radius: 4px;
  }

  .text_box {
    min-height: auto;
    padding: 1em 3em;
    border-radius: 4px;
    font-size: 1.45em;
    transform: none;
  }

  .text_box.black { border-radius: 4px; }
  .text_box.header_btn { font-size: 1.1em; }

  /* hero ------------------------------------------------------------------ */
  .hero { overflow: hidden; }

  .wrapper_hero {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.5rem 1.35rem;
  }

  .heading_box {
    margin-top: auto;
    margin-bottom: auto;
  }

  .h1 {
    font-size: 6.5em;
    line-height: 0.9;
  }

  .p_box { width: 59ch; }
  .p_gen { font-size: 1.4em; }

  .thumbnails_images {
    margin-left: auto;
    margin-right: auto;
  }

  .image_thumbnail,
  .image_thumbnail.is-active {
    width: 7.5rem;
    height: 4.6rem;
  }

  /* scattered gallery ------------------------------------------------------ */
  /* measured: photo sizes hold still across widths, so they stay in rem while
     their offsets stay in per-cent of the stage */
  .dynamic_section { width: 100vw; }

  .middle {
    margin-top: 16em;
    padding-bottom: 1em;
  }

  .photo--lt,
  .photo--rb { display: none; }

  .photo--lm {
    width: 10rem;
    height: 7rem;
    margin-right: 76%;
    margin-bottom: 44%;
    border-radius: 4px;
  }

  .photo--lb {
    width: 6rem;
    height: 6rem;
    margin-top: 60%;
    border-radius: 4px;
  }

  /* plans: the row becomes a strip you swipe, and nothing is pinned ------- */
  .apartments {
    height: auto;
    overflow-x: hidden;
  }

  .wrapper_apartments {
    height: auto;
    padding: 96px 0 48px;
  }

  .heading_apartments {
    position: static;
    inset: auto;
    justify-content: center;
    align-items: center;
    width: 400px;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 0 16px;
    text-align: center;
  }

  .heading_apartments h2 { font-size: 5.6em; }

  /* tablet band: two cards side by side, 341x393 with a 9.6px gutter */
  .apart_cards_viewport {
    margin: 32px 0 0;
    padding: 21.6px;
    overflow: visible;
  }

  .apart_card .apart_title_line { margin-top: 0; }
  .apart_card .desc_home { margin-top: 10.7px; }
  .apart_card .explore_button { margin-top: 10.7px; }

  .apart_cards_track {
    width: auto;
    gap: 9.6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .apart_cards_track::-webkit-scrollbar { display: none; }

  /* the strip stops short of the container so the next card peeks in, the
     way the reference slider does */
  .apart_card {
    scroll-snap-align: center;
    flex: 0 0 calc((100% - 53.6px) / 2);
    width: calc((100% - 53.6px) / 2);
    height: auto;
    padding: 12px 12px 8px;
    border-radius: 6px;
  }

  .apart_image {
    width: 100%;
    height: auto;
    /* a taller frame, so the photo carries the card here too rather than
       sitting as a strip above a block of text */
    aspect-ratio: 317 / 262;
    border-radius: 6px;
  }

  .content_apart {
    width: 100%;
    margin-top: 11.712px;
  }

  /* tablet band: 19.2px headline, 10.368/13.89 body, 10.752px tags */
  .apart_title,
  .price_txt { font-size: 2.5em; }

  .p_gen.black.specific { font-size: 1.35em; line-height: 1.34; }
  .tag_info { font-size: 1.4em; padding: 4px 5.92px; }
  .tag_available { font-size: 3em; }

  .explore_button .text_box {
    padding: 11.712px 46.848px;
    font-size: 3em;
  }

  /* three plan cards to a row leaves 164px per cell, where the full-size
     label alone was 168px wide and pushed the page sideways */
  .apartments_grid .explore_button .text_box {
    padding: 9.6px 14px;
    font-size: 1.8em;
  }

  .heading_apartments .h2 {
    font-size: 5.6em;
    line-height: 1.1;
  }
}

/* ==========================================================================
   <= 767px
   ========================================================================== */
@media screen and (max-width: 767px) {

  /* phone: one plan card at a time, 333.3x434.4 in a 390.4x536 band */
  .wrapper_apartments { padding: 52px 0; }

  .heading_apartments {
    width: auto;
    margin: 0 0 16px;
  }

  .heading_apartments .h2 { font-size: 8em; }

  .apart_cards_viewport {
    margin: 20px 0 0;
    padding: 20px 16px 81.6px;
  }

  .apart_cards_track { gap: 12px; }

  .apart_card {
    flex: 0 0 93%;
    width: 93%;
    padding: 12px 12px 20px;
  }

  .apart_image { aspect-ratio: 309.3 / 288; }

  .apart_title,
  .price_txt { font-size: 5.5em; }

  .p_gen.black.specific { font-size: 3.15em; line-height: 1.4; }
  .tag_info { font-size: 3em; }

  /* over the hero photo the bar stays clear and the logo goes white; it only
     turns solid once a light section is under it */
  .header {
    z-index: 199;
    background-color: transparent;
    transition: background-color 0.3s ease;
  }

  body:not(.is-hero) .header { background-color: var(--white); }
  .logo,
  body.is-hero .logo,
  body:not(.is-hero) .logo { color: var(--black); }

  .wrapper_header {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .grid_header {
    display: flex;
    width: 100%;
    position: static;
  }

  .logo { font-size: 3.5em; }

  .menu {
    position: fixed;
    inset: auto 0% 1.25rem;
    width: 22rem;
    height: auto;
    padding: 1em 1em 1em 1.4em;
  }

  .menu_fs {
    position: fixed;
    inset: auto 0% 12em;
    z-index: 999;
    width: 22rem;
    padding: 2em 3em;
  }

  .flex_menu { column-gap: 0rem; }

  .menu_link { font-size: 2.1em; }
  .header_button { font-size: 2.15em; }

  .apply_button { margin-left: auto; }

  .button {
    column-gap: 0.5em;
    height: 6em;
    font-size: 1vw;
  }

  .button.header_cta { height: 5.5em; }

  .icon_box.is-right { width: auto; }

  .text_box {
    min-height: auto;
    font-size: 1.85em;
  }

  .text_box.header_btn { font-size: 1.5em; }

  .wrapper_hero { padding-bottom: 5.5rem; }

  .p_box { width: 79ch; }

  .image_thumbnail,
  .image_thumbnail.is-active {
    width: 6.5rem;
    height: 4rem;
  }

  .photo--lm {
    margin-right: 68%;
    margin-bottom: 51%;
  }
}

/* ==========================================================================
   <= 479px
   ========================================================================== */
@media screen and (max-width: 479px) {

  /* name and price stop sharing one line: side by side the price ran off the
     right edge of the card on a phone */
  .apart_title_line { flex-wrap: wrap; row-gap: 4px; }

  /* pets block: type steps up and the illustration stacks over the text */
  .pets .h2 { font-size: 13em; line-height: 1.02; }
  .pets .p_gen { font-size: 3.5em; line-height: 1.35; }

  .wrapper_pets { padding: 40px 16px 48px; }

  .pets_ill {
    flex-flow: column;
    height: auto;
    margin-top: 64px;
    row-gap: 16px;
  }

  .box_pets {
    width: 100%;
    height: 234px;
    margin: 0;
  }

  .p_pets { width: 100%; }
  .p_pets .p_gen { font-size: 3.5em; }

  .pet_boxes {
    grid-template-columns: 1fr;
    row-gap: 28px;
    column-gap: 0;
    margin-top: 82px;
  }

  .header {
    z-index: 199;
    width: 100vw;
    height: auto;
    overflow: hidden;
  }

  .wrapper_header {
    display: block;
    position: relative;
    justify-content: space-between;
    max-width: 100%;
    padding: 0.8rem 1rem;
  }

  .grid_header {
    display: flex;
    position: relative;
    justify-content: space-between;
    justify-items: stretch;
    height: 100%;
    row-gap: 0em;
  }

  .logo { font-size: 5.5em; }

  .logo_box {
    width: auto;
    height: auto;
    margin-right: 0;
  }

  .menu {
    width: 92.3%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3rem 0.3rem 0.3rem 1.1rem;
    bottom: 0.8rem;
    left: 0;
    right: 0;
    border-radius: 4px;
    overflow: hidden;
  }

  .menu_fs {
    width: 92.3%;
    padding: 4em;
    bottom: 4.6rem;
    background-color: var(--primary);
  }

  .flex_menu { justify-content: space-between; }

  .menu_link { font-size: 3.5em; }

  /* measured: 26.71x24 box, 1.6px bars, 2.24px apart */
  .hamburger {
    width: 26.71px;
    height: 24px;
    row-gap: 2.24px;
  }

  .hamburger .line_one,
  .hamburger .line_two { height: 1.6px; }

  .header_button {
    padding: 1rem 1.25rem;
    font-size: 3.5em;
  }

  .apply_button {
    display: block;
    margin-left: 0;
  }

  .button {
    display: inline-flex;
    justify-content: flex-start;
    align-items: stretch;
    column-gap: 4px;
    width: 100%;
    height: 10em;
    min-height: auto;
  }

  .button.header_cta {
    width: auto;
    height: 9.5em;
    min-height: auto;
    margin-left: auto;
  }

  .icon_box.is-left { display: none; }

  .icon_box.is-right {
    aspect-ratio: 1;
    width: auto;
    min-width: auto;
    max-width: none;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
  }

  .text_box {
    width: auto;
    min-width: 69%;
    max-width: 100%;
    min-height: auto;
    padding-left: 2em;
    padding-right: 2em;
    font-size: 3.4em;
  }

  .text_box.header_btn {
    min-width: auto;
    min-height: auto;
    padding-left: 2em;
    padding-right: 2em;
    font-size: 2.9em;
  }

  .wrapper_hero {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1rem 1rem 8rem;
  }

  .heading_box {
    width: 100%;
    margin-top: auto;
    margin-bottom: 12rem;
  }

  .h1 {
    font-size: 11em;
    line-height: 0.9;
  }

  .p_box { width: 100%; }
  .p_gen { font-size: 3.5em; }

  .thumbnails_images {
    width: 100%;
    column-gap: 1.4em;
  }

  .image_thumbnail,
  .image_thumbnail.is-active {
    width: 33%;
    height: 4rem;
  }

  /* scattered gallery, phone: sizes measured fixed at 390 and 430 -------- */
  .dynamic_section { width: 100vw; }

  .middle { margin-top: 3.5rem; }

  .middle .h2 {
    font-size: 8em;
    line-height: 1.25;
  }

  .wrapper_dynamic { padding: 32px 0 0; }

  .photo--lm {
    width: 6.075rem;
    height: 4.5rem;
    margin-right: 56%;
    margin-bottom: 129%;
    border-radius: 2px;
  }

  .photo--lb {
    width: 4.05rem;
    height: 4.05rem;
    margin-top: 105%;
    margin-right: 60%;
    border-radius: 2px;
  }

  .photo--rt {
    width: 4.5rem;
    height: 5.4rem;
    margin-left: 68%;
    margin-bottom: 115%;
    border-radius: 2px;
  }

  .photo--rm {
    width: 4.5rem;
    height: 4.275rem;
    margin-left: 63%;
    margin-top: 145%;
    border-radius: 2px;
  }

  .photo--center { border-radius: 2px; }
}

/* ==========================================================================
   REMAINING SECTIONS — narrow screens
   Every value below was read off the rendered reference at 390px wide.
   ========================================================================== */
@media screen and (max-width: 991px) {

  .footer { overflow: hidden; }

  /* faq page keeps two columns down to 768, on a wider left rail */
  .wrapper_general.base_ab { padding: 18em 21.6px 7em; }

  /* plans page: 115.2 / 21.6 / 128 around a 46px headline */
  .wrapper_general.apartments_gen { padding: 15em 2.8125em 16.667em; }
  .h1.black.spec_amenities { font-size: 6em; }
  .tabs_ill { width: 36%; }
  .chip_btn { padding: 13.6px 16px; font-size: 1.2em; }
  .ill_lamp { margin-top: 33.333em; }
  .lamp_box { width: 16.667em; height: 16.667em; }
  .faq_list { width: 54.691%; margin-left: 8.951%; }
  .count { font-size: 1.2em; }

  /* accordion */
  .accordion-item { padding: 1.25em 0; }
  .item_title { font-size: 1.8em; }
  .item_paragraph { font-size: 1.2em; }

  /* alternating sides become one column */
  .sides_wrap { flex-flow: column; row-gap: 24px; }

  .left_side,
  .right_side { width: 100%; height: auto; }

  /* measured: the tall photo runs 358.4x468.5 at 390 wide */
  .right_side {
    height: 120em;
    overflow: hidden;
  }

  .right_side .image { height: 100%; }

  .small_box {
    width: 80%;
    margin: 20px 2.928px 0 0;
  }

  /* in the second row the card sits on the right and the photo follows it */
  .small_box.right_box {
    width: 80%;
    margin: 0 0 0 auto;
  }

  .sides_s .sides_wrap .left_side { order: 1; }
  .sides_s .sides_wrap .right_side { order: 2; }

  .image_small { width: 100%; height: auto; }
  .caption_info { width: 100%; margin: 11.2px 0 0; }
  .flex_txt { width: 90%; }

  /* walking times: on narrow screens the paragraph sits above the bars */
  .txt_sides { flex-flow: column; }
  .left_lines,
  .p_right,
  .md_p { width: 100%; margin-left: 0; padding-right: 0; }
  .p_right { order: 1; }
  .left_lines { order: 2; }

  /* steps: the two columns hold down to 768 - only the pinning stops */
  .sticky_how { position: static; }
  .bottom_how.only_desktop { display: none; }

  /* the narrow-screen call to action is a full-width row of its own; without
     wrapping it stayed on the same line and ran off the right edge at 768 */
  .flex_how { flex-wrap: wrap; }

  .how_it_works .wrapper_general.basic,
  .faqs .wrapper_general.basic { padding: 8em 2.8125em; }

  /* amenities: the strip runs to the edges, only the left inset stays */
  .amenities_section .wrapper_general.basic { padding: 8em 0; }

  .amenities_heading {
    width: 100%;
    row-gap: 16px;
  }

  .amenities_heading .h2 { font-size: 6em; }

  .container.only_amenities {
    padding: 4em 0 4em 2.5em;
    margin-top: 32px;
  }

  .right_cards {
    flex: 0 0 auto;
    width: 51.5625em;
    margin-left: 4.694em;
  }

  .wrapper_how { padding: 16px; }

  .content_how {
    margin-top: 7em;
    row-gap: 1em;
  }

  .title_how { font-size: 2.6em; }

  /* the same prompt reappears under the cards, full width */
  .bottom_how.only_mobile {
    display: flex;
    flex-flow: column;
    row-gap: 12.8px;
    width: 100%;
    margin-top: 39.04px;
  }

  .bottom_how.only_mobile .p_gen.black.caption_cta { font-size: 4.74em; }
  .bottom_how.only_mobile .button { width: 100%; height: 39px; column-gap: 4px; }
  .bottom_how.only_mobile .text_box { font-size: 3.4em; }

  /* quotes: faces sit in a row above the text */
  .cms_testimonials { flex-flow: column; align-items: flex-start; height: auto; }
  .authors { width: 100%; }
  .author_coll { flex-flow: row; justify-content: space-between; min-height: 0; padding-top: 0; }
  .author_item { width: auto; flex-flow: column; align-items: center; }
  .author_name { width: auto; opacity: 1; margin-left: 0; }
  .quotes { width: 100%; height: auto; }
  .testimonial_list { position: static; }

  /* the quotes stack in flow on narrow screens, so the block keeps a height */
  .testimonial_item {
    position: static;
    padding: 0;
  }

  .testimonial_item:not(.is-active) { display: none; }

  /* faq keeps its two columns at this width, on the reference's proportions */
  .faq_heading .h2 { font-size: 5.6em; }
  .sides_faq { margin-top: 8em; }

  .faq_general {
    width: 51.5625em;
    margin-left: 15.2604em;
  }

  .bottom_faq {
    margin-top: 12em;
    row-gap: 1em;
  }

  .item_paragraph { width: 100%; }

  /* footer */
  .flex_f_top { flex-flow: column; }
  .caption_left { width: 100%; }
  .menu_footer { width: 100%; margin-left: 0; }
  .socials_box { width: 50%; margin-left: auto; }
}

@media screen and (max-width: 767px) {

  /* below the tablet band both split sections stack into one column */
  .flex_how { flex-flow: column; }
  .left_title,
  .right_cards { width: 100%; margin-left: 0; }

  .sides_faq { flex-flow: column; }
  .short_left,
  .faq_general { width: 100%; margin-left: 0; }
  .faq_general { order: 1; }
  .short_left { order: 2; }
  .caption_faq { display: none; }
  .bottom_faq { width: 100%; margin-top: 0; }

  /* faq page stacks and the chip rail docks to the bottom of the screen */
  .wrapper_general.base_ab { padding: 16em 16px 7em; }
  .h1.black.gen_h { font-size: 6.5em; }
  .faq_sides { flex-flow: column; }
  .tabs_ill { display: flex; flex-flow: column; width: 100%; }
  .sticky_side {
    position: static;
    display: flex;
    flex-flow: column;
    margin: 0 0 32px;
  }
  .anchors {
    position: fixed;
    inset: auto 0 0;
    justify-content: center;
    align-items: center;
    padding: 16px 16px 16em;
    border-top: 0.8px solid rgba(41, 41, 41, 0.2);
    background-color: var(--white);
  }
  .list_anchors { row-gap: 6.4px; column-gap: 6.4px; }
  .chip_btn { font-size: 1.5em; }
  .last_line { font-size: 1.6em; }
  .ill_lamp { width: 100%; margin: 0; }
  .lamp_box { width: 144px; height: 144px; margin-left: auto; }
  .faq_list { width: 100%; margin-left: 0; }
  .faq_l { row-gap: 64px; }
  .title_faq { font-size: 4em; }
  .count { font-size: 1.75em; }
  .last_line { margin-top: 3.2em; }

  /* accordion */
  .accordion-item { padding: 12.8px 0; }
  .item_title { font-size: 2.3em; }
  .accordion_paragraph { margin: 4.8px 0; }
  .item_paragraph { font-size: 1.8em; line-height: 1.5; }
}

@media screen and (max-width: 479px) {

  /* sides */
  .wrapper_sides { padding: 52px 16px; }
  .left_side { align-items: flex-start; }
  .image_small { aspect-ratio: 286.7 / 281.1; }
  .title_txt { font-size: 4.1em; line-height: 1; }
  .caption_txt { font-size: 3.5em; line-height: 1.2; }
  .sides_f, .sides_s { height: auto; }
  .sides_s { margin-top: 24px; }
  .h2.smaller { font-size: 8em; line-height: 1.1; }
  .flex_txt { margin-left: 12.8px; row-gap: 3.2px; }

  /* neighbourhood panel */
  .fs { height: auto; padding: 6px; }
  .fs_box { aspect-ratio: 378.4 / 570; height: auto; border-radius: 6px; }
  .txt_wrap { padding: 16px 0 0 16px; }
  .h2.white { font-size: 9em; line-height: 1; }
  .svg_items { padding: 16px 16px 64px; }

  /* walking times */
  .wrapper_general { padding: 24px 16px 52px; }
  .h2.everything_you_need { font-size: 8em; line-height: 1.1; }
  .txt_sides { margin-top: 27.328px; }
  .left_lines { margin-top: 32px; }
  .lines_list { row-gap: 22.4px; }
  .lines_caption { width: 93.2%; margin-bottom: 16px; }
  .lines_dynamic { row-gap: 12.8px; }
  .bar_dynamic { height: 2px; }
  .title_line, .timing_txt { font-size: 4.1em; }
  .lines_caption .p_gen { font-size: 3.5em; line-height: 1.4; }
  .md_p { font-size: 4em; line-height: 1.2; }

  /* amenities */
  .amenities_section .wrapper_general.basic { padding: 52px 0; }
  .how_it_works .wrapper_general.basic,
  .testimonials .wrapper_general.basic,
  .faqs .wrapper_general.basic { padding: 52px 16px; }
  .amenities_heading {
    align-items: center;
    row-gap: 16px;
    padding: 0 16px;
    text-align: center;
  }
  .h2.middle_spec { font-size: 8em; line-height: 1.14; }
  .container.only_amenities {
    margin-top: 20px;
    padding: 15.616px 0 15.616px 16px;
  }

  /* the slider drops its arrows and dots on narrow screens, and the track
     stops short so the next card peeks in: measured 348.2 inside 374.4 */
  .container.only_amenities .splide__track { width: 93%; }

  .amenities_splide {
    width: 100%;
    aspect-ratio: 348.2 / 408;
  }

  .overlay_amenities { padding: 16px; }
  .title_amenities { font-size: 6em; }

  /* steps */
  .right_cards { margin-top: 28px; }
  .how_cms { row-gap: 6.4px; }
  .wrapper_how { padding: 16px 12px; }
  .content_how { width: 100%; margin-top: 50px; row-gap: 11.2px; }
  .title_how { font-size: 5.12em; line-height: 1; }
  .content_how .p_gen { font-size: 3.5em; line-height: 1.4; }
  .icon_how { width: 9.84em; height: 9.84em; }
  .caption_small { font-size: 3.2em; }
  .headline_box .h2 { font-size: 8em; line-height: 1.1; }

  /* quotes */
  .h2.bigger { font-size: 8.5em; line-height: 1; }
  .cms_testimonials { margin-top: 48px; }
  .author_coll { column-gap: 16px; }
  .author_item { row-gap: 6.4px; }
  .author_circle { width: 56px; height: 56px; padding: 1.6px; }
  .author_photo { width: 52.8px; height: 52.8px; }
  .author_name_txt { font-size: 3.2em; }
  .quotes { margin-top: 32px; }
  .testimonial_txt { font-size: 4.5em; line-height: 1.4; }

  /* faq page */
  .wrapper_general.base_ab { padding: 120px 16px 48px; }
  .h1.black.gen_h { font-size: 9em; }
  .faq_sides { flex-flow: column; }
  .tabs_ill { display: flex; flex-flow: column; width: 100%; }
  .sticky_side {
    position: static;
    display: flex;
    flex-flow: column;
    row-gap: 48px;
    margin: 0 0 32px;
  }

  /* the chip rail leaves the column and docks to the bottom of the screen */
  .anchors {
    position: fixed;
    inset: auto 0 0;
    justify-content: flex-start;
    padding: 16px 16px 96px;
    overflow-x: auto;
  }
  .list_anchors { flex-wrap: nowrap; row-gap: 6.4px; column-gap: 6.4px; }
  .chip_btn { padding: 13.6px 16px; font-size: 3.2em; }

  .ill_lamp { width: 144px; margin: 0 0 0 auto; }
  .lamp_box { width: 144px; height: 144px; }

  .faq_list { width: 100%; margin-left: 0; }
  .faq_l { row-gap: 64px; }
  .faq_title { margin-bottom: 22.4px; }
  .title_faq { font-size: 5.5em; }
  .count { font-size: 3.4em; }

  /* faq */
  .faq_heading { margin: 0 48.475px; }
  .faq_heading .h2 { font-size: 8em; line-height: 1.1; }
  .sides_faq { margin-top: 27.328px; }
  .short_left { flex-flow: row; justify-content: space-between; margin-top: 32px; }
  .bottom_faq { row-gap: 9.6px; }
  .accordion-item { padding: 9.6px 0; }
  .item_title { font-size: 3.7em; line-height: 1.3; }
  .icon_wrapper { width: 20.8px; height: 20.8px; }
  .accordion_paragraph { margin: 6.4px 0 0; }
  .item_paragraph { font-size: 3.5em; line-height: 1.5; max-width: 100%; }
  .p_gen.black.caption_cta { font-size: 4.74em; }

  /* closing call to action */
  .fs_cta { height: 100vh; }
  .abs_box { padding: 16px; }
  .pink_cta { width: 100%; }
  .wrapper_box_cta { padding: 16px; }
  .txt_cta { font-size: 6.5em; line-height: 1.1; }
  .heading_cta { margin-bottom: 32px; }
  .flex_cta { height: 40px; }
  .black_button, .black_button .button { height: 100%; }
  .icon_right { width: 40px; height: 40px; }

  /* footer */
  .wrapper_footer { padding: 56px 16px 92px; }
  .cap_footer { font-size: 6.5em; line-height: 1; }
  .menu_footer {
    grid-template-columns: 1fr 1fr;
    gap: 42px 16px;
    margin-top: 42px;
  }
  .title_footer { font-size: 3.25em; margin-bottom: 20px; }
  .links_list { row-gap: 4px; }
  .link_f { font-size: 4em; line-height: 1.2; }
  .back_socials { height: 32px; margin-top: 72px; }
  .back_top { font-size: 3.8em; }
  .socials_box { column-gap: 9.6px; }
  .social_link, .social_icon { display: block; width: 32px; height: 32px; }
  .last_line {
    font-size: 3.2em;
    margin-top: 32px;
    padding: 0 16px 2em;
    flex-wrap: nowrap;
  }

  /* the credit drops out on narrow screens and the row stays on one line */
  .web_dev_by { display: none; }
}


/* ==========================================================================
   MOBILE MENU
   The links in the slide-down panel inherited the 1vw base and rendered at
   3.3px on a phone, so the navigation was unreadable once opened.
   ========================================================================== */

@media screen and (max-width: 991px) {

  .mobile_link,
  .mobile_link > div { font-size: 18px; line-height: 1.4; }

  /* a link is a tap target, not a line of text */
  .mobile_link { display: block; padding: 10px 0; }
}


/* ==========================================================================
   PHONE READABILITY
   The base size of the page is 1vw, which is 3.9px on a 390px screen, so
   anything without its own phone rule inherited that: measured on the built
   pages, 114 text nodes landed between 2.7px and 12.7px. The sizes below are
   in px on purpose, so they cannot pick the viewport unit back up.
   ========================================================================== */

@media screen and (max-width: 479px) {

  /* running text */
  .p_gen,
  .desc_amen,
  .inc_desc,
  .desc_step_txt,
  .pet_desc,
  .gallery_caption,
  .md_txt { font-size: 15px; line-height: 1.45; }

  /* these carry their own rule further up, which outranks the one above */
  .loc_description .p_gen,
  .p_box .p_gen,
  .page_top .p_box .p_gen { font-size: 15px; line-height: 1.45; }

  .p_gen.black.specific { font-size: 14px; line-height: 1.4; }

  /* their widths are in em, so raising the type size blew them past the
     edge of the screen: 26.665em became 400px on a 390px phone */
  .desc_amen,
  .md_txt,
  .loc_description { width: 100%; max-width: 100%; }

  /* labels, tags, captions */
  .tag_amen,
  .inc_title,
  .filter_title,
  .subtitle_text,
  .caption_location,
  .mnth_txt,
  .radio_txt,
  .checkbox_txt,
  .all_small,
  .time_clock,
  .txt_available,
  .tag_available,
  .tag_info,
  .last_txt,
  .title_footer,
  .caption_small,
  .author_name_txt { font-size: 13px; line-height: 1.3; }

  /* headings that sit inside a block */
  .title_amen,
  .title_map_card,
  .title_step,
  .pet_title,
  .chip_how,
  .chip_btn { font-size: 17px; line-height: 1.25; }

  .title_apply { font-size: 20px; line-height: 1.2; }

  /* controls. The translate on .text_box is already off at this width, so
     changing the type size does not shift the label inside the button. */
  .header_button,
  .text_box,
  .text_box.header_btn { font-size: 14px; }

  /* one plan card per row: three columns left 83px per cell, narrower than
     the button standing inside it */
  .apartments_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .apartments_grid .explore_button .text_box {
    padding: 12px 24px;
    font-size: 14px;
  }
}


@media screen and (max-width: 991px) {

  /* The gallery is laid out to fit one screen exactly (main.gallery is
     100vh). A narrow viewport cannot hold the viewer and the thumbnail strip
     together, so the strip sat below the fold of a page that had no scroll
     at all and could not be reached. Letting the page grow restores it. */
  main.gallery { height: auto; min-height: 100vh; }
  .gallery_wrapper { height: auto; }
}


/* ==========================================================================
   PLANS PAGE ON NARROW SCREENS
   The filter rail keeps 26% and the grid 70% all the way down, so on a phone
   the cards were squeezed into 255px of a 390px screen and each photo, sized
   at a fixed 23em against the 1vw base, came out 90px tall.
   ========================================================================== */

@media screen and (max-width: 767px) {

  .apartments_sides { flex-flow: column; }

  /* the rail has no drawer trigger at this width, so it has nothing to show */
  .filters { display: none; }

  .apartments_box {
    width: 100%;
    margin-left: 0;
  }

  .apartments_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    column-gap: 0;
  }

  /* a proportional frame instead of a fixed em height */
  .apart_image.grid_apartments {
    height: auto;
    aspect-ratio: 4 / 3.4;
  }
}