/* ==========================================================================
   property03 — Editorial homepage redesign
   Loaded from property03/layout/includes/stylesheet.blade.php, after
   master.css/color.css so it wins the cascade without needing !important
   everywhere. Scoped under body.p03 so it never leaks into other themes.
   Brand accent is always var(--main-color) (config('company.theme_color')),
   never a hardcoded hex, so every tenant sees their own brand color.
   ========================================================================== */

:root {
    --p03-ink: #1e1b18;
    --p03-ink-soft: #6a6058;
    --p03-surface: #ffffff;
    --p03-surface-alt: #f7f3ec;
    --p03-border: #e9e2d6;
    --p03-radius-sm: 8px;
    --p03-radius-md: 16px;
    --p03-radius-lg: 24px;
    --p03-radius-pill: 999px;
    --p03-shadow-sm: 0 4px 14px rgba(30, 27, 24, .06);
    --p03-shadow-md: 0 14px 34px rgba(30, 27, 24, .10);
    --p03-shadow-lg: 0 24px 64px rgba(30, 27, 24, .18);
    --p03-ease: 260ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base / typography ----
   bootstrap.min.css (BS3, @imported by master.css, shared by every other
   theme so it can't be edited directly) sets html{font-size:10px} — every
   rem value in this file, and everywhere else on the page, has been
   computing off that 10px root instead of the browser's normal 16px (1rem
   was rendering as 10px, not 16px). property03.css loads after master.css,
   so this plain `html` rule (not class-scoped, since <html> itself never
   carries .p03 — but this whole file only ever loads on property03 pages)
   wins the cascade and resets the root back to a normal 16px, without
   touching bootstrap.min.css itself. */
html {
    font-size: 16px;
}
/* Instrument Sans everywhere: style.css (shared, @imported by master.css)
   sets body{font-family:'Roboto'} and h2/h3/h4{font-family:'Poppins'},
   and Bootstrap 5's own CDN stylesheet sets body{font-family:
   var(--bs-font-sans-serif)} — a system-font stack that names "Segoe UI"
   explicitly. BS5 loads after style.css, so its Segoe UI stack was
   already winning for body text; property03.css loads last, so setting
   it on .p03 (body text, inherits down) and again explicitly on the
   headings (beats style.css's more specific h2/h3/h4 rule) covers both. */
.p03 {
    background: var(--p03-surface);
    color: var(--p03-ink);
    font-family: 'Instrument Sans', 'Open Sans', sans-serif;
}
.p03 h1, .p03 h2, .p03 h3, .p03 h4, .p03 h5 {
    color: var(--p03-ink);
    text-transform: none !important;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    font-family: 'Instrument Sans', 'Open Sans', sans-serif;
}
.p03 h2 {
    font-size: clamp(1.09rem, 3.2vw, 1.72rem);
}
.p03 .color_red {
    color: var(--main-color) !important;
}
.p03 p {
    color: #000;
    /* color: var(--p03-ink-soft); */
    line-height: 1.65;
    font-weight: 600 !important;
}
.p03 a {
    transition: color var(--p03-ease);
}
.p03 .line_1, .p03 .line_2, .p03 .line_3,
.p03 .line1, .p03 .line2 {
    background: var(--main-color) !important;
}
.p03 .bg_light {
    background: var(--p03-surface-alt) !important;
}
.p03 section.padding,
.p03 section.padding_top,
.p03 section.padding_bottom {
    padding-top: 200px;
    padding-bottom: 200px;
}
@media (max-width: 767px) {
    .p03 section.padding,
    .p03 section.padding_top,
    .p03 section.padding_bottom {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* ---- Buttons ---- */
.p03 .btn_fill {
    background: var(--main-color);
    border: none;
    color: #fff;
    border-radius: var(--p03-radius-pill);
    padding: 22px 30px !important;
    font-weight: 600;
    text-transform: none;
    box-shadow: var(--p03-shadow-sm);
    transition: transform var(--p03-ease), box-shadow var(--p03-ease), filter var(--p03-ease);
    height: auto !important;
}
.p03 .btn_fill:hover,
.p03 .btn_fill:focus {
    color: #fff;
    filter: brightness(.92);
    transform: translateY(-2px);
    box-shadow: var(--p03-shadow-md);
}
.p03 .btn-main {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.p03 .btn-main:hover,
.p03 .btn-main:focus {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    filter: brightness(.92);
}
.p03 .hero-caption-cta-ghost {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .7) !important;
    margin-left: 12px;
}
.p03 .hero-caption-cta-ghost:hover {
    background: rgba(255, 255, 255, .12) !important;
}

/* ---- Maps page ---- */
.p03 .p03-map-card {
    background: var(--p03-surface);
    border: 1px solid var(--p03-border);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(30, 27, 24, .05);
    transition: transform var(--p03-ease), box-shadow var(--p03-ease);
    height: 100%;
}
.p03 .p03-map-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(30, 27, 24, .09);
}
.p03 .p03-map-card-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--p03-surface-alt);
}
.p03 .p03-map-card-media img,
.p03 .p03-map-card-media canvas.js-pdf-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p03 .p03-map-card-pdf-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--p03-radius-pill);
    background: rgba(30, 27, 24, .72);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.p03 .p03-map-card-body {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.p03 .p03-map-card-body h4 {
    font-size: 1rem;
    margin: 0;
}

/* ---- Search widgets ---- */
.p03 .single-query {
    margin-bottom: 14px;
}
.p03 .single-query .keyword-input,
.p03 .single-query input[type="text"] {
    height: 50px;
    padding: 0 16px;
    background: var(--p03-surface);
    border: 1.5px solid var(--p03-ink-soft);
    border-radius: var(--p03-radius-sm);
    color: var(--p03-ink);
    font-size: .75rem;
    font-weight: 500;
}
.p03 .single-query .keyword-input::placeholder,
.p03 .single-query input[type="text"]::placeholder {
    color: var(--p03-ink-soft);
    opacity: 1;
}
.p03 .single-query .keyword-input:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(30, 27, 24, .08);
}
.p03 .single-query select,
.p03 .single-query .bootstrap-select .dropdown-toggle {
    height: 50px !important;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--p03-ink-soft) !important;
    border-radius: var(--p03-radius-sm) !important;
    background: var(--p03-surface) !important;
    font-size: .75rem !important;
    font-weight: 500;
    color: var(--p03-ink) !important;
}
.p03 .single-query .bootstrap-select .filter-option-inner-inner {
    color: var(--p03-ink) !important;
    font-size: .75rem;
}
.p03 .single-query .bootstrap-select {
    width: 100% !important;
}
.p03 .query-submit-button .btn_fill {
    width: 100%;
    padding: 14px 20px !important;
    font-size: .75rem;
}
/* Catch-all so every bit of text inside the hero search box — including
   anything not covered by the more specific rules above — stays a
   consistent size (was tuned to look like ~1.5rem before the html
   font-size fix above; .94rem now renders at that same actual size
   against the corrected 16px root). */
.p03 #hero-search-bar .search_2,
.p03 #hero-search-bar .search_2 * {
    font-size: .94rem;
}
.p03 #hero-search-bar {
    background: transparent !important;
    margin-top: -60px;
    margin-bottom: 30px;
    position: relative;
    z-index: 5;
}
.p03 #hero-search-bar .search_2 {
    background: var(--p03-surface) !important;
    border-radius: var(--p03-radius-lg) !important;
    box-shadow: var(--p03-shadow-lg);
    max-width: 1140px;
    margin: 0 auto;
    /* .search_2_set (style.css) pads only the top, leaving the last row
       of fields/buttons sitting on the bottom border. */
    padding-bottom: 20px;
}

/* ---- Header / nav — standard Bootstrap 5 navbar (navbar-expand-lg /
   navbar-toggler / navbar-collapse / navbar-nav / nav-item / nav-link /
   dropdown, see topbar.blade.php). Single minimal row, logo left, links
   right, always solid white, fixed over the hero on the homepage. Earlier
   this theme used bootsnav's markup with a couple of Bootstrap-5 attributes
   bolted on, which is what caused the flicker/jumping/collapsed-at-desktop
   bugs — bootsnav.js is no longer loaded for property03 at all, and this
   nav is plain, unmodified Bootstrap 5 underneath. */
.p03 .p03-nav {
    position: relative;
    /* Was z-index:1. Every non-home page's hero (.page-title.page-main-section,
    style.css) sets background-attachment:fixed !important, which Chromium
    promotes to its own compositing layer - that layer was painting over
    this nav's Properties mega-dropdown (a descendant, so its own z-index:1000
    only wins inside .p03-nav's stacking context, not against a sibling
    section rendered in a fixed-background compositing layer). 1051 clears
    Bootstrap 5's own dropdown/navbar z-index range (1000-1030) so the nav's
    whole stacking context - dropdown included - reliably paints on top,
    regardless of that layer promotion. Only the home page's hero (a
    different markup, no page-main-section/parallaxie) was unaffected. */
    z-index: 1051;
    background: var(--p03-surface) !important;
    box-shadow: var(--p03-shadow-sm);
    padding: 14px 0;
    font-family: 'Instrument Sans', 'Open Sans', sans-serif;
}
.p03 .p03-nav .navbar-brand {
    padding: 0;
    margin: 0;
}
.p03 .p03-nav .navbar-brand .logo {
    display: block;
    max-height: 60px;
    width: auto;
}
.p03 .p03-nav .navbar-nav .nav-link {
    color: var(--p03-ink);
    font-weight: 500;
    font-size: .94rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding-top: .31rem;
    padding-bottom: .31rem;
    padding-left: .625rem;
    padding-right: .625rem;
    white-space: nowrap;
}
.p03 .p03-nav .navbar-nav .nav-link:hover,
.p03 .p03-nav .navbar-nav .nav-link:focus,
.p03 .p03-nav .navbar-nav .nav-link.active {
    color: var(--main-color);
}
.p03 .p03-nav .navbar-toggler {
    border-color: var(--p03-border);
    padding: .22rem .375rem;
}
.p03 .p03-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(20, 24, 31, .08);
}

/* "Saved" nav item — Bootstrap badge/rounded-pill instead of a plain link,
   filled with the tenant's own brand color. */
.p03 .p03-nav .navbar-nav .nav-link.p03-saved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--main-color);
    color: #fff;
    font-size: .94rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: .25rem .53rem;
    transition: filter var(--p03-ease), transform var(--p03-ease);
}
.p03 .p03-nav .navbar-nav .nav-link.p03-saved-badge:hover,
.p03 .p03-nav .navbar-nav .nav-link.p03-saved-badge:focus {
    color: #fff;
    filter: brightness(.92);
    transform: translateY(-1px);
}

/* "Properties" mega-menu — standard BS5 dropdown. "data-bs-display=static"
   (set in topbar.blade.php) tells Bootstrap to skip Popper's dynamic JS
   positioning, meant for small anchored menus, so plain CSS can position
   the full-width panel instead — Bootstrap's own documented pattern for
   mega menus. */
.p03 .p03-nav .p03-mega {
    position: static;
}
.p03 .p03-nav .p03-mega-panel {
    left: 0;
    right: 0;
    margin-top: 0;
    border: none;
    border-radius: 0 0 var(--p03-radius-lg) var(--p03-radius-lg);
    box-shadow: var(--p03-shadow-lg);
    padding: 28px;
}
.p03 .p03-mega-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--p03-ink-soft);
    margin-bottom: 14px;
}
.p03 .p03-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.p03 .p03-mega-list li {
    margin-bottom: 10px;
}
.p03 .p03-mega-list a {
    color: var(--p03-ink);
    font-size: .94rem;
    text-decoration: none;
}
.p03 .p03-mega-list a:hover {
    color: var(--main-color);
    text-decoration: none;
}
/* style.css's #nav_slider rule only whitens the title link on :hover/:focus
   (`#nav_slider .item h4:hover a, #nav_slider .item h4:focus a`) - the link's
   own default state was never covered, so it fell back to the browser's
   default blue + underline until you actually hovered it. */
.p03 #nav_slider .item h4 a,
.p03 #nav_slider .item h4 a:hover,
.p03 #nav_slider .item h4 a:focus {
    color: #fff;
    text-decoration: none;
}

/* ---- Hero — single static image, no carousel/auto-rotation. A big bold
   heading (the DB banner title) sits on a light sky-gradient background,
   with the property photo inset below it (not full-bleed) and fading into
   the page at its base — matching the reference layout where the text sits
   on the atmosphere layer above a contained photo, not stamped on top of a
   full-bleed image. ---- */
.p03 .p03-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding-top: 110px;
}
.p03 .p03-hero-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
}
.p03 .p03-hero-copy {
    position: relative;
    z-index: 0;
    /* max-width: 900px; */
    margin: 0 auto;
    padding-bottom: 48px;
}
.p03 .p03-hero-title {
    color: var(--p03-ink);
    font-size: clamp(1.56rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(255, 255, 255, .6);
}
.p03 .p03-hero-sub {
    color: var(--p03-ink-soft);
    font-size: .75rem;
    max-width: 620px;
    margin: 22px auto 32px;
}
.p03 .p03-hero-media {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}
.p03 .p03-hero-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    will-change: transform;
}
/* cloud.png/smoke.png (public/assets/images/property03/) are real photos
   with no alpha transparency — screen blend-mode is what turns their
   light/white texture into a soft haze over the layers beneath instead of
   a solid white bar sitting on top. Anchored to the bottom of the inset
   photo, which is where the reference's fog-blend effect sits.
   will-change on both these and .p03-hero-img hints the browser to
   composite them on their own GPU layer, since the inline scroll script
   (see banners.blade.php) updates their transform/opacity every frame. */
.p03 .p03-hero-fog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}
.p03 .p03-hero-smoke {
    z-index: 2;
    opacity: .85;
}
.p03 .p03-hero-cloud-img {
    z-index: 3;
    /* Starts hidden so there's no flash of full opacity before
       GSAP/ScrollTrigger (banners.blade.php) takes over and animates this
       up to 1 as it scrolls into view. */
    opacity: 0;
}
/* Final fade so the composited image still dissolves into the page
   background rather than ending on a hard edge. */
.p03 .p03-hero-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    z-index: 4;
    background: linear-gradient(180deg, transparent 0%, var(--p03-surface) 92%);
    pointer-events: none;
}

/* ---- Trust compass (welcomenote.blade.php) — 4 boxes around a central
   "Our Promise" hub, connected by dashed lines. Replaced the earlier
   trust-bar version of this section (that CSS is gone, nothing
   references it anymore). Colors/fonts mapped onto property03's own
   tokens (--main-color, --p03-ink, etc.) and existing font stack, rather
   than the supplied design's own pine/gold palette/Google Fonts, so it
   stays on-brand per tenant and doesn't pull in an extra font family.
   Labels are the existing dynamic
   helpline/professionals/guarantee/inspection fields; "Our Promise" and
   the "d" captions have no corresponding CMS field, so they're fixed
   copy from the supplied design. The dimmed accent (dashed connector
   lines, icon-ring border at rest) uses color-mix() since
   var(--main-color) is an arbitrary per-tenant hex with no fixed RGB
   channels to build an rgba() from — an unsupported color-mix() just
   leaves that border/line colorless, no layout break. px values
   converted 1:1 to rem (16px root) — the supplied design is a fresh
   standalone page, not affected by this file's earlier 10px/16px
   root-font-size fix. */
.p03-compass {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 64px 1fr 64px 1fr;
    grid-template-rows: auto 64px auto 64px auto;
    align-items: center;
}
.p03-compass-box {
    background: var(--main-color);
    color: #fff;
    border-radius: 10px;
    border: 1.5px solid var(--main-color);
    padding: 34px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    /* transform is GSAP's (main-compass-property03.js) — hover lift/scale
       and the scroll-in entrance both animate it; CSS only owns
       border-color/filter here so the two never fight over the same
       property. */
    transition: border-color .3s ease, filter .3s ease;
}
.p03-compass-box:hover {
    border-color: rgba(255, 255, 255, .7);
    filter: brightness(1.08);
}
.p03-compass-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.6px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .3s ease;
}
.p03-compass-box:hover .p03-compass-ring {
    border-color: rgba(255, 255, 255, .9);
}
.p03-compass-ring svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.p03-compass-t {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .01em;
}
.p03-compass-d {
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
    max-width: 210px;
}
.p03-compass-box.top { grid-column: 3 / 4; grid-row: 1 / 2; }
.p03-compass-box.left { grid-column: 1 / 2; grid-row: 3 / 4; }
.p03-compass-box.right { grid-column: 5 / 6; grid-row: 3 / 4; }
.p03-compass-box.bottom { grid-column: 3 / 4; grid-row: 5 / 6; }
.p03-compass-connector {
    position: relative;
    height: 100%;
    width: 100%;
}
.p03-compass-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--main-color);
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
    left: 50%;
}
.p03-compass-connector.v {
    grid-column: 3 / 4;
    border-left: 2px dashed color-mix(in srgb, var(--main-color) 45%, transparent);
    justify-self: center;
    width: 0;
}
.p03-compass-connector.v.top { grid-row: 2 / 3; }
.p03-compass-connector.v.bottom { grid-row: 4 / 5; }
.p03-compass-connector.h {
    grid-row: 3 / 4;
    border-top: 2px dashed color-mix(in srgb, var(--main-color) 45%, transparent);
    align-self: center;
    height: 0;
}
.p03-compass-connector.h.left { grid-column: 2 / 3; }
.p03-compass-connector.h.right { grid-column: 4 / 5; }
.p03-compass-hub {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    justify-self: center;
    align-self: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--p03-surface);
    border: 1.5px solid var(--main-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}
.p03-compass-hub::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px dashed color-mix(in srgb, var(--main-color) 45%, transparent);
    border-radius: 50%;
    animation: p03CompassSpin 34s linear infinite;
}
.p03-compass-hub svg {
    width: 28px;
    height: 28px;
    stroke: var(--p03-ink);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.p03-compass-hub span {
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--p03-ink);
    text-align: center;
    line-height: 1.3;
}
@keyframes p03CompassSpin {
    to { transform: rotate(360deg); }
}
@media (max-width: 860px) {
    .p03-compass {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 20px auto 20px auto;
        gap: 16px 20px;
    }
    .p03-compass-connector {
        display: none;
    }
    .p03-compass-hub {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        width: 100%;
        height: auto;
        border-radius: 12px;
        flex-direction: row;
        gap: 12px;
        padding: 14px 20px;
        justify-self: stretch;
    }
    .p03-compass-hub::before {
        display: none;
    }
    .p03-compass-box.top { grid-column: 1 / 2; grid-row: 3 / 4; }
    .p03-compass-box.right { grid-column: 2 / 3; grid-row: 3 / 4; }
    .p03-compass-box.left { grid-column: 1 / 2; grid-row: 5 / 6; }
    .p03-compass-box.bottom { grid-column: 2 / 3; grid-row: 5 / 6; }
}
@media (max-width: 520px) {
    .p03-compass {
        grid-template-columns: 1fr;
    }
    .p03-compass-hub { grid-column: 1 / 2; }
    .p03-compass-box.top,
    .p03-compass-box.right,
    .p03-compass-box.left,
    .p03-compass-box.bottom {
        grid-column: 1 / 2;
    }
    .p03-compass-box.top { grid-row: 2 / 3; }
    .p03-compass-box.right { grid-row: 3 / 4; }
    .p03-compass-box.left { grid-row: 4 / 5; }
    .p03-compass-box.bottom { grid-row: 5 / 6; }
}
@media (prefers-reduced-motion: reduce) {
    .p03-compass-hub::before {
        animation: none;
    }
    .p03-compass-box {
        transition: none;
    }
}

/* ---- GSAP ScrollTrigger blind reveal — generic marker classes reused
   across the site: property cards (properties/includes/property-card.blade.php,
   so every listing/slider using that partial gets this automatically),
   agent cards (agents/index.blade.php, agents/detail.blade.php), the CEO
   message photo, and the welcome section's fallback image — each
   animated independently, one ScrollTrigger per element, top-down
   (main-image-reveal-property03.js). .p03-area-reveal(-blind) is the same
   idea under separate class names — used only by
   includes/area-cards.blade.php's Swiper slides, which need one shared
   ScrollTrigger with a stagger across the row
   (main-area-cards-reveal-property03.js) rather than each slide
   triggering on its own — but its own visual treatment: white blind,
   left-to-right (transform-origin:right, scaleX, so the covered band
   shrinks away to the right and the reveal reads left-to-right), not the
   sitewide top-down one. Kept as separate rules (not grouped together)
   specifically so this direction choice doesn't leak into the sitewide
   reveal. .p03-reveal-blind/.p03-area-reveal-blind are
   real elements (not ::before/::after) specifically so GSAP can tween
   them directly — pseudo-elements have no DOM node for GSAP to target.
   The transform values set here are the pre-JS/JS-load-failure fallback;
   each script sets the same state via gsap.set before animating, so
   there's no flash of the image on load either way. */
.p03-reveal,
.p03-area-reveal {
    position: relative;
    overflow: hidden;
}
.p03-reveal-blind {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--p03-ink);
    transform-origin: top;
    transform: scaleY(1);
    pointer-events: none;
}
.p03-area-reveal-blind {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--p03-ink);
    transform-origin: right;
    transform: scaleX(1);
    pointer-events: none;
}

/* ---- Welcome section description motif — decorative SVG behind the
   description paragraph (welcomenote.blade.php's #wellcome section),
   bled off the wrapper's left edge. Now a ::before background-image
   (data-URI SVG) on .p03-welcome-desc-wrap instead of an inline <svg> in
   the Blade file — one place to edit/reuse the motif from, rather than
   pasting the same markup into every template that wants it. Stroke
   color baked into the SVG is already the requested light blue
   (#D1EEEA), so there's nothing to set via currentColor here. */
.p03 .p03-welcome-desc-wrap {
    position: relative;
}
.p03 .p03-welcome-desc-wrap p {
    position: relative;
    z-index: 1;
}
.isolate {
    isolation: isolate;
}
.p03 .p03-welcome-desc-wrap::before {
    content: '';
    position: absolute;
    left: -30%;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='587' height='587' viewBox='0 0 587 587' fill='none'%3E %3Cg clip-path='url(%23clip0_6_95)'%3E %3Cg opacity='0.8'%3E %3Cmask id='mask0_6_95' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='587' height='587'%3E %3Cg opacity='0.8'%3E %3Cpath d='M65.4196 293.505C65.4196 167.534 167.534 65.4196 293.495 65.4196C419.455 65.4196 521.58 167.534 521.58 293.505C521.58 419.477 419.466 521.591 293.495 521.591C167.523 521.591 65.4196 419.466 65.4196 293.505ZM0 293.505C0 455.602 131.398 587 293.505 587C455.612 587 587 455.591 587 293.495C587 131.398 455.602 0 293.505 0C131.409 0 0 131.409 0 293.505Z' fill='white'/%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23mask0_6_95)'%3E %3Cpath d='M0 293.505H587' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M2.50964 331.812L584.488 255.188' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M9.99982 369.461L577.003 217.539' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M22.3442 405.816L564.657 181.184' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M39.3261 440.253L547.684 146.747' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M60.6515 472.178L526.351 114.832' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M85.9641 501.035L501.034 85.9648' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M114.831 526.349L472.178 60.6502' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M146.747 547.685L440.253 39.3264' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M181.183 564.667L405.816 22.3436' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M217.538 577.001L369.46 9.99854' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M255.188 584.49L331.812 2.5106' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M293.505 587V0' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M331.812 584.49L255.188 2.5106' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M369.46 577.001L217.538 9.99854' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M405.816 564.667L181.183 22.3436' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M440.253 547.685L146.747 39.3264' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M472.178 526.349L114.831 60.6502' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M501.034 501.035L85.9641 85.9648' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M526.351 472.178L60.6515 114.832' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M547.684 440.253L39.3261 146.747' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M564.668 405.816L22.3442 181.184' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M577.003 369.461L9.99982 217.539' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M584.488 331.812L2.50964 255.188' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3C/g%3E %3Cmask id='mask1_6_95' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='65' y='65' width='457' height='457'%3E %3Cg opacity='0.8'%3E %3Cpath d='M148.448 293.505C148.448 213.384 213.396 148.447 293.507 148.447C373.617 148.447 438.566 213.395 438.566 293.505C438.566 373.617 373.617 438.564 293.507 438.564C213.396 438.564 148.448 373.617 148.448 293.505ZM65.4315 293.505C65.4315 419.466 167.546 521.591 293.507 521.591C419.467 521.591 521.593 419.477 521.593 293.505C521.593 167.534 419.467 65.4196 293.507 65.4196C167.546 65.4196 65.4205 167.534 65.4205 293.505' fill='white'/%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23mask1_6_95)'%3E %3Cpath d='M0.657715 313.097L586.353 273.903' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M5.72357 351.152L581.288 235.849' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M15.7 388.22L571.3 198.78' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M30.4457 423.676L556.554 163.335' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M49.687 456.895L537.314 130.116' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M73.0938 487.32L513.906 99.6804' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M100.285 514.432L486.717 72.5675' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M130.774 537.763L456.227 49.2372' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M164.049 556.916L422.954 30.0949' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M199.537 571.552L387.464 15.4475' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M236.638 581.441L350.374 5.55832' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M274.702 586.397L312.297 0.602905' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M313.098 586.353L273.903 0.657715' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M351.152 581.288L235.849 5.72275' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M388.221 571.3L198.782 15.6997' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M423.675 556.554L163.335 30.4457' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M456.897 537.314L130.106 49.687' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M487.32 513.906L99.6811 73.0937' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M514.432 486.716L72.5675 100.283' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M537.763 456.226L49.2382 130.774' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M556.916 422.952L30.0949 164.048' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M571.552 387.463L15.4473 199.536' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M581.441 350.374L5.55835 236.638' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M586.398 312.297L0.603577 274.703' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3C/g%3E %3Cmask id='mask2_6_95' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='148' y='148' width='291' height='291'%3E %3Cg opacity='0.8'%3E %3Cpath d='M198.858 293.505C198.858 241.231 241.233 198.857 293.507 198.857C345.781 198.857 388.155 241.231 388.155 293.505C388.155 345.779 345.781 388.154 293.507 388.154C241.233 388.154 198.858 345.779 198.858 293.505ZM148.437 293.505C148.437 373.616 213.385 438.564 293.496 438.564C373.607 438.564 438.554 373.616 438.554 293.505C438.554 213.395 373.607 148.446 293.496 148.446C213.385 148.446 148.437 213.395 148.437 293.505Z' fill='white'/%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23mask2_6_95)'%3E %3Cpath d='M0 293.505H587' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M2.50964 331.812L584.488 255.188' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M9.99982 369.461L577.003 217.539' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M22.3442 405.816L564.657 181.184' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M39.3261 440.253L547.684 146.747' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M60.6515 472.178L526.351 114.832' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M85.9641 501.035L501.034 85.9648' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M114.831 526.349L472.178 60.6502' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M146.747 547.685L440.253 39.3264' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M181.183 564.667L405.816 22.3436' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M217.538 577.001L369.46 9.99854' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M255.188 584.49L331.812 2.5106' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M293.505 587V0' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M331.812 584.49L255.188 2.5106' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M369.46 577.001L217.538 9.99854' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M405.816 564.667L181.183 22.3436' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M440.253 547.685L146.747 39.3264' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M472.178 526.349L114.831 60.6502' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M501.034 501.035L85.9641 85.9648' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M526.351 472.178L60.6515 114.832' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M547.684 440.253L39.3261 146.747' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M564.668 405.816L22.3442 181.184' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M577.003 369.461L9.99982 217.539' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3Cpath d='M584.488 331.812L2.50964 255.188' stroke='%23D1EEEA' stroke-width='4.50713' stroke-miterlimit='10'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_6_95'%3E %3Crect width='587' height='587' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    max-width: none;
    z-index: -1;
    pointer-events: none;
}

/* ---- Section-heading eyebrow ---- */
.p03 .fs-styled.text-warning {
    display: block;
    color: var(--main-color) !important;
    font-family: inherit !important;
    font-size: .49rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---- #main_video — scale .5<->1 is animated by GSAP ScrollTrigger now
   (see welcomenote.blade.php: a single "top center" marker, direction-aware
   via onEnter/onLeaveBack), which sets the scale via inline style on its
   own tween — no CSS transition here, it would just fight GSAP's. This
   scale(.5) is only the pre-JS/JS-load-failure fallback. */
.p03 #main_video {
    width: 100%;
    transform-origin: center center;
    transform: scale(.5);
}

/* ---- Statement break (#image-text) — full-viewport pull-quote panel.
   Layer stack (bottom to top): background-image (Unsplash placeholder,
   swap for admin-panel-managed upload later) -> ::before dark gradient
   (legibility) -> ::after "blind" -> .image-text-heading. The blind is a
   solid cover that plays a one-off CSS animation on page load (no JS,
   no hover) — scaleY 1->0 from transform-origin:top, same lift-away
   technique used for the #home_icon row hover, so the photo reveals
   itself once as the page opens. Text stays visible throughout, above
   the blind, same as the #home_icon rows. */
.p03 #image-text {
    position: relative;
    overflow: hidden;
    color: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1920&q=75');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.p03 #image-text::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(20, 18, 16, .35), rgba(20, 18, 16, .7));
}
.p03 #image-text::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0d0d0c;
    transform-origin: top;
    animation: p03-blind-reveal 1100ms cubic-bezier(.65, 0, .35, 1) 300ms both;
}
@keyframes p03-blind-reveal {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}
.p03 #image-text .image-text-heading {
    position: relative;
    z-index: 2;
}
.p03 #image-text h2 {
    color: #fff;
    font-size: clamp(1.72rem, 5.5vw, 2.97rem);
    letter-spacing: -.01em;
}
.p03 #image-text h2 span {
    color: var(--main-color);
}
.p03 #image-text .link_arrow {
    border-radius: var(--p03-radius-pill);
    padding: 14px 32px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    font-size: .69rem;
    transition: background var(--p03-ease), transform var(--p03-ease);
}
.p03 #image-text .link_arrow:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}
@media (max-width: 767px) {
    .p03 #image-text {
        height: 80vh;
    }
}

/* ---- Services (For Sale / For Rent / Let Us Find / Sell Property) —
   big-type editorial rows on a full-bleed black band: numbered badge +
   paragraph on the left, the service name set huge on the right, hairline
   dividers between rows, full viewport width (the .container max-width is
   overridden below, just for this section). Markup/content unchanged —
   <i> icons are hidden in favor of a CSS-counter numbered badge, and h4/p
   are reflowed with flex `order` (both are already direct children of
   .home_feature).

   Hover: a photo is revealed behind the row like a blind lifting away —
   the image sits on the column wrapper's own background, with a solid
   ::after "blind" the same colour as the section covering it at rest and
   scaling away (transform-origin: top) on hover. That ::after lives on
   the column div (an existing wrapper, one per row) rather than on
   .home_feature itself, because .home_feature's own ::before is already
   the number badge — this way both pseudo-elements are free, one per
   host. Images are hotlinked from Unsplash as a placeholder (one per row,
   via :nth-child) — swap these for admin-panel-managed uploads later. The
   arrow is a drawn SVG (data URI) on .home_feature::after, pinned to the
   row's right edge, fading/sliding in on hover. */
.p03 #home_icon {
    background: #0d0d0c;
    padding-top: 96px;
    padding-bottom: 96px;
}
.p03 #home_icon .container {
    max-width: none;
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
}
.p03 #home_icon .row {
    display: block;
    counter-reset: p03-service;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.p03 #home_icon .row > [class*="col-"] {
    position: relative;
    overflow: hidden;
    width: 100%;
    float: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.p03 #home_icon .row > [class*="col-"]:nth-child(1) {
    background-image: linear-gradient(rgba(10, 10, 9, .6), rgba(10, 10, 9, .6)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1600&q=70');
}
.p03 #home_icon .row > [class*="col-"]:nth-child(2) {
    background-image: linear-gradient(rgba(10, 10, 9, .6), rgba(10, 10, 9, .6)), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1600&q=70');
}
.p03 #home_icon .row > [class*="col-"]:nth-child(3) {
    background-image: linear-gradient(rgba(10, 10, 9, .6), rgba(10, 10, 9, .6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=70');
}
.p03 #home_icon .row > [class*="col-"]:nth-child(4) {
    background-image: linear-gradient(rgba(10, 10, 9, .6), rgba(10, 10, 9, .6)), url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=1600&q=70');
}
.p03 #home_icon .row > [class*="col-"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0d0d0c;
    transform-origin: top;
    transition: transform 550ms cubic-bezier(.4, 0, .2, 1);
}
.p03 #home_icon .row > [class*="col-"]:hover::after {
    transform: scaleY(0);
}
.p03 #home_icon .home_feature {
    position: relative;
    z-index: 2;
    counter-increment: p03-service;
    display: flex;
    align-items: center;
    gap: 48px;
    text-align: left;
    padding: 56px 110px 56px 0;
    background: transparent;
    transition: opacity var(--p03-ease);
    height: 400px;
    text-decoration: none;
}
/* Bootstrap 3's base a:hover/a:focus rule (master.css) sets
   text-decoration:underline — that's the stray underline under the
   heading/paragraph on hover; .home_feature and its children never reset
   it back, so it was showing through. */
.p03 #home_icon .home_feature:hover,
.p03 #home_icon .home_feature:focus,
.p03 #home_icon .home_feature:visited,
.p03 #home_icon .home_feature p,
.p03 #home_icon .home_feature h4 {
    text-decoration: none;
}
.p03 #home_icon .home_feature:hover {
    opacity: 1;
    background: transparent;
}
.p03 #home_icon .home_feature i {
    display: none;
}
.p03 #home_icon .home_feature::before {
    content: counter(p03-service);
    flex: none;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #fff;
    font-size: 1.56rem;
}
.p03 #home_icon .home_feature p {
    order: 1;
    flex: 0 0 320px;
    color: rgba(255, 255, 255, .65);
    font-size: clamp(.94rem, 6vw, 1.88rem);
    margin: 0;
    line-height: clamp(1.19rem, 6vw, 2.19rem);
    font-weight: 600;
}
.p03 #home_icon .home_feature h4 {
    order: 2;
    flex: 1;
    margin: 0;
    color: #fff;
    font-size: clamp(4.38rem, 14vw, 7.5rem);
    font-weight: 700;
    line-height: 1;
    text-align: left;
}
/* Arrow icon supplied by the user (24x24 chevron-style path) — background
   doesn't support currentColor on an embedded data-URI SVG, so the fill is
   hardcoded to white instead. Pinned to the row's right edge, not tied to
   the heading text. */
.p03 #home_icon .home_feature::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3.315 10.996h16.623l-.884.707-8.084-8.135h2.526l8.261 8.337-8.286 8.337h-2.526l8.11-8.135.883.708H3.315z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
    transition: opacity var(--p03-ease), transform var(--p03-ease);
    z-index: 3;
}
.p03 #home_icon .home_feature:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 767px) {
    .p03 #home_icon .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .p03 #home_icon .home_feature {
        flex-wrap: wrap;
        gap: 16px;
        padding: 32px 24px;
    }
    .p03 #home_icon .home_feature::after {
        display: none;
    }
    .p03 #home_icon .home_feature p {
        flex: 1 1 100%;
        order: 2;
    }
    .p03 #home_icon .home_feature h4 {
        flex: 1 1 100%;
        order: 3;
        text-align: left;
        font-size: clamp(1.88rem, 14vw, 3.13rem);
    }
    .p03 #home_icon .home_feature::before {
        order: 1;
    }
}

/* ---- Photo gallery (Explore Neighbourhoods) — draggable, infinite-loop
   Swiper slider (see main-area-cards-swiper-property03.js), tall image
   tiles with overlaid captions, peeking off the right edge of the
   viewport. The heading, swiper and controls all now live inside the
   same regular .container as each other (not container-fluid), so slide
   1's left edge lines up with the heading automatically via normal block
   flow — no manual left-padding number to keep in sync.

   The right-edge "peek/cut" bleed is done with the standard
   break-out-of-container trick: .p03-area-swiper-bleed is a full-width
   child of .container, and a negative right margin equal to the gutter
   between the container's edge and the viewport's edge pulls just its
   right edge out to the viewport edge (left edge is untouched, since
   only margin-right is set). Swiper's own default overflow:hidden then
   clips slides at that boundary — that's what makes the last visible
   card cut off cleanly. Previously this used a hand-rolled padding-left
   on the swiper root instead, which isn't how Swiper expects to be
   offset — it confused Swiper's own translate math, which is what caused
   the left edge to visibly drift further left than its resting position
   while dragging. */
.p03-area-swiper-bleed {
    margin-right: calc((100vw - 100%) / -2);
}
.p03-area-swiper .swiper-wrapper {
    align-items: stretch;
}
.p03-area-swiper .swiper-slide {
    height: auto;
    width: 78%;
}
@media (min-width: 576px) {
    .p03-area-swiper .swiper-slide { width: 46%; }
}
@media (min-width: 768px) {
    .p03-area-swiper .swiper-slide { width: 32%; }
}
@media (min-width: 992px) {
    .p03-area-swiper .swiper-slide { width: 24%; }
}
.p03-area-swiper-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}
.p03-area-swiper-controls .swiper-scrollbar {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--p03-border);
    border-radius: 0;
}
.p03-area-swiper-controls .swiper-scrollbar-drag {
    background: var(--p03-ink);
    border-radius: 0;
    height: 1px;
}
.p03-area-swiper-nav {
    display: flex;
    flex: none;
    gap: 12px;
}
.p03-area-swiper-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--p03-border);
    background: var(--p03-surface);
    color: var(--p03-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--p03-ease), border-color var(--p03-ease), color var(--p03-ease);
}
.p03-area-swiper-nav button svg {
    width: 18px;
    height: 18px;
}
.p03-area-swiper-nav button:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.p03-area-swiper-nav button.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}
.p03-area-swiper-nav button.swiper-button-disabled:hover {
    background: var(--p03-surface);
    border-color: var(--p03-border);
    color: var(--p03-ink);
}
.p03 .area-card {
    position: relative;
    border-radius: var(--p03-radius-lg);
    overflow: hidden;
    box-shadow: var(--p03-shadow-sm);
    transition: transform var(--p03-ease), box-shadow var(--p03-ease);
    aspect-ratio: 3/5;
    display: flex;
    align-items: flex-end;
}
/* Image zoom-on-hover via transform:scale on a ::before layer, not the
   card itself — .area-card's own background-image (set inline per area)
   is only the fallback/base paint; this pseudo sits on top of it and is
   what actually scales. background-image:inherit pulls that same inline
   url from the parent, so no Blade change is needed. overflow:hidden on
   the card clips the zoomed image to the card's unchanged box size. */
.p03 .area-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--p03-ease);
    z-index: 0;
}
.p03 .area-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--p03-shadow-md);
}
.p03 .area-card:hover::before {
    transform: scale(1.12);
}
.p03 .area-card-overlay,
.p03 .area-card-body {
    position: relative;
    z-index: 1;
}
.p03 .area-card-overlay {
    background: linear-gradient(180deg, transparent 35%, rgba(20, 18, 16, .82) 100%);
}
.p03 .area-card-body h3 {
    color: #fff;
    font-size: 1.25rem;
    text-shadow: 3px 3px 10px #000;
}
.p03 .area-card-body p {
    color: rgba(255, 255, 255, .82);
    text-shadow: 3px 3px 10px #000;
}
/* ---- Property cards (properties/includes/property-card.blade.php) ---- */
.p03 .property-card {
    border-radius: var(--p03-radius-lg);
    box-shadow: var(--p03-shadow-sm);
    transition: transform var(--p03-ease), box-shadow var(--p03-ease);
    overflow: hidden;
}
.p03 .property-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--p03-shadow-md);
}
.p03 .property-card-image {
    overflow: hidden;
}
.p03 .property-card-img {
    transition: transform 420ms var(--p03-ease);
}
.p03 .property-card:hover .property-card-img {
    transform: scale(1.08);
}
.p03 .property-card-badge,
.p03 .property-badge-purpose.is-sale,
.p03 .property-badge-purpose.is-rent {
    background: var(--main-color) !important;
    border-radius: var(--p03-radius-pill) !important;
}
.p03 .property-badge-price {
    background: rgba(20, 18, 16, .78) !important;
    border-radius: var(--p03-radius-pill) !important;
}
.p03 .property-card-title a {
    color: var(--p03-ink);
    font-weight: 700;
}
.p03 .property-card-meta {
    background: var(--p03-surface-alt);
    border-radius: var(--p03-radius-sm);
}
/* Square corners for this section only (#agent-p-2, "Recent Properties")
   — .property-card is a shared component used on the properties listing
   page etc., so this is scoped to #agent-p-2 rather than edited globally.
   Badges/meta chip keep their pill shape; this only squares the card
   itself and its image. */
#agent-p-2 .property-card,
#agent-p-2 .property-card-image {
    border-radius: 0;
}

/* ---- "Recent Properties" slider (#agent-p-2) — same draggable,
   infinite-loop Swiper technique as includes/area-cards.blade.php (see
   that section's comment above for how the bleed/clip trick works); kept
   as its own separate class names rather than reusing .p03-area-swiper-*
   so the two Swiper instances' controls can never end up cross-wired. ---- */
.p03-recent-swiper-bleed {
    margin-right: calc((100vw - 100%) / -2);
}
.p03-recent-swiper .swiper-wrapper {
    align-items: stretch;
}
.p03-recent-swiper .swiper-slide {
    height: auto;
    width: 82%;
}
@media (min-width: 576px) {
    .p03-recent-swiper .swiper-slide { width: 52%; }
}
@media (min-width: 768px) {
    .p03-recent-swiper .swiper-slide { width: 36%; }
}
@media (min-width: 992px) {
    .p03-recent-swiper .swiper-slide { width: 27%; }
}
.p03-recent-swiper-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}
.p03-recent-swiper-controls .swiper-scrollbar {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--p03-border);
    border-radius: 0;
}
.p03-recent-swiper-controls .swiper-scrollbar-drag {
    background: var(--p03-ink);
    border-radius: 0;
    height: 1px;
}
.p03-recent-swiper-nav {
    display: flex;
    flex: none;
    gap: 12px;
}
.p03-recent-swiper-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--p03-border);
    background: var(--p03-surface);
    color: var(--p03-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--p03-ease), border-color var(--p03-ease), color var(--p03-ease);
}
.p03-recent-swiper-nav button svg {
    width: 18px;
    height: 18px;
}
.p03-recent-swiper-nav button:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

/* ---- Stats counter — full-bleed photo behind a hover-retracting blind
   (same technique as #home_icon/#image-text): the photo is the section's
   own background, a solid ::before "blind" covers it at rest and scales
   away (transform-origin:top) on hover, revealing the photo underneath.
   Numbers/labels stay above the blind throughout (z-index), so they're
   always readable, on top of a dark scrim baked into the background for
   contrast either way. The Unsplash photo below is only the
   default: a photo uploaded in Panel > Appearance > Customization > Home
   stats ("Background Image") replaces it via an inline style
   (home-stats-counter.blade.php). */
.p03 .home-stats-counter {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(rgba(10, 10, 9, .78), rgba(10, 10, 9, .78)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=75');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.p03 .home-stats-counter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--p03-ink);
    transform-origin: top;
    transition: transform 650ms cubic-bezier(.4, 0, .2, 1);
}
.p03 .home-stats-counter:hover::before {
    transform: scaleY(0);
}
.p03 .home-stats-counter .container {
    position: relative;
    z-index: 1;
}
.p03-stats-eyebrow {
    text-align: center;
    color: var(--main-color);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: 24px;
}
.p03-stats-item {
    padding: 20px 0;
    position: relative;
}
.p03-stats-item:first-child::after {
    content: '';
    position: absolute;
    top: 15%;
    bottom: 15%;
    right: 0;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}
@media (max-width: 767px) {
    .p03-stats-item:first-child::after {
        display: none;
    }
}
.p03 .home-stats-counter h2 {
    color: #fff;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
}
/* Plain var(--main-color) read poorly here — a mid-tone brand blue
   against the dark photo background lacks contrast. Lightened via
   color-mix (keeps the brand hue instead of dropping to plain white) plus
   a tight dark text-shadow for edge definition against the busy photo. */
.p03 .home-stats-counter h2 span {
    color: color-mix(in srgb, var(--main-color) 65%, white 35%);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.p03 .home-stats-counter p {
    color: rgba(255, 255, 255, .7);
    letter-spacing: .1em;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ---- Contact strip (includes/contact.blade.php) — two columns: a
   big-font info list (left) and a Google Maps embed (right, plain iframe
   from company.lat_lng — no API key needed, unlike
   home/contact-us.blade.php's JS-driven GMaps widget). Map column is
   omitted entirely by the Blade @if when the company has no coordinates
   set, rather than showing an empty/broken embed. Replaces the old
   cramped 3-column centered icon-stack layout. */
.p03 #contact .container {
    padding: 0;
}
.p03-contact-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.p03-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
}
.p03-contact-item i {
    font-size: 2.75rem;
    color: #fff;
    flex: none;
    line-height: 1;
}
.p03-contact-item h4 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}
.p03-contact-item p {
    color: rgba(255, 255, 255, .85);
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.4;
}
.p03-contact-item a {
    color: rgba(255, 255, 255, .85);
    transition: color var(--p03-ease);
}
.p03-contact-item a:hover {
    color: #fff;
}
/* Row bleeds to the viewport's right edge (same break-out-of-container
   trick as the area-cards/recent-properties/experts sliders) so the map
   — the row's right-hand column — reaches the browser's right side
   flush. Desktop (md+) only: at mobile widths the columns stack to
   100%, and bleeding there would push the info column's text past the
   viewport edge too. */
.p03-contact-row-bleed {
    margin-right: calc((100vw - 100%) / -2);
}
@media (max-width: 767px) {
    .p03-contact-row-bleed {
        margin-right: 0;
    }
}
.p03-contact-map {
    /* Right corners squared off — rounded corners would look wrong
       flush against the browser edge. */

    position: relative;
    overflow: hidden;
    box-shadow: var(--p03-shadow-lg);
    height: 420px;
}
.p03-contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* The embedded Google Map otherwise grabs the mouse wheel the moment the
   cursor passes over it, stopping the page from scrolling any further -
   this transparent overlay absorbs the wheel/touch events instead (a plain
   div has no scrollable content, so the page keeps scrolling normally
   through it) until the visitor deliberately clicks to interact with the
   map, matching the standard "click to activate embedded map" pattern. */
.p03-contact-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}
@media (max-width: 767px) {
    .p03-contact-map {
        border-radius: var(--p03-radius-lg);
        height: 280px;
        margin-top: 40px;
    }
}

/* ---- Team / experts ---- */
.p03 .team-member {
    border-radius: 0;
    overflow: hidden;
}
.p03 .team-title h3 {
    font-size: 1.5rem;
}
.p03 .team-title span {
    color: var(--main-color);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

.team-member, .team-member .team-img { 
    background:  url(../images/user.gif) center center no-repeat !important;
    height: 450px;
}
/* ---- "Our experts" slider — same draggable, infinite-loop Swiper
   technique as includes/area-cards.blade.php / includes/recent-properties.blade.php
   (see area-cards' comment above for how the bleed/clip trick works);
   kept as its own separate class names so this Swiper instance's
   controls can't end up cross-wired with either of the others. ---- */
.p03-experts-swiper-bleed {
    margin-right: calc((100vw - 100%) / -2);
}
.p03-experts-swiper .swiper-wrapper {
    align-items: stretch;
}
.p03-experts-swiper .swiper-slide {
    height: auto;
    width: 78%;
}
@media (min-width: 576px) {
    .p03-experts-swiper .swiper-slide { width: 46%; }
}
@media (min-width: 768px) {
    .p03-experts-swiper .swiper-slide { width: 34%; }
}
@media (min-width: 992px) {
    .p03-experts-swiper .swiper-slide { width: 27%; }
}
.p03-experts-swiper-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}
.p03-experts-swiper-controls .swiper-scrollbar {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--p03-border);
    border-radius: 0;
}
.p03-experts-swiper-controls .swiper-scrollbar-drag {
    background: var(--p03-ink);
    border-radius: 0;
    height: 1px;
}
.p03-experts-swiper-nav {
    display: flex;
    flex: none;
    gap: 12px;
}
.p03-experts-swiper-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--p03-border);
    background: var(--p03-surface);
    color: var(--p03-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--p03-ease), border-color var(--p03-ease), color var(--p03-ease);
}
.p03-experts-swiper-nav button svg {
    width: 18px;
    height: 18px;
}
.p03-experts-swiper-nav button:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

/* ---- CEO / mission statement ---- */
.p03 .ceo-photo {
    height: 100%;
    min-height: 400px;
}
.p03 .ceo-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
/* Hover: slow zoom on the photo, a lifted shadow, and a dark gradient
   rising from the bottom edge. The overlay is ::after (z-index 1) so it
   sits above the image but under the reveal blind (z-index 2). */
.p03 .ceo-photo {
    box-shadow: var(--p03-shadow-sm);
    transition: box-shadow var(--p03-ease);
}
.p03 .ceo-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(30, 27, 24, .45), rgba(30, 27, 24, 0) 55%);
    opacity: 0;
    transition: opacity var(--p03-ease);
    pointer-events: none;
}
.p03 .ceo-photo:hover {
    box-shadow: var(--p03-shadow-lg);
}
.p03 .ceo-photo:hover img {
    transform: scale(1.06);
}
.p03 .ceo-photo:hover::after {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .p03 .ceo-photo img { transition: none; }
    .p03 .ceo-photo:hover img { transform: none; }
}
.p03 .ceo-message-quote .quote-icon {
    color: var(--main-color);
    font-size: 1rem;
}

/* ---- Partners — consistent-height logo tiles (varying source image
   sizes get centered/contained instead of stretching the row unevenly),
   a card-ish hover state, and brand-colored carousel dots instead of
   Owl's default gray ones. Entrance stagger is
   main-partners-reveal-property03.js. ---- */
.p03 #our-partner .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    padding: 32px 40px;
}
.p03 #our-partner .item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter var(--p03-ease), opacity var(--p03-ease), transform var(--p03-ease);
}
.p03 #our-partner .item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}
.p03 #our-partner .owl-pagination {
    margin-top: 24px;
    text-align: center;
}
.p03 #our-partner .owl-page span {
    background: var(--p03-border) !important;
    opacity: 1 !important;
}
.p03 #our-partner .owl-page.active span,
.p03 #our-partner .owl-page:hover span {
    background: var(--main-color) !important;
}

/* ---- Testimonials — one big centered quote at a time ---- */
.p03 .testimonials-carousel-section {
    background: var(--p03-surface-alt);
}
.p03 .testimonial-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.p03 .testimonial-card-text::before { content: '\201C'; }
.p03 .testimonial-card-text::after { content: '\201D'; }
.p03 .testimonial-card-rating {
    color: var(--main-color);
}
.p03 .testimonial-card-avatar,
.p03 .testimonial-card-avatar-placeholder {
    border-radius: 50%;
}
.p03 .testimonial-card-avatar-placeholder {
    background: var(--main-color);
    color: #fff;
}
.p03 .testimonial-dot {
    background: var(--p03-border) !important;
}

/* ---- FAQ accordion ---- */
.p03 .homepage-faq-item {
    background: var(--p03-surface);
    border: 1px solid var(--p03-border);
    border-radius: var(--p03-radius-md);
    margin-bottom: 12px;
}
.p03 .homepage-faq-icon {
    color: var(--main-color);
}

/* ---- Footer — full redesign: brand block + 3 link columns on a dark
   band, one condensed operating-hours line instead of a 7-row Mon–Sun
   table (the underlying hours are the same every day but Friday, so a
   table read as heavier than the information warranted), and a bottom
   bar with real working Privacy/Terms links (previously just a
   copyright line, with an unused "#."-href legal-links block commented
   out in the Blade file). */
.p03-footer {
    background: var(--p03-ink);
    color: rgba(255, 255, 255, .65);
}
.p03-footer-main {
    padding: 96px 0 64px;
}
.p03-footer-brand img {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}
.p03-footer-brand p {
    color: rgba(255, 255, 255, .6);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 24px;
}
.p03-footer-socials {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.p03-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background var(--p03-ease), transform var(--p03-ease);
}
.p03-footer-socials a:hover {
    background: var(--main-color);
    transform: translateY(-3px);
}
.p03-footer-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 14px;
}
.p03-footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--main-color);
}
.p03-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.p03-footer-list a {
    color: rgba(255, 255, 255, .65);
    font-size: .95rem;
    transition: color var(--p03-ease), padding-left var(--p03-ease);
    text-decoration: none;
}
.p03-footer-list a:hover {
    color: #fff;
    padding-left: 6px;
}
.p03-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.p03-footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.p03-footer-contact i {
    color: var(--main-color);
    width: 18px;
    text-align: center;
    flex: none;
}
.p03-footer-contact a {
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    text-decoration: none;
}
.p03-footer-contact a:hover {
    color: #fff;
}
.p03-footer-hours h5 {
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.p03-footer-hours p {
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}
.p03-footer-bottom {
    background: rgba(0, 0, 0, .25);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.p03-footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 0;
}
.p03-footer-copy {
    margin: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}
.p03-footer-copy a {
    color: rgba(255, 255, 255, .8);
}
.p03-footer-legal {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.p03-footer-legal a {
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    transition: color var(--p03-ease);
}
.p03-footer-legal a:hover {
    color: #fff;
}
@media (max-width: 767px) {
    .p03-footer-main {
        padding: 56px 0 32px;
    }
    .p03-footer-brand-col {
        margin-bottom: 40px;
    }
    .p03-footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Loader — minimal centered mark + progress bar + percentage.
   functions.js does `$(".loader").fadeOut(800)` on window load, which ends
   by setting the element's inline style to display:none — a plain
   stylesheet rule (no !important) is required here so that inline
   display:none can actually win, otherwise the loader can never disappear
   and just snaps back to visible once the fade finishes. There is also no
   base full-screen/positioning rule for ".loader" in the files this theme
   loads (master.css/color.css), so that's defined here too. ---- */
.p03-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--p03-surface);
}
.p03-loader-mark img {
    max-height: 56px;
    width: auto;
    animation: p03LoaderPulse 1.4s ease-in-out infinite;
}
.p03-loader-mark span {
    font-size: .875rem;
    font-weight: 800;
    color: var(--p03-ink);
    animation: p03LoaderPulse 1.4s ease-in-out infinite;
}
.p03-loader-bar {
    width: 200px;
    height: 3px;
    border-radius: var(--p03-radius-pill);
    background: var(--p03-border);
    overflow: hidden;
}
.p03-loader-bar span {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--main-color);
    border-radius: var(--p03-radius-pill);
    transition: width 120ms linear;
}
.p03-loader-percent {
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--p03-ink);
    font-variant-numeric: tabular-nums;
}
@keyframes p03LoaderPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ---- WOW.js reveal (initialized in scripts.blade.php) ---- */
.p03 .wow {
    visibility: hidden;
}

@media (max-width: 991px) {
    .p03 #hero-search-bar .search_2 { padding: 24px !important; }
}

/* ---- Advanced search actions: Search + Clear share one full-width row,
   half each (/properties sidebar and the homepage hero's advanced panel). */
.p03 .p03-search-actions .query-submit-button {
    width: 100%;
}
.p03 .p03-search-actions .btn_fill {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* ---- Homepage hero: small Advanced/Basic search toggle ---- */
/* Sits on the search box's top border (top-left), out of the flow, so it
   takes no space above the fields. .search_2 is already position:relative. */
.p03 #hero-search-bar .p03-search-toggle-bar {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
}
.p03 #hero-search-bar .p03-search-toggle {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--main-color);
    border-radius: var(--p03-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--main-color);
    background: var(--p03-surface);
    box-shadow: var(--p03-shadow-sm);
    text-decoration: none !important;
    transition: background var(--p03-ease), color var(--p03-ease);
}
.p03 #hero-search-bar .p03-search-toggle:hover,
.p03 #hero-search-bar .p03-search-toggle:focus {
    background: var(--main-color);
    color: #fff;
    text-decoration: none !important;
}

/* ---- /properties "Get Notified" alert form (alert-subscribe-form.blade.php):
   home-page style heading + the fields in a white card, same field styles
   as the search boxes. */
.p03 .p03-section-heading {
    gap: 6vw;
}
.p03 .p03-section-heading h2 {
    margin-bottom: 16px;
}
.p03 .p03-section-heading .p03-welcome-desc-wrap {
    max-width: 640px;
}
.p03 .p03-section-heading .p03-welcome-desc-wrap p {
    margin: 0;
}
.p03 .p03-alert-card {
    background: var(--p03-surface);
    border-radius: var(--p03-radius-lg);
    box-shadow: var(--p03-shadow-md);
    padding: 32px 32px 24px;
}
.p03 .p03-alert-card .keyword-input {
    width: 100%;
}
.p03 .p03-alert-submit {
    min-width: 240px;
    margin-left: auto;
}
.p03 .p03-alert-message {
    margin: 0 0 12px;
    font-weight: 600;
}
@media (max-width: 767px) {
    .p03 .p03-alert-card { padding: 20px; }
    .p03 .p03-alert-submit { min-width: 0; }
}

/* ---- /properties view switcher: Grid / List / Map segmented control ---- */
.p03 .p03-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--p03-surface);
    border: 1px solid var(--p03-border);
    border-radius: var(--p03-radius-pill);
    box-shadow: var(--p03-shadow-sm);
}
.p03 .p03-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: var(--p03-radius-pill);
    background: transparent;
    color: var(--p03-ink-soft);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--p03-ease), color var(--p03-ease), box-shadow var(--p03-ease);
}
.p03 .p03-view-btn i {
    font-size: .95rem;
}
.p03 .p03-view-btn:hover {
    color: var(--p03-ink);
    background: var(--p03-surface-alt);
}
.p03 .p03-view-btn.active {
    background: var(--main-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.p03 .p03-view-btn:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}
@media (max-width: 575px) {
    .p03 .p03-view-btn { padding: 9px 14px; }
    .p03 .p03-view-btn span { display: none; }
}

/* ---- List view: one card per row, image left, details right ---- */
.p03 .js-grid-view.is-list-view .property-card-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .p03 .js-grid-view.is-list-view .property-card {
        display: grid;
        grid-template-columns: 40% 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
    }
    .p03 .js-grid-view.is-list-view .property-card-image-link {
        display: block;
        grid-row: 1 / span 2;
        grid-column: 1;
    }
    .p03 .js-grid-view.is-list-view .property-card-image {
        height: 100%;
        min-height: 230px;
        aspect-ratio: auto;
    }
    .p03 .js-grid-view.is-list-view .property-card-body {
        grid-column: 2;
        padding: 20px 24px 8px;
        justify-content: center;
    }
    .p03 .js-grid-view.is-list-view .property-card-actions {
        grid-column: 2;
        margin-top: 0;
    }
    .p03 .js-grid-view.is-list-view .property-card-title {
        font-size: 1.15rem;
    }
}

/* ---- /properties listing heading: home-page style two-tone title,
   results count under it, view switcher on the right. ---- */
.p03 .p03-listing-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}
.p03 .p03-listing-heading h2 {
    margin-bottom: 6px;
}
.p03 .p03-results-count {
    margin: 0;
    color: var(--p03-ink-soft);
    font-weight: 500;
}

/* ---- #main_video on mobile: fills the whole screen (100% x 100vh) like a
   background video. The 16:9 iframe is sized to COVER the frame - at least
   as wide as the screen and at least as tall as it - and centred, with
   .p03-video-frame cropping what overflows, so there are no black bars
   (the left/right edges of the video are cut off on a portrait phone).
   !important beats the iframe's inline aspect-ratio and GSAP's inline
   scale tween (the .5 -> 1 scroll zoom stays desktop-only). */
@media (max-width: 767px) {
    .p03 .p03-video-frame {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        border-radius: 8px;
    }
    .p03 #main_video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, calc(100vh * 16 / 9)) !important;
        height: max(100vh, calc(100vw * 9 / 16)) !important;
        max-width: none;
        aspect-ratio: auto !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ---- Mobile fixes ----
   1. "Why Customers Choose Us" compass: the 860px layout's fixed 20px
      rows (auto 20px auto 20px auto) were still applied in the 520px
      one-column layout, squashing two of the boxes into 20px rows so
      they overlapped their neighbours and clipped their text.
   2. Footer: .p03-footer-main's "padding: 96px 0 64px" zeroed the
      container's side padding, so the footer touched the screen edges. */
@media (max-width: 520px) {
    .p03-compass {
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 14px;
    }
    .p03-compass-box {
        padding: 26px 20px;
    }
    .p03-compass-d {
        max-width: none;
    }
    .p03-compass-hub {
        justify-content: center;
    }
    #wellcome .container.p-5 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
@media (max-width: 767px) {
    .p03 .p03-footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .p03-footer-main {
        padding-top: 56px;
        padding-bottom: 40px;
    }
}
@media (max-width: 767px) {
    /* Contact strip: ".p03 #contact .container { padding: 0 }" left the
       icons touching the screen edge. */
    .p03 #contact .container {
        padding: 40px 20px;
    }
    .p03-contact-item {
        gap: 16px;
    }
    .p03-contact-item i {
        font-size: 2rem;
    }
    /* Footer columns stack on mobile - space them so a column's last link
       doesn't run into the next column's heading. */
    .p03-footer-main .row > [class*="col-"] {
        margin-bottom: 32px;
    }
}

/* ---- Sidebar "Recent Properties" (properties/includes/recent-properties.blade.php):
   each item is a white card with space below it, and the thumbnail
   stretches to the full height of the text beside it (cropped to fill)
   instead of a fixed small square. Overrides Bootstrap 3's table-cell
   .media layout with flex so the two columns share one height. */
.p03 .p03-side-item {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: #fff;
    border-radius: 0;
    padding: 12px;
    margin: 0 0 3px !important;
    box-shadow: var(--p03-shadow-sm);
    overflow: visible;
}
.p03 .p03-side-item .media-left {
    display: block;
    flex: 0 0 110px;
    padding: 0;
}
.p03 .p03-side-item .ppt_thumb {
    display: block;
    height: 100%;
    min-height: 90px;
}
.p03 .p03-side-item .media-object {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.p03 .p03-side-item .media-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.p03 .p03-side-item .media-heading {
    margin-top: 0;
}
.p03 .p03-side-item p {
    margin-bottom: 8px;
}