/* Crescent brand update – header and footer (loaded on every page that uses
   includes/header.php).
   Palette: charcoal #2B2E31, silver #A8A9AB, light silver #E4E5E6, mist #EEEEEC. */

:root {
    --cr-charcoal: #2b2e31;
    --cr-silver: #a8a9ab;
    --cr-silver-light: #e4e5e6;
    --cr-mist: #eeeeec;
    --cr-body: #3d4044;
}

/* ---------- Header: charcoal bar at 84% over the hero ---------- */
.tp-header-transparent,
.header-sticky {
    background-color: rgba(43, 46, 49, 0.84);
}

.header-sticky {
    box-shadow: none;
}

.tp-header-1-ptb {
    padding: 16px 0;
}

.tp-header-1-ptb.header-sticky {
    padding: 10px 0;
}

/* Approved logo artwork (assets/img/logo.webp, 1200x781). Reduced from 84px
   on client request; the tagline stays legible at 66px. */
.tp-header-logo img {
    display: block;
    width: auto;
    height: 66px;
}

.header-sticky .tp-header-logo img,
.header-sticky img {
    width: auto;
    height: 54px;
}

/* Menu items: 32px between labels (was 82px: 15px li margin + 26px padding a side). */
.tp-main-menu > nav > ul > li {
    margin: 0;
}

.tp-main-menu .nav-link {
    padding: 20px 16px;
    font-size: 19px;
    line-height: 1.2;
}

.tp-main-menu .nav-link .underline {
    left: 16px;
    bottom: 14px;
}

.tp-main-menu .nav-link:hover .underline,
.tp-main-menu .nav-link.active .underline {
    width: calc(100% - 32px);
}

.tp-main-menu .nav-link:hover,
.tp-main-menu .nav-link.active {
    color: var(--cr-silver-light) !important;
}

.tp-main-menu .nav-link .underline {
    background-color: var(--cr-silver);
}

@media (max-width: 1399px) {
    .tp-main-menu .nav-link {
        padding: 20px 12px;
        font-size: 18px;
    }

    .tp-main-menu .nav-link .underline {
        left: 12px;
    }

    .tp-main-menu .nav-link:hover .underline,
    .tp-main-menu .nav-link.active .underline {
        width: calc(100% - 24px);
    }
}

@media (max-width: 1199px) {
    .tp-header-logo img,
    .header-sticky .tp-header-logo img {
        height: 50px;
    }
}

/* ---------- Site background: light Crescent mnemonic pattern ---------- */
/* Pyramid outline traced from assets/img/crescent-logo-dark.png; kept very
   faint so it reads as texture behind content. */
:root {
    --cr-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='%232b2e31'%3E%3Cpath d='M10.25 0 0 15.5 10.25 19.4z' fill-opacity='.012'/%3E%3Cpath d='M10.25 0 20.5 15.5 10.25 19.4z' fill-opacity='.028'/%3E%3Cpath d='M58.25 42 48 57.5 58.25 61.4z' fill-opacity='.012'/%3E%3Cpath d='M58.25 42 68.5 57.5 58.25 61.4z' fill-opacity='.028'/%3E%3C/g%3E%3C/svg%3E");
}

body {
    background-color: #fff;
}

/* The pattern sits on a fixed layer, so it stays still while the page
   scrolls over it (a pseudo-element because iOS ignores
   background-attachment: fixed). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--cr-pattern);
    background-position: 8px 6px;
    pointer-events: none;
}

/* Full-width sections that used to paint solid white/off-white over the
   pattern. They stay transparent so it runs unbroken down every page; cards
   and overlays inside them keep their own white backgrounds. The `body`
   prefix outranks the per-page <style> blocks, which load after this file. */
body .cb,
body .cu-main,
body .odc-page,
body .odc-intro,
body .odc-amenities,
body .odc-location,
body .projects-gallery-section,
body .cr-about-section,
body .cp-intro,
body .career-intro,
body .cr-press {
    background: transparent;
}

/* The project pages' own grid texture would compete with the pattern. */
body .odc-page::before {
    content: none;
}

/* ---------- Project images: always shown whole, never cropped ----------
   Where the frame can follow the photo, the photo sets its own height;
   where a fixed frame keeps a grid even, the photo is fitted inside it.
   Hover zooms are switched off because they crop the edges. */

/* Project page hero (video or image at the top): it carries no text, so it
   takes the media's own shape instead of filling the screen, and starts
   below the header (98px, 82px under 1200px) so the building's top is
   never hidden behind it. */
body .odc-hero {
    display: block;
    min-height: 0;
    padding-top: 98px;
}

body .odc-hero__media {
    position: relative;
    inset: auto;
}

body .odc-hero__media video,
body .odc-hero__media img {
    height: auto;
    object-fit: initial;
}

body .odc-hero__media img.cr-reveal {
    scale: 1;
}

/* A portrait (9:16) logo film, e.g. WTC Goregaon: shown in the same 16:9 frame
   as the other project heroes, cropped to its centre where the logo sits. At
   its natural height it made the hero ~4.5 screens tall. */
body .odc-hero__media video.odc-hero__video--portrait {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 42%;
}

@media (max-width: 1199px) {
    body .odc-hero {
        padding-top: 82px;
    }
}

/* Project pages: the light sections (intro, amenities, location...) used to
   alternate paper and cream; now that they are all transparent over the
   pattern, two of them in a row run together. A divider marks the edge
   between them: a thin light rule, like the one under "Get in touch" (title block, intro,
   amenities, gallery, location, contact block, disclaimer). Edges
   next to the dark hero and specs sections need none. `~` rather than `+`:
   the contact block brings a <style> tag in front of its section. */
body .odc-page > :where(section:not(.odc-hero, .odc-specs)) ~ :where(section:not(.odc-hero, .odc-specs)) {
    position: relative;
}

body .odc-page > :where(section:not(.odc-hero, .odc-specs)) ~ :where(section:not(.odc-hero, .odc-specs))::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    pointer-events: none;
}

body .odc-page > :where(section:not(.odc-hero, .odc-specs)) ~ :where(section:not(.odc-hero, .odc-specs))::before {
    width: min(1540px, calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: #e2e3e4;
}

body .odc-page > .odc-specs + section::before {
    content: none;
}

/* Project page intro image (beside "The Landmark" text) */
body .odc-visual {
    align-self: center;
    min-height: 0;
    background: transparent;
}

body .odc-visual img,
body .odc-visual:hover img {
    display: block;
    height: auto;
    min-height: 0;
    object-fit: initial;
    opacity: 1;
    transform: none;
}

/* Project gallery (e.g. WTC Marol) */
body .odc-gallery__grid {
    align-items: start;
}

body .odc-gallery__item img {
    height: auto;
    aspect-ratio: auto;
    object-fit: initial;
}

/* Listing cards (Projects, Residential, Commercial, Upcoming) */
body .project-card-image {
    background: transparent;
}

/* Every render fills the same 4:5 frame on every screen size. The card images
   are portrait files close to 4:5, so cover only trims a sliver of sky or
   side margin and never the building. */
body .project-card-image img,
body .luxury-card:hover .project-card-image img {
    object-fit: cover;
    object-position: center;
    transform: none;
}

body .project-card-image--logo img,
body .luxury-card:hover .project-card-image--logo img {
    object-fit: contain;
}

/* Scroll reveal (site-enhancements.css): keep the curtain wipe but skip its
   115% entrance zoom and 3% hover zoom, both of which trim the edges. */
body .odc-visual img.cr-reveal,
body .odc-visual img.cr-reveal.is-done:hover,
body .odc-gallery__item img.cr-reveal,
body .odc-gallery__item img.cr-reveal.is-done:hover,
body .project-card-image img.cr-reveal,
body .project-card-image img.cr-reveal.is-done:hover {
    scale: 1;
}

body .odc-visual img.cr-reveal.is-done:hover,
body .odc-gallery__item img.cr-reveal.is-done:hover,
body .project-card-image img.cr-reveal.is-done:hover {
    clip-path: inset(0 0 0 0);
}

/* ---------- Footer: brand charcoal ---------- */
.cr-footer {
    padding: 90px 0 0;
    background: var(--cr-charcoal);
    color: rgba(255, 255, 255, 0.78);
}

.cr-footer__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 60px;
}

.cr-footer__brand img {
    display: block;
    width: 180px;
    height: auto;
}

.cr-footer__col h3 {
    margin: 0 0 22px;
    color: var(--cr-silver);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cr-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-footer__col li {
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.cr-footer__col a {
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.25s ease;
}

.cr-footer__col a:hover {
    color: #fff;
}

.cr-footer__col--contact a {
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.cr-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 0 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cr-footer__bar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
}

.cr-footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-footer__social span {
    margin-right: 6px;
    color: var(--cr-silver);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cr-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #fff;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cr-footer__social a svg {
    width: 18px;
    height: 18px;
}

.cr-footer__social a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--cr-charcoal);
}

@media (max-width: 991px) {
    .cr-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
}

/* Phones: the Call / WhatsApp / Visit bar (58px, site-enhancements.css) is
   fixed to the bottom and covered the social icons. body's padding-bottom
   doesn't help inside ScrollSmoother, so leave the room in the footer itself. */
@media (max-width: 767px) {
    .cr-footer__bar {
        padding-bottom: calc(34px + 58px + env(safe-area-inset-bottom));
    }

    /* "Follow us" on its own line and the icons kept clear of the
       back-to-top button's column on the right. */
    .cr-footer__social {
        flex-wrap: wrap;
        padding-right: 64px;
    }

    .cr-footer__social span {
        flex-basis: 100%;
    }
}

/* Touch tablets get the same bottom bar (site-enhancements.css). */
@media (min-width: 768px) and (max-width: 1199px) and (hover: none) {
    .cr-footer__bar {
        padding-bottom: calc(34px + 58px + env(safe-area-inset-bottom));
    }

    .cr-footer__social {
        padding-right: 40px;
    }
}

@media (max-width: 575px) {
    .cr-footer {
        padding-top: 60px;
    }

    .cr-footer__grid {
        grid-template-columns: 1fr;
    }

    .cr-footer__bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Floating quick actions: same 44px circles, same right edge as back-to-top ---------- */
@media (min-width: 768px) {
    .cr-sticky {
        right: 10px;
        align-items: flex-end;
    }

    .cr-sticky__btn {
        box-sizing: border-box;
        justify-content: center;
        height: 44px;
        min-width: 44px;
        padding: 0 12px;
    }

    .back-to-top-btn {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* Back-to-top: same shade as the Call / WhatsApp / Visit circles above it. */
.back-to-top-btn {
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(24, 24, 24, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}