/* ---------------------------------------------------------------
 * LIGHT / DARK THEME VARIABLES
 * Every front-end shortcode accepts theme="light|dark" and gets one of
 * these two classes applied to its wrapper. Components below consume
 * var(--scm-...) rather than hardcoding colors, so adding a theme to a
 * new component just means using these variables, not writing a
 * parallel dark-mode rule set.
 * --------------------------------------------------------------- */
.scm-theme-light {
    --scm-bg: transparent;
    --scm-surface: #ffffff;
    --scm-border: #e2e2e2;
    --scm-heading: #16181d;
    --scm-text: #3a3d44;
    --scm-text-muted: #6b7280;
    --scm-accent: #c99a00;
    --scm-star: #f0b429;
}
.scm-theme-dark {
    --scm-bg: #0f1424;
    --scm-surface: #f3efe4;
    --scm-border: #f0b429;
    --scm-heading: #f3efe4;
    --scm-text: #33312a;
    --scm-text-muted: #6b6a5f;
    --scm-accent: #f0b429;
    --scm-star: #f0b429;
}

/* ---------------------------------------------------------------
 * FAQ accordion. Height show/hide is driven by Bootstrap's real
 * Collapse component (loaded via JS bundle only, no Bootstrap CSS,
 * to avoid clashing with the live theme) -- it measures each answer's
 * actual height via JS, so long answers animate correctly instead of
 * being clipped by a fixed max-height. Only the minimal CSS Bootstrap's
 * Collapse JS actually depends on is included below, not the framework.
 * --------------------------------------------------------------- */
.faq-list {
/*     max-width: 1363px; */
/*     background: var(--scm-bg); */
    color: var(--scm-text);
}
.faq-item { border-bottom: 1px solid var(--scm-border); }

.faq-q {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    color: var(--scm-heading);
    transition: color .2s ease;
}
.faq-q:hover { color: var(--scm-accent); }

.faq-q .plus {
    width: 22px;
    height: 22px;
    flex: none;
    position: relative;
    transition: transform .3s ease;
}
.faq-item.open .faq-q .plus { transform: rotate(180deg); }
.faq-q .plus::before,
.faq-q .plus::after {
    content: "";
    position: absolute;
    background: var(--scm-heading);
    transition: opacity .2s ease, transform .3s ease;
}
.faq-q .plus::before { top: 10px; left: 2px; right: 2px; height: 2px; }
.faq-q .plus::after { left: 10px; top: 2px; bottom: 2px; width: 2px; }
.faq-item.open .plus::after { opacity: 0; transform: scaleY(0); }

/* Bootstrap Collapse's own core mechanics (copied minimally, not the whole framework):
   fully closed = display:none, mid-transition = animated height via JS, open = normal flow. */
.faq-a.collapse:not(.show) { display: none; }
.faq-a.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

.faq-a {
    color: var(--scm-text-muted);
    font-size: 15px;
	background: #f5f4ee;
    padding: 10px;
    line-height: 1.65;
}

/* ---------------------------------------------------------------
 * FAQ header (live question/category count) + clickable category pills.
 * Only rendered in "global" usage (no category attribute already applied)
 * -- filtering happens entirely client-side against data-faq-categories
 * on each .faq-item, no extra request needed to narrow the list.
 * --------------------------------------------------------------- */
.scm-faq-header {
    margin-bottom: 20px;
}
.scm-faq-header-title {
    margin: 0 0 6px;
    font-size: clamp(24px, 3.5vw, 36px);
    line-height: 1.15;
    color: var(--scm-heading);
    text-transform: uppercase;
    font-weight: 800;
}
.scm-faq-header-sub {
    margin: 0;
    color: var(--scm-text-muted);
    font-size: 14.5px;
}

.scm-faq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.scm-faq-pill {
    font-family: monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid var(--scm-border);
    background: transparent;
    color: var(--scm-heading);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.scm-faq-pill:hover {
    border-color: var(--scm-accent);
}
.scm-faq-pill.active {
    background: var(--scm-heading);
    color: #fff;
    border-color: var(--scm-heading);
}
.scm-theme-dark .scm-faq-pill.active {
    background: var(--scm-heading);
    color: #0f1424;
}

/* ---------------------------------------------------------------
 * TESTIMONIALS -- section header + horizontal scroll-snap card row.
 * Native browser scroll-snap gives smooth drag/swipe scrolling with
 * multiple cards visible and partial "peek" at the edges, without
 * needing carousel JS to track slide indices.
 *
 * Styled to match the Thrive testimonial carousel used on the Toro
 * redesign (2026-10-02): white cards with a 5px gold top rule and
 * hairline sides, gold stars, Inter quote, IBM Plex Mono name, optional
 * full-bleed featured image. Header matches the Thrive section heads:
 * gold bar + mono eyebrow, Bebas Neue title, subtitle on the right.
 * Colours are local --scm-t-* variables so the shared theme variables
 * used by the other shortcodes are untouched.
 * --------------------------------------------------------------- */
.scm-testimonials-section {
    --scm-t-gold: #F5C800;
    --scm-t-eyebrow: #C99A00;
    --scm-t-star: #EFC319;
    --scm-t-hair: #DAD6C8;
    --scm-t-card: #ffffff;
    --scm-t-ink: #0A0E19;
    --scm-t-text: #111111;
    --scm-t-link: #806100;
    --scm-t-title: #0A0E19;
    --scm-t-sub: #3B3B3B;
    background: transparent;
    color: var(--scm-t-title);
    padding: 0;
    position: relative;
}
.scm-testimonials-section.scm-theme-dark {
    --scm-t-title: #ffffff;
    --scm-t-sub: #ffffff;
}

/* Header */
.scm-testimonials-header {
    margin: 0 0 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 40px;
}
.scm-testimonials-header-main {
    flex: 1 1 520px;
    min-width: 0;
}
.scm-testimonials-section .scm-eyebrow {
    display: flex;
    align-items: center;
    gap: 17px;
    color: var(--scm-t-eyebrow);
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: normal;
    text-transform: none;
    margin: 0 0 6px;
}
.scm-testimonials-section .scm-eyebrow-line {
    display: inline-block;
    flex: none;
    width: 57px;
    height: 5px;
    background: var(--scm-t-eyebrow);
}
.scm-testimonials-section h2.scm-testimonials-title {
    margin: 0 !important;
    padding: 0;
    font-family: "Bebas Neue", Impact, sans-serif !important;
/*     font-size: clamp(40px, 5vw, 60px) !important; */
    line-height: 1.05 !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase;
    color: var(--scm-t-title) !important;
}
.scm-testimonials-section .scm-testimonials-sub {
    flex: 0 1 380px;
    max-width: 380px;
    margin: 0 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: var(--scm-t-sub) !important;
    opacity: 1;
}

/* Card row */
.scm-testimonial-scroll {
    display: flex;
    align-items: stretch;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding: 0 0 4px;
    margin: 0;
    scrollbar-width: none;
}
.scm-testimonial-scroll::-webkit-scrollbar { display: none; }

.scm-testimonial-card {
    flex: 0 0 405px;
    max-width: calc(100% - 72px);
    scroll-snap-align: start;
    background: var(--scm-t-card);
    border: 1px solid var(--scm-t-hair);
    border-top: 5px solid var(--scm-t-gold);
    border-radius: 0;
    padding: 30px 26px 28px;
    text-align: left;
    box-sizing: border-box !important;
}
/* Featured image: full-bleed across the top of the card, under the gold rule */
.scm-testimonial-image {
    margin: -30px -26px 22px;
}
.scm-testimonial-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}
.scm-testimonials-section .scm-stars {
    color: var(--scm-t-star);
    font-size: 17px;
    line-height: 1;
    letter-spacing: 2px;
    margin: 0 0 14px !important;
}
.scm-testimonials-section .scm-quote {
    color: var(--scm-t-text) !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 18px !important;
}
.scm-testimonials-section .scm-quote-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--scm-t-link);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.scm-testimonials-section .scm-quote-toggle:hover { color: var(--scm-t-ink); }
.scm-testimonials-section .scm-name {
    margin: 0 !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: .5px !important;
    color: var(--scm-t-ink) !important;
}

/* Prev / next */
.scm-testimonial-nav {
    max-width: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.scm-testimonial-prev,
.scm-testimonial-next {
    background: transparent;
    border: 1px solid var(--scm-t-gold);
    color: var(--scm-t-title);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background-color .15s, color .15s;
}
.scm-testimonial-prev:hover,
.scm-testimonial-next:hover { background: var(--scm-t-gold); color: var(--scm-t-ink); }

@media (max-width: 767px) {
    .scm-testimonials-header { margin-bottom: 28px; }
    .scm-testimonials-section .scm-testimonials-sub { flex-basis: 100%; max-width: none; font-size: 16px !important; }
    .scm-testimonial-card { flex-basis: 85%; max-width: none; }
}

/* ---------------------------------------------------------------
 * BUILDING SIZES / CLEARANCE BUILDINGS -- shared grid card styling
 * --------------------------------------------------------------- */
.scm-size-grid,
.scm-clearance-grid {
    display: grid;
    grid-template-columns: repeat(var(--scm-cols, 3), 1fr);
    gap: 20px;
    background: var(--scm-bg);
}
.scm-size-card,
.scm-clearance-card {
    border: 1px solid var(--scm-border);
    border-radius: 10px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--scm-text);
    background: var(--scm-surface);
}
.scm-size-card img,
.scm-clearance-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.scm-size-card h3,
.scm-clearance-card h3 {
    margin: 12px 16px 4px;
    color: var(--scm-heading);
}
.scm-size-card p,
.scm-clearance-card p {
    margin: 0 16px 16px;
}
.scm-clearance-price {
    font-weight: 600;
}
.scm-price-strike {
    text-decoration: line-through;
    color: var(--scm-text-muted);
    font-weight: 400;
}
.scm-price-sale {
    color: #b00;
}

/* ---------------------------------------------------------------
 * BUILDING GALLERY -- single-image-at-a-time carousel for one
 * building's photo set (distinct from the testimonials scroll row,
 * which is for browsing many separate items rather than one item's
 * own photos).
 * --------------------------------------------------------------- */
.scm-building-gallery {
    position: relative;
    margin: 0 auto;
    background: var(--scm-bg);
}
.scm-bg-viewport {
    overflow: hidden;
    border-radius: 2px;
    background: var(--scm-surface);
}
.scm-bg-track {
    display: flex;
    transition: transform .4s ease;
}
.scm-bg-slide {
    flex: 0 0 100%;
}
.scm-bg-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
}
.scm-bg-prev,
.scm-bg-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    cursor: pointer;
}
.scm-bg-prev { left: 12px; }
.scm-bg-next { right: 12px; }
.scm-bg-prev:hover,
.scm-bg-next:hover { background: var(--scm-accent); }

.scm-bg-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.scm-bg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: var(--scm-border);
    cursor: pointer;
    padding: 0;
}
.scm-bg-dot.active {
    background: var(--scm-accent);
}

/* ---------------------------------------------------------------
 * SALES REP CARD
 * --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&family=IBM+Plex+Mono:wght@500&display=swap');

.scm-rep-card {
    display: flex;
    flex-direction: column;
	align-items: stretch;
    gap: 6px;
    max-width: 420px;
    padding: 28px 20px 28px 20px;
    border-radius: 5px;
    background: var(--scm-surface);
}
.scm-rep-card.scm-theme-light {
    background: #ffffff;
    border-radius: 5px;
    gap: 10px;
	height: stretch;
}
.scm-rep-card-photo{
	min-width: 64px;
}
.scm-rep-card-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #f5c800;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.scm-rep-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
h3.scm-rep-card-name {
    margin: 0;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}
.scm-rep-card-title {
    margin: 0;
    color: #b8bfca;
    font-size: 20px;
    letter-spacing: 1.5px;
    color: #b8bfca !important;
	text-transform: uppercase;
}
.scm-rep-card-email {
    display: flex;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    gap: 6px;
    margin: 0;
    font-size: 13px;
}
.scm-rep-card-email a {
    color: white;
    text-decoration: none;
}
.scm-rep-card-email a:hover {
    text-decoration: none;
}
.scm-rep-card-phone-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: white;
}
.scm-rep-card-phone-line a {
    color: white;
    text-decoration: none;
}
.scm-rep-card-phone-line a:hover {
    text-decoration: none;
}
.scm-rep-card-phone-icon {
    flex-shrink: 0;
    color: #f5c800;
    display: inline-flex;
}
.scm-rep-card-phone-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.scm-rep-card-tag {
    font-family: -apple-system, sans-serif;
    font-weight: 600;
}
a.scm-rep-card-portfolio-link svg {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    fill: currentColor;
}


.scm-rep-listings-grid {
    display: grid;
    grid-template-columns: repeat(var(--scm-cols, 3), 1fr);
    gap: 20px;
    background: var(--scm-bg);
}
.scm-rep-listing-card {
    border: 1px solid var(--scm-border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--scm-surface);
}

/*------------- REP CARD OVERRIDES ---------------------------  */
/* 
body.single-building_listing .scm-rep-card {
  background: #0a0e19 !important;
  border-radius: 14px !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 14px 30px rgba(10, 14, 25, 0.22) !important;
}
body.single-building_listing .scm-rep-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #f5c800 !important;
}
body.single-building_listing .scm-rep-card-name {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
body.single-building_listing .scm-rep-card-title {
  color: #9aa1b0 !important;
  font-size: 13px !important;
}
body.single-building_listing .scm-rep-card-email a,
body.single-building_listing .scm-rep-card-phone-line a {
  color: #ffffff !important;
}
body.single-building_listing .scm-rep-card-phone-icon svg {
  fill: #f5c800 !important;
} */
/* body.single-building_listing .scm-rep-card-tag {
  background: rgba(245, 200, 0, 0.15) !important;
  color: #f5c800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
} */
/* body.single-building_listing a.scm-rep-card-portfolio-link {
  color: #f5c800 !important;
  font-weight: 700 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}
body.single-building_listing a.scm-rep-card-portfolio-link svg {
  fill: #f5c800 !important;
}
 */
/* Mini image slider -- dots only (no arrows), swipeable via drag/touch */
.scm-card-gallery {
    position: relative;
    height: 280px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}
.scm-card-gallery-track {
    display: flex;
    height: 100%;
    transition: transform .35s ease;
}
.scm-card-gallery-slide {
    flex: 0 0 100%;
    height: 100%;
}
.scm-card-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}
.scm-card-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.scm-card-gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}
.scm-card-gallery-dot.active {
    background: #fff;
}

.scm-rep-listing-card-body {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: var(--scm-text);
}
.scm-rep-listing-card-body h3 {
    margin: 0 0 6px !important;
    color: var(--scm-heading);
    font-weight: 400 !important;
    font-family: 'bebas neue', sans-serif !important;
	padding-bottom: 5px!important;
	padding-top: 5px!important;
    text-align: left;
}
.scm-rep-listing-card-body h3:hover {
    text-decoration: none;
/*     color: var(--scm-accent); */
}
.scm-rep-listing-location {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--scm-text-muted);
}
.scm-rep-listing-readmore {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
	text-transform: uppercase;
    color: #c99a00;
}
.scm-rep-listing-card a {
    text-decoration: none!important;
}
.scm-rep-listing-readmore svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------------
 * VIDEO LIBRARY PLAYER
 * --------------------------------------------------------------- */
.scm-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 8px;
    background: #000;
}
.scm-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.scm-video-player {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 8px;
    background: #000;
}

/* ---------------------------------------------------------------
 * LISTING SPECIFICATIONS -- auto-generated from whatever keys exist
 * in the raw specifications data, no hardcoded field list.
 * --------------------------------------------------------------- */
.scm-specs {
    max-width: 900px;
    margin: 0 auto;
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: 12px;
    padding: 20px;
}
.scm-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}
.scm-specs-item {
    min-width: 0;
}
.scm-specs-label{
	text-transform: uppercase;
    font-size: 10px !important;
    letter-spacing: .05em;
}
.scm-specs-section-label {
    font-weight: 700 !important;
    font-family: 'IBM Plex Mono' !important;
    text-transform: uppercase;
    color: #c99a00 !important;
    margin: 0 0 2px;
    font-size: 13px;
}

.scm-specs-value {
    margin: 0;
    font-size: 15px;
    color: var(--scm-text);
}
.scm-specs-section {
    border-top: 1px solid var(--scm-border);
    padding-top: 16px;
    margin-top: 16px;
}
.scm-specs-section-label {
    margin-bottom: 10px;
}
.scm-specs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scm-specs-tag {
    background: #f3f1ea;
    color: #050505;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid var(--scm-border);
}
img.scm-rep-photo {
    height: 150px;
    width: 150px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    border: 3px solid #f5c802;
}

@media (max-width: 600px) {
    .scm-rep-listings-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
 * NO PHOTO PLACEHOLDER -- shown in place of a gallery/card image
 * when a listing has no photos at all. Reuses the existing
 * .scm-card-gallery / .scm-building-gallery containers for sizing,
 * so this only needs to style its own inner icon + label.
 * --------------------------------------------------------------- */
.scm-no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scm-surface);
}
.scm-no-photo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--scm-text-muted);
}
.scm-no-photo-inner svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
    opacity: .5;
}
.scm-no-photo-inner span {
    font-size: 12px;
}

/* ---------------------------------------------------------------
 * REP STATS STRIP -- "47 BUILDINGS SOLD / 12 YEARS AT TORO / SPECIALTY"
 * --------------------------------------------------------------- */
.scm-rep-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 20px 0;
    background: var(--scm-bg);
}
.scm-rep-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.scm-rep-stat-value {
    font-size: 24px;
    font-weight: 400;
    font-family: 'Bebas Neue';
    color: white;
}
.scm-rep-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: white;
}

/* ---------------------------------------------------------------
 * LISTING GALLERY -- tag label on each image, thumbnail strip instead
 * of dots. Uses its own classes (.scm-bg-thumb*), separate from
 * .scm-bg-dot* which [smart_building_gallery] (Steel Building Sizes)
 * still uses, so this doesn't affect that other gallery.
 * --------------------------------------------------------------- */
.scm-bg-slide {
    position: relative; /* so .scm-bg-tag anchors to its own slide, not the whole track */
}
.scm-bg-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 4px;
}
.scm-bg-thumbs-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.scm-bg-thumbs-viewport {
    overflow: hidden;
    flex: 1;
}
.scm-bg-thumbs-track {
    display: flex;
    transition: transform .3s ease;
}
.scm-bg-thumbs-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}
.scm-bg-thumb-page-prev,
.scm-bg-thumb-page-next {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--scm-border);
    background: var(--scm-surface);
    color: var(--scm-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.scm-bg-thumb {
    position: relative;
    flex: 0 0 90px;
    height: 150px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 1px;
    overflow: hidden;
    cursor: pointer;
    background: none;
}
.scm-bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scm-bg-thumb.active {
    border-color: var(--scm-accent);
}
.scm-bg-thumb-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
 * LISTING CARD -- job number/year, category tag, and Size/Eave/Material
 * spec row, added to the existing gallery + title + location + read more.
 * --------------------------------------------------------------- */
.scm-rep-listing-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--scm-text-muted);
    margin-bottom: 8px;
}
.scm-rep-listing-category {
    display: inline-block;
    background: #185fa500;
    color: #c99a01;
    font-size: 11px;
    border: 1px solid;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 5px;
    line-height: 1;
    border-radius: 4px;
}
.scm-rep-listing-specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--scm-border);
    font-size: 12px;
    color: var(--scm-text-muted);
}
.scm-rep-listing-specs-row strong {
    color: var(--scm-heading);
}

/* ---------------------------------------------------------------
 * LISTING FILTERS -- custom dropdowns (not native <select>) + a
 * listing count, above [smart_rep_listings]'s grid ("top" layout) or
 * as a left sidebar next to it ("side" layout).
 * --------------------------------------------------------------- */
.scm-listing-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.scm-listing-count {
    font-size: 13px;
    color: var(--scm-text-muted);
    font-weight: 600;
    margin-left: auto;
}

.scm-custom-dropdown {
    position: relative;
	background: white;
    border: solid 1px gainsboro;
    border-radius: 3px;
}
.scm-custom-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--scm-border);
    border-radius: 6px;
    background: var(--scm-surface);
    color: var(--scm-text);
    font-size: 13px;
    min-width: 160px;
    cursor: pointer;
    text-align: left;
}
.scm-custom-dropdown-toggle svg {
    width: 14px;
    height: 14px;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}
.scm-custom-dropdown.open .scm-custom-dropdown-toggle svg {
    transform: rotate(180deg);
}
.scm-custom-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    z-index: 20;
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    max-height: 260px;
    overflow-y: auto;
}
.scm-custom-dropdown.open .scm-custom-dropdown-menu {
    display: block;
	background:white;
}
.scm-custom-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border-top: 1px solid gainsboro;;
    background: none;
    color: var(--scm-text);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
.scm-custom-dropdown-option:hover {
    background: var(--scm-bg);
}
.scm-custom-dropdown-checkbox,
.scm-custom-dropdown-select-all-input {
    margin: 0;
    accent-color: var(--scm-accent);
    cursor: pointer;
}
.scm-custom-dropdown-select-all {
    font-weight: 700;
}

/* "top" layout (default): filter row above the grid, count on the right.
   Stacks to a single column on mobile per request. */
@media (max-width: 600px) {
    .scm-listings-layout-top .scm-listing-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .scm-listings-layout-top .scm-custom-dropdown-toggle {
        min-width: 0;
        width: 100%;
    }
    .scm-listings-layout-top .scm-listing-count {
        order: -1; /* count reads first when stacked, ahead of the filters */
    }
}

/* "side" layout: filters become a left sidebar, grid sits to the right. */
.scm-listings-layout-side {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}
.scm-listings-layout-side .scm-listing-filters {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
}
.scm-listings-layout-side .scm-custom-dropdown-toggle {
    width: 100%;
}
.scm-listings-layout-side .scm-listing-count {
    order: -1;
    margin-bottom: 4px;
}
@media (max-width: 780px) {
    .scm-listings-layout-side {
        grid-template-columns: 1fr;
    }
}

/* Map pin icon before the listing card's location text -- a second rule
   for .scm-rep-listing-location (not editing the existing one) that just
   adds the flex/alignment properties needed for the icon to sit inline. */
.scm-rep-listing-location {
    display: flex;
    align-items: center;
    gap: 5px;
}
.scm-rep-listing-location-icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    fill: currentColor;
}

/* [smart_all_reps] grid -- cards flow naturally at whatever width
   [smart_rep_card] itself renders at (it's a pill, not a fixed-width
   card), so this is just a simple wrapping grid around them. */
.scm-all-reps-grid {
    display: grid;
    grid-template-columns: repeat(var(--scm-cols, 3), 1fr);
    gap: 20px;
}
@media (max-width: 600px) {
    .scm-all-reps-grid {
        grid-template-columns: 1fr;
    }
}

/* "+" prefix on the filter dropdown toggle, matching the reference design --
   pure CSS addition, doesn't touch the existing toggle markup/rule. */
.scm-custom-dropdown-toggle-label::before {
    content: '+';
    margin-right: 4px;
    font-weight: 700;
    color: var(--scm-accent);
}

/* Initials fallback for a rep with no photo at all -- same circular slot
   and gold border as a real photo, so it doesn't look out of place next
   to reps who do have one. */
.scm-rep-card-initials {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #f5c800;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14283e;
    color: #f5c800;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 32px;
}

/* ---------------------------------------------------------------
 * REP CARD REDESIGN -- subtler layout: square photo, labeled
 * Direct/Toll-Free/Email rows, a solid CTA button, an outlined
 * secondary button, and a small trust-building status line.
 * Later in the cascade than the original .scm-rep-card rules, so
 * this overrides shape/spacing without deleting anything above it.
 * --------------------------------------------------------------- */
.scm-rep-card {
    display: block;
    max-width: 320px;
    padding: 20px;
    border-radius: 100px 12px 12px 12px;
}
.scm-rep-card-header {
    display: flex;
    align-items: start;
    gap: 14px;
    margin-bottom: 16px;
}
.scm-rep-card-photo img,
.scm-rep-card-initials {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
}
.scm-rep-card-initials {
    font-size: 20px;
}
.scm-rep-card-heading {
    min-width: 0;
}

.scm-rep-card-title {
    margin: 2px 0 0;
}
.scm-rep-card-tenure {
    margin: 4px 0 0;
    font-size: 11px;
    color: #8a94a3;
}

.scm-rep-card-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 16px;
}
.scm-rep-card-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}
.scm-rep-card-row-label {
    flex-shrink: 0;
    width: 62px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
    color: #8a94a3;
}
.scm-rep-card-row a {
    font-family: 'IBM Plex Mono', monospace;
    color: #f5c800;
    text-decoration: none;
}
/* .scm-rep-card-row a:hover {
    border-bottom-color: #f5c800;
} */

.scm-rep-card-cta {
    display: block;
    text-align: center;
    background: #f5c800;
    color: #14283e;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .03em;
    padding: 5px 15px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 10px;
}
.scm-rep-card-secondary {
    display: block;
    text-align: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    padding: 5px 15px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 12px;
}

.scm-rep-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    color: #8a94a3;
}
.scm-rep-card-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ecf6a;
    flex-shrink: 0;
}

.scm-rep-card-title {
    font-size: 10px !important;
}

.scm-rep-card-initials {
    border: 2px solid #f5c800;
}
.scm-rep-card a {
    text-decoration: none;
}
.scm-rep-card.scm-theme-light .scm-rep-card-name {
    color: #14283e !important;
}
.scm-rep-card .scm-rep-card-tenure {
    font-family: 'IBM Plex Mono';
    font-size: 13px;
    font-weight: 600;
}
.scm-rep-card.scm-theme-light .scm-rep-card-title {
    color: #5f6b7a !important;
}
.scm-rep-card.scm-theme-light .scm-rep-card-tenure {
    color: #8a94a3 !important;
}
.scm-rep-card.scm-theme-light .scm-rep-card-contact {
    border-top: 1px solid rgba(20, 40, 62, .12);
    border-bottom: 1px solid rgba(20, 40, 62, .12);
}
.scm-rep-card.scm-theme-light .scm-rep-card-row a {
    color: black;
    border-bottom: 1px solid rgba(166, 124, 0, .4);
    font-weight: 600;
    font-family: 'IBM Plex Mono' !important;
    text-decoration-line: underline !important;
    text-decoration-color: #F5C800 !important;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: auto;
    transition: background-color .15s, text-decoration-color .15s;
}
.scm-rep-card.scm-theme-light .scm-rep-card-row a:hover {
    border-bottom-color: #a67c00;
}
.scm-rep-card.scm-theme-light .scm-rep-card-secondary {
    border: 1px solid rgba(20, 40, 62, .25);
    color: #14283e;
}

/* ---------------------------------------------------------------
 * PROJECT SHOWCASE -- [smart_project_showcase]'s breadcrumb, title,
 * meta line, and category/material tags, above the gallery it embeds.
 * --------------------------------------------------------------- */
.scm-project-showcase {
    margin: 0 auto;
}
.scm-project-title {
    margin: 0 0 8px;
    font-family: 'bebas neue', sans-serif !important;
    letter-spacing: .01em;
}
.scm-project-meta {
    margin: 0 0 16px;
    font-size: 14px;
}
.scm-project-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
	position: absolute;
    right: 0;
    bottom: 0;
}
.scm-project-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0px 12px;
    border-radius: 4px;
}
.scm-project-breadcrumb {
    font-size: 13px;
    margin-bottom: 8px;
}

/* Light theme -- dark text on a light page background */
.scm-theme-light .scm-project-breadcrumb {
    color: #6b7280;
}
.scm-theme-light .scm-project-breadcrumb a {
    color: #6b7280;
    text-decoration: underline;
}
.scm-theme-light .scm-project-title {
    color: #16181d;
}
.scm-theme-light .scm-project-meta {
    color: #6b7280;
}
.scm-theme-light .scm-project-tag-category {
    background: #f5c800;
    color: #14283e;
}
.scm-theme-light .scm-project-tag-material {
    background: none;
    border: 1px solid #d0d0d0;
    color: #3a3d44;
}

/* Dark theme -- light text on a dark page background */
.scm-theme-dark .scm-project-breadcrumb {
    color: #9ba3af;
}
.scm-theme-dark .scm-project-breadcrumb a {
    color: #9ba3af;
    text-decoration: underline;
}
.scm-theme-dark .scm-project-title {
    color: #f3efe4;
}
.scm-theme-dark .scm-project-meta {
    color: #9ba3af;
}
.scm-theme-dark .scm-project-tag-category {
    background: #f5c800;
    color: #14283e;
}
.scm-theme-dark .scm-project-tag-material {
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #f3efe4;
}
/*--legacy faq styling saved here in case any of it was being used--*/
.ftt-section{padding:40px 20px;box-sizing:border-box;}
.ftt-row{display:flex;flex-wrap:wrap;gap:24px;max-width:1200px;margin:0 auto;box-sizing:border-box;}
.ftt-column{box-sizing:border-box;min-width:0;}
.ftt-text p:last-child{margin-bottom:0;}
.ftt-button{display:inline-block;padding:12px 22px;border-radius:4px;text-decoration:none;background:#222;color:#fff;}
.ftt-image{max-width:100%;height:auto;display:block;}
.ftt-separator{border:0;border-top:1px solid #ddd;margin:28px 0;}
.ftt-section-separator{text-align:center;margin:28px 0;position:relative;}
.ftt-section-separator-label{background:#fff;padding:0 16px;position:relative;z-index:1;font-weight:600;}
.ftt-checklist{padding-left:1.25rem;}
.ftt-content-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.ftt-content-box{padding:24px;border:1px solid #e5e5e5;border-radius:8px;}
.ftt-text-columns-2{column-count:2;column-gap:32px;}
.ftt-text-columns-3{column-count:3;column-gap:32px;}
.ftt-toggle{border:1px solid #e2e2e2;border-radius:8px;padding:14px 18px;margin-bottom:10px;}
.ftt-toggle summary{cursor:pointer;font-weight:600;}
.ftt-accordion{display:flex;flex-direction:column;}
.ftt-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;}
.ftt-gallery-image{width:100%;height:auto;display:block;border-radius:6px;}
.ftt-video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.ftt-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.ftt-video{max-width:100%;}
.ftt-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;text-align:center;}
.ftt-counter-value{display:block;font-size:32px;font-weight:700;}
.ftt-counter-title{display:block;color:#666;}
.ftt-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.ftt-testimonial{border:1px solid #e2e2e2;border-radius:8px;padding:20px;text-align:center;}
.ftt-testimonial-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;margin:0 auto 10px;}
.ftt-testimonial-quote{font-style:italic;}
.ftt-table-wrap{overflow-x:auto;}
.ftt-star-rating{color:#f5a623;font-size:20px;letter-spacing:2px;}
.ftt-alert{padding:16px 20px;border-radius:6px;margin-bottom:16px;border:1px solid transparent;}
.ftt-alert-general{background:#eef2f7;border-color:#d7dee8;}
.ftt-alert-success{background:#e6f6ec;border-color:#b7e4c7;}
.ftt-alert-warning{background:#fff6e5;border-color:#ffe4a3;}
.ftt-alert-error{background:#fdeaea;border-color:#f5b8b8;}
.ftt-tabs{display:flex;flex-direction:column;}
.ftt-tab{border:1px solid #e2e2e2;border-radius:8px;padding:14px 18px;margin-bottom:8px;}
.ftt-tab summary{cursor:pointer;font-weight:600;}
.ftt-slider{display:flex;flex-direction:column;gap:16px;}
.ftt-slide{background-size:cover;background-position:center;padding:40px;border-radius:8px;}
.ftt-social-links{display:flex;gap:12px;}
.ftt-before-after{display:flex;gap:16px;flex-wrap:wrap;}
.ftt-before-after figure{margin:0;text-align:center;flex:1;min-width:200px;}
.ftt-before-after img{width:100%;height:auto;border-radius:6px;}
.ftt-hotspots{position:relative;}
.ftt-hotspot-point{border-left:3px solid #185fa5;padding:6px 12px;margin-top:8px;}
.ftt-code{background:#1e1e1e;color:#f1f1f1;padding:16px;border-radius:6px;overflow-x:auto;}
@media(max-width:768px){.ftt-row{display:block}.ftt-column{max-width:100%!important}.ftt-text-columns-2,.ftt-text-columns-3{column-count:1}.ftt-before-after{flex-direction:column}}


/* [smart_all_reps] name search box */
.scm-all-reps-search {
    margin-bottom: 20px;
}
.scm-all-reps-search-input {
    width: 100%;
    max-width: 320px;
    padding: 10px 16px;
    border: 1px solid var(--scm-border);
    border-radius: 6px;
    background: white;
    color: var(--scm-text);
    font-size: 14px;
}

/* ---------------------------------------------------------------
 * "SOLD BY" line on listing cards -- the assigned Sales Rep's name,
 * sitting under the location line.
 * --------------------------------------------------------------- */
.scm-rep-listing-soldby {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: -8px 0 16px;
    font-size: 13px;
    color: var(--scm-text-muted);
}
.scm-rep-listing-soldby strong {
    color: var(--scm-heading);
    font-weight: 600;
}
.scm-rep-listing-soldby-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------------------------------------------------------------
 * [smart_listings_carousel] -- listing cards in a horizontal slider.
 * Cards-per-view comes from the shortcode's columns / columns_tablet /
 * columns_mobile attributes via CSS variables. Native scroll + snap
 * underneath, so touch swiping on the card text works everywhere; the
 * photo area keeps its own image swipe (touch-action: pan-y above).
 * --------------------------------------------------------------- */
.scm-listings-carousel {
    --scm-lc-gap: 20px;
    --scm-lc-per-view: var(--scm-lc-cols, 3);
    position: relative;
    background: var(--scm-bg);
}
.scm-lc-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none;
}
.scm-lc-viewport::-webkit-scrollbar {
    display: none;
}
.scm-lc-viewport:focus-visible {
    outline: 2px solid #c99a00;
    outline-offset: 4px;
}
.scm-lc-track {
    display: flex;
    gap: var(--scm-lc-gap);
    padding: 2px 1px; /* keeps card borders from being clipped */
}
.scm-lc-item {
    flex: 0 0 calc((100% - (var(--scm-lc-per-view) - 1) * var(--scm-lc-gap)) / var(--scm-lc-per-view));
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
}
.scm-lc-item > .scm-rep-listing-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.scm-lc-item .scm-rep-listing-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.scm-lc-item .scm-rep-listing-category {
    align-self: flex-start; /* keep the pill hugging its text in the flex column */
}
.scm-lc-item .scm-rep-listing-readmore {
    margin-top: auto;
    padding-top: 12px;
}

.scm-lc-prev,
.scm-lc-next {
    position: absolute;
    top: 140px; /* middle of the 280px card photo */
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--scm-border, #e2e2e2);
    background: var(--scm-surface, #fff);
    color: var(--scm-heading, #0a0e19);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .2s, color .2s, opacity .2s;
}
.scm-lc-prev { left: -22px; }
.scm-lc-next { right: -22px; }
.scm-lc-prev:hover,
.scm-lc-next:hover {
    background: #f5c800;
    color: #0a0e19;
}
.scm-lc-prev svg,
.scm-lc-next svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scm-lc-prev[disabled],
.scm-lc-next[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.scm-listings-carousel.scm-lc-static .scm-lc-prev,
.scm-listings-carousel.scm-lc-static .scm-lc-next,
.scm-listings-carousel.scm-lc-static .scm-lc-dots {
    display: none;
}

.scm-lc-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.scm-lc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--scm-border, #d5d5d5);
    cursor: pointer;
    transition: background .2s, width .2s;
}
.scm-lc-dot.active {
    width: 26px;
    border-radius: 5px;
    background: #f5c800;
}

@media (max-width: 1024px) {
    .scm-listings-carousel {
        --scm-lc-per-view: var(--scm-lc-cols-tablet, 2);
    }
    .scm-lc-prev { left: 8px; }
    .scm-lc-next { right: 8px; }
}
/* Arrows hang outside the carousel (-22px) only from 1440px up. Between 1025 and
   1439px many pages leave less than 22px beside the carousel, so the right arrow
   pushed the page 1px wider than the screen (sideways scroll). Keep them inside,
   as on tablets. 2026-10-21 */
@media (min-width: 1025px) and (max-width: 1439px) {
    .scm-lc-prev { left: 8px; }
    .scm-lc-next { right: 8px; }
}
@media (max-width: 600px) {
    .scm-listings-carousel {
        --scm-lc-gap: 14px;
        --scm-lc-per-view: var(--scm-lc-cols-mobile, 1);
    }
    .scm-lc-prev,
    .scm-lc-next {
        width: 38px;
        height: 38px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scm-lc-viewport { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
 * GALLERY VIDEOS -- YouTube / Vimeo / S3 video slides inside
 * [smart_listing_gallery] and the listing cards' mini slider.
 * --------------------------------------------------------------- */
.scm-gvideo {
    position: relative;
    width: 100%;
    background: #0a0e19;
    overflow: hidden;
}
.scm-gvideo-full {
    aspect-ratio: 16 / 9; /* matches .scm-bg-slide img */
}
.scm-gvideo-card {
    height: 100%; /* fills the card's fixed-height photo area */
}
.scm-gvideo video,
.scm-gvideo iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}
.scm-gvideo video {
    object-fit: contain;
}
.scm-gvideo-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: #0a0e19;
    cursor: pointer;
    display: block;
}
.scm-gvideo-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: auto;
}
.scm-gvideo-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(10, 14, 25, .72);
    border: 2px solid rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    pointer-events: none;
}
.scm-gvideo-play svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    margin-left: 4px; /* optically centre the triangle */
}
.scm-gvideo-facade:hover .scm-gvideo-play,
.scm-gvideo-facade:focus-visible .scm-gvideo-play {
    background: #f5c800;
    transform: translate(-50%, -50%) scale(1.06);
}
.scm-gvideo-facade:hover .scm-gvideo-play svg,
.scm-gvideo-facade:focus-visible .scm-gvideo-play svg {
    fill: #0a0e19;
}
.scm-gvideo-card .scm-gvideo-play {
    width: 54px;
    height: 54px;
}
.scm-gvideo-card .scm-gvideo-play svg {
    width: 24px;
    height: 24px;
}
/* Tag label ("Video", "exterior"...) shouldn't block the player underneath */
.scm-bg-tag {
    pointer-events: none;
    z-index: 2;
}
/* Card slider: keep the dots clickable above a playing video */
.scm-card-gallery-dots {
    z-index: 2;
}
.scm-card-gallery-dot.is-video {
    border-radius: 2px; /* square-ish dot hints "this one's a video" */
}

/* Thumbnail strip previews for video items */
.scm-bg-thumb video {
    background: #0a0e19; /* shown until the first frame loads */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.scm-thumb-video-blank {
    display: block;
    width: 100%;
    height: 100%;
    background: #0a0e19;
}
.scm-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10, 14, 25, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.scm-thumb-play svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-left: 2px;
}

/* YouTube's hqdefault poster is 4:3 with black bars baked into the top and
   bottom; zoom it slightly in the (squarer) card photo area so the bars
   are cropped off instead of showing. */
.scm-gvideo-youtube.scm-gvideo-card .scm-gvideo-facade img {
    transform: scale(1.34);
}
.scm-bg-thumb.is-video img {
    transform: scale(1.34); /* same YouTube letterbox crop for the thumbnail strip */
}

/* ---------------------------------------------------------------
 * LISTING GALLERY -- arrow + mobile fixes.
 * Arrows: fully reset so a theme's global <button> styling (padding,
 * grey background, big font) can't turn them into large grey boxes.
 * Doubled class selector for specificity over typical theme rules.
 * --------------------------------------------------------------- */
.scm-bg-stage {
    position: relative;
}
.scm-building-gallery .scm-bg-prev.scm-bg-prev,
.scm-building-gallery .scm-bg-next.scm-bg-next {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #0a0e19;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.scm-building-gallery .scm-bg-prev.scm-bg-prev { left: 12px; right: auto; }
.scm-building-gallery .scm-bg-next.scm-bg-next { right: 12px; left: auto; }
.scm-building-gallery .scm-bg-prev.scm-bg-prev:hover,
.scm-building-gallery .scm-bg-next.scm-bg-next:hover,
.scm-building-gallery .scm-bg-prev.scm-bg-prev:focus-visible,
.scm-building-gallery .scm-bg-next.scm-bg-next:focus-visible {
    background: var(--scm-accent, #f5c800) !important;
    color: #0a0e19;
}
.scm-bg-prev svg,
.scm-bg-next svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
/* [smart_building_gallery] still uses the plain ‹ › text arrows -- keep
   those visible inside the reset above. */
.scm-building-gallery .scm-bg-prev.scm-bg-prev:not(:has(svg)),
.scm-building-gallery .scm-bg-next.scm-bg-next:not(:has(svg)) {
    font-size: 24px;
    line-height: 1;
}

/* Swipe on the main photo (see public.js) -- vertical scrolling still
   belongs to the page, horizontal drags change the photo. */
.scm-building-gallery .scm-bg-viewport {
    touch-action: pan-y;
}
.scm-building-gallery .scm-bg-slide img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Thumbnail-page arrows get the same theme-proof reset. */
.scm-building-gallery .scm-bg-thumb-page-prev.scm-bg-thumb-page-prev,
.scm-building-gallery .scm-bg-thumb-page-next.scm-bg-thumb-page-next {
    -webkit-appearance: none;
    appearance: none;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    box-shadow: none;
}
.scm-building-gallery .scm-bg-thumb.scm-bg-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-shadow: none;
}

@media (max-width: 600px) {
    .scm-building-gallery .scm-bg-prev.scm-bg-prev,
    .scm-building-gallery .scm-bg-next.scm-bg-next {
        width: 36px !important;
        height: 36px !important;
    }
    .scm-building-gallery .scm-bg-prev.scm-bg-prev { left: 8px; }
    .scm-building-gallery .scm-bg-next.scm-bg-next { right: 8px; }
    .scm-bg-prev svg,
    .scm-bg-next svg {
        width: 17px;
        height: 17px;
    }
    .scm-bg-tag {
        top: 8px;
        left: 8px;
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Thumbnails: square tiles sized by the strip's width instead of a
       fixed 150px height, which made tall slivers on a phone. */
    .scm-bg-thumbs-wrap {
        gap: 6px;
        margin-top: 10px;
    }
    .scm-bg-thumbs-page {
        gap: 6px;
    }
    .scm-building-gallery .scm-bg-thumb.scm-bg-thumb {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .scm-bg-thumb-tag {
        font-size: 8px;
        padding: 2px;
        letter-spacing: 0;
    }
    .scm-thumb-play {
        width: 22px;
        height: 22px;
    }
    .scm-thumb-play svg {
        width: 10px;
        height: 10px;
    }
    .scm-building-gallery .scm-bg-thumb-page-prev.scm-bg-thumb-page-prev,
    .scm-building-gallery .scm-bg-thumb-page-next.scm-bg-thumb-page-next {
        width: 26px !important;
        height: 26px !important;
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------
 * LISTING GALLERY -- main photo always fills the frame ("cover").
 * The frame owns the 16:9 shape; the image is forced to fill it.
 * !important because themes commonly set img { height:auto;
 * object-fit:contain } or width:auto, which letterboxes the photo.
 * --------------------------------------------------------------- */
.scm-building-gallery .scm-bg-slide {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.scm-building-gallery .scm-bg-slide > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center;
    display: block;
    margin: 0 !important;
}
.scm-building-gallery:not([data-lightbox="off"]) .scm-bg-slide > img {
    cursor: zoom-in;
}
.scm-building-gallery .scm-bg-slide .scm-gvideo-full {
    height: 100%;
    aspect-ratio: auto;
}

/* ---------------------------------------------------------------
 * PHOTO VIEWER (lightbox) -- a centred modal, Bootstrap/Instagram
 * style: the page stays visible behind a dimmed backdrop, the photo
 * sits in a rounded card sized to the photo itself, the tag is on the
 * photo's top-right corner, and the arrows sit just outside it.
 * --------------------------------------------------------------- */
.scm-lightbox {
    --scm-lb-arrow: 44px;
    --scm-lb-gap: 16px;
    --scm-lb-pad: 16px;          /* white space between card edge and photo */
    --scm-lb-close: #0a0e19;     /* close-button colour */
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10, 12, 18, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(32px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .2s ease;
    touch-action: pan-y pinch-zoom;
    -webkit-tap-highlight-color: transparent;
}
.scm-lightbox.is-open { opacity: 1; }
.scm-lightbox[hidden] { display: none; }

/* The dialog holds the photo with room for an arrow on each side */
.scm-lightbox-dialog {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    padding: 0 calc(var(--scm-lb-arrow) + var(--scm-lb-gap));
    box-sizing: border-box;
    transform: scale(.96);
    transition: transform .2s ease;
}
.scm-lightbox.is-open .scm-lightbox-dialog { transform: scale(1); }
.scm-lightbox.is-single .scm-lightbox-dialog { padding: 0; }

/* The card: white, rounded, padded, shrinks to the photo. No header --
   the close button sits on the card's top-right corner. */
.scm-lightbox-figure {
    position: relative;
    margin: 0;
    padding: var(--scm-lb-pad);
    line-height: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.scm-lightbox .scm-lightbox-img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(1100px, calc(100vw - 48px - 2 * var(--scm-lb-pad) - 2 * (var(--scm-lb-arrow) + var(--scm-lb-gap)))) !important;
    max-height: calc(100vh - 64px - 2 * var(--scm-lb-pad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 64px - 2 * var(--scm-lb-pad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    min-width: 240px;
    min-height: 160px;
    object-fit: contain !important;
    border-radius: 8px;
    margin: 0 !important;
    user-select: none;
    -webkit-user-drag: none;
}
.scm-lightbox.is-single .scm-lightbox .scm-lightbox-img,
.scm-lightbox.is-single .scm-lightbox-img {
    max-width: min(1100px, calc(100vw - 48px - 2 * var(--scm-lb-pad))) !important;
}

.scm-lightbox-tag {
    position: absolute;
    top: calc(var(--scm-lb-pad) + 12px);
    right: calc(var(--scm-lb-pad) + 12px);
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
}
.scm-lightbox-tag:empty { display: none; }
.scm-lightbox-counter {
    position: absolute;
    bottom: calc(var(--scm-lb-pad) + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
}

.scm-lightbox .scm-lightbox-btn.scm-lightbox-btn {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 2;
    width: var(--scm-lb-arrow) !important;
    height: var(--scm-lb-arrow) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #0a0e19 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
    font-size: 0;
    line-height: 0;
}
.scm-lightbox .scm-lightbox-btn.scm-lightbox-btn:hover,
.scm-lightbox .scm-lightbox-btn.scm-lightbox-btn:focus-visible {
    background: var(--scm-accent, #f5c800) !important;
    color: #0a0e19 !important;
    outline: none;
}
.scm-lightbox-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
/* Arrows: just outside the photo, vertically centred on it */
.scm-lightbox .scm-lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); }
.scm-lightbox .scm-lightbox-next { right: 0; top: 50%; transform: translateY(-50%); }
/* Close: a round button sitting on the card's top-right corner */
.scm-lightbox .scm-lightbox-btn.scm-lightbox-close {
    top: -14px;
    right: -14px;
    width: 34px !important;
    height: 34px !important;
    background: var(--scm-lb-close) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important;
}
.scm-lightbox .scm-lightbox-btn.scm-lightbox-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
}
.scm-lightbox .scm-lightbox-btn.scm-lightbox-close:hover,
.scm-lightbox .scm-lightbox-btn.scm-lightbox-close:focus-visible {
    background: var(--scm-accent, #f5c800) !important;
    color: #0a0e19 !important;
}
.scm-lightbox.is-single .scm-lightbox-prev,
.scm-lightbox.is-single .scm-lightbox-next,
.scm-lightbox.is-single .scm-lightbox-counter { display: none; }

html.scm-lightbox-lock,
html.scm-lightbox-lock body {
    overflow: hidden !important;
}

/* Phones: photo uses the width; arrows float on the photo's edges */
@media (max-width: 600px) {
    .scm-lightbox {
        --scm-lb-arrow: 38px;
        --scm-lb-pad: 8px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .scm-lightbox-dialog { padding: 0; }
    .scm-lightbox .scm-lightbox-img,
    .scm-lightbox.is-single .scm-lightbox-img {
        max-width: calc(100vw - 32px - 2 * var(--scm-lb-pad)) !important;
        min-width: 0;
    }
    .scm-lightbox .scm-lightbox-prev { left: calc(var(--scm-lb-pad) + 8px); }
    .scm-lightbox .scm-lightbox-next { right: calc(var(--scm-lb-pad) + 8px); }
    .scm-lightbox .scm-lightbox-btn.scm-lightbox-close { top: -12px; right: -12px; }
    .scm-lightbox .scm-lightbox-btn.scm-lightbox-prev,
    .scm-lightbox .scm-lightbox-btn.scm-lightbox-next {
        background: rgba(255, 255, 255, .85) !important;
    }
    .scm-lightbox-figure { border-radius: 12px; }
    .scm-lightbox .scm-lightbox-img { border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .scm-lightbox, .scm-lightbox-dialog { transition: none; }
}

/* Lightbox: guard against lazy-load plugins hiding the viewer's photo
   (several fade images to opacity:0 until their own script marks them
   loaded -- which never happens for an image added after page load). */
.scm-lightbox .scm-lightbox-img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
}
.scm-lightbox-error {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #646970;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
}
.scm-lightbox.is-error .scm-lightbox-error { display: block; line-height: 1.4; }
.scm-lightbox.is-error .scm-lightbox-img { visibility: hidden !important; }
.scm-bg-viewport {
    background: transparent;
}
span.scm-regional-variant a, a.scm-toll-free-link{
    color: #cfa42f !important;
    font-weight: 600;
    font-family: 'IBM Plex Mono' !important;
    text-decoration-line: underline !important;
    text-decoration-color: #F5C800 !important;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: auto;
    transition: background-color .15s, text-decoration-color .15s;
}

/* [smart_project_showcase] breadcrumb: Projects / Rep Name (both links) */
nav.scm-project-breadcrumb {
    display: block;
    padding: 0;
    background: none;
}
.scm-project-breadcrumb a:hover,
.scm-project-breadcrumb a:focus-visible {
    color: #f5c800;
}
.scm-project-breadcrumb-sep {
    margin: 0 4px;
    opacity: .6;
}

/* ---------------------------------------------------------------
 * "ASK A QUESTION" FORM POP-UP -- same look as the photo viewer:
 * dimmed page, white rounded card, round close button on the card's
 * top-right corner, no header (the form brings its own title).
 * --------------------------------------------------------------- */
.scm-formmodal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10, 12, 18, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .2s ease;
}
.scm-formmodal.is-open { opacity: 1; }
.scm-formmodal[hidden] { display: none; }
.scm-formmodal-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    transform: scale(.96);
    transition: transform .2s ease;
}
.scm-formmodal.is-open .scm-formmodal-card { transform: scale(1); }
.scm-formmodal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding: 8px;
    min-height: 240px;
}
.scm-formmodal .scm-formmodal-frame {
    display: block;
    width: 100% !important;
    min-width: 100%;
    max-width: 100% !important;
    height: 640px;
    border: 0 !important;
    margin: 0 !important;
    background: transparent;
}
.scm-formmodal .scm-formmodal-close.scm-formmodal-close {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: var(--scm-lb-close, #0a0e19) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}
.scm-formmodal .scm-formmodal-close.scm-formmodal-close:hover,
.scm-formmodal .scm-formmodal-close.scm-formmodal-close:focus-visible {
    background: var(--scm-accent, #f5c800) !important;
    color: #0a0e19 !important;
    outline: none;
}
.scm-formmodal-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    display: block;
}
/* Simple spinner while the form loads */
.scm-formmodal-loading {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.scm-formmodal.is-loading .scm-formmodal-loading { display: flex; }
.scm-formmodal-loading span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #e6e6e6;
    border-top-color: var(--scm-accent, #f5c800);
    animation: scm-formmodal-spin .8s linear infinite;
}
@keyframes scm-formmodal-spin { to { transform: rotate(360deg); } }
/* The rep card's button stays an <a>; make sure it looks clickable */
.scm-rep-card-cta[data-scm-ask-form] { cursor: pointer; }

@media (max-width: 600px) {
    .scm-formmodal { padding-left: 14px; padding-right: 14px; }
    .scm-formmodal-card { border-radius: 12px; }
    .scm-formmodal-body { padding: 4px; border-radius: 12px; }
    .scm-formmodal .scm-formmodal-close.scm-formmodal-close { top: -12px; right: -12px; }
}
@media (prefers-reduced-motion: reduce) {
    .scm-formmodal, .scm-formmodal-card { transition: none; }
    .scm-formmodal-loading span { animation-duration: 2s; }
}

/* ---------------------------------------------------------------
 * BUILDING SIZE CARDS -- [smart_all_sizes] / [smart_sizes_carousel]
 * These cards reuse the Building Listing card's classes (.scm-rep-listing-card,
 * .scm-card-gallery, .scm-rep-listing-category, h3...), so they pick up your
 * existing listing-card styling. The rules below only cover what a listing
 * card doesn't have: the label/value rows, the details button, and the
 * call line.
 * --------------------------------------------------------------- */
.scm-size-card-body h3 a {
    color: inherit;
    text-decoration: none;
}
.scm-size-card-rows {
    margin: 12px 0 0;
    padding: 0;
}
.scm-size-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--scm-border, #e2e2e2);
    font-size: 13px;
}
.scm-size-card-row dt {
    margin: 0;
    color: var(--scm-text-muted, #6b7280);
}
.scm-size-card-row dd {
    margin: 0;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--scm-heading, #16181d);
}
.scm-size-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 15px;
    border-radius: 6px;
    background: #f5c800;
    color: #14283e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
}
.scm-size-card-cta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scm-size-card-call {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--scm-text-muted, #6b7280);
}
.scm-size-card-call a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--scm-heading, #16181d);
    text-decoration: none;
}
.scm-size-card-call svg {
    width: 15px;
    height: 15px;
    fill: #c99a00;
    flex-shrink: 0;
}

/* Rep card button that opens a Thrive 2-Step Lightbox: Thrive wraps the
   button in an inline <span class="tve-leads-two-step-trigger ...">. Making
   that wrapper a block keeps the button laid out exactly as it is without it. */
.scm-rep-card .tve-leads-two-step-trigger {
    display: block;
}

/* ---------------------------------------------------------------
 * VIDEO CARDS -- [smart_videos_carousel]
 * These cards reuse the Building Listing card's classes
 * (.scm-rep-listing-card, .scm-rep-listing-category, h3...), so they pick up
 * your listing-card styling. The rules below only cover what a listing card
 * doesn't have: the 16:9 picture and its play button.
 * --------------------------------------------------------------- */
.scm-video-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0e19;
}
.scm-video-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
a.scm-video-card-thumb:hover img {
    transform: scale(1.04);
}
.scm-video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f5c800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.scm-video-card-play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
    fill: #14283e;
}
.scm-video-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

/* ---------------------------------------------------------------
 * VIDEO REVIEW PAGE -- [smart_video_poster], [smart_video_specs],
 * [smart_video_reviewer], [smart_size_compare], [smart_video_project]
 * Values follow the design mockup. The poster and strip are made for a
 * dark hero; the project section for a light background.
 * --------------------------------------------------------------- */

/* Poster: click-to-play picture. Square bottom corners so the specs strip can
   sit flush underneath; scm-vposter--alone (attach="no") rounds all four. */
.scm-vposter {
    position: relative;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #000;
}
.scm-vposter--alone {
    border-radius: 8px;
}
.scm-vposter-link {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    text-decoration: none;
}
.scm-vposter-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scm-vposter-link:hover .scm-vposter-img {
    opacity: .85;
}
.scm-vposter-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #F5C800;
    color: #0A0E19;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}
.scm-vposter-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 92px;
    background: rgba(10, 14, 25, .86);
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.scm-vposter-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}

/* Spec strip */
.scm-vspecs {
    display: flex;
    flex-wrap: wrap;
    background: #101627;
    border: 1px solid #232B3D;
    border-top: 3px solid #F5C800;
    border-radius: 0 0 8px 8px;
}
.scm-vspecs-cell {
    flex: 1 1 170px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px;
    border-left: 1px solid #232B3D;
}
.scm-vspecs-label {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7C8798;
}
.scm-vspecs-value {
    font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: #fff;
}

/* Reviewer card */
.scm-vreviewer {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #E4E0D5;
    border-radius: 6px;
}
.scm-vreviewer-photo {
    flex-shrink: 0;
    width: 132px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
}
.scm-vreviewer-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.scm-vreviewer-name {
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #10141F;
}
.scm-vreviewer-title {
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.45;
    color: #3A4150;
}

/* Footprint diagram card */
.scm-size-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: #fff;
    border: 1px solid #E4E0D5;
    border-radius: 6px;
    box-sizing: border-box;
}
.scm-size-compare svg {
    display: block;
    width: 100%;
    height: auto;
}
.scm-size-compare-text {
    margin: 0;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3A4150;
}

/* The whole project section: text + reviewer on the left, diagram on the right */
.scm-vproject {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}
.scm-vproject-main {
    flex: 1 1 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.scm-vproject > .scm-size-compare {
    flex: 1.2 1 520px;
    min-width: 0;
}
.scm-vproject-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.scm-vproject-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6A5300;
}
.scm-vproject-eyebrow-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #6A5300;
}
.scm-vproject-title {
    margin: 0;
    font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 400;
    line-height: .92;
    color: #10141F;
}
.scm-vproject-text {
    max-width: 560px;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    color: #3A4150;
}
.scm-vproject-text p {
    margin: 0 0 1em;
}
.scm-vproject-text p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * CLEARANCE LISTING -- [smart_clearance_listing]
 * Values taken from the clearance page's current design: the card, the
 * name tag on the picture, gold-dot bullets, struck-through price over the
 * orange sale price, the two buttons and the navy call footer. The filter bar
 * above the grid reuses the listing filter styles.
 * --------------------------------------------------------------- */
.scm-clearance-listing-grid {
    display: grid;
    grid-template-columns: repeat(var(--scm-cols, 4), minmax(0, 1fr));
    gap: 15px 14px;
    align-items: stretch;
}
@media (max-width: 1023px) {
    .scm-clearance-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .scm-clearance-listing-grid { grid-template-columns: 1fr; }
}

.scm-clearance-listing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #DAD6C8;
    box-sizing: border-box;
    overflow: hidden;
}

/* Picture with the building's name as a tag, bottom-left */
.scm-cl-media {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 212px;
    padding: 20px;
    box-sizing: border-box;
    background: #2B2F38;
}
.scm-cl-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scm-cl-tag {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 5px 10px;
    background: #383B43;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5em;
    color: #F5C800;
}

.scm-cl-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 0;
    text-align: center;
}

/* Bullets (the building's own content) */
.scm-cl-features {
    padding: 0 20px;
    text-align: left;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #2B2F38;
}
.scm-cl-features ul,
.scm-cl-features ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 0;
    list-style: none;
}
.scm-cl-features ul > li,
.scm-cl-features ol > li {
    position: relative;
    margin: 0;
    padding-left: 34px;
    font-size: 17px;
    line-height: 1.7;
    color: #2B2F38;
}
.scm-cl-features ul > li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .62em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F5C800;
    box-shadow: 0 0 0 3px #FBF3CC;
}
.scm-cl-features ol { counter-reset: scm-cl-ol; }
.scm-cl-features ol > li { counter-increment: scm-cl-ol; padding-left: 44px; }
.scm-cl-features ol > li::before {
    content: counter(scm-cl-ol);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: #6A5300;
}
.scm-cl-features p { margin: 12px 0 18px; }

/* Prices */
.scm-cl-price { margin-top: auto; }
.scm-cl-price p { margin: 0; }
.scm-cl-price-was {
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: line-through;
    color: #2B2F38;
}
.scm-cl-price-now {
    font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2em;
    color: #E85D04;
}

/* Buttons */
.scm-cl-actions {
    display: flex;
    gap: 15px;
    margin: 6px 0 12px;
    padding: 3px 0;
}
.scm-cl-actions > * {
    flex: 1 1 0;
    min-width: 0;
}
.scm-cl-actions .tve-leads-two-step-trigger {
    display: block;
}
.scm-cl-btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 5px 0;
    padding: 10px 20px;
    border: 1px solid #DAD6C8;
    border-radius: 0;
    background: transparent;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #0A0E19;
}
.scm-cl-btn--gold { background: #F5C800; }
.scm-cl-btn--ghost:hover { background: #F6F3E8; }
.scm-cl-btn--gold:hover { background: #FFD81F; }

/* Call footer */
.scm-cl-call {
    padding: 8px 0 10px;
    background: #14283E;
    text-align: center;
}
.scm-cl-call p { margin: 0; }
.scm-cl-call-text {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}
.scm-cl-call-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 5px 18px;
    border-radius: 5px;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #F5C800;
}
.scm-cl-call-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
 * TESTIMONIALS GRID -- [smart_testimonials_grid]
 * Masonry: cards of different heights packed together with no gaps. The card
 * itself is the same .scm-testimonial-card as the slider. Plain CSS columns
 * do the layout; when there's a "Load more" button a small script takes over
 * and puts each card into the shortest column of its own, so cards already on
 * screen never move when more are added.
 * --------------------------------------------------------------- */
.scm-testimonial-masonry {
    --scm-t-active: var(--scm-t-cols, 3);      /* columns at this screen size; the script reads it too */
    column-count: var(--scm-t-active);
    column-gap: 22px;
}
@media (max-width: 1023px) {
    .scm-testimonial-masonry { --scm-t-active: var(--scm-t-cols-tablet, 2); }
}
@media (max-width: 640px) {
    .scm-testimonial-masonry { --scm-t-active: var(--scm-t-cols-mobile, 1); }
}
.scm-testimonial-masonry .scm-testimonial-card {
    display: inline-block;      /* keeps a card whole inside its column in older browsers too */
    width: 100%;
    max-width: none;
    margin: 0 0 22px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
.scm-testimonial-masonry .scm-quote p {
    margin: 0 0 .8em;
}
.scm-testimonial-masonry .scm-quote p:last-child {
    margin-bottom: 0;
}

/* Load-more mode (the script is running): real columns, each card in the shortest one */
.scm-testimonial-masonry.is-js {
    column-count: auto;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.scm-testimonial-masonry.is-js:not(.is-ready) {
    visibility: hidden;         /* held back until the first batch is arranged... */
    max-height: 900px;          /* ...without leaving a huge gap while it waits */
    overflow: hidden;
}
.scm-testimonial-col {
    flex: 1 1 0;
    min-width: 0;
}
.scm-testimonial-masonry.is-js .scm-testimonial-card {
    display: block;
}

/* Load more */
.scm-testimonial-more {
    margin-top: 10px;
    text-align: center;
}
.scm-testimonial-more-btn {
    display: inline-block;
    min-width: 200px;
    padding: 14px 36px;
    border: 1px solid #DAD6C8;
    border-radius: 0;
    background: #F5C800;
    color: #0A0E19;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.scm-testimonial-more-btn[hidden] {
    display: none;              /* the rule above would otherwise beat the browser's own [hidden] */
}
.scm-testimonial-more-btn:hover {
    background: #FFD81F;
}
.scm-testimonial-more-btn:focus-visible {
    outline: 2px solid #0A0E19;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * VIDEO GRID -- [smart_videos_grid]
 * A grid of the same cards the video carousel uses, with an optional filter
 * bar (the same dropdown and bar as the building listings, plus a search
 * box). The filter bar only shows once the script has attached to it, since
 * it can't do anything without it; cards past the first batch (when there's a Load
 * more button) are held back while the script is running. Without the script
 * every card shows and the filter bar stays away.
 * --------------------------------------------------------------- */
.scm-videos-wrap .scm-videos-controls {
    display: none;
}
.scm-videos-wrap.is-js.is-ready[data-filters-ready] .scm-videos-controls {
    display: flex;                              /* ...and only once the filter script has really attached to it */
}
.scm-videos-search-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 10px 16px;
    border: 1px solid var(--scm-border);
    border-radius: 6px;
    background: #fff;
    color: var(--scm-text);
    font-size: 14px;
}

.scm-videos-grid {
    --scm-vg-active: var(--scm-vg-cols, 3);       /* columns at this screen size */
    display: grid;
    grid-template-columns: repeat(var(--scm-vg-active), minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 1023px) {
    .scm-videos-grid { --scm-vg-active: var(--scm-vg-cols-tablet, 2); }
}
@media (max-width: 640px) {
    .scm-videos-grid { --scm-vg-active: var(--scm-vg-cols-mobile, 1); }
}
.scm-videos-grid > .scm-rep-listing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.scm-videos-grid .scm-rep-listing-category {
    align-self: flex-start;                     /* keep the category pill hugging its text */
}
/* Held back until "Load more" -- unless a filter or search is in use, when every match shows */
.scm-videos-grid.is-js:not(.is-filtering) > .scm-vg-later {
    display: none;
}
.scm-videos-empty {
    margin: 24px 0;
    text-align: center;
    color: var(--scm-text-muted);
}

/* Load more */
.scm-videos-more {
    margin-top: 28px;
    text-align: center;
}
.scm-videos-more-btn {
    display: inline-block;
    min-width: 200px;
    padding: 14px 36px;
    border: 1px solid #DAD6C8;
    border-radius: 0;
    background: #F5C800;
    color: #0A0E19;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.scm-videos-more-btn[hidden] {
    display: none;                              /* the rule above would otherwise beat the browser's own [hidden] */
}
.scm-videos-more-btn:hover {
    background: #FFD81F;
}
.scm-videos-more-btn:focus-visible {
    outline: 2px solid #0A0E19;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * SERVER-SIDE LISTINGS -- the filter bar's search box, Load more and the
 * messages. The filter bar itself, its dropdowns and its count are the
 * building listings' own styles; the search box sits after the count, which
 * has an auto margin pushing both to the far end of the bar.
 * --------------------------------------------------------------- */
/* The same look as the dropdowns beside it: a dropdown's visible box is its wrapper (.scm-custom-dropdown),
   so this copies that -- fixed values, because the theme variables aren't always in scope around the bar. */
.scm-listing-search {
    box-sizing: border-box;
    min-width: 200px;
    padding: 8px 14px;
    border: solid 1px gainsboro;
    border-radius: 3px;
    background: white;
    color: inherit;
    font-size: 13px;
    line-height: normal;
}
.scm-listing-search::placeholder {
    color: #767676;
}
.scm-listing-search:focus {
    outline: 2px solid #0A0E19;
    outline-offset: 1px;
}
@media (max-width: 600px) {
    .scm-listing-search { width: 100%; min-width: 0; }          /* stacked, like the dropdowns */
}
.scm-listings-layout-side .scm-listing-search {
    width: 100%;
    min-width: 0;
}
.scm-sl-main {
    min-width: 0;
}
.scm-sl-wrap.is-loading .scm-sl-main {
    opacity: .55;
    transition: opacity .15s ease;
}
.scm-sl-empty,
.scm-sl-error {
    margin: 24px 0;
    text-align: center;
    color: var(--scm-text-muted, #6b6b6b);
}
.scm-sl-error {
    color: #b32d2e;
}
.scm-sl-more {
    margin-top: 28px;
    text-align: center;
}
.scm-sl-more-btn {
    display: inline-block;
    min-width: 200px;
    padding: 14px 36px;
    border: 1px solid #DAD6C8;
    border-radius: 0;
    background: #F5C800;
    color: #0A0E19;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.scm-sl-more-btn[hidden] {
    display: none;                              /* the rule above would otherwise beat the browser's own [hidden] */
}
.scm-sl-more-btn:hover {
    background: #FFD81F;
}
.scm-sl-more-btn:disabled {
    opacity: .6;
    cursor: wait;
}
.scm-sl-more-btn:focus-visible {
    outline: 2px solid #0A0E19;
    outline-offset: 3px;
}
.testi-one .scm-testimonial-card {
    flex: 0 0 100%;
    max-width: 100%;
}