@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.locked {
    /*Play with this overflow because it makes a big difference when viewing carousel on mobile protrait vs landscape.*/
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.avenir-next {
    font-family: "Avenir Next", Arial, sans-serif;
}

.avenir-heavy {
    font-family: "Avenir-Heavy", "Avenir Next", Arial, sans-serif;
}
.specialist {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
        "header   header"
        "portrait identity"
        "contact  contact"
        "actions  actions"
        "footer   footer";
    column-gap: 16px;
    row-gap: 20px;
    align-items: end;
    padding: 0 16px;
    position: relative;
}

.specialist__header {
    grid-area: header;
    padding-top: 20px;
    text-align: center;
}

/* Below 1024 the identity and the contact table are placed as separate grid
   cells; from 1024 the wrapper becomes a real box holding both together so the
   table sits directly under the name instead of being stretched apart by the
   full-height portrait beside it. */
.specialist__body {
    display: contents;
}

.specialist__identity {
    grid-area: identity;
    align-self: center;
}

.specialist__portrait {
    grid-area: portrait;
    align-self: end;
}

.specialist__contact-list {
    grid-area: contact;
}

.specialist__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.specialist__footer {
    grid-area: footer;
}

/* Zone A - portrait */

.specialist__portrait img {
    display: block;
    width: 100%;
    height: auto;
}

/* Zone B - identity */

.specialist__eyebrow {
    display: inline-block;
    margin: 0;
    /* letter-spacing adds a trailing gap after the last letter; pull it back so
       the rule below is exactly as wide as the visible text */
    margin-right: -0.22em;
    color: #0D214B;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.specialist__eyebrow::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background: #BEBAA7;
}

.specialist__department {
    margin: 10px 0 2px;
    color: #0D214B;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.specialist__name {
    margin: 0 0 4px;
    color: #0D214B;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.specialist__role {
    margin: 0;
    color: #5A6B85;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Zone B - contact */

.specialist__contact-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

/* Ruled like a table: each cell carries the line above it, so there is never a
   trailing rule under the last row whatever the channel count. */
.specialist__contact-list li {
    border-top: 1px solid #EDF0F5;
}

.specialist__contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
    color: #0D214B;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.specialist__contact-link img {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.specialist__contact-link:hover {
    color: #1A3265;
}

.specialist__contact-link--phone {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Zone C - action panel */

.specialist__media {
    order: 3;
}

.specialist__cta--primary {
    order: 1;
}

.specialist__cta--secondary {
    order: 2;
}

.specialist__panel-label {
    margin: 0 0 8px;
    color: #8892A4;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.specialist__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #0D214B;
}

.specialist__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.specialist__tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #EEF2F8;
    color: #0D214B;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.specialist__tag:hover {
    background: #DDE6F2;
    color: #0D214B;
}

.specialist__tag--more {
    background: transparent;
    border-color: #C6D0DF;
    font-weight: 600;
}

.specialist__tag--more:hover {
    background: #F7F9FC;
    border-color: #0D214B;
}

.specialist__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.specialist__cta--primary {
    border: 1px solid #0D214B;
    background: #0D214B;
    color: #fff;
}

.specialist__cta--primary:hover {
    background: #1A3265;
    border-color: #1A3265;
    color: #fff;
}

.specialist__cta--secondary {
    border: 1px solid #C6D0DF;
    background: transparent;
    color: #0D214B;
}

.specialist__cta--secondary:hover {
    border-color: #0D214B;
    background: #F7F9FC;
}

.specialist__cta:active {
    transform: scale(0.99);
}

.specialist :focus-visible {
    outline: 2px solid #0D214B;
    outline-offset: 2px;
}

/* Footer - mark sits above the rule, never over it */

/* The mark is taken out of flow so the footer is only as tall as the rule -
   that is what keeps the rule close under the broker's feet.
   bslogo.svg reserves 17.366% of its height and 16.211% of its width as
   transparent drop-shadow room, so the bars are nudged by exactly that much to
   stand on the rule instead of floating above it. */
.specialist__footer {
    position: relative;
    margin: -8px -16px 0;
}

.specialist__mark {
    position: absolute;
    right: 8px;
    bottom: 0;
    display: block;
    width: 34px;
    height: auto;
    transform: translate(16.211%, 17.366%);
}

.specialist__rule {
    height: 3px;
    margin-right: 38px;
    background: #1A3265;
}

@media (min-width: 640px) {
    .specialist {
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 24px;
        row-gap: 24px;
        padding: 0 24px;
    }

    .specialist__header {
        margin: 0 -24px;
        padding: 14px 24px;
    }

    .specialist__name {
        font-size: 26px;
    }

    .specialist__contact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .specialist__contact-list li:nth-child(odd) {
        border-right: 1px solid #EDF0F5;
        padding-right: 16px;
    }

    .specialist__contact-list li:nth-child(even) {
        padding-left: 16px;
    }

    .specialist__contact-link {
        min-height: 44px;
        font-size: 13px;
    }

    .specialist__mark {
        width: 44px;
        right: 10px;
    }

    .specialist__rule {
        height: 4px;
        margin-right: 48px;
    }

    .specialist__media {
        order: 0;
    }

    .specialist__footer {
        margin: -8px -24px 0;
    }
}

@media (min-width: 1024px) {
    .specialist {
        grid-template-columns: 165px minmax(0, 1fr) 280px;
        grid-template-areas:
            "header   header   header"
            "portrait body     actions"
            "footer   footer   footer";
        column-gap: 32px;
        padding: 0 32px;
    }

    .specialist__body {
        display: block;
        grid-area: body;
        align-self: start;
    }

    .specialist__header {
        margin: 0 -32px;
        padding: 15px 32px;
    }

    .specialist__identity {
        align-self: start;
    }

    .specialist__contact-list {
        align-self: start;
    }

    .specialist__actions {
        align-self: start;
    }

    .specialist__name {
        font-size: 28px;
    }

    .specialist__eyebrow {
        font-size: 20px;
    }

    .specialist__footer {
        margin: -8px -32px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .specialist__cta {
        transition: none;
    }

    .specialist__cta:active {
        transform: none;
    }
}
/* Shared styles for the card image carousel (_image_carousel.html.erb), the
   modal carousel (_image_carousel_new.html.erb) and the modal wrapper
   (_image_carousel_with_modal.html.erb). These used to live as inline <style>
   blocks inside the partials, which re-rendered one copy per card — ~20
   identical blocks on a search results page. */

/* --- Card carousel (_image_carousel) --- */

.slideshow-container {
    position: relative;
    margin: auto;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    opacity: 70%;
}

.carousel-parent .active, .dot:hover {
    background-color: #717171;
}

.left-img-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.grid-view-button-inner {
    padding: 0 !important;
    width: 36px;
    height: 36px;
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* .grid-view-button:hover/:active intentionally NOT carried over from the old
   inline block: the search cards only use .grid-view-button-inner, and the
   unit/building show pages ship their own identical copies alongside the base
   .grid-view-button rule — a third copy here would just be drift waiting to
   happen. */

/* --- Modal carousel (_image_carousel_new) --- */

.image-carousel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}

.carousel-item-wrapper {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.carousel-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    user-select: none;
    background-color: #fff;
    cursor: pointer;
    z-index: 10;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

@media (max-width: 1023px) and (min-width: 0px) {
    .carousel-navigation-link {
        width: 34px !important;
        height: 34px !important;
        top: calc(50% - 17px) !important;
    }
}

/* --- Modal wrapper (_image_carousel_with_modal) --- */

.divvvy {
    user-select: none !important;
    z-index: 1050 !important;
    -webkit-overflow-scrolling: touch !important;
    outline: 0 !important;
}

/* --- Listing banner + tags (_carousel_banner_and_tags) --- */

.unit-tag {
    bottom: 16px;
    position: absolute;
    z-index: 1;
    font-weight: bold;
    color: white;
}

.unit-tag div {
    margin-top: 2px;
    background-color: #1A3265;
}

.unit-tag.large {
    bottom: 150px;
}

.unit-tag.large div {
    font-size: 12px;
    padding: 6px 12px;
    width: fit-content;
}

.unit-tag.small div {
    font-size: 10px;
    padding: 4px 8px;
    width: fit-content;
}

.unit-banner {
    background-color: #1A3265;
    position: absolute;
    z-index: 1;
    font-weight: bold;
    color: white;
    border-radius: 10px;
}

.unit-banner.small {
    font-size: 14px;
    padding: 8px 12px;
}

.unit-banner.large {
    font-size: 16px;
    padding: 10px 14px;
    top: 20px;
    left: 20px;
}

/* On phones the card badges read oversized against the 180px photo —
   tighten them without touching the desktop sizes. */
@media (max-width: 639px) {
    .unit-banner.small {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .unit-tag.small div {
        font-size: 9px;
        padding: 3px 6px;
    }
}
.image-carousel-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.modal-open {
    overflow: hidden;
}

.image-carousel-modal .close-button {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.2s ease-in-out;
}

.image-carousel-modal .close-button:hover,
.image-carousel-modal .close-button:focus {
    background-color: rgba(0, 0, 0, 0.7);
    outline: none;
}

.image-carousel-modal .modal-loading-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.image-carousel-modal .modal-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: carousel-modal-spin 0.8s linear infinite;
}

@keyframes carousel-modal-spin {
    to { transform: rotate(360deg); }
}

.image-carousel-modal .modal-error-message {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

.image-carousel-modal .modal-retry-button {
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.image-carousel-modal .modal-retry-button:hover,
.image-carousel-modal .modal-retry-button:focus {
    background-color: rgba(255, 255, 255, 0.15);
    outline: none;
}

.image-carousel-modal .close-button span {
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
}
@font-face {
    font-family: 'Avenir';
    font-display: swap;
    src: url(/assets/AvenirLTStd-Roman-7909e03e628473e84e9e7c62b86b3fb06a4cdf6a02a9c7c2218bcbfd3d50c806.woff2) format('woff2'),
         url(/assets/AvenirLTStd-Roman-79c4a6763cd37a08c07c061494eb890d6703197796f124ed66842cc73dedb5ed.otf) format('opentype');
}

@media (any-pointer: coarse) {
    /* MOBILE */
    .bs-header {
        display: none;
    }

    .top-bs-footer:not(.global-footer) {
        display: none !important;
    }

    .bs-footer-section:not(.global-footer-section) {
        bottom: -30px !important;
    }

}

/* NON MOBILE */
@media (any-pointer: fine) {
    .mobile-slideout {
        display: none !important;
    }

    .mobile-header {
        display: none !important;
    }

}

/* Removed `html { scroll-behavior: smooth !important; }` — it animated
   every programmatic scroll including Turbo's post-navigation
   scrollTo(0, 0), causing slow-scroll-up-then-mid-page-landing on
   "Popular searches" link clicks. If a specific section needs
   smooth in-page anchor scrolling, scope it to that element. */

.terms-p {
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size: 10px;
    color: #0D214B;
    opacity: 0.7;
}

.social-icon {
    min-width: 22px;
    min-height: 22px;
    transition: transform 200ms;
}

.social-icon:hover {
    transform: scale(1.5);
}

.down-arrow-svg {
    animation: MoveUpDown 800ms linear infinite;
    position: absolute;
    margin-left: -36px;
    transition: all 200ms;
}

.rotated-arrow {
    transform: rotate(-180deg);
}

.svg-path {
    animation: ChangeColor 800ms linear infinite;
    fill: white;
    -webkit-filter: drop-shadow(0px 3px 6px black);
}

@keyframes MoveUpDown {
    0%, 100% {
        bottom: 60px;
    }
    50% {
        bottom: 50px;
    }
}

@keyframes ChangeColor {
    0%, 100% {
        fill-opacity: 0.5;
    }
    50% {
        fill-opacity: 1;
    }
}

/*.bs-content::before {*/
/*    content: "";*/
/*    background-size: cover;*/
/*    position: absolute;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    top: 0px;*/
/*    right: 0px;*/
/*    bottom: 0px;*/
/*    left: 0px;*/
/*    opacity: 0.8;*/
/*}*/

.bs-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.bs-header {
    /*position: absolute;*/
    top: 0;
    width: 100%;
    /*padding-top: 30px;*/
    /*padding-left: 60px;*/
    /*padding-right: 60px;*/
}

.bs-body-section {
    position: absolute;
    width: 100%;
}

.bs-footer-section {
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.home-page-footer-section {
    position: absolute;
}

.bs-footer.top-bs-footer:hover {
    opacity: 1;
    max-height: 1000px;
}

.bs-footer {
    border-top: 2px solid #BEBAA7;
    border-bottom: 2px solid #BEBAA7;
    width: 100%;
    background-color: white;
    display: flex;
    overflow: hidden;
}

.bs-footer.top-bs-footer {
    opacity: 0;
    max-height: 30px;
    transition: all 200ms;
}

.bs-footer-link {
    color: #0D214B;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-weight: 600;
}

.bs-footer-link:hover {
    color: #0D214B;
    opacity: 1;
    text-decoration: underline;
}

.bs-home-page-logo-mobile {
    height: 90px;
    -webkit-filter: drop-shadow(0px 10px 15px #00000080);
    filter: drop-shadow(0px 10px 15px #222);
    opacity: 1;
    z-index: 2;
}

.hamburger-bar-icon-mobile {
    /*position: absolute;*/
    /*top: 0;*/
    display: block;
    width: 45px;
    z-index: 2;
}

.hamburger-bar-container {
    position: relative;
    z-index: 40;
}

.bs-header-mobile {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: row-reverse;
    z-index: 11;
}

.bs-home-page-logo {
    height: 100px;
    -webkit-filter: drop-shadow(0px 10px 15px #00000080);
    filter: drop-shadow(0px 10px 15px #222);
    opacity: 1;
}

.mobile-header {
    /*position: absolute;*/
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 18px;
    padding-right: 18px;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.mobile-slideout {
    padding-left: 8px;
    padding-right: 8px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 100%;

    transition: all 200ms;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 12;
    padding-top: 90px;
}

.patty-content-mobile {
    overflow: scroll;
    height: calc(100vh - 90px);
}

.mobile-slideout-in {
    margin-left: 0;
}

.mobile-header img {
    z-index: 13;
}

.hamburger-bar-icon {
    position: absolute;
    top: 0;
    display: block;
    width: 65px;
    z-index: 2;
}

#burger-bar-icon-hover {
    width: 65px;
}

#burger-bar-icon-hover {
    opacity: 0;
}

#hamburger-bar-container:hover > #hamburger > #burger-bar-icon-default {
    opacity: 0;
}

#hamburger-bar-container:hover > #hamburger > #burger-bar-icon-hover {
    opacity: 100;
}

#hamburger:hover + #hamburger-patty {
    max-height: 800px;
    top: -20px;
    padding-bottom: 130px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#hamburger-patty:hover {
    max-height: 800px;
    top: -20px;
    padding-bottom: 130px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#hamburger-patty {
    left: -20px;
    position: absolute;
    max-height: 0px;
    width: 350px;
    overflow: hidden;
    transition: all 200ms;
    top: 50%;

    z-index: 1;
}

.patty-content {
    padding-top: 80px;
    padding-left: 20px;
    padding-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.burger-item {
    /*padding-top:28px;*/
    /*padding-bottom:28px;*/
}

.burger-item .top-item {
    font-size: 20px;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-weight: 400;
    text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.5);
    color: #0D214B;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 200ms;
    padding-top: 18px;
    padding-bottom: 18px;
}

.burger-item:hover .top-item {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 3px;
}

.burger-item .inner-item {
    font-size: 16px;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-weight: 200;
    text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.5);
    color: #0D214B;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 200ms;
    padding-top: 8px;
    padding-bottom: 8px;
}

.burger-item .inner-item:hover {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
}

.burger-item-list {
    max-height: 0;
    overflow: hidden;
    transition: all 200ms;
}

.burger-item .top-item:hover + .burger-item-list {
    max-height: 300px;
}

.burger-item-list:hover {
    max-height: 300px;

}

.home-video {
    position: absolute;
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0.8;
    top: 0;
    z-index: -1;
}

/*    Tiles section */
.home-tile-parent {
    padding: 50px;
}

.home-tile {
    display: inline-block;
    position: relative;
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    transition: transform 200ms;
}

.home-tile:hover {
    transform: scale(1.06);
}

.home-tile:hover .tile-content .tile-content-container {
    background-color: #0D214B;
}

.home-decoy {
    margin-top: 100%;
}

#down-arrow-click-link {
    cursor: pointer;
}

.tile-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.first-in-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-in-container h2 {
    font-size: 60px;
    font-family: Avenir, "Avenir Next", Arial, sans-serif;
    color: #0D214B;
    line-height: 60px;
    margin-bottom: 30px;
    text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 30px;
}

.tile-content-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.45);
    display: flex;
    justify-content: center;
}

.tile-content-container h2 {
    line-height: 60px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 60px;
    font-family: Avenir, "Avenir Next", Arial, sans-serif;
    letter-spacing: 16px;
    color: white;
    text-shadow: 3px 3px #0D214B;
    transition: all 200ms;
}


@media (max-width: 1023px) and (min-width: 0px) {
    .footer-title {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (max-width: 5000px) and (min-width: 2201px) {
    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 64px;
        padding-top: 70px;
        padding-bottom: 70px;
        font-size: 64px;
        letter-spacing: 20px;
    }
}

@media (max-width: 2200px) and (min-width: 2051px) {
    .tile-content-container h2 {
        line-height: 50px;
        font-size: 50px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 54px;
        padding-top: 60px;
        padding-bottom: 60px;
        font-size: 54px;
        letter-spacing: 18px;
    }
}

@media (max-width: 2050px) and (min-width: 1901px) {
    .tile-content-container h2 {
        line-height: 40px;
        font-size: 40px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 42px;
        padding-top: 54px;
        padding-bottom: 54px;
        font-size: 42px;
        letter-spacing: 18px;
    }

    .first-in-container h2 {
        font-size: 54px;
        line-height: 54px;
        letter-spacing: 30px;
    }
}

@media (max-width: 1900px) and (min-width: 1751px) {
    .tile-content-container h2 {
        line-height: 36px;
        font-size: 36px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 38px;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 38px;
        letter-spacing: 17px;
    }

    .first-in-container h2 {
        font-size: 50px;
        line-height: 50px;
        letter-spacing: 28px;
    }
}

@media (max-width: 1750px) and (min-width: 1601px) {
    .tile-content-container h2 {
        line-height: 32px;
        font-size: 32px;
        letter-spacing: 14px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 34px;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 34px;
        letter-spacing: 15px;
    }

    .first-in-container h2 {
        font-size: 46px;
        line-height: 46px;
        letter-spacing: 26px;
    }
}

@media (max-width: 1600px) and (min-width: 1451px) {
    .tile-content-container h2 {
        line-height: 30px;
        font-size: 30px;
        letter-spacing: 12px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 32px;
        padding-top: 45px;
        padding-bottom: 45px;
        font-size: 32px;
        letter-spacing: 13px;
    }

    .first-in-container h2 {
        font-size: 42px;
        line-height: 42px;
        letter-spacing: 22px;
    }
}

@media (max-width: 1450px) and (min-width: 1301px) {
    .tile-content-container h2 {
        line-height: 26px;
        font-size: 26px;
        letter-spacing: 10px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 28px;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 28px;
        letter-spacing: 11px;
    }

    .first-in-container h2 {
        font-size: 38px;
        line-height: 38px;
        letter-spacing: 18px;
    }
}

@media (max-width: 1300px) and (min-width: 1051px) {
    .tile-content-container h2 {
        line-height: 19px;
        font-size: 19px;
        letter-spacing: 8px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 21px;
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 21px;
        letter-spacing: 9px;
    }

    .first-in-container h2 {
        font-size: 34px;
        line-height: 34px;
        letter-spacing: 14px;
    }
}

@media (max-width: 1050px) and (min-width: 901px) {
    .tile-content-container h2 {
        line-height: 16px;
        padding-top: 18px;
        padding-bottom: 18px;
        font-size: 16px;
        letter-spacing: 6px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 17px;
        padding-top: 24px;
        padding-bottom: 24px;
        font-size: 17px;
        letter-spacing: 7px;
    }

    .first-in-container h2 {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 28px;
        letter-spacing: 12px;
    }
}

@media (max-width: 900px) and (min-width: 768px) {
    .tile-content-container h2 {
        line-height: 13px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 13px;
        letter-spacing: 4px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 14px;
        padding-top: 15px;
        padding-bottom: 14px;
        font-size: 14px;
        letter-spacing: 5px;
    }

    .first-in-container h2 {
        font-size: 28px;
        line-height: 28px;
        margin-bottom: 28px;
        letter-spacing: 10px;
    }
}

@media (max-width: 767px) and (min-width: 701px) {
    .tile-content-container h2 {
        line-height: 48px;
        font-size: 48px;
        letter-spacing: 12px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 54px;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 54px;
        letter-spacing: 14px;
    }

    .first-in-container h2 {
        font-size: 38px;
        line-height: 38px;
        letter-spacing: 14px;
    }
}

@media (max-width: 700px) and (min-width: 601px) {
    .tile-content-container h2 {
        line-height: 40px;
        font-size: 40px;
        letter-spacing: 10px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 42px;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 42px;
        letter-spacing: 12px;
    }

    .first-in-container h2 {
        font-size: 32px;
        line-height: 32px;
        letter-spacing: 10px;
    }
}

@media (max-width: 600px) and (min-width: 401px) {
    .tile-content-container h2 {
        line-height: 28px;
        padding-top: 24px;
        padding-bottom: 24px;
        font-size: 28px;
        letter-spacing: 6px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 32px;
        padding-top: 35px;
        padding-bottom: 35px;
        font-size: 32px;
        letter-spacing: 7px;
    }

    .first-in-container h2 {
        font-size: 26px;
        line-height: 26px;
        margin-bottom: 30px;
        letter-spacing: 8px;
    }
}

@media (max-width: 400px) and (min-width: 281px) {
    .tile-content-container h2 {
        line-height: 18px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 18px;
        letter-spacing: 3px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 19px;
        padding-top: 25px;
        padding-bottom: 25px;
        font-size: 19px;
        letter-spacing: 4px;
    }

    .first-in-container h2 {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 24px;
        letter-spacing: 4px;
    }
}

@media (max-width: 280px) and (min-width: 200px) {
    .tile-content-container h2 {
        line-height: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .home-tile:hover .tile-content .tile-content-container h2 {
        line-height: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 13px;
        letter-spacing: 2px;
    }

    .first-in-container h2 {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 18px;
        letter-spacing: 4px;
    }
}
/* Mobile search header, bottom sheets and sort listbox (search results UX).
   Markup styling lives in Tailwind utility classes; this file carries only
   what utilities cannot express: attribute-driven state (the filter count
   badge), transition state classes toggled by Stimulus, the measured
   bar-height custom property, and the reduced-motion overrides. */

:root {
    /* Published at runtime by mobile-search-header (ResizeObserver on the
       bar). The fallback matches the legacy 46px bar + border. */
    --bs-search-bar-h: 47px;
}

.bs-mobile-search {
    /* Brand tokens (mirror config/tailwind.config.js). Custom CSS below must
       colour from these, never from raw hexes. */
    --bs-navy: #1A3265;        /* theme-secondary-blue - bars and controls */
    --bs-navy-deep: #0D214B;   /* theme-blue - brand text navy */
    --bs-gold: #BEBAA7;        /* theme-gold - accent (badge) */
}

/* -- Hide-on-scroll header ------------------------------------------------
   The transform is applied ONLY while hidden: a translated ancestor becomes
   the containing block for position:fixed descendants, so the visible state
   must carry no transform at all. */
.bs-search-bar-root {
    transition: transform 0.22s ease;
}

/* Media-scoped so a stale data attribute after a breakpoint crossing (phone
   rotation, window resize) can never translate the DESKTOP bar off-screen. */
@media (max-width: 1023px) {
    .bs-search-bar-root[data-bs-bar-hidden="true"] {
        transform: translateY(-100%);
    }
}

/* -- Sticky results head --------------------------------------------------
   Title + sort + map row on the mobile results page. Pins under the whole
   header (brand row + navy bar + areas row); when the bar hides on scroll
   the head rides up to the viewport top on the same 0.22s curve. z-index
   sits between the cards' innards (z-10) and the bar (z-20), so listings
   scroll beneath it while the bar - and the sheet overlays living inside
   the bar's stacking context - stay above it. */
@media (max-width: 1023px) {
    .bs-results-head {
        position: sticky;
        top: var(--bs-header-total-h, 98px);
        z-index: 15;
        background: #ffffff;
        padding-top: 6px;
        padding-bottom: 6px;
        transition: top 0.22s ease;
    }

    html[data-bs-bar-hidden="true"] .bs-results-head {
        top: 0;
    }
}

/* -- Filter button count badge --------------------------------------------
   Driven entirely by data-count; JS only writes the number. */
.bs-filter-btn {
    position: relative;
}

.bs-filter-btn[data-count]:not([data-count="0"]) {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--bs-navy);
}

.bs-filter-btn[data-count]:not([data-count="0"])::after {
    content: attr(data-count);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    line-height: 15px;
    border-radius: 999px;
    border: 1.5px solid var(--bs-navy);
    background: var(--bs-gold);
    color: var(--bs-navy-deep);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 3px;
}

/* -- Bottom sheet ---------------------------------------------------------
   Overlay top edge stops at the bottom of the (measured) search bar, so the
   sheet can never cover it. */
.bs-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(13, 33, 75, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: var(--bs-search-bar-h);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.bs-sheet-overlay.bs-sheet-shown {
    opacity: 1;
}

/* frontend.css loads after tailwind.css, so this file's display:flex would
   otherwise beat Tailwind's .hidden and leave an invisible full-screen
   overlay eating every tap. */
.bs-sheet-overlay.hidden {
    display: none;
}

/* Tall sheets (the map view) stop under the brand row alone, covering the
   search bar for extra height. */
.bs-sheet-overlay.bs-sheet-overlay-tall {
    padding-top: var(--bs-brand-row-h, 0px);
}

.bs-sheet {
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.25, 1);
    will-change: transform;
}

.bs-sheet-overlay.bs-sheet-shown .bs-sheet {
    transform: translateY(0);
}

/* While a finger is down the sheet tracks it 1:1 with no easing. */
.bs-sheet.bs-sheet-dragging {
    transition: none;
}

.bs-sheet-grip-zone {
    touch-action: none;
}

/* Short screens (iPhone SE is 667px tall): the sheet already covers
   everything but a clipped strip of the page, so the peek behind it buys
   nothing - go full height under the header and give those pixels to the
   content. Corners and grip stay: the square "page" treatment read as a
   regression, and the head border's margin opened a gap above the map. */
@media (max-width: 1023px) and (max-height: 700px) {
    .bs-sheet-overlay .bs-sheet {
        height: 100%;
        max-height: 100%;
    }
}

/* -- Enquiry modals as bottom sheets (mobile) ------------------------------
   The enquire modal family already anchors to the bottom on mobile
   (items-end); these two marker classes make the panel present like the
   filter/menu sheets - full width, flush with the bottom edge, rounded top
   corners, slide-up entrance. Desktop (sm:items-center) is untouched. */
@media (max-width: 1023px) {
    .bs-modal-sheet-wrap {
        padding: 0;
    }

    .bs-modal-sheet {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        /* Tall enquiry forms scroll INSIDE the sheet; the sheet itself stays
           flush with the bottom edge (dvh tracks the collapsing URL bar) and,
           like the map sheet, stops under the brand row instead of covering
           the full screen. */
        max-height: calc(100vh - var(--bs-brand-row-h, 0px));
        max-height: calc(100dvh - var(--bs-brand-row-h, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: bs-modal-rise 0.28s cubic-bezier(0.22, 0.9, 0.25, 1);
    }

    @keyframes bs-modal-rise {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .bs-modal-sheet {
        animation: none;
    }
}

/* -- Filter sheet selection states ----------------------------------------
   Attribute-driven (aria-checked / aria-pressed) so state styling has one
   home regardless of which code path flips it. */
.bs-type-tile[aria-checked="true"] {
    border-color: var(--bs-navy);
    box-shadow: inset 0 0 0 1px var(--bs-navy);
    background: rgba(13, 33, 75, 0.06);
    color: var(--bs-navy);
}

.bs-type-tile[aria-checked="true"] > svg {
    color: var(--bs-navy);
}

.bs-type-tile[aria-checked="true"] .bs-radio-dot {
    border-color: var(--bs-navy);
    background: var(--bs-navy);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.bs-sub-chip[aria-pressed="true"] {
    border-color: var(--bs-navy);
    background: var(--bs-navy);
    color: #ffffff;
}

.bs-price-chip[aria-pressed="true"] {
    border-color: var(--bs-navy);
    background: rgba(13, 33, 75, 0.06);
    color: var(--bs-navy);
}

.bs-listing-seg[aria-pressed="true"] {
    background: var(--bs-navy);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(13, 33, 75, 0.25);
}

/* -- Sort listbox / chevrons ---------------------------------------------- */
.bs-sort-option[aria-selected="true"] {
    background: rgba(13, 33, 75, 0.06);
    color: var(--bs-navy);
    font-weight: 500;
}

.bs-sort-option > svg {
    opacity: 0;
}

.bs-sort-option[aria-selected="true"] > svg {
    opacity: 1;
}

.bs-caret {
    transition: transform 0.18s ease;
}

[aria-expanded="true"] > .bs-caret,
[aria-expanded="true"] .bs-caret-slot > .bs-caret {
    transform: rotate(180deg);
}

/* Check mark on selected investment chips animates in. */
.bs-check {
    width: 0;
    overflow: hidden;
    transition: width 0.12s ease;
}

[aria-pressed="true"] > .bs-check {
    width: 14px;
}

/* Tap/keyboard focus: the default UA outline is rectangular and flashes as a
   square around the fully-rounded pills. A box-shadow ring follows
   border-radius; gold reads on both the navy bar and white surfaces. */
.bs-mobile-search button:focus,
.bs-mobile-search a:focus {
    outline: none;
}

.bs-mobile-search button:focus-visible,
.bs-mobile-search a:focus-visible {
    box-shadow: 0 0 0 2px var(--bs-gold);
}

@media (prefers-reduced-motion: reduce) {
    .bs-search-bar-root,
    .bs-results-head,
    .bs-sheet-overlay,
    .bs-sheet,
    .bs-caret,
    .bs-check {
        transition: none;
    }
}
.title {
    color: rgb(29 78 216);
    font-size: 26px;
    font-weight: 600;
    line-height: 26px;
}

/* Apply this to <input> elements so that when you click on it it won't change color or border color */
.no-focus:focus {
    box-shadow: none !important;
    border-color: initial;
}

/* Apply this to placeholders that need more space */
.wide-placeholder::placeholder {
    letter-spacing: 4px;
    font-size: 18px;
}

.wide-placeholder:-ms-input-placeholder {
    letter-spacing: 4px;
    font-size: 18px;
}

.wide-placeholder::-ms-input-placeholder {
    letter-spacing: 4px;
    font-size: 18px;
}

@media (max-width: 639px) and (min-width: 331px) {
    .wide-placeholder::placeholder {
        letter-spacing: 2px;
        font-size: 14px;
    }

    .wide-placeholder:-ms-input-placeholder {
        letter-spacing: 2px;
        font-size: 14px;
    }

    .wide-placeholder::-ms-input-placeholder {
        letter-spacing: 2px;
        font-size: 14px;
    }
}

@media (max-width: 330px) and (min-width: 0px) {
    .wide-placeholder::placeholder {
        letter-spacing: 0;
        font-size: 12px;
    }

    .wide-placeholder:-ms-input-placeholder {
        letter-spacing: 0;
        font-size: 12px;
    }

    .wide-placeholder::-ms-input-placeholder {
        letter-spacing: 0;
        font-size: 12px;
    }
}

/* Squared radio button */

.square-radio {
    border-radius: 5px;
    width: 20px;
    height: 20px;
}

.square-radio:checked,
.square-radio:active {
    background-color: #1A3265 !important;
    border-color: #1A3265 !important;
}

.theme-shadow {
    box-shadow: 0 3px 6px rgb(0 0 0 / 40%);
}

.global-text-shadow {
    -webkit-filter: drop-shadow(0px 10px 15px #00000080);
    filter: drop-shadow(0px 10px 15px #222);
}

.avenir-normal {
    font-family: Avenir, "Avenir Next", Arial, sans-serif;
}

/* Card click target */

.blog-card {
    position: relative;
}

.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
@media (max-width: 1023px) {
    .two-column-partial-flex-div > .two-column-partial-left-container {
        display: none;
    }

    .two-column-partial-flex-div > .two-column-partial-right-container {
        width: 100%;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */