/**
 * Westcord Site-Wide Responsive Styles
 *
 * These styles ONLY apply to smaller screens (max-width media queries).
 * Desktop styling is not affected.
 */

/* ========================================
   Team Page Grid - Responsive
   ======================================== */

/* Tablet - 2 columns instead of 4 */
@media (max-width: 900px) {
  /* Team member grid adjustments */
  .sqs-gallery-design-grid .sqs-gallery-design-grid-slide {
    width: 50% !important;
  }
}

/* Mobile - 1 column */
@media (max-width: 600px) {
  .sqs-gallery-design-grid .sqs-gallery-design-grid-slide {
    width: 100% !important;
  }
}

/* ========================================
   Case Study Pages - Responsive
   ======================================== */

/* Tablet adjustments for case study content */
@media (max-width: 900px) {
  /* Side-by-side layouts stack vertically */
  .sqs-row .sqs-col-6 {
    width: 100% !important;
    float: none !important;
  }

  /* Reduce padding on content blocks */
  .sqs-block-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  /* Full width columns */
  .sqs-row [class*="sqs-col-"] {
    width: 100% !important;
    float: none !important;
  }

  /* Reduce heading sizes */
  .sqs-block-html h1 {
    font-size: 28px !important;
  }

  .sqs-block-html h2 {
    font-size: 22px !important;
  }

  .sqs-block-html h3 {
    font-size: 18px !important;
  }
}


/* Stage 4: Switch to mobile nav (below 900px) - smaller than any laptop */
@media (max-width: 900px) {
  /* Hide desktop navigation */
  #mainNavWrapper.desktop-nav-wrapper {
    display: none !important;
  }

  /* Show hamburger menu */
  .mobile-nav-toggle-label {
    display: block !important;
  }

  /* Center the logo while maintaining vertical alignment */
  #header #logoWrapper {
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #header .header-inner {
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ========================================
   Navigation - Mobile Improvements
   ======================================== */

@media (max-width: 768px) {
  /* Ensure mobile nav is properly sized */
  .header-nav-folder-content {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Larger touch targets for nav items */
  .header-nav-item a {
    padding: 15px 20px !important;
    min-height: 44px;
  }
}

/* ========================================
   General Content - Responsive
   ======================================== */

/* Tablet */
@media (max-width: 900px) {
  /* Reduce horizontal padding on main content */
  .content-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  /* Further reduce padding on mobile */
  .content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Better spacing for text blocks */
  .sqs-block-html p {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ========================================
   Buttons - Touch Friendly
   ======================================== */

@media (max-width: 768px) {
  /* Larger touch targets for all buttons */
  .sqs-block-button-element {
    min-height: 44px;
    padding: 12px 24px !important;
  }
}

/* ========================================
   Images and Galleries - Responsive
   ======================================== */

@media (max-width: 768px) {
  /* Gallery images adjust */
  .sqs-gallery-block-slideshow .sqs-gallery-design-stacked-slide {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  /* Square aspect ratio for very small screens */
  .sqs-image img {
    object-fit: cover;
  }
}

/* ========================================
   Lightbox - Responsive Improvements
   ======================================== */

@media (max-width: 768px) {
  /* Better lightbox sizing on tablets */
  .plugin-lightbox-content {
    width: 95% !important;
    max-width: 95% !important;
  }
}

@media (max-width: 480px) {
  /* Full width lightbox on mobile */
  .plugin-lightbox-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Larger close button for touch */
  .plugin-lightbox-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }
}

/* ========================================
   DISABLE SQUARESPACE HEADER
   ======================================== */

/* Hide Squarespace header entirely */
#header { display: none !important; }

/* Offset content for fixed header (except landing page) */
body {
  padding-top: 92px;
}

/* Landing page: no padding (transparent header over full-screen video) */
body.homepage {
  padding-top: 0;
}

/* =========================
   Westcord Custom Header
   ========================= */

.wc-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 18px 45px;
  background: #1a1a1a;
  box-sizing: border-box;
}

.wc-header--transparent{
  background: transparent;
}

/* Homepage only: make header scroll away instead of fixed */
body.homepage .wc-header{
  position: absolute !important;
}

.wc-header__inner{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.5vw, 28px);
  min-height: 56px;
}

.wc-header__logo img{
  display: block;
  height: auto;
  width: clamp(190px, 16vw, 284px); /* smooth logo shrink */
}

/* Nav row (single layout system, never jumps) */
.wc-header__nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.wc-header__links{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0; padding: 0;
  gap: 40px;
}

.wc-header__links a{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;

  font-family: "Raleway","Helvetica Neue",Arial,sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: color 0.3s ease;
}
.wc-header__links a:hover{
  color: #c9a96a;
}

/* Dropdowns (desktop hover) */
.wc-dd{ position: relative; }
.wc-dd__menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 15px 0;

  background-color: #191e29;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 1002;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.wc-dd:hover .wc-dd__menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wc-dd__menu a{
  display: block;
  padding: 10px 25px;
  color: #fff !important;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.3s ease;
}
.wc-dd__menu a:hover{
  color: #c9a96a !important;
}

/* Hamburger (mobile) */
.wc-header__toggle{
  display: none;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.wc-header__toggle span{
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
}

/* Choose your mobile breakpoint here */
@media (max-width: 900px){
  .wc-header__toggle{ display: flex; }
  .wc-header__links{
    display: none;
    position: fixed;
    inset: 0;
    padding: 96px 40px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #1a1a1a;
    overflow-y: auto;
  }
  .wc-header__nav.is-open .wc-header__links{ display: flex; }
  .wc-header__links li{ width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .wc-header__links a,
  .wc-dd__toggle{ width: 100%; padding: 18px 0; justify-content: flex-start; }

  /* Mobile dropdowns stack */
  .wc-dd__menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 18px;
    max-height: 0;
    overflow: hidden;
  }
  .wc-dd.is-open .wc-dd__menu{
    max-height: 600px;
    padding: 10px 0 18px 18px;
  }
  .wc-dd__menu a{ color: rgba(255,255,255,.75); }
}

/* ============================================================
   Mobile-only header refinements (<=480px)
   ============================================================
   These rules ONLY apply to phone-width viewports. Desktop and
   tablet rendering is unaffected — every selector below is wrapped
   in @media (max-width: 480px). Loaded after the inline critical
   CSS in index.html so it wins on cascade without !important.
*/
@media (max-width: 480px) {
  /* Shrink the wc-header side gutters — desktop is 18px 45px */
  .wc-header {
    padding: 12px 16px;
  }
  /* Shrink the logo so it doesn't dominate the header bar */
  .wc-header__logo img {
    width: clamp(140px, 44vw, 190px);
  }
}

/* ============================================================
   Mobile-only polish (<=600px / <=480px)
   ============================================================
   All overrides are wrapped in max-width media queries. Desktop
   and tablet rendering is untouched.
*/

/* Newsletter form (home page footer) — stack input on top of SUBSCRIBE
   button on phones instead of cramming them side-by-side. Squarespace's
   default newsletter uses inline-block wrappers; we force a stacked
   layout below 600px so the email input gets the full row. */
@media (max-width: 600px) {
  .newsletter-form-fields-wrapper,
  .newsletter-form-button-wrapper {
    display: block !important;
    width: 100% !important;
    vertical-align: top !important;
  }
  .newsletter-form-button-wrapper {
    margin-top: 12px !important;
  }
  .newsletter-form-button-wrapper .newsletter-form-button {
    width: 100% !important;
  }
}

/* Broker bio SPECIALTIES section — the inline "TRANSACTION TYPE",
   "MARKETS", "ASSET TYPE" headers are 34px which overflows tight
   phone widths (especially the long "TRANSACTION TYPE" label). Scale
   them down only on phones. Uses an attribute selector to target the
   exact gold spans without affecting any other 34px text. */
@media (max-width: 480px) {
  span[style*="font-size: 34px"][style*="#917f5b"] {
    font-size: 22px !important;
  }
}

/* ============================================================
   Home page mobile optimization — evidence-based pass
   ============================================================
   Five targeted rules, all wrapped in @media (max-width: 600px).
   Each addresses a measured root cause from the cascade audit, not
   guesswork. No column-grid changes, no font-size overrides, no
   carpet-bombed !important.
*/

@media (max-width: 600px) {
  /* (A) Box-model foundation. Squarespace's grid system lacks
     box-sizing: border-box at narrow viewports, so paddings push
     computed widths past 100% and iOS Safari's auto-shrink-to-fit
     makes content appear shifted right. Reset box-sizing on the
     whole grid stack. */
  .sqs-layout,
  .sqs-row,
  .sqs-row > [class*="sqs-col-"],
  .sqs-block,
  .sqs-block-content {
    box-sizing: border-box;
  }

  /* .sqs-layout has padding: 34px at every breakpoint. On a 375px
     phone that eats 68px (18%) of usable width. Tighten on mobile. */
  .sqs-layout {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The .sqs-row negative -17px margins paired with the new 16px
     layout padding would leak content past the viewport edge. Zero
     them out on mobile — for ALL .sqs-row instances (not just direct
     children of .sqs-layout) because nested rows (footer columns,
     buttons next to nested column groups) have the same problem. */
  .sqs-layout .row.sqs-row,
  .sqs-layout .sqs-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* (A.1) Force Squarespace button blocks to behave as full-width
     centered containers on mobile so the inner button is reliably
     centered regardless of which nested col-* it ended up next to.
     This addresses the home-page case where the ABOUT US button sits
     after a 1+10+1 nested column group and was inheriting a non-
     full-width sizing that pulled it right. */
  .sqs-block.button-block,
  .sqs-block[data-definition-name="website.components.button"] {
    width: 100% !important;
  }
  .sqs-block.button-block > .sqs-block-content,
  .sqs-block[data-definition-name="website.components.button"] > .sqs-block-content {
    width: 100% !important;
    display: block !important;
  }
  .sqs-block-button-container,
  .sqs-block-button-container--center,
  .sqs-block-button-container--left,
  .sqs-block-button-container--right {
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Bulletproof: also force the button <a> itself to margin auto so it
     centers even if the parent container's text-align fails. fit-content
     ensures the button is its natural width (not full row). */
  .sqs-block-button-element,
  .sqs-block-button-element--small,
  .sqs-block-button-element--medium,
  .sqs-block-button-element--large {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* (B) Tame desktop-proportioned spacer blocks. Squarespace spacer
     blocks set padding-bottom from data-aspect-ratio (3.7, 5.1,
     12.0...) which is fine on a 1400px desktop but creates massive
     dead vertical space on a 375px phone. Cap any aspect-ratio
     spacer at 40px tall on phones. */
  .sqs-block-spacer[data-aspect-ratio] {
    max-height: 40px !important;
    overflow: hidden;
  }
  .sqs-block-spacer[data-aspect-ratio] .sqs-block-content {
    height: auto;
    max-height: 40px;
  }

  /* (C) #our-approach-section .content-inner has inline padding
     40vh 20px 10vh 20px (set in <style> at line 3148 of index.html).
     On a 750px-tall phone, 40vh = 300px of dead space before content
     appears. Tighten on mobile. */
  #our-approach-section .content-inner {
    padding: 12vh 20px 6vh 20px !important;
  }

  /* (D) Counter labels — defensive wrap. .cnt-lbl is white-space:
     nowrap; if any label gets too long, it overflows and clips.
     Allow wrap on mobile. NOT changing .cnt-num font-size. */
  .cnt-lbl {
    white-space: normal !important;
    padding: 0 8px;
    max-width: 90%;
  }

  /* (E) Lighten the OUR APPROACH image overlay on phones so the
     background image actually shows through. Was rgba(10,12,18,0.85)
     before, which was so dark the image was effectively invisible.
     0.45 gives a readable darkening pass without hiding the art. */
  #our-approach-section .index-image-overlay {
    background-color: rgba(10, 12, 18, 0.45) !important;
  }

  /* (E.1) Mobile background-image fallback. The <img> inside each
     section's .index-section-image uses Squarespace's data-src
     lazy-loading attribute and has NO src attribute set in the
     static HTML. On desktop the parallax JS script kicks in and
     creates separate parallax background layers; on mobile that
     script returns early (window.innerWidth < 1024), so the section
     ends up with no image — just the dark overlay = "looks black".
     Apply the section background images via CSS on the section
     wrapper instead — fires on every mobile load regardless of the
     lazy-loader. Positions match the desktop parallax focal points. */
  #our-approach-section .index-section-wrapper {
    background-image: url('/images/ChatGPT%20Image%20Jan%2021,%202026,%2009_02_01%20PM.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  #explore-our-properties-section .index-section-wrapper {
    background-image: url('/images/index-background.jpg');
    background-size: cover;
    background-position: 51% 15%;
    background-repeat: no-repeat;
  }
  /* The OUR SERVICES content is nested inside the EXPLORE section
     but desktop parallax gives it a solid navy background, not an
     image. Apply the navy at the page-content level so it covers
     the EXPLORE section background image only where OUR SERVICES
     sits. */
  #our-services-page {
    background-color: #191e29;
    position: relative;
    z-index: 1;
  }
  /* Defensive image sizing in case the Squarespace lazy-loader DOES
     eventually fire and the <img> appears — make sure it covers
     instead of rendering at natural size. */
  .index-section-image img {
    object-fit: cover;
    object-position: center;
    width: 100% !important;
    height: 100% !important;
  }

  /* (L) Service-page cards (management-services + brokerage-services
     family — 8 pages total) use Squarespace's image-block
     layout-caption-overlay-hover pattern with a centered overlay
     title + LEARN MORE button. The desktop aspect ratio is
     padding-bottom: 38.35% (cinematic strip designed for 2000x767
     hero images). On mobile that computes to ~137px tall on a
     358px-wide card, which is too short to comfortably fit a title +
     LEARN MORE button stacked — the text feels truncated/cramped.

     Fix: bump the aspect ratio on mobile from 38.35% to 60%, giving
     ~215px of vertical room. The image stays undistorted because the
     inline `object-fit: cover` on the <img> just crops the wide
     2000x767 landscape to a slightly less-wide center crop — no
     stretching. Then restore reasonable font sizes for the overlay
     since we now have room for them. */
  .image-block-outer-wrapper.layout-caption-overlay-hover
    .sqs-image-shape-container-element.has-aspect-ratio {
    padding-bottom: 60% !important;
  }
  .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption p strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;
  }
  .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption a {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    padding: 9px 18px !important;
    margin-top: 12px !important;
    display: inline-block !important;
  }

  /* (F) Chrome-on-Android scrollbar gutter shift. Squarespace sets
     body { overflow-y: scroll } in squarespace.css. Blink/Chrome
     reserves ~15-17px for the vertical scrollbar; WebKit/Safari
     doesn't. That mismatch makes the whole page look offset on
     Chrome only. Override to overflow-y: auto (no gutter reservation
     on Chrome either) and clip any horizontal overflow defensively. */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body {
    overflow-y: auto !important;
  }

  /* (G) Two specific button blocks on the home page bypass the
     standard .sqs-layout > .row.sqs-row > .col chain entirely. A
     DOM-walk audit showed:
       - #block-yui_3_17_2_1_1752389120410_16027 (WHO WE ARE ABOUT US)
         is a DIRECT child of #who-we-are-section (no wrapping .col,
         .row, or .sqs-layout)
       - #block-e4805c7bf9485d98013f (VIEW ALL PROPERTIES) sits even
         further outside, near the page-content level.
     Working buttons like #block-our-approach-button and the hero
     LEARN MORE / VIEW OUR PROPERTIES sit inside the normal layout
     chain, so the generic Squarespace button cascade centers them
     correctly. The two orphans don't, hence the shift right.

     Target them by block ID directly — these IDs are baked into the
     source HTML and never change. */
  /* Brutal centering: force the orphan block + content + container
     to be flex columns with align-items: center, so the inner button
     centers horizontally regardless of what the rest of the cascade
     says. Tried display:block earlier but Squarespace's
     .sqs-block-button-container has flex-direction:column +
     align-items: stretch (default), which placed the fit-content
     button at flex-start (left). flex+align-items:center inside the
     button-container does the centering reliably. */
  #block-yui_3_17_2_1_1752389120410_16027,
  #block-e4805c7bf9485d98013f {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  #block-yui_3_17_2_1_1752389120410_16027 .sqs-block-content,
  #block-e4805c7bf9485d98013f .sqs-block-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #block-yui_3_17_2_1_1752389120410_16027 .sqs-block-button-container,
  #block-e4805c7bf9485d98013f .sqs-block-button-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
   Universal Squarespace 7.0 mobile baseline (<=600px)
   ============================================================
   Three additive rules from the research doc at
   docs/squarespace-mobile-optimization-research.md — they apply
   to EVERY page on the site (home, case studies, broker bios,
   service pages, contact, team) because every Squarespace HTML
   page loads responsive.css. All inside @media (max-width: 600px)
   so desktop rendering is mathematically untouched.
*/
@media (max-width: 600px) {

  /* (H) Canonical override for Squarespace's inline
     --sqs-block-content-flex: 0 on button blocks.
     Per research §4: Squarespace sets this CSS variable inline on
     .sqs-block-content of button blocks to lock the block to its
     intrinsic width inside a desktop row. When the row collapses
     to a single column on mobile, the variable still resolves to
     `flex: 0`, so the button shrinks and centering fails. Setting
     the variable to 1 makes the content area grow to fill the
     parent row width on mobile, which is what we want.
     This complements the explicit `flex: 1 1 100%` rule already
     in place — uses the documented variable path. */
  .button-block > .sqs-block-content,
  .sqs-block-button > .sqs-block-content,
  .sqs-block[data-definition-name="website.components.button"] > .sqs-block-content {
    --sqs-block-content-flex: 1 !important;
  }

  /* (I) Strip side padding on image blocks when columns stack on
     mobile. Squarespace's .sqs-block.image-block keeps its desktop
     half-gutter padding after .sqs-col-N collapses, creating
     double-gutters between vertically stacked images (visible on
     case studies + the OUR SERVICES + EXPLORE OUR PROPERTIES
     sections). Research §1d. */
  .sqs-block.image-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* (J) Defensive horizontal-overflow guard at SECTION level only.
     We previously included .sqs-block-content here too, but that
     clipped button outlines when the button was wider than its
     content box (visible on the hero "VIEW OUR PROPERTIES"). Section
     wrappers are the right scope. */
  .index-section,
  .index-section-wrapper,
  .content.page-content,
  .content-inner,
  .sqs-layout {
    max-width: 100% !important;
    overflow-x: clip;
  }

  /* (K) Shrink Squarespace --small/--medium/--large button font +
     letter-spacing on mobile so long-text buttons ("VIEW OUR
     PROPERTIES", "MANAGEMENT SERVICES", etc.) fit within a 375px
     viewport without overflowing. Squarespace's default is 17px
     font with 1.97px letter-spacing — a 19-character button text
     computes to ~322px wide BEFORE padding, which exceeds the
     content area on an iPhone. Smaller font + tighter tracking
     brings it under control while keeping the same visual style. */
  .sqs-block-button-element--small,
  .sqs-block-button-element--medium,
  .sqs-block-button-element--large {
    font-size: 13px !important;
    letter-spacing: 1.3px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* (M) Guarantee body offset for the fixed .wc-header on every page
     except the home page. The inline critical CSS in each HTML file
     sets body { padding-top: 92px }, but CDN-loaded Squarespace
     stylesheets (and template tweaks like "general-page" / banner
     handlers) can override it with higher specificity or later
     source order — when that happens the fixed 92px-tall header
     overlays the top of the first section. Re-assert the offset on
     mobile with !important on body:not(.homepage), and add the iOS
     safe-area inset so notched phones still get a clear band below
     the status bar. Homepage is exempt because its transparent
     header is meant to sit ON TOP of the hero video. */
  body:not(.homepage) {
    padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important;
  }

  /* (N) Squarespace Brine template assumes a TRANSPARENT site header
     that sits ON TOP OF the banner image. On non-home pages with a
     `.has-banner-image` body class, the template's CDN CSS pulls the
     banner wrapper up with a negative top margin / negative top
     positioning so the image extends behind the transparent header.
     Our `.wc-header` is solid dark, so when the banner gets pulled
     up under it, the top portion of the banner image AND the
     `<h1 class="page-title">` inside it disappear behind the header
     bar (this is exactly the "nav bar overlaying the image / blocking
     text" the user reported on contact + service pages).
     Zero out every escape hatch the template uses to put content
     under the header. siteWrapper, banner wrapper, and the page-title
     desc-wrapper all reset to natural flow inside the body's
     padding-top band. */
  body:not(.homepage) #siteWrapper,
  body:not(.homepage) .banner-thumbnail-wrapper,
  body:not(.homepage) .desc-wrapper,
  body:not(.homepage) #thumbnail.content-fill {
    margin-top: 0 !important;
    top: 0 !important;
  }

  /* (N.1) Force the page-banner <img> to fill its container on mobile.
     Squarespace's image loader writes inline `width: Npx; height: Npx;
     top: -Npx; left: -Npx` on the <img> based on a focal-point crop
     calculation. On phones that calculation sometimes lands at a
     pixel width smaller than the actual viewport (because it reads
     the wrapper width before responsive overrides apply), which
     leaves a black strip on the right of the hero image and shifts
     the image left. Override the inline styles: the img always fills
     #thumbnail (which itself is position:absolute inset:0 inside the
     full-width banner-thumbnail-wrapper), with object-fit:cover so
     the original image crops cleanly to the container without
     distortion. */
  body:not(.homepage) #thumbnail img,
  body:not(.homepage) .banner-thumbnail-wrapper #thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* (O) Accordion blocks (landlord-/tenant-representation,
     property-management, asset-management, construction-management).
     One item per page (the one with the longest 3-line title) was
     rendering with the WHOLE row shifted left and the chevron
     looking like a single diagonal stroke instead of a ∨ chevron.
     The HTML is byte-identical across items — markup, classes,
     inline styles all match. The visual divergence is the result
     of (1) box-sizing inconsistency cascading into the flex layout
     of the click-target, and (2) the chevron borders subtly losing
     one edge at certain row heights.
     Lock the entire accordion-item layout on mobile so every item
     gets the same flex layout, the same icon position, and the
     same centered title regardless of how many lines the title
     wraps to. */

  /* Item layout: keep the click-target as a row-reverse flex row
     with the icon on the left and title taking the rest of the
     width. align-items: center vertically centers the icon
     regardless of title line count, but pin the icon's flex-basis
     so it never shrinks on long titles. */
  .accordion-item .accordion-item__click-target {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .accordion-item .accordion-item__title {
    flex: 1 1 auto !important;
    text-align: center !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .accordion-item .accordion-icon-container {
    flex: 0 0 35px !important;
    width: 35px !important;
    height: 35px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .accordion-item .accordion-icon-container > * {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Chevron: rebuild the rotated-square chevron explicitly. Right
     + bottom borders solid, top + left removed, 45deg rotation
     translated up so the point sits centered in the icon box. */
  .accordion-icon-container .arrow {
    border-top: none !important;
    border-left: none !important;
    border-right: 5px solid currentColor !important;
    border-bottom: 5px solid currentColor !important;
    box-sizing: border-box !important;
    width: 70.71067% !important;
    height: 70.71067% !important;
    transform: translateY(-25%) rotate(45deg) !important;
    background: none !important;
    border-radius: 0 !important;
  }

  /* (P) Mobile-only redesign of the brokerage AND management services
     pages. The original Squarespace banner (banner-thumbnail-wrapper)
     stays visible on mobile so the hero matches the desktop version
     exactly. Only the stacked Squarespace cards inside main#page are
     hidden and replaced with the redesigned .wc-mobile-services card
     stack which renders between </main> and #preFooter. Site footer
     stays visible too.
     Scoped under both body.collection-brokerage-services and
     body.collection-management-services so desktop and every other
     page stay untouched. */
  body.collection-brokerage-services main#page,
  body.collection-management-services main#page {
    display: none !important;
  }
  body.collection-brokerage-services .wc-mobile-services,
  body.collection-management-services .wc-mobile-services {
    display: block;
    background: #0d0d0d;
  }

  /* ── Cards (image fills the whole card, gradient overlay) ──
     Edge-to-edge with no gaps between cards or between hero and the
     first card — sharp transitions like the reference image. */
  .wc-mobile-services .wc-ms-cards {
    padding: 0;
  }
  .wc-mobile-services .wc-ms-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 220px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
  }
  .wc-mobile-services .wc-ms-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }
  .wc-mobile-services .wc-ms-card-overlay {
    position: absolute;
    inset: 0;
  }
  /* Text-right card: image visible on the LEFT, dark gradient
     blanket covers the RIGHT half so text reads. */
  .wc-mobile-services .wc-ms-card--text-right .wc-ms-card-overlay {
    background: linear-gradient(
      to right,
      rgba(13, 13, 13, 0.05) 0%,
      rgba(13, 13, 13, 0.55) 35%,
      rgba(13, 13, 13, 0.92) 65%,
      rgba(13, 13, 13, 0.96) 100%
    );
  }
  /* Text-left card: mirror of the above */
  .wc-mobile-services .wc-ms-card--text-left .wc-ms-card-overlay {
    background: linear-gradient(
      to left,
      rgba(13, 13, 13, 0.05) 0%,
      rgba(13, 13, 13, 0.55) 35%,
      rgba(13, 13, 13, 0.92) 65%,
      rgba(13, 13, 13, 0.96) 100%
    );
  }
  .wc-mobile-services .wc-ms-card-text {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 20px;
    z-index: 2;
    box-sizing: border-box;
  }
  .wc-mobile-services .wc-ms-card--text-right .wc-ms-card-text { right: 0; }
  .wc-mobile-services .wc-ms-card--text-left  .wc-ms-card-text { left: 0; }
  .wc-mobile-services .wc-ms-card-num {
    display: block;
    font-family: aileron, sans-serif;
    font-size: 11px;
    letter-spacing: 0.20em;
    color: #c9a96a;
    margin: 0 0 8px 0;
    font-weight: 700;
  }
  .wc-mobile-services .wc-ms-card-title {
    font-family: 'Kameron', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    margin: 0 0 10px 0 !important;
    color: #fff !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .wc-mobile-services .wc-ms-card-desc {
    font-family: aileron, 'Raleway', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 0 14px 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
  .wc-mobile-services .wc-ms-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: aileron, sans-serif;
    font-size: 10px;
    letter-spacing: 0.20em;
    color: #c9a96a;
    text-transform: uppercase;
    font-weight: 700;
  }
  .wc-mobile-services .wc-ms-card-link svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .wc-mobile-services .wc-ms-card:active .wc-ms-card-link svg {
    transform: translateX(3px);
  }

  /* ── Closing tagline (single line) ──────────────────────── */
  .wc-mobile-services .wc-ms-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 12px;
    background: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: aileron, sans-serif;
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
  }
  .wc-mobile-services .wc-ms-tagline-mark {
    height: 14px;
    width: auto;
    opacity: 0.7;
  }
}

/* Default-hide the mobile redesign on desktop so it never renders
   for users >600px. Outside the @media block so it always applies. */
.wc-mobile-services {
  display: none;
}

/* (Q) Restore breathing room at the top of #preFooter on mobile.
   The Squarespace preFooter relies on a spacer-block child with
   data-aspect-ratio=12.05 to create top breathing room on desktop.
   Our rule (B) caps every aspect-ratio spacer at 40px on mobile,
   and rule (A) tightens .sqs-layout padding from 34px → 16px, so
   the navy footer's "WELCOME / ABOUT / ..." list ends up flush
   against the top of the panel. Add explicit top padding to the
   preFooter on mobile so the section has a clean separation from
   the content above it (especially now that the per-page "tagline
   strip" used to act as a buffer). Applies sitewide. */
@media (max-width: 600px) {
  #preFooter {
    padding-top: 40px;
  }
}