/* ============================================================
   PropertyFlix — unified theme layer
   Re-skins the Webflow pages to flow like the Brand Builder:
   one cohesive surface system (Poppins · #1BA8E0 · layered
   #0A0A0A→#141416 darks, hairline borders) in dark + light.
   Driven by html[data-theme="dark|light"] (key: pf-theme).
   Loaded AFTER the Webflow stylesheet.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

/* ---------- TOKENS ---------- */
html[data-theme="dark"], html:not([data-theme]) {
  --pf-bg: #0A0A0A;
  --pf-band: #101012;
  --pf-surface: #141416;
  --pf-surface-2: #1A1A1E;
  --pf-ink: #FFFFFF;
  --pf-muted: #9CA3AF;
  --pf-line: rgba(255,255,255,0.10);
  --pf-line-strong: rgba(255,255,255,0.16);
  --pf-shadow: 0 18px 50px -24px rgba(0,0,0,0.7);
  /* remap Webflow tokens so inherited borders/muted text theme correctly */
  --border-color: rgba(255,255,255,0.10);
  --light-3: rgba(255,255,255,0.14);
  --grey-3: rgba(255,255,255,0.14);
  --grey: #9CA3AF;
  --grey-dark: #6B7280;
  color-scheme: dark;
}
html[data-theme="light"] {
  --pf-bg: #FAFAF9;
  --pf-band: #F1F3F5;
  --pf-surface: #FFFFFF;
  --pf-surface-2: #F4F5F7;
  --pf-ink: #0A0A0A;
  --pf-muted: #6B7280;
  --pf-line: rgba(10,10,10,0.10);
  --pf-line-strong: rgba(10,10,10,0.16);
  --pf-shadow: 0 20px 50px -28px rgba(10,10,10,0.25);
  --border-color: rgba(10,10,10,0.10);
  --light-3: rgba(10,10,10,0.12);
  --grey-3: rgba(10,10,10,0.12);
  --grey: #6B7280;
  --grey-dark: #9aa1ab;
  color-scheme: light;
}
:root { --accent: #1BA8E0; --accent-deep: #0E7BA8; --accent-soft: rgba(27,168,224,0.12); }

/* ---------- TYPE: Poppins ---------- */
body, .body,
input, textarea, select, button,
.w-input, .w-select,
h1, h2, h3, h4, h5, h6,
.h1-heading, .h2-heading, .h2-heading-w1,
.heading-md, .offer-title, .offer-price,
.price-title, .price-val, .num, .num-val, .val,
.about-st-val, .founder-name, .service-title,
.text-val, .rev-name, .team-name, .fo-title, .num-title,
.text-caption {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }

/* ---------- BASE SURFACES ---------- */
body { background-color: var(--pf-bg) !important; color: var(--pf-ink) !important; }

.navbar {
  background-color: var(--pf-bg) !important;
  border-bottom: 1px solid var(--pf-line) !important;
}
.header { background-color: var(--pf-band) !important; }
.scrolling { background-color: var(--pf-band) !important; }
.footer { background-color: var(--pf-band) !important; border-top: 1px solid var(--pf-line); color: var(--pf-ink) !important; }
.footer-down { border-top-color: var(--pf-line) !important; }

/* ---------- SECTION BANDS ---------- */
.section { color: var(--pf-ink); }
.section.bg-white   { background-color: var(--pf-bg) !important;       color: var(--pf-ink) !important; }
.section.bg-light   { background-color: var(--pf-band) !important;     color: var(--pf-ink) !important; }
.section.bg-light-2 { background-color: var(--pf-surface) !important;  color: var(--pf-ink) !important; }
.section.bg-dark    { background-color: var(--pf-band) !important;     color: var(--pf-ink) !important; }

/* ---------- CARDS / SURFACES ---------- */
.offer-card,
.testimonial-card,
.package-card-content,
.addons,
.tab-el,
.case-study-content,
.t-link,
.card,
.avatar-item-w,
.pr-card,
.step-el,
.service-card,
.review-card,
.faq-item,
.feature-card,
.num-card {
  background-color: var(--pf-surface) !important;
  color: var(--pf-ink) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
}
/* nested white blocks (e.g. package header strip) */
.package-card,
.case-study-card,
.offer-card-head { background-color: transparent !important; }

/* popular / highlighted tiers → accent emphasis */
.offer-card.is-popular,
.pr-card.is-popular {
  background-color: var(--pf-surface-2) !important;
  color: var(--pf-ink) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), var(--pf-shadow) !important;
}

/* ---------- TYPOGRAPHY COLOR ---------- */
.text-color-gray { color: var(--pf-muted) !important; }
.text-color-gray-dark { color: var(--pf-muted) !important; }
.text-color-gray-light { color: var(--pf-muted) !important; }
.text-caption { color: var(--accent) !important; }
.text-color-primary, .accent-text { color: var(--accent) !important; }

/* ---------- NAV LINKS / CHROME ---------- */
.nav-link { color: var(--pf-muted) !important; }
.nav-link:hover { color: var(--pf-ink) !important; background-color: var(--pf-line) !important; }
.nav-link.w--current { color: var(--accent) !important; background-color: var(--pf-line) !important; }
.m-line, .m-line-2, .m-line-3 { background-color: var(--pf-ink) !important; }
.nav-button { background-color: var(--accent) !important; color: #fff !important; }
.nav-button:hover { background-color: var(--accent-deep) !important; color: #fff !important; }

/* ---------- BUTTONS ---------- */
.button.is-outline { color: var(--pf-ink) !important; border-color: var(--pf-line-strong) !important; }
.button.is-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.button-round.is-light { background-color: var(--pf-surface) !important; color: var(--pf-ink) !important; border: 1px solid var(--pf-line) !important; }
.button-round.is-light:hover { border-color: var(--accent) !important; }

/* ---------- INPUTS ---------- */
.text-field, .text-field.v2, .textarea-s, .textarea-s.v2, .text-field.is-small,
.w-input, .w-select, .select-field {
  background-color: var(--pf-surface) !important;
  color: var(--pf-ink) !important;
  border: 1px solid var(--pf-line) !important;
}
.text-field::placeholder, .textarea-s::placeholder, .w-input::placeholder { color: var(--pf-muted) !important; }
.text-field:focus, .textarea-s:focus, .w-input:focus, .text-field.v2:focus, .textarea-s.v2:focus { border-color: var(--accent) !important; }

/* ---------- LOGO ---------- */
.brand-w .logo { height: 34px; width: auto; object-fit: contain; }

/* ---------- MOTION ---------- */
body, .navbar, .footer, .section, .header, .scrolling {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================================
   SECTION POLISH — align homepage modules to the Brand Builder
   ============================================================ */

/* ---- Brokerage marquee: uniform, refined, themed fades ---- */
.scrolling { padding: 1.9rem 0 !important; }
.scroll-text { align-items: center; }
.logo-text {
  color: var(--pf-ink) !important;
  font-weight: 600 !important;
  font-size: clamp(0.62rem, 0.92vw, 0.86rem) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: 0.85;
}
.logo-text em { font-style: normal !important; }

/* commercial.html client-logo strip: theme-aware edge fades + logos */
.gradient-v2 { background-image: linear-gradient(89deg, var(--pf-bg) 14%, transparent) !important; }
.gradient-v2.is-right { background-image: linear-gradient(270deg, var(--pf-bg) 14%, transparent) !important; }
html[data-theme="light"] .logo-p { filter: none !important; }
html[data-theme="light"] .logo-p.v2 { filter: none !important; opacity: 1 !important; }
html[data-theme="dark"] .logo-p { filter: invert(1) brightness(1.6) grayscale(1) !important; }
html[data-theme="dark"] .logo-p.v2 { filter: none !important; }

/* auto-scrolling brokerage marquee */
.scrolling { padding: 1.6rem 0 !important; overflow: hidden !important; position: relative; display: flex; }
.scrolling .scroll-text {
  display: flex !important; flex: 0 0 auto; align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem); transform: none;
  animation: pfMarquee 38s linear infinite;
}
.scrolling:hover .scroll-text { animation-play-state: paused; }
@keyframes pfMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.gradient { display: block !important; position: absolute; top: 0; bottom: 0; left: 0; width: 9rem; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--pf-band), transparent) !important; }
.gradient.is-right { left: auto; right: 0; background: linear-gradient(270deg, var(--pf-band), transparent) !important; }
@media (prefers-reduced-motion: reduce) { .scrolling .scroll-text { animation: none !important; } }

/* ---- Avatar row (Trusted by 500+): clean cards, no tilt ---- */
.avatar-item-w,
.avatar-item-w.w1, .avatar-item-w.w2, .avatar-item-w.w3,
.avatar-item-w.w4, .avatar-item-w.w5, .avatar-item-w.w6, .avatar-item-w.w7 {
  transform: none !important;
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 18px !important;
  padding: 10px 10px 16px !important;
  box-shadow: none !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.avatar-item-w:hover,
.avatar-item-w.w1:hover, .avatar-item-w.w2:hover, .avatar-item-w.w3:hover,
.avatar-item-w.w4:hover, .avatar-item-w.w5:hover, .avatar-item-w.w6:hover, .avatar-item-w.w7:hover {
  transform: translateY(-8px) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--pf-shadow) !important;
}
.avatar-image { height: 13rem !important; border-radius: 12px !important; overflow: hidden !important; }
.avatar-image .img-fluid { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.icon-p { background-color: var(--accent) !important; box-shadow: 0 10px 28px -8px var(--accent) !important; transition: transform .3s ease; }
.avatar-item-w:hover .icon-p { transform: scale(1.12); }
.text-block { color: var(--pf-ink) !important; font-weight: 600 !important; letter-spacing: -0.01em; }

/* testimonial videos filling the avatar cards */
.avatar-image.pf-avatar-vid {
  position: relative; overflow: hidden; background: #000;
  width: 100% !important; height: auto !important; aspect-ratio: 3 / 4;
  border-radius: 12px;
}
.avatar-image.pf-avatar-vid iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* every testimonial clip is a 9:16 vertical; card is 3:4 so fill width and crop top/bottom */
.avatar-image.pf-avatar-vid iframe,
.avatar-image.pf-avatar-vid.is-43 iframe,
.avatar-image.pf-avatar-vid.is-916 iframe {
  width: 100.5%; height: auto; aspect-ratio: 9 / 16;
}

/* per-card unmute button */
.pf-vol-btn {
  position: absolute; bottom: 10px; right: 10px; z-index: 5;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25); color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.pf-vol-btn:hover { background: rgba(27,168,224,0.85); border-color: #1BA8E0; }
.pf-vol-btn:active { transform: scale(0.92); }
.pf-vol-btn.is-on { background: #1BA8E0; border-color: #1BA8E0; }
.pf-vol-btn svg { width: 18px; height: 18px; }

/* service card with a cover video (e.g. COMMERCIAL) */
.service-card-image.pf-svc-vid { position: relative; overflow: hidden; background: #000; }
.service-card-image.pf-svc-vid iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: auto; aspect-ratio: 9 / 16;
  min-height: 100%; min-width: 100%;
  transform: translate(-50%, -50%) !important;
  border: 0; pointer-events: none;
}

/* ---- "What we offer" offer cards: aligned, unified, premium ---- */
.offers { align-items: stretch !important; }
.offer-card, .offer-card.is-popular {
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transform: none !important;
  margin-top: 0 !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.offer-card:hover { transform: translateY(-8px) !important; border-color: var(--pf-line-strong) !important; box-shadow: var(--pf-shadow) !important; }
.offer-card.is-popular {
  background-color: var(--pf-surface-2) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), var(--pf-shadow) !important;
}
.offer-card.is-popular:hover { transform: translateY(-8px) !important; }
.offer-card-content { background-color: transparent !important; }
.offer-card-image { border-radius: 0 !important; overflow: hidden; }
.offer-card-image .img-fluid { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.offer-card:hover .offer-card-image .img-fluid { transform: scale(1.04); }
.popular-tag { background-color: var(--accent) !important; color: #fff !important; }
.offer-price { color: var(--pf-ink) !important; }
.offer-price:not(:empty)::before {
  content: "Starting at";
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pf-muted); margin-bottom: 2px;
}

/* ============================================================
   PRICING PAGE — square-footage selector + data-driven cards
   ============================================================ */
.pf-sf-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 10px; }
.pf-sf-tab {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--pf-ink); background: var(--pf-surface); border: 1px solid var(--pf-line);
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.pf-sf-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--pf-line)); }
.pf-sf-tab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 10px 28px -10px var(--accent);
}
.pf-startlbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: 2px; }
.pf-svc-toggle { display: flex; gap: 8px; justify-content: center; margin: 4px 0 34px; }
.pf-svc-tab {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--pf-ink); background: var(--pf-surface); border: 1px solid var(--pf-line);
  padding: 10px 26px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pf-svc-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--pf-line)); }
.pf-svc-tab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 10px 28px -10px var(--accent);
}
.pf-pop-tag {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.6); z-index: 4; white-space: nowrap;
}
.package-card { position: relative; }

/* compact service / add-on grid */
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pf-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 16px;
  padding: 22px 22px 20px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.pf-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -14px var(--accent), var(--pf-shadow); }
.pf-card h4 { font-size: 1.02rem; color: var(--pf-ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.pf-card-desc { font-size: .9rem; color: var(--pf-muted); line-height: 1.5; }
.pf-card-price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--pf-ink); display: flex; flex-direction: column; }
.pf-card-price .pf-startlbl { font-weight: 600; }
.pf-land-card { grid-column: 1 / -1; flex-direction: row; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--pf-surface)), var(--pf-surface) 60%); }
.pf-land-card .pf-card-body { flex: 1; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pf-grid { grid-template-columns: 1fr; } .pf-land-card { flex-direction: column; align-items: flex-start; } }

/* About — Our Story two-column layout */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story-grid .story-copy { text-align: left; align-items: flex-start; }
.story-grid .story-texts { text-align: left; }
.story-media { position: relative; }
.story-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 32px; } .story-media { order: -1; } }

/* card thumbnails */
.pf-card { flex-direction: row !important; align-items: center; gap: 16px !important; }
.pf-card-thumb { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 12px; background-size: cover; background-position: center; }
.pf-card-body { flex: 1; }
.pf-card-price { flex: 0 0 auto; text-align: right; }
.pf-land-card .pf-card-thumb { width: 120px; height: 88px; flex: 0 0 120px; }
.package-card-image .pf-thumb { width: 100%; height: 170px; background-size: cover; background-position: center; border-radius: 14px 14px 0 0; }

/* service categories */
.pf-cat-block { margin-bottom: 30px; }
.pf-cat-block:last-child { margin-bottom: 0; }
.pf-cat-title { font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--pf-ink); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.pf-cat-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: 0 0 auto; }

/* Custom Videos grid — video tiles */
.image-s.pf-grid-vid { position: relative; overflow: hidden; background: #000; }
.image-s.pf-grid-vid iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 100%; min-height: 100%; border: 0; pointer-events: none; }

/* ============================================================
   ABOUT PAGE — Brand-Builder aligned, creative
   ============================================================ */
.section.bg-grey { background-color: var(--pf-band) !important; color: var(--pf-ink) !important; }
.section.bg-black { background-color: var(--pf-bg) !important; color: var(--pf-ink) !important; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-s-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 16px; padding: 22px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.about-s-item:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -14px var(--accent), var(--pf-shadow); }
.icon-ab { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.icon-ab svg { width: 22px; height: 22px; }
.about-st-val { color: var(--accent) !important; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.about-st-caption { color: var(--pf-muted) !important; font-size: .9rem; }
.story-texts .text-md { color: var(--pf-ink); opacity: .9; }
.story-texts .span { color: var(--accent); font-weight: 600; }
.teams-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.team-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 20px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.team-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 52px -14px var(--accent), var(--pf-shadow); }
.team-card-image { overflow: hidden; }
.team-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.team-card:hover .team-card-image img { transform: scale(1.04); }
.team-card-content { padding: 24px; }
.founder-name { color: var(--pf-ink) !important; }
.founder-role { color: var(--accent) !important; font-weight: 600; margin-bottom: 10px; }
.cards-3x { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-el { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px; padding: 28px; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.card-el:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -14px var(--accent), var(--pf-shadow); }
.card-el .title-md { color: var(--pf-ink) !important; }
.card-el [class*="icon"] { background: var(--accent-soft) !important; color: var(--accent) !important; }
@media (max-width: 860px) { .about-stats, .teams-layout, .cards-3x { grid-template-columns: 1fr; } }

/* ============================================================
   LISTING MEDIA (residential) — Brand-Builder aligned
   ============================================================ */
.section.bg-yellow { background-color: var(--pf-band) !important; color: var(--pf-ink) !important; }
.section.bg-light-3 { background-color: var(--pf-surface) !important; color: var(--pf-ink) !important; }
.card-package, .service-card {
  background: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.card-package:hover, .service-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 50px -14px var(--accent), var(--pf-shadow) !important;
}
.card-package-image img, .service-card-image img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.content-info h2, .content-wr-info h2, .insta-block-left h2 { color: var(--pf-ink) !important; }
.content-info .text-small, .content-wr-info .text-color-gray, .content-list, .content-list * { color: var(--pf-ink); }
.res-heading .text-caption, .text-caption { color: var(--accent) !important; }
.service-title, .service-card h3 { color: var(--pf-ink) !important; }

/* ============================================================
   NAV — "Listing Media" services dropdown
   ============================================================ */
.pf-dd { position: relative; cursor: pointer; }
.nav-link.pf-dd { display: flex; align-items: center; gap: 6px; }
.pf-dd-caret { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .25s ease; }
.pf-dd:hover .pf-dd-caret, .pf-dd:focus-within .pf-dd-caret { transform: rotate(180deg); }
.pf-dd-menu {
  position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 232px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 14px;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--pf-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 120;
}
.pf-dd:hover .pf-dd-menu, .pf-dd:focus-within .pf-dd-menu { opacity: 1; visibility: visible; transform: none; }
.pf-dd-item {
  display: block; padding: 11px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--pf-ink) !important;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.pf-dd-item:hover { background: var(--pf-line); color: var(--accent) !important; }
.pf-dd-menu.is-grouped { min-width: 272px; padding: 6px; }
.pf-dd-group { padding: 4px 0; }
.pf-dd-group + .pf-dd-group { border-top: 1px solid var(--pf-line); }
.pf-dd-cat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 8px; border-radius: 9px; text-decoration: none; transition: background .18s ease; }
.pf-dd-cat:hover { background: var(--pf-line); }
.pf-dd-cat-title { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; color: var(--pf-ink); letter-spacing: -.01em; text-transform: none; }
.pf-dd-cat:hover .pf-dd-cat-title { color: var(--accent); }
.pf-dd-cat-sub { font-size: 12px; font-weight: 400; color: var(--pf-muted); line-height: 1.35; text-transform: none; }
.pf-dd-sub { display: flex; flex-direction: column; padding-left: 6px; }
.pf-dd-sub .pf-dd-item { padding: 7px 12px; font-size: 13px; color: var(--pf-muted) !important; }
.pf-dd-sub .pf-dd-item:hover { color: var(--accent) !important; }

/* residential merged-page section jump nav */
.pf-subnav { position: sticky; top: 0; z-index: 90; background: var(--pf-band); border-bottom: 1px solid var(--pf-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-subnav-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; justify-content: center; }
.pf-subnav-link { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--pf-muted) !important; text-decoration: none; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pf-subnav-link:hover { background: var(--pf-surface); border-color: var(--pf-line); color: var(--accent) !important; }
.pf-merge-head { padding-bottom: 0 !important; }
.pf-merge-head + .section { padding-top: clamp(28px, 3vw, 44px) !important; }
[id="photography"], [id="videography"], [id="photo-editing"], [id="listing-services"], [id="packages"] { scroll-margin-top: 96px; }

/* portfolio lightbox viewer — one large photo + thumbnail rail */
.pf-lightbox { width: 100%; min-width: 0; max-width: 1100px; margin: 0 auto; }
.pf-lb-stage { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--pf-surface); border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); }
.pf-lb-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.pf-lb-slide.is-active { opacity: 1; }
.pf-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .18s ease; }
.pf-lb-nav:hover { background: rgba(0,0,0,.7); }
.pf-lb-nav.is-prev { left: 14px; } .pf-lb-nav.is-next { right: 14px; }
.pf-lb-nav svg { width: 20px; height: 20px; }
.pf-lb-count { position: absolute; bottom: 14px; right: 16px; z-index: 3; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-lb-rail { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding: 2px; scroll-behavior: smooth; scrollbar-width: none; }
.pf-lb-rail::-webkit-scrollbar { display: none; }
.pf-lb-thumb { flex: 0 0 84px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease; }
.pf-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-lb-thumb:hover { opacity: .85; }
.pf-lb-thumb.is-active { opacity: 1; border-color: var(--accent); }
@media (max-width: 600px) { .pf-lb-thumb { flex: 0 0 64px; height: 48px; } .pf-lb-nav { width: 34px; height: 34px; } }
/* brand-builder header variant */
.pf-links .pf-dd { display: inline-flex; align-items: center; gap: 5px; }
.pf-links .pf-dd-menu { margin-top: 14px; }

/* ============================================================
   ABOUT PAGE — premium luxury pass
   ============================================================ */
.ab-hero { padding: clamp(96px,12vw,156px) 0 clamp(40px,6vw,72px) !important; }
.ab-hero .pricing-heading { max-width: 940px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ab-hero .pricing-heading::before {
  content: "The PropertyFlix Studio"; display: inline-flex; margin-bottom: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); padding: 8px 18px; border: 1px solid var(--pf-line); border-radius: 999px; background: var(--accent-soft);
}
.ab-hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.2rem) !important; line-height: .96; letter-spacing: -0.035em; }
.ab-hero .text-color-primary { background: linear-gradient(95deg, #1BA8E0, #6FD0F2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ab-hero .text-lg { max-width: 640px; margin: 24px auto 0; font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--pf-muted) !important; line-height: 1.6; }

.about-st-val { font-size: clamp(1.7rem,2.4vw,2.1rem) !important; }

/* founders — gallery-grade cards */
.team-card { border-radius: 22px !important; }
.team-card-image { position: relative; }
.team-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,10,.35)); pointer-events: none; }
.team-card-content { padding: 26px !important; }
.founder-role { letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }

/* values — luxury tiles */
.card-el { border-radius: 20px !important; padding: 32px !important; }
.card-el .title-md { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.card-el [class*="icon"] { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }

/* story — refined editorial */
.story-texts { max-width: 760px; }
.story-texts .text-md { font-size: 1.08rem; line-height: 1.75; }

/* pricing hero — keep heading readable over the dark photo in both themes */
.hero-s { position: relative; }
.hero-s::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.68)); z-index: 0; pointer-events: none; }
.hero-s .container { position: relative; z-index: 1; }
.hero-s .pricing-heading h1, .hero-s .pricing-heading p { color: #fff !important; }
.hero-s .pricing-heading p { opacity: .85; }
.offer-tag { background-color: var(--pf-line) !important; color: var(--pf-muted) !important; border: 1px solid var(--pf-line) !important; }
.text-color-light { color: var(--pf-ink) !important; }
.text-offer { color: var(--pf-muted) !important; }
.feature-item { border-bottom: 1px solid var(--pf-line) !important; }
.read-more { color: var(--accent) !important; }

/* ---- "What We Offer" square-footage slider ---- */
.pf-sqft { max-width: 680px; margin: 0 auto clamp(36px,5vw,56px); padding: 22px 26px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px; }
.pf-sqft-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.pf-sqft-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-muted); }
.pf-sqft-val { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--pf-ink); letter-spacing: -0.01em; }
.pf-sqft-val .pf-sqft-unit { font-size: .9rem; font-weight: 600; color: var(--pf-muted); }
.pf-sqft-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; background: var(--pf-line); }
.pf-sqft-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--pf-surface); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -4px var(--accent); cursor: grab; transition: transform .12s ease; }
.pf-sqft-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.pf-sqft-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--pf-surface); box-shadow: 0 0 0 1px var(--accent); cursor: grab; }
.pf-sqft-ticks { display: flex; justify-content: space-between; margin-top: 10px; }
.pf-sqft-ticks span { font-size: 11px; color: var(--pf-muted); font-weight: 500; }
.pf-sqft-price { transition: color .2s ease; }
.pf-sqft-price.pf-bump { color: var(--accent) !important; }
.pf-sqft-pricing { margin: 44px auto 6px; }

/* square-footage feature band (pricing.html) */
.pf-sqft-band {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 56px); max-width: 1080px; margin: 8px auto 0;
}
.pf-sqft-band .pf-sqft-photo {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: var(--pf-shadow); border: 1px solid var(--pf-line);
}
.pf-sqft-band .pf-sqft-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* auto-cycling carousel inside the feature photo */
.pf-carousel { position: relative; }
.pf-carousel .pf-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.pf-carousel .pf-slide.is-active { opacity: 1; }
.pf-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.pf-carousel-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.5); cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.pf-carousel-dots button.is-active { background: #fff; width: 22px; }
.pf-sqft-band .pf-sqft-col { min-width: 0; }
.pf-sqft-band .pf-sqft-pricing { margin: 0 0 12px; max-width: none; }
.pf-sqft-band .f-txt { margin: 0; }
@media screen and (max-width: 860px) {
  .pf-sqft-band { grid-template-columns: 1fr; gap: 24px; }
  .pf-sqft-band .pf-sqft-photo { aspect-ratio: 16 / 9; }
}
.pf-amount { transition: color .2s ease; }
.pf-amount.pf-bump { color: var(--accent) !important; }

/* ---- Pricing tiers: blue glow on hover ---- */
.pricing-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.pricing-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 52px -8px var(--accent), var(--pf-shadow) !important;
}

/* ---- "Industry-Leading Team" photo: rise + float on hover ---- */
@keyframes pfAboutFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.about-image {
  border-radius: 18px; overflow: hidden;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  will-change: transform;
}
.about-image:hover {
  transform: translateY(-12px);
  box-shadow: 0 32px 70px -26px rgba(0,0,0,0.75), 0 0 55px -12px var(--accent);
  animation: pfAboutFloat 5s ease-in-out infinite .15s;
}
.ab-val { color: var(--accent) !important; }

/* ---- "Industry-Leading Team" stat row — accent rule above each ---- */
.about-list { align-items: start; }
.about-item {
  border-top: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  padding-top: 16px;
  text-align: left;
}
.about-item .ab-val {
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.about-item .text-small { color: var(--pf-muted) !important; margin-top: 6px; }

/* ============================================================
   TESTIMONIALS — creative premium redesign
   ============================================================ */
.testimonial-card {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 8%, var(--pf-surface)), var(--pf-surface) 60%) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 22px !important;
  padding: 2.4rem 2.2rem !important;
}
.testimonial-card::before {
  content: "\201C"; position: absolute; top: 6px; right: 22px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 150px; line-height: 1;
  color: var(--accent); opacity: 0.10; pointer-events: none; z-index: 0;
}
.testimonial-card::after {
  content: ""; position: absolute; top: -45%; right: -22%; width: 65%; height: 85%;
  border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none; z-index: 0;
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card .review-txt {
  color: var(--pf-ink) !important; opacity: .92;
  font-size: 1.02rem !important; line-height: 1.68 !important;
}
.testimonial-card .pic {
  border: 2px solid var(--accent) !important; border-radius: 50% !important;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.testimonial-card .rev-name, .testimonial-card .team-name { color: var(--pf-ink) !important; font-weight: 600 !important; }
/* highlight the focused slide in center-mode carousels */
.owl-item.center .testimonial-card {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 50px -10px var(--accent), var(--pf-shadow) !important;
}

/* ============================================================
   PROCESS PANELS — animated in-card mockups (~5s loop)
   ============================================================ */
.step-card-image.pf-panel { height: 200px; overflow: hidden; position: relative; background: #0c0d10; }
.pf-panel * { box-sizing: border-box; }
@keyframes pfRowIn { 0% { opacity:0; transform:translateY(12px);} 10% { opacity:1; transform:none;} 88% { opacity:1; transform:none;} 100% { opacity:0; transform:translateY(12px);} }
@keyframes pfFade { 0%{opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{opacity:0;} }
@keyframes pfSlideX { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes pfSlideXY { from { transform: translateY(-50%) translateX(0);} to { transform: translateY(-50%) translateX(-50%);} }

/* Panel 1 — dashboard fills top-to-bottom */
.pf-p1 .pf-win { position:absolute; inset:14px; background:#16181d; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; }
.pf-win-bar { height:18px; display:flex; align-items:center; gap:4px; padding:0 8px; background:#1d2026; }
.pf-win-bar i { width:6px; height:6px; border-radius:50%; background:#3a3f48; }
.pf-dash { padding:10px; display:flex; flex-direction:column; gap:7px; }
.pf-dash-title { font-size:11px; font-weight:700; color:#fff; }
.pf-line { height:9px; border-radius:4px; background:rgba(255,255,255,.10); }
.pf-line.short { width:58%; }
.pf-map { height:52px; border-radius:6px; position:relative; overflow:hidden; border:1px solid rgba(27,168,224,.25); background:linear-gradient(135deg, rgba(27,168,224,.18), rgba(255,255,255,.03)), repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.05) 10px 11px), repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.05) 13px 14px); }
.pf-map::after { display:none; }
.pf-map-pin { position:absolute; left:50%; top:56%; width:10px; height:10px; transform:translate(-50%,-100%) rotate(45deg); background:var(--accent); border-radius:50% 50% 50% 0; box-shadow:0 0 0 4px rgba(27,168,224,.22); }
.pf-field { display:flex; flex-direction:column; gap:3px; }
.pf-flabel { font-size:7px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-muted); }
.pf-input { font-size:9px; font-weight:600; color:#fff; background:#1d2026; border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:5px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-field-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pf-p1 .pf-row { animation: pfRowIn 5s ease infinite; }
.pf-p1 .pf-row:nth-child(1){animation-delay:.10s} .pf-p1 .pf-row:nth-child(2){animation-delay:.22s} .pf-p1 .pf-row:nth-child(3){animation-delay:.34s} .pf-p1 .pf-row:nth-child(4){animation-delay:.46s} .pf-p1 .pf-row:nth-child(5){animation-delay:.58s}

/* Panel 2 — package card slides up + scales, rows reveal */
@keyframes pfCardUp { 0%{opacity:0; transform:translateY(28px) scale(.94);} 12%{opacity:1; transform:none;} 90%{opacity:1; transform:none;} 100%{opacity:0; transform:translateY(28px) scale(.94);} }
.pf-p2 { display:grid; place-items:center; }
.pf-pkg-back { position:absolute; width:118px; height:150px; border-radius:10px; background:#15171c; border:1px solid rgba(255,255,255,.06); filter:blur(2px); opacity:.45; transform:translateX(-60px) scale(.88); }
.pf-pkg-back.two { transform:translateX(60px) scale(.88); }
.pf-pkg { position:relative; width:132px; background:#16181d; border:1px solid rgba(27,168,224,.4); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 0 0 1px rgba(27,168,224,.3), 0 12px 30px -12px var(--accent); animation: pfCardUp 5s ease infinite; }
.pf-pkg-photo { height:50px; border-radius:6px; background-size:cover; background-position:center; }
.pf-pkg-title { font-size:11px; font-weight:700; color:#fff; }
.pf-pkg-chip { align-self:flex-start; font-size:10px; font-weight:700; color:#fff; background:var(--accent); padding:2px 8px; border-radius:999px; }
.pf-pkg-desc { height:7px; border-radius:4px; background:rgba(255,255,255,.12); }
.pf-p2 .pf-pkg .pf-row { animation: pfRowIn 5s ease infinite; }
.pf-p2 .pf-pkg .pf-row:nth-child(1){animation-delay:.30s} .pf-p2 .pf-pkg .pf-row:nth-child(2){animation-delay:.42s} .pf-p2 .pf-pkg .pf-row:nth-child(3){animation-delay:.54s} .pf-p2 .pf-pkg .pf-row:nth-child(4){animation-delay:.66s}

/* Panel 3 — portrait strip scrolls behind a fixed LIVE frame */
.pf-p3 .pf-track { position:absolute; top:50%; left:0; display:flex; gap:8px; width:max-content; padding:0 8px; animation: pfSlideXY 9s linear infinite; }
.pf-portrait { width:84px; height:122px; border-radius:8px; background-size:cover; background-position:center; flex:0 0 auto; }
.pf-vid-portrait { overflow:hidden; position:relative; background:#000; }
.pf-vid-portrait iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:auto; aspect-ratio:9/16; min-height:100%; border:0; pointer-events:none; }
.pf-live-frame { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:92px; height:130px; border:2px solid var(--accent); border-radius:10px; box-shadow:0 0 0 4px rgba(27,168,224,.15), 0 0 30px -6px var(--accent); pointer-events:none; z-index:2; }
.pf-live-frame .pf-live { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; gap:4px; font-size:8px; font-weight:700; letter-spacing:.1em; color:#fff; background:rgba(0,0,0,.62); padding:2px 6px; border-radius:999px; }
.pf-live-frame .pf-live i { width:5px; height:5px; border-radius:50%; background:#ff3b30; animation: liveBlink 1.1s ease-in-out infinite; }

/* Panel 4 — Dropbox header + video thumbnails scrolling */
.pf-p4 .pf-drop-head { position:absolute; top:0; left:0; right:0; height:30px; display:flex; align-items:center; gap:6px; padding:0 10px; background:#15171c; border-bottom:1px solid rgba(255,255,255,.08); font-size:10px; font-weight:600; color:#fff; z-index:2; opacity:0; animation: pfFade 5s ease infinite; }
.pf-drop-ico { width:12px; height:12px; border-radius:3px; background:var(--accent); }
.pf-p4 .pf-track { position:absolute; top:46px; left:0; display:flex; gap:8px; width:max-content; padding:0 10px; animation: pfSlideX 9s linear infinite; }
.pf-vid { width:122px; height:108px; border-radius:8px; background-size:cover; background-position:center; flex:0 0 auto; position:relative; }
.pf-vid::after { content:"\25B6"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; display:grid; place-items:center; font-size:8px; color:#fff; border-radius:50%; background:rgba(0,0,0,.5); }
.pf-vid-frame { overflow:hidden; background:#000; }
.pf-vid-frame::after { display:none; }
.pf-vid-frame iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(2.3); width:100%; height:100%; min-width:100%; min-height:100%; border:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) {
  .pf-panel *, .pf-panel { animation: none !important; }
  .pf-p1 .pf-row, .pf-p2 .pf-pkg, .pf-p2 .pf-pkg .pf-row, .pf-p4 .pf-drop-head { opacity: 1 !important; transform: none !important; }
}

/* ---- Process cards: premium polish ---- */
.steps { gap: 24px !important; }
.step-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--pf-surface)), var(--pf-surface) 52%) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 20px !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.step-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 52px -12px var(--accent), var(--pf-shadow) !important;
}
.step-card-image.pf-panel {
  margin: 12px 12px 0; height: 186px;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.step-card-content { padding: 1.4rem 1.4rem 1.6rem !important; }
.step-tag {
  display: inline-flex; align-items: center;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep)) !important;
  color: #fff !important; border: 0 !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase;
  padding: 6px 14px !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px -8px var(--accent);
}
.step-card-content h4 { letter-spacing: .01em; margin-top: 4px; }

/* ---- Testimonials ("What customers say"): premium cards ---- */
.testimonial-card {
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 20px !important;
  padding: 2.25rem !important;
  box-shadow: none !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.testimonial-card:hover { transform: translateY(-6px) !important; border-color: var(--accent) !important; box-shadow: var(--pf-shadow) !important; }
.rev-text, .testimonial-text, .review-txt { color: var(--pf-ink) !important; opacity: .92; }
.rev-name, .team-name { color: var(--pf-ink) !important; }
.rev-divider, .testimonial-card .divider { background-color: var(--pf-line) !important; }
/* quote glyph in accent */
.testimonial-card .quote-icon, .quote-icon, .testimonial-card svg { color: var(--accent) !important; }

/* owl carousel controls → accent */
.owl-theme .owl-dots .owl-dot span { background: var(--pf-line-strong) !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--accent) !important; width: 26px !important; }
.owl-nav button, .owl-theme .owl-nav [class*="owl-"] {
  border: 1px solid var(--pf-line-strong) !important;
  color: var(--pf-ink) !important;
  background: transparent !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.owl-nav button:hover, .owl-theme .owl-nav [class*="owl-"]:hover {
  border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important;
}

/* ---- Stat band + nationwide grid cards ---- */
.about-st, .num-card, .stat-card, .num-item, .stat-item {
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
}
.num-val, .about-st-val, .stat-val { color: var(--accent) !important; }

/* nationwide grayscale agent tiles: rounded + hover lift */
.team, .team-card, .founder-card {
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.team:hover, .team-card:hover, .founder-card:hover {
  transform: translateY(-6px) !important; border-color: var(--accent) !important; box-shadow: var(--pf-shadow) !important;
}

/* ---- Seamless entrance: gentle rise for revealed blocks ---- */
@keyframes pfRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.offer-card, .testimonial-card, .avatar-item, .pricing-card { will-change: transform; }

/* ---- "Trusted By Realtors Nation-Wide" grid: premium tiles ---- */
.team-item-s {
  background-color: var(--pf-surface) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease !important;
}
.team-item-s:hover { transform: translateY(-6px) !important; border-color: var(--accent) !important; box-shadow: var(--pf-shadow) !important; }
.team-item-s-image { overflow: hidden !important; }
.team-item-s-image .img-fluid { filter: grayscale(1); transition: transform .5s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.team-item-s:hover .team-item-s-image .img-fluid { transform: scale(1.05); filter: grayscale(0); }
.team-item-s-info { padding: 0.75rem 0.5rem 0.5rem !important; }
.team-name, .team-name strong { color: var(--pf-ink) !important; font-weight: 600 !important; }
.team-role, .team-role strong { color: var(--accent) !important; }

/* ---- Vimeo video inside the phone mockup screen ---- */
.mockup-w { position: relative; overflow: hidden; }
.mockup-video { position: absolute; inset: 0; overflow: hidden; z-index: 1; background: #000; }
.mockup-video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100%; width: auto; aspect-ratio: 9 / 16; min-width: 100%; min-height: 100%;
  border: 0; pointer-events: none;
}

/* ---- Testimonial video coverflow carousel ("Trusted by 500+") ---- */
.items {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 30px !important;
  padding: 92px max(8px, calc(50% - 108px)) 76px !important;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
}
.items.pf-grabbing { cursor: grabbing; }
.items::-webkit-scrollbar { display: none; }
.items .avatar-item {
  flex: 0 0 196px !important; width: 196px !important;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: opacity .4s ease;
  opacity: 1 !important;
}
/* let the outer card handle scaling; keep inner static */
.items .avatar-item .avatar-item-w {
  transform: none !important; box-shadow: none !important;
  border-radius: 24px !important;
  border: 1px solid var(--pf-line) !important;
  background: var(--pf-surface) !important;
  padding: 12px 12px 20px !important;
  transition: border-color .55s ease, box-shadow .55s ease !important;
}
.items .avatar-item .avatar-image { height: 17rem !important; border-radius: 16px !important; }
.items .avatar-item .icon-p { background-color: rgba(10,10,10,0.5) !important; backdrop-filter: blur(6px); box-shadow: none !important; }

/* ---- Refined focus treatment for the active card ---- */
.items .avatar-item.is-active .avatar-item-w {
  border-color: var(--pf-line-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 36px 84px -30px rgba(0,0,0,0.6) !important;
}
.items .avatar-item .text-block {
  transition: opacity .55s ease, color .55s ease, letter-spacing .55s ease;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-top: 6px;
}
.items .avatar-item:not(.is-active) .text-block { opacity: .4; }
.items .avatar-item.is-active .text-block { color: var(--pf-ink) !important; opacity: 1; letter-spacing: 0.2em !important; }
/* soft neutral halo behind the rail */
.section-wrap:has(.items) { position: relative; }
.section-wrap:has(.items)::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 640px; height: 380px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.055), transparent 70%);
  filter: blur(20px);
}
.section-wrap:has(.items) > * { position: relative; z-index: 1; }

/* ============================================================
   PROCESS SECTION — load choreography (gated by .steps.pf-in)
   ============================================================ */
.steps .step-card { opacity: 0; }
.steps .step-card .step-card-image { opacity: 0; }
@keyframes stepCardIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes stepPreviewIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes stepFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.steps.pf-in .step-card { animation: stepCardIn 0.8s ease-out both; }
.steps.pf-in .step-card:nth-child(1) { animation-delay: 0.05s; }
.steps.pf-in .step-card:nth-child(2) { animation-delay: 0.18s; }
.steps.pf-in .step-card:nth-child(3) { animation-delay: 0.31s; }
.steps.pf-in .step-card:nth-child(4) { animation-delay: 0.44s; }

.steps.pf-in .step-card .step-card-image { animation: stepPreviewIn 0.9s ease-out both, stepFloat 6s ease-in-out infinite; }
.steps.pf-in .step-card:nth-child(1) .step-card-image { animation-delay: 0.45s, 1.4s; }
.steps.pf-in .step-card:nth-child(2) .step-card-image { animation-delay: 0.58s, 1.4s; }
.steps.pf-in .step-card:nth-child(3) .step-card-image { animation-delay: 0.71s, 1.4s; }
.steps.pf-in .step-card:nth-child(4) .step-card-image { animation-delay: 0.84s, 1.4s; }

/* LIVE badge on step 3 */
.live-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #fff;
}
.live-dot-ping { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: liveBlink 1.1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .steps .step-card, .steps .step-card .step-card-image { opacity: 1 !important; animation: none !important; }
  .live-dot-ping { animation: none; }
}

/* ---- "Go viral" floating icon tiles ---- */
@keyframes pfFloatA { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(0,-14px) rotate(-2deg); } }
@keyframes pfFloatB { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-8px,11px) rotate(2deg); } }
@keyframes pfFloatC { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(9px,-9px) rotate(2deg); } }
@keyframes pfFloatD { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(7px,13px) rotate(-2deg); } }
/* ---- "Go viral" bubbles: rise-in entrance, then float ---- */
.pf-bubble { opacity: 0; transform: translateY(38px) scale(.95); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.pf-bubble.pf-bubble-in { opacity: 1; transform: none; }
.icon-w1.pf-floating { animation: pfFloatA 5.2s ease-in-out infinite; }
.icon-w2.pf-floating { animation: pfFloatB 6.4s ease-in-out infinite; }
.icon-w3.pf-floating { animation: pfFloatC 5.8s ease-in-out infinite; }
.icon-w4.pf-floating { animation: pfFloatD 6.9s ease-in-out infinite; }

/* circle rings: slow blue pulse */
@keyframes pfRingPulse { 0%,100% { opacity:.45; transform: scale(1); } 50% { opacity:.95; transform: scale(1.035); } }
.circle { animation: pfRingPulse 6s ease-in-out infinite; border-color: rgba(27,168,224,0.18) !important; }
.circle.w2 { animation: pfRingPulse 6s ease-in-out infinite 1.2s; border-color: rgba(27,168,224,0.12) !important; }

/* slow blue glow behind the phone */
@keyframes pfGlowPulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }
.circle.w2::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,168,224,0.30), rgba(27,168,224,0.06) 52%, transparent 70%);
  filter: blur(26px); animation: pfGlowPulse 5s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .icon-w1, .icon-w2, .icon-w3, .icon-w4 { animation: none !important; }
  .pf-bubble { opacity: 1; transform: none; transition: none; }
  .circle, .circle.w2, .circle.w2::after { animation: none !important; }
}

/* ---- Stat band: staggered fade-up (count-up handled in JS) ---- */
.stats-4x .stat-item.pf-stat {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.stats-4x .stat-item.pf-stat.pf-in { opacity: 1; transform: none; }

/* ============================================================
   ACCENT BUTTON GLOW — Brand Builder style
   Soft accent-colored shadow under filled/accent buttons.
   ============================================================ */
.button:not(.is-outline):not(.is-dark):not(.is-blur):not(.is-white):not(.is-blue-outline),
.nav-button,
.button-round.is-blue,
.button-round.is-accent,
.s-tag,
.success-message,
.w-button:not(.is-outline) {
  box-shadow: 0 12px 34px -10px var(--accent) !important;
  transition: box-shadow .25s ease, transform .1s ease, background-color .2s ease, color .2s ease !important;
}
.button:not(.is-outline):not(.is-dark):not(.is-blur):not(.is-white):not(.is-blue-outline):hover,
.nav-button:hover,
.button-round.is-blue:hover,
.w-button:not(.is-outline):hover {
  box-shadow: 0 18px 46px -7px var(--accent) !important;
  transform: translateY(-1px);
}
.button:active, .nav-button:active, .button-round.is-blue:active { transform: scale(0.98); }
/* accent ghost/outline buttons get a subtle glow on hover only */
.button.is-blue-outline:hover, .button.is-outline:hover {
  box-shadow: 0 12px 30px -12px var(--accent) !important;
}

/* ============================================================
   SERVICE PAGES (Photography / Videography / Editing)
   Luxury, clean editorial layout
   ============================================================ */
.pf-svc-hero { position: relative; overflow: hidden; padding: clamp(120px,15vw,200px) 0 clamp(70px,9vw,120px) !important; }
.pf-svc-hero .pf-svc-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pf-svc-hero .pf-svc-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.pf-svc-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,8,.62), rgba(8,8,8,.82)); }
.pf-svc-hero .container { position: relative; z-index: 2; }
.pf-svc-hero-inner { max-width: 880px; }
.pf-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; padding: 8px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-eyebrow-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pf-svc-hero h1 { color: #fff !important; font-size: clamp(2.8rem,7vw,6rem); line-height: .95; letter-spacing: -0.035em; margin-bottom: 22px; }
.pf-svc-hero h1 .grad { background: linear-gradient(95deg,#1BA8E0,#7FD8F5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf-svc-hero p { color: rgba(255,255,255,.82) !important; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.6; max-width: 600px; margin-bottom: 34px; }
.pf-svc-hero-stats { display: flex; gap: clamp(28px,4vw,56px); margin-top: 44px; flex-wrap: wrap; }
.pf-svc-hero-stat .v { font-size: clamp(1.6rem,2.4vw,2.2rem); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.pf-svc-hero-stat .l { font-size: .82rem; color: rgba(255,255,255,.6); letter-spacing: .04em; }

/* feature rows */
.pf-feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items: center; margin-bottom: clamp(60px,9vw,120px); }
.pf-feat:last-child { margin-bottom: 0; }
.pf-feat.rev .pf-feat-media { order: 2; }
.pf-feat-media { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); aspect-ratio: 4/3; }
.pf-feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pf-feat:hover .pf-feat-media img { transform: scale(1.05); }
.pf-feat-media.tall { aspect-ratio: 3/4; }
.pf-feat-num { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.pf-feat-num::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); }
.pf-feat h2 { font-size: clamp(1.7rem,3vw,2.6rem); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 16px; color: var(--pf-ink) !important; }
.pf-feat p { color: var(--pf-muted) !important; font-size: 1.05rem; line-height: 1.7; }
.pf-feat-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.pf-feat-li { display: flex; align-items: center; gap: 12px; color: var(--pf-ink); font-weight: 500; }
.pf-feat-li svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
@media (max-width: 820px) { .pf-feat { grid-template-columns: 1fr; } .pf-feat.rev .pf-feat-media { order: 0; } }

/* gallery */
.pf-gallery { columns: 3; column-gap: 16px; }
.pf-gallery .pf-shot { break-inside: avoid; margin-bottom: 16px; border-radius: 14px; overflow: hidden; border: 1px solid var(--pf-line); position: relative; }
.pf-gallery .pf-shot img { width: 100%; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pf-gallery .pf-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 70%,rgba(27,168,224,.0)); transition: background .3s ease; }
.pf-gallery .pf-shot:hover img { transform: scale(1.05); }
.pf-gallery .pf-shot:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -16px var(--accent); }
@media (max-width: 900px) { .pf-gallery { columns: 2; } }
@media (max-width: 560px) { .pf-gallery { columns: 1; } }

/* feature chips strip */
.pf-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.pf-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--pf-surface); border: 1px solid var(--pf-line); color: var(--pf-ink); font-size: .92rem; font-weight: 500; }
.pf-chip svg { width: 17px; height: 17px; color: var(--accent); }

/* FAQ accordion */
.pf-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pf-faq-item { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 14px; overflow: hidden; transition: border-color .25s ease; }
.pf-faq-item.open { border-color: var(--accent); }
.pf-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 20px 24px; background: none; border: 0; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--pf-ink); }
.pf-faq-ic { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.pf-faq-ic::before, .pf-faq-ic::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.pf-faq-ic::before { left: 0; top: 8px; width: 18px; height: 2px; }
.pf-faq-ic::after { left: 8px; top: 0; width: 2px; height: 18px; }
.pf-faq-item.open .pf-faq-ic::after { transform: scaleY(0); opacity: 0; }
.pf-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.pf-faq-a p { padding: 0 24px 22px; color: var(--pf-muted); line-height: 1.65; }

/* CTA band */
.pf-cta-band { text-align: center; max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,72px) clamp(24px,4vw,56px); border-radius: 26px; border: 1px solid var(--pf-line); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--pf-surface)), var(--pf-surface) 62%); position: relative; overflow: hidden; }
.pf-cta-band::after { content: ""; position: absolute; top: -40%; right: -10%; width: 50%; height: 120%; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); pointer-events: none; }
.pf-cta-band > * { position: relative; z-index: 1; }
.pf-cta-band h2 { font-size: clamp(1.7rem,3.2vw,2.6rem); letter-spacing: -0.02em; margin-bottom: 14px; color: var(--pf-ink) !important; }
.pf-cta-band p { color: var(--pf-muted) !important; font-size: 1.08rem; margin-bottom: 28px; }

/* video frames on service pages */
.pf-svc-hero-vid { overflow: hidden; }
.pf-svc-hero-vid iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0; pointer-events: none; }
.pf-vidframe { padding: 0 !important; }
.pf-vid16 { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.pf-vid16 iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.02); width: 100%; height: 100%; min-width: 100%; min-height: 100%; border: 0; pointer-events: none; }
.pf-vid916 { position: relative; width: 100%; aspect-ratio: 3/4; background: #000; overflow: hidden; }
.pf-vid916 iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(2.3); width: 100%; height: 100%; min-width: 100%; min-height: 100%; border: 0; pointer-events: none; }
.pf-reelwall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pf-reel { position: relative; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; border: 1px solid var(--pf-line); background: #000; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.pf-reel:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -14px var(--accent); }
.pf-reel iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.25); width: 100%; height: 100%; min-width: 100%; min-height: 100%; border: 0; pointer-events: none; }
@media (max-width: 900px) { .pf-reelwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pf-reelwall { grid-template-columns: 1fr; } }

/* before/after + editing service grid */
.pf-edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pf-edit-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 18px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.pf-edit-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -16px var(--accent), var(--pf-shadow); }
.pf-edit-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.pf-edit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pf-edit-card:hover .pf-edit-media img { transform: scale(1.05); }
.pf-edit-body { padding: 22px 24px 26px; }
.pf-edit-body h3 { font-size: 1.2rem; color: var(--pf-ink) !important; margin-bottom: 8px; letter-spacing: -0.01em; }
.pf-edit-body p { color: var(--pf-muted) !important; font-size: .94rem; line-height: 1.6; margin-bottom: 14px; }
.pf-edit-price { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--accent); font-size: 1.05rem; }
.pf-edit-price .from { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); display: block; }
@media (max-width: 900px) { .pf-edit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pf-edit-grid { grid-template-columns: 1fr; } }

/* before/after slider */
.pf-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-ba-item { border-radius: 16px; overflow: hidden; border: 1px solid var(--pf-line); position: relative; }
.pf-ba-item img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.pf-ba-tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-ba-item.after .pf-ba-tag { background: var(--accent); }
@media (max-width: 560px) { .pf-ba { grid-template-columns: 1fr; } }

/* ============================================================
   LISTING CONTENT — Square One–style sections
   ============================================================ */
.pf-eyebrow-i { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.15rem; color: var(--pf-muted); text-align: center; margin-bottom: 14px; }
.pf-sr-head { text-align: center; }
.pf-sr-title { font-size: clamp(2.6rem, 7vw, 5.5rem) !important; letter-spacing: -0.03em; line-height: .95; margin: 0 auto; }
.pf-reels-cta { display: flex; justify-content: center; margin-top: 40px; }

/* Lifestyle photography grid (square-ish, even) */
.pf-life-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pf-life-shot { position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; border: 1px solid var(--pf-line); transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.pf-life-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pf-life-shot:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -16px var(--accent); }
.pf-life-shot:hover img { transform: scale(1.06); }
.pf-life-head { text-align: left; }
@media (max-width: 900px) { .pf-life-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pf-life-grid { grid-template-columns: 1fr; } }

/* FAQ + Contact split */
.pf-help { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.pf-help:not(:has(.pf-help-faq)) { grid-template-columns: 1fr; }
.pf-help:not(:has(.pf-help-faq)) .pf-contact-card { max-width: 640px; margin-inline: auto; width: 100%; }
.pf-help-faq h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 30px; color: var(--pf-ink) !important; }
.pf-help .pf-faq { max-width: none; margin: 0; }
.pf-contact-card { background: var(--pf-surface-2); border: 1px solid var(--pf-line); border-radius: 24px; padding: clamp(28px, 3vw, 44px); }
html[data-theme="light"] .pf-contact-card { background: #0A0A0A; border-color: rgba(255,255,255,.1); }
html[data-theme="light"] .pf-contact-card h3,
html[data-theme="light"] .pf-contact-card label { color: #fff; }
.pf-contact-card h3 { font-size: 1.6rem; color: var(--pf-ink); margin-bottom: 24px; letter-spacing: -0.01em; }
.pf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.pf-field { display: flex; flex-direction: column; gap: 8px; }
.pf-field.full { grid-column: 1 / -1; }
.pf-field label { font-size: .85rem; font-weight: 600; color: var(--pf-ink); }
.pf-field label .req { color: var(--accent); }
.pf-field input, .pf-field textarea { font-family: 'Poppins', sans-serif; font-size: .95rem; padding: 13px 15px; border-radius: 10px; background: var(--pf-bg); border: 1px solid var(--pf-line); color: var(--pf-ink); outline: none; transition: border-color .2s ease; }
html[data-theme="light"] .pf-contact-card input, html[data-theme="light"] .pf-contact-card textarea { background: #1a1a1e; border-color: rgba(255,255,255,.12); color: #fff; }
.pf-field input:focus, .pf-field textarea:focus { border-color: var(--accent); }
.pf-field textarea { resize: vertical; min-height: 120px; }
.pf-form-submit { width: 100%; margin-top: 8px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 15px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .2s ease, transform .1s ease; }
.pf-form-submit:hover { background: var(--accent-deep); }
.pf-form-submit:active { transform: scale(.99); }
@media (max-width: 820px) { .pf-help { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pf-form-row { grid-template-columns: 1fr; } }

/* form submission status message (Google Sheets handler) */
.pf-form-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: .92rem; line-height: 1.45; }
.pf-form-status[data-kind="success"] { background: rgba(27,168,224,.12); color: var(--accent); border: 1px solid rgba(27,168,224,.35); }
.pf-form-status[data-kind="error"] { background: rgba(224,64,64,.1); color: #e04040; border: 1px solid rgba(224,64,64,.3); }
.w-form .pf-form-status { color: var(--pf-ink); }

/* ---------- BEHIND THE SCENES gallery ---------- */
.pf-bts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-top: 40px;
}
.pf-bts-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--pf-line);
  position: relative;
  background: var(--pf-surface);
}
.pf-bts-grid img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.pf-bts-grid figure:hover img { transform: scale(1.05); }
.pf-bts-grid figure:hover { border-color: var(--accent); box-shadow: var(--pf-shadow); }
.pf-bts-grid figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.pf-bts-grid figure:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.pf-bts-grid figure:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.pf-bts-grid figure:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.pf-bts-grid figure:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.pf-bts-grid figure:nth-child(6) { grid-column: span 2; grid-row: span 1; }
@media (max-width: 900px) {
  .pf-bts-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .pf-bts-grid figure:nth-child(1) { grid-column: 1 / -1; grid-row: span 1; }
  .pf-bts-grid figure:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 540px) {
  .pf-bts-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .pf-bts-grid figure:nth-child(n) { grid-column: 1 / -1; }
}


/* ============================================================
   MULTIFAMILY — leasing video landing page
   ============================================================ */
.pf-mf-hero { padding-top: clamp(70px, 9vw, 130px) !important; }
.pf-mf-hero-inner { max-width: 900px; }
.pf-mf-h1 { font-size: clamp(2.6rem, 6vw, 5rem) !important; line-height: 1.02; letter-spacing: -0.03em; margin: 14px 0 22px; text-wrap: pretty; }
.pf-mf-h1 .hl { color: var(--accent); }
.pf-mf-lede { max-width: 680px; color: var(--pf-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; }
.pf-mf-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pf-mf-cta-row.is-center { justify-content: center; }

/* browser mockup */
.pf-mf-browser { max-width: 1080px; margin: 8px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--pf-line); background: var(--pf-surface); box-shadow: var(--pf-shadow); }
.pf-mf-chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--pf-surface-2); border-bottom: 1px solid var(--pf-line); }
.pf-mf-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--pf-line-strong); flex: none; }
.pf-mf-url { flex: 1; margin-left: 8px; max-width: 320px; padding: 5px 12px; border-radius: 999px; background: var(--pf-bg); border: 1px solid var(--pf-line); color: var(--pf-muted); font-family: 'Poppins', sans-serif; font-size: 11px; }
.pf-mf-viewport { position: relative; aspect-ratio: 16 / 9; min-height: 340px; background: #000; overflow: hidden; }
.pf-mf-viewport iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.02); width: 100%; height: 100%; border: 0; pointer-events: none; }
.pf-mf-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,14,.72) 0%, rgba(4,8,14,.18) 42%, rgba(4,8,14,.86) 100%); }
.pf-mf-sitenav { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(12px, 1.8vw, 20px) clamp(16px, 2.6vw, 30px); }
.pf-mf-brand { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .16em; font-size: clamp(9px, 1vw, 12px); color: #fff; }
.pf-mf-links { display: flex; gap: clamp(10px, 1.6vw, 22px); }
.pf-mf-links span { font-family: 'Poppins', sans-serif; font-size: clamp(8px, .85vw, 11px); color: rgba(255,255,255,.78); letter-spacing: .02em; }
.pf-mf-sitebtn { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3); color: #fff; font-family: 'Poppins', sans-serif; font-size: clamp(8px, .85vw, 11px); font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.pf-mf-overlay { position: absolute; left: clamp(16px, 2.6vw, 44px); right: clamp(16px, 2.6vw, 44px); bottom: clamp(18px, 3vw, 44px); max-width: 560px; }
.pf-mf-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(27,168,224,.9); color: #04121c; font-family: 'Poppins', sans-serif; font-size: clamp(8px, .8vw, 10px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pf-mf-headline { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: clamp(1.3rem, 3.4vw, 2.7rem); line-height: 1.08; color: #fff; margin: 12px 0 8px; letter-spacing: -0.02em; }
.pf-mf-sub { color: rgba(255,255,255,.8); font-size: clamp(.72rem, 1.05vw, .95rem); line-height: 1.5; margin: 0 0 10px; max-width: 460px; }
.pf-mf-amen { color: rgba(255,255,255,.6); font-family: 'Poppins', sans-serif; font-size: clamp(.62rem, .85vw, .78rem); letter-spacing: .04em; }
.pf-mf-caption { max-width: 720px; margin: 22px auto 0; text-align: center; color: var(--pf-muted); font-size: .92rem; line-height: 1.6; }

/* why-video reasons */
.pf-mf-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pf-mf-reason { padding: 26px 24px 28px; border-radius: 16px; background: var(--pf-surface); border: 1px solid var(--pf-line); transition: border-color .3s ease, transform .3s ease; }
.pf-mf-reason:hover { border-color: var(--accent); transform: translateY(-4px); }
.pf-mf-reason-num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--accent); margin-bottom: 14px; }
.pf-mf-reason-title { font-size: 1.16rem !important; color: var(--pf-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.pf-mf-reason-body { color: var(--pf-muted); font-size: .93rem; line-height: 1.6; margin: 0; }

/* community work grid */
.pf-mf-workgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pf-mf-work { margin: 0; border-radius: 16px; overflow: hidden; background: var(--pf-surface); border: 1px solid var(--pf-line); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.pf-mf-work:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 0 44px -18px var(--accent); }
.pf-mf-work.is-feat { grid-column: span 2; }
.pf-mf-work-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pf-mf-work.is-feat .pf-mf-work-media { aspect-ratio: 16 / 8.2; }
.pf-mf-work-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-mf-work-cap { padding: 16px 20px 20px; }
.pf-mf-work-name { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--pf-ink); }
.pf-mf-tag { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(27,168,224,.35); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pf-mf-work-loc { color: var(--pf-muted); font-size: .85rem; margin-top: 3px; }

/* services */
.pf-mf-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pf-mf-svc { padding: 30px 28px 34px; border-radius: 16px; background: var(--pf-surface); border: 1px solid var(--pf-line); transition: border-color .3s ease, transform .3s ease; }
.pf-mf-svc:hover { border-color: var(--accent); transform: translateY(-4px); }
.pf-mf-svc-title { font-size: 1.3rem !important; color: var(--pf-ink); margin: 0 0 10px; letter-spacing: -0.015em; }
.pf-mf-svc-body { color: var(--pf-muted); font-size: .95rem; line-height: 1.65; margin: 0; }

.pf-mf-close { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }

@media (max-width: 1000px) {
  .pf-mf-reasons { grid-template-columns: repeat(2, 1fr); }
  .pf-mf-workgrid { grid-template-columns: repeat(2, 1fr); }
  .pf-mf-svcs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pf-mf-reasons { grid-template-columns: 1fr; }
  .pf-mf-workgrid { grid-template-columns: 1fr; }
  .pf-mf-work.is-feat { grid-column: span 1; }
  .pf-mf-links { display: none; }
}
@media (max-width: 900px) {
  .pf-mf-sub { display: none; }
  .pf-mf-amen { display: none; }
  .pf-mf-headline { font-size: clamp(1.1rem, 4.2vw, 1.6rem); margin: 8px 0 0; }
}


/* before/after drag slider */
.pf-slider { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: #000; user-select: none; }
.pf-slider img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-slider-base { position: absolute; inset: 0; }
.pf-slider-top { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.pf-slider-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-slider-tag { position: absolute; top: 14px; z-index: 3; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-slider-tag.is-left { left: 14px; }
.pf-slider-tag.is-right { right: 14px; }
.pf-slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; will-change: left; }
.pf-slider-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 999px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.pf-slider-handle span::before, .pf-slider-handle span::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-top: -5px; }
.pf-slider-handle span::before { left: 10px; border-right: 7px solid #0A0A0A; }
.pf-slider-handle span::after { right: 10px; border-left: 7px solid #0A0A0A; }
.pf-slider-input { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; }
.pf-slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.pf-slider-input::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }


/* listing videography — plain card grid */
.pf-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pf-vcard { display: grid; grid-template-columns: 240px 1fr; gap: 0; border-radius: 16px; overflow: hidden; background: var(--pf-surface); border: 1px solid var(--pf-line); transition: border-color .3s ease, transform .3s ease; }
.pf-vcard:hover { border-color: var(--accent); transform: translateY(-4px); }
.pf-vcard-media { position: relative; background: #0b0b0d; min-height: 210px; overflow: hidden; padding: 0; border: 0; display: block; width: 100%; cursor: pointer; }
.pf-vcard-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, opacity .3s ease; }
.pf-vcard-play:hover .pf-vcard-poster { transform: scale(1.04); opacity: .8; }
.pf-vcard-playicon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 50px; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
.pf-vcard-playicon svg { width: 19px; height: 19px; margin-left: 3px; }
.pf-vcard-play:hover .pf-vcard-playicon { background: var(--accent); color: #001523; transform: translate(-50%,-50%) scale(1.08); }
.pf-vcard-media.is-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-vcard-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 7px; }
.pf-vcard-sub { font-family: 'Poppins', sans-serif; font-size: clamp(11px, .72rem, 12px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pf-vcard-title { font-size: 1.35rem !important; color: var(--pf-ink); margin: 0; letter-spacing: -0.015em; }
.pf-vcard-text { color: var(--pf-muted); font-size: clamp(14px, 1rem, 16px); line-height: 1.6; margin: 0; }
.pf-vcard-meta { margin-top: auto; padding-top: 10px; font-family: 'Poppins', sans-serif; font-size: clamp(12px, .8rem, 13px); color: var(--pf-muted); letter-spacing: .02em; }
@media (max-width: 1100px) { .pf-vgrid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pf-vcard { grid-template-columns: 1fr; } .pf-vcard-media { min-height: 220px; } }


/* reel wall — click to play */
.pf-reel-btn { padding: 0; cursor: pointer; display: block; }
.pf-reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 58px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
.pf-reel-play svg { width: 22px; height: 22px; margin-left: 3px; }
.pf-reel-btn:hover .pf-reel-play { background: var(--accent); transform: translate(-50%,-50%) scale(1.08); }


/* 2D & 3D floor plan tabbed viewer */
.pf-fp { display: flex; flex-direction: column; gap: 12px; }
.pf-fp-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--pf-surface); border: 1px solid var(--pf-line); align-self: flex-start; }
.pf-fp-tab { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: clamp(13px, .85rem, 14px); font-weight: 600; color: var(--pf-muted); transition: background .18s ease, color .18s ease; }
.pf-fp-tab:hover { color: var(--pf-ink); }
.pf-fp-tab.is-active { background: var(--accent); color: #001523; }
.pf-fp-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--pf-line); transition: background .3s ease; }
.pf-fp.is-plan .pf-fp-stage { background: #f4f5f6; }
.pf-fp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.pf-fp-img:not(.is-photo) { object-fit: contain; padding: 14px; }
.pf-fp-img.is-active { opacity: 1; }
.pf-fp-caption { font-family: 'Poppins', sans-serif; font-size: clamp(12px, .8rem, 13px); color: var(--pf-muted); }


/* listing video showcase — one player + option list */
.pf-vshow { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(22px, 3vw, 40px); align-items: start; }
.pf-vshow-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0b0d; border: 1px solid var(--pf-line); }
.pf-vshow-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-vshow-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-vshow-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 62px; height: 62px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.5); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
.pf-vshow-play svg { width: 24px; height: 24px; margin-left: 3px; }
.pf-vshow-play:hover { background: var(--accent); color: #001523; transform: translate(-50%,-50%) scale(1.07); }
.pf-vshow-copy { padding-top: 18px; }
.pf-vshow-title { font-size: 1.6rem !important; color: var(--pf-ink); margin: 0 0 8px; letter-spacing: -0.015em; }
.pf-vshow-text { color: var(--pf-muted); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 60ch; }
.pf-vshow-list { display: flex; flex-direction: column; gap: 6px; }
.pf-vopt { display: grid; gap: 2px; text-align: left; padding: 13px 16px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.pf-vopt:hover { background: var(--pf-surface); }
.pf-vopt.is-active { background: var(--pf-surface); border-color: var(--accent); }
.pf-vopt-sub { font-family: 'Poppins', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); transition: color .18s ease; }
.pf-vopt.is-active .pf-vopt-sub { color: var(--accent); }
.pf-vopt-name { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--pf-ink); letter-spacing: -0.01em; }
.pf-vopt-meta { font-family: 'Poppins', sans-serif; font-size: .78rem; color: var(--pf-muted); }
@media (max-width: 1000px) { .pf-vshow { grid-template-columns: 1fr; } }


/* --- luxe refinement of the listing-video showcase --- */
.pf-vshow { grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 64px); }
.pf-vshow-player { border-radius: 4px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 90px -50px rgba(0,0,0,.95); }
.pf-vshow-player::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.42) 100%); transition: opacity .4s ease; }
.pf-vshow-player:has(iframe)::after { opacity: 0; }
.pf-vshow-play { width: 74px; height: 74px; background: rgba(10,10,10,.42); border: 1px solid rgba(255,255,255,.32); }
.pf-vshow-play svg { width: 20px; height: 20px; }
.pf-vshow-play:hover { background: rgba(255,255,255,.94); color: #0a0a0a; border-color: transparent; }
.pf-vshow-copy { padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; }
.pf-vshow-title { font-size: clamp(24px, 1.75rem, 30px) !important; letter-spacing: -0.02em; margin: 0 0 10px; }
.pf-vshow-text { font-size: clamp(14px, 1rem, 17px); line-height: 1.75; color: var(--pf-muted); }

.pf-vshow-list { gap: 0; }
.pf-vopt { position: relative; grid-template-columns: auto 1fr; grid-template-areas: 'num sub' 'num name' 'num meta'; column-gap: 18px; row-gap: 1px; align-items: baseline; padding: 20px 4px 20px 0; border: 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent !important; transition: opacity .3s ease, padding-left .3s ease; opacity: .52; }
.pf-vopt:first-child { border-top: 1px solid rgba(255,255,255,.07); }
.pf-vopt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.pf-vopt:hover { opacity: .82; }
.pf-vopt.is-active { opacity: 1; padding-left: 20px; }
.pf-vopt.is-active::before { transform: scaleY(1); }
.pf-vopt-num { grid-area: num; font-family: 'Poppins', sans-serif; font-size: clamp(11px, .7rem, 12px); font-weight: 500; letter-spacing: .1em; color: var(--pf-muted); padding-top: 3px; transition: color .3s ease; }
.pf-vopt.is-active .pf-vopt-num { color: var(--accent); }
.pf-vopt-sub { grid-area: sub; font-size: clamp(10px, .62rem, 11px); letter-spacing: .18em; color: var(--pf-muted) !important; }
.pf-vopt.is-active .pf-vopt-sub { color: var(--accent) !important; }
.pf-vopt-name { grid-area: name; font-size: clamp(17px, 1.12rem, 20px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.pf-vopt-meta { grid-area: meta; font-size: clamp(12px, .74rem, 13px); letter-spacing: .04em; color: var(--pf-muted); padding-top: 3px; }


/* ============================================================
   SITEWIDE REFINEMENT LAYER
   Carries the Residential page's editorial treatment across
   every page: accent eyebrows, hairline dividers, tighter
   display type, restrained surfaces.
   ============================================================ */

/* --- display type --- */
h1, .h1-heading, .h1-heading-w1 { letter-spacing: -0.03em; text-wrap: balance; }
h2, .h2-heading, .h2-heading-w1 { letter-spacing: -0.025em; text-wrap: balance; }
h3, .heading-md { letter-spacing: -0.018em; }
p, .text-small, .card-txt, .text-color-gray-dark { text-wrap: pretty; }

/* --- eyebrow / caption: one consistent accent treatment --- */
.text-caption, .pf-eyebrow-i {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(11px, .72rem, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-style: normal !important;
}
.heading-holder .text-caption, .heading-holder .pf-eyebrow-i { margin-bottom: 14px; }

/* --- hairline section dividers --- */
.section + .section { border-top: 1px solid var(--pf-line); }
.pf-merge-head { border-top: 1px solid var(--pf-line) !important; }
.pf-merge-head + .section { border-top: 0 !important; }

/* --- surfaces: hairline over heavy fills --- */
.card, .pf-card, .offer-card, .price-card, .step-card, .team-card, .rev-card, .pf-vcard, .pf-edit-card {
  border: 1px solid var(--pf-line);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover, .pf-card:hover, .offer-card:hover, .price-card:hover, .pf-edit-card:hover {
  border-color: var(--accent);
  box-shadow: 0 30px 70px -46px rgba(0,0,0,.9);
}

/* --- accent-forward buttons --- */
.button-round.is-blue, .pf-form-submit { background: var(--accent) !important; color: #001523 !important; border: 0 !important; }
.button-round.is-blue:hover, .pf-form-submit:hover { background: #fff !important; color: #0a0a0a !important; }

/* --- links --- */
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }
.fo-link:hover, .nav-link:hover { color: var(--accent) !important; }

/* --- selection --- */
::selection { background: var(--accent); color: #001523; }


/* ============================================================
   MULTIFAMILY SYSTEM → SITEWIDE
   Adopts the multifamily page's signature treatment everywhere:
   large clamped display type, accent highlight spans, numbered
   accent indices, 16px hairline cards that lift, and a short
   accent rule dividing each section header from its content.
   ============================================================ */

/* --- display scale: clamped so it never collapses with the root --- */
h1, .h1-heading, .h1-heading-w1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem) !important;
  line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
h2, .h2-heading, .h2-heading-w1 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem) !important;
  line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance;
}
h3, .heading-md { font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important; letter-spacing: -0.018em; }
.text-small, .card-txt, .text-color-gray-dark, .pf-mf-lede {
  font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.65;
}

/* --- accent highlight inside headings --- */
.hl, .text-color-primary, h1 em, h2 em { color: var(--accent) !important; font-style: normal; }

/* --- accent divider rule under every section header --- */
.heading-holder { position: relative; }
.heading-holder .text-caption::after,
.heading-holder .pf-eyebrow-i::after {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--accent); margin: 12px auto 0; border-radius: 2px;
}
.heading-holder:not(.is-md) .text-caption::after { margin-left: 0; margin-right: auto; }

/* --- cards: multifamily reason-card treatment --- */
.card, .pf-card, .offer-card, .price-card, .step-card, .team-card,
.rev-card, .pf-vcard, .pf-edit-card, .pf-mf-reason {
  border-radius: 16px;
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover, .pf-card:hover, .offer-card:hover, .price-card:hover,
.pf-edit-card:hover, .pf-mf-reason:hover, .team-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -46px rgba(0,0,0,.9);
}

/* --- numbered indices --- */
.pf-mf-reason-num, .num-title, .step-num, .pf-vopt-num {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(12px, .8rem, 13px); letter-spacing: .12em; color: var(--accent);
}

/* --- pill badges --- */
.pf-mf-badge, .popular-tag, .offer-tag, .live-badge {
  background: rgba(27,168,224,.9) !important; color: #04121c !important;
  border-radius: 999px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(9px, .62rem, 11px) !important;
}

/* --- section rhythm --- */
.section { padding-top: clamp(56px, 7vw, 108px); padding-bottom: clamp(56px, 7vw, 108px); }

.pf-edit-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }


/* virtual-staging video card: play/pause + expand to full video */
.pf-vsv { position: relative; cursor: zoom-in; }
.pf-vsv-toggle, .pf-vsv-expand { position: absolute; bottom: 12px; z-index: 3; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(10,10,10,.5); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, color .2s ease; }
.pf-vsv-toggle { left: 12px; }
.pf-vsv-expand { right: 12px; }
.pf-vsv-toggle svg, .pf-vsv-expand svg { width: 15px; height: 15px; }
.pf-vsv-toggle:hover, .pf-vsv-expand:hover { background: #fff; color: #0a0a0a; border-color: transparent; }

/* full-video modal */
.pf-lightbox-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(4,6,10,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-lightbox-modal[hidden] { display: none; }
.pf-modal-video { max-width: min(100%, 520px); max-height: 100%; width: auto; border-radius: 12px; box-shadow: 0 40px 100px -40px rgba(0,0,0,.95); background: #000; }
.pf-modal-close { position: absolute; top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: background .2s ease, color .2s ease; }
.pf-modal-close svg { width: 20px; height: 20px; }
.pf-modal-close:hover { background: #fff; color: #0a0a0a; border-color: transparent; }

.pf-edit-media.is-plan { background: #f4f5f6; }
.pf-edit-media.is-plan img { object-fit: contain; padding: 12px; }

.pf-ba-note { max-width: 640px; margin: clamp(22px, 3vw, 34px) auto 0; text-align: center; color: var(--pf-muted); font-size: clamp(14px, 1rem, 17px); line-height: 1.65; }


/* ============================================================
   BLUE-TINTED DARK SURFACES (multifamily palette, sitewide)
   Shifts the neutral blacks to the cool navy the multifamily
   scrim uses, and adds accent-tinted section dividers.
   ============================================================ */
html[data-theme="dark"], html:not([data-theme]) {
  --pf-bg: #05090F;
  --pf-band: #080E16;
  --pf-surface: #0C141F;
  --pf-surface-2: #111B29;
  --pf-line: rgba(120,180,225,0.13);
  --pf-line-strong: rgba(120,180,225,0.22);
  --pf-muted: #94A6BC;
  --border-color: rgba(120,180,225,0.13);
  --light-3: rgba(120,180,225,0.16);
  --grey-3: rgba(120,180,225,0.16);
  --grey: #94A6BC;
  --grey-dark: #6B7F96;
  --pf-shadow: 0 22px 60px -28px rgba(0,6,16,0.85);
}
html[data-theme="dark"] .section.bg-light,
html:not([data-theme]) .section.bg-light { background-color: var(--pf-band) !important; }
html[data-theme="dark"] .section.bg-light-2,
html[data-theme="dark"] .section.bg-light-3,
html:not([data-theme]) .section.bg-light-2,
html:not([data-theme]) .section.bg-light-3 { background-color: var(--pf-surface) !important; }
html[data-theme="dark"] .section.bg-white,
html:not([data-theme]) .section.bg-white { background-color: var(--pf-bg) !important; }

/* light mode: the same hue, cooled and lifted */
html[data-theme="light"] {
  --pf-bg: #F7F9FC;
  --pf-band: #EDF2F8;
  --pf-surface: #FFFFFF;
  --pf-surface-2: #F1F5FA;
  --pf-line: rgba(16,42,68,0.11);
  --pf-line-strong: rgba(16,42,68,0.18);
  --pf-muted: #5A6B7F;
  --border-color: rgba(16,42,68,0.11);
  --light-3: rgba(16,42,68,0.13);
  --grey-3: rgba(16,42,68,0.13);
  --grey: #5A6B7F;
}

/* accent-tinted section dividers */
.section + .section { border-top: 1px solid var(--pf-line); }
.heading-holder .text-caption::after,
.heading-holder .pf-eyebrow-i::after { background: var(--accent); }


/* ============================================================
   PRICING PAGE — clean typographic rate sheet (no imagery)
   ============================================================ */
.pf-sqft-solo { max-width: 720px; margin: 8px auto 0 !important; }
.pf-sqft-solo + .f-txt { text-align: center; margin-top: 14px; }

/* service / add-on / land rows */
#pf-services .pf-grid, #pf-addons .pf-grid, .pf-grid { display: block !important; }
.pf-card {
  display: grid !important; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: clamp(20px, 4vw, 56px); padding: 18px 2px !important;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--pf-line) !important;
  border-radius: 0 !important; overflow: visible; transition: padding-left .28s ease, border-color .28s ease;
}
.pf-card:first-child { border-top: 1px solid var(--pf-line) !important; }
.pf-card:hover { transform: none !important; box-shadow: none !important; padding-left: 12px !important; border-color: var(--pf-line-strong) !important; }
.pf-card-thumb { display: none !important; }
.pf-card-body { padding: 0 !important; min-width: 0; }
.pf-card-body h4 {
  font-family: 'Poppins', sans-serif; font-size: clamp(15px, 1.02rem, 17px) !important;
  font-weight: 600; letter-spacing: -0.01em; color: var(--pf-ink); margin: 0 0 3px;
}
.pf-card-desc { font-size: clamp(12px, .82rem, 13.5px) !important; line-height: 1.5; color: var(--pf-muted); margin: 0; max-width: 62ch; }
.pf-card-price {
  padding: 0 !important; text-align: right !important; white-space: nowrap;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(14px, .95rem, 16px); color: var(--accent);
}
.pf-card-price .pf-startlbl {
  display: block; font-size: clamp(9px, .6rem, 10px); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pf-muted); margin-bottom: 2px;
}
.pf-land-card { grid-template-columns: 1fr auto !important; }
.pf-land-card .pf-card-body { padding: 0 !important; }
.pf-land-card .pf-card-price { padding: 0 !important; }

/* package cards — flat, typographic */
.packages-3x { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--pf-line); }
.package-card {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--pf-line) !important;
  border-right: 1px solid var(--pf-line) !important; border-radius: 0 !important;
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 32px) !important; box-shadow: none !important;
  transition: background .3s ease;
}
.package-card:hover { transform: none !important; background: var(--pf-surface) !important; }
.package-card.is-popular { background: var(--pf-surface) !important; }
.package-card-image { display: none !important; }
.package-card h3 { font-size: clamp(18px, 1.28rem, 22px) !important; letter-spacing: -0.02em; margin-bottom: 16px; }
.pf-pop-tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px;
  background: var(--accent); color: #04121c; font-family: 'Poppins', sans-serif;
  font-size: clamp(9px, .58rem, 10px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.package-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.pck-item { display: flex; gap: 9px; align-items: flex-start; font-size: clamp(12.5px, .85rem, 14px); line-height: 1.5; color: var(--pf-muted); }
.package-card-bottom { border-top: 1px solid var(--pf-line); padding-top: 20px; }
.pf-startlbl { font-size: clamp(9px, .6rem, 10px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: 4px; }
.p-val { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(26px, 2rem, 34px); letter-spacing: -0.025em; color: var(--pf-ink); line-height: 1; margin-bottom: 6px; }
.p-val .pf-amount { color: var(--accent); }
.package-buttons { margin-top: 18px; }
.package-buttons .button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 13px 20px; border-radius: 999px; background: transparent; border: 1px solid var(--pf-line-strong);
  color: var(--pf-ink) !important; font-size: clamp(10px, .68rem, 11px); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.package-buttons .button:hover { background: var(--accent); border-color: transparent; color: #04121c !important; }
@media (max-width: 640px) {
  .pf-card { grid-template-columns: 1fr; row-gap: 8px; }
  .pf-card-price { text-align: left !important; }
  .pf-card-price .pf-startlbl { display: inline; margin-right: 6px; }
}


/* pricing page: multifamily hero backdrop — deep navy wash + ambient accent glow */
body:has(#pf-packages) .page-wrap { position: relative; }
body:has(#pf-packages) .section.bg-white,
body:has(#pf-packages) .section.bg-light-2,
body:has(#pf-packages) .section.bg-light { background-color: transparent !important; }
body:has(#pf-packages) .page-wrap::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(27,168,224,0.16), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(27,168,224,0.09), transparent 65%),
    linear-gradient(180deg, #05090F 0%, #070D16 45%, #05090F 100%);
}
html[data-theme="light"] body:has(#pf-packages) .page-wrap::before {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(27,168,224,0.14), transparent 60%),
    linear-gradient(180deg, #F7F9FC 0%, #EDF3FA 45%, #F7F9FC 100%);
}


/* outlined accent word — multifamily "filmed" treatment, sitewide */
.outline { color: transparent !important; -webkit-text-stroke: 1.6px var(--accent); paint-order: stroke fill; }
@media (max-width: 640px) { .outline { -webkit-text-stroke-width: 1.2px; } }


/* pricing hero: slider tucked into the hero, tighter rhythm */
body:has(#pf-packages) .hero-s { padding-top: clamp(96px, 11vw, 150px) !important; padding-bottom: clamp(36px, 4vw, 56px) !important; }
body:has(#pf-packages) .pricing-heading { display: flex; flex-direction: column; align-items: center; gap: 22px; }
body:has(#pf-packages) .pricing-heading h1 { margin: 0; }
body:has(#pf-packages) .buttons-wr { margin: 0; }
body:has(#pf-packages) .pf-sqft-solo { margin: 6px auto 0 !important; width: 100%; max-width: 560px; padding: 18px 22px 16px; }
body:has(#pf-packages) .pf-sqft-solo .f-txt { text-align: center; margin: 12px 0 0; font-size: clamp(11px, .72rem, 12.5px); opacity: .75; }
body:has(#pf-packages) .section { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }


/* ============================================================
   PRICING — wavy blue dividers + ambient geometry
   ============================================================ */
body:has(#pf-packages) .section { position: relative; border-top: 0 !important; }
body:has(#pf-packages) .hero-s + .section::before,
body:has(#pf-packages) .section + .section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%2040'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2022%20C%20180%202%2C%20360%2042%2C%20540%2022%20S%20900%202%2C%201080%2022%20S%201350%2038%2C%201440%2020'%20fill%3D'none'%20stroke%3D'%25231BA8E0'%20stroke-width%3D'2'%20stroke-opacity%3D'0.55'%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
  pointer-events: none; opacity: .8;
}


/* ambient geometric shapes */
body:has(#pf-packages) .section > .container { position: relative; z-index: 1; }
body:has(#pf-packages) .section::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(27,168,224,0.16);
  top: 14%; right: -110px;
}
body:has(#pf-packages) .section:nth-of-type(even)::after {
  right: auto; left: -130px; top: auto; bottom: 8%;
  width: 240px; height: 240px; border-radius: 0;
  transform: rotate(24deg);
  border-color: rgba(27,168,224,0.13);
}
body:has(#pf-packages) .hero-s::after { display: none; }

/* dotted geometry accent */
body:has(#pf-packages) .page-wrap::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  left: 4%; top: 26%; width: 180px; height: 180px; opacity: .5;
  background-image: radial-gradient(rgba(27,168,224,0.35) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 72%);
}
@media (max-width: 900px) {
  body:has(#pf-packages) .section::after,
  body:has(#pf-packages) .page-wrap::after { display: none; }
}


/* client marquee — typographic wordmarks */
.pf-client {
  display: inline-block; white-space: nowrap;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(15px, 1.05rem, 19px); letter-spacing: .01em;
  color: var(--pf-ink); opacity: .58; transition: opacity .25s ease, color .25s ease;
}
.logo-w:hover .pf-client { opacity: 1; color: var(--accent); }
.scrolling-logos-w { display: flex; align-items: center; gap: clamp(34px, 4vw, 64px); }
.scrolling-logos-w .logo-w { flex: none; }


/* ============================================================
   INSTAGRAM STRIP — seamless edge-to-edge post row
   ============================================================ */
.pf-ig { width: 100%; }
.pf-ig-head { display: flex; align-items: center; gap: 14px; padding: 0 0 22px; }
.pf-ig-avatar { flex: none; width: 26px; height: 26px; border-radius: 8px; object-fit: cover; display: block; }
.pf-ig-avatar.is-lg { width: 46px; height: 46px; border-radius: 13px; }
.pf-ig-id { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; }
.pf-ig-name {
  font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(15px, 1.05rem, 18px); color: var(--pf-ink) !important;
}
.pf-ig-name:hover { color: var(--accent) !important; }
.pf-ig-stats { display: flex; flex-wrap: wrap; gap: 14px; font-family: 'Poppins', sans-serif; font-size: clamp(11px, .74rem, 12.5px); color: var(--pf-muted); }
.pf-ig-follow {
  flex: none; padding: 9px 20px; border-radius: 999px; background: var(--accent);
  color: #04121c !important; font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(11px, .72rem, 12.5px); letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.pf-ig-follow:hover { background: #fff; color: #0a0a0a !important; }

.pf-ig-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pf-ig-strip::-webkit-scrollbar { display: none; }
.pf-ig-post { display: block; min-width: 0; }
.pf-ig-meta { display: flex; align-items: center; gap: 7px; padding: 9px 10px; background: var(--pf-surface); border-bottom: 0; }
.pf-ig-handle { font-family: 'Poppins', sans-serif; font-size: clamp(10px, .66rem, 11.5px); font-weight: 600; color: var(--pf-ink); }
.pf-ig-date { font-family: 'Poppins', sans-serif; font-size: clamp(9px, .6rem, 10.5px); color: var(--pf-muted); margin-left: auto; }
.pf-ig-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.pf-ig-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.pf-ig-post:hover .pf-ig-img img { transform: scale(1.05); opacity: .82; }
@media (max-width: 700px) { .pf-ig-strip { grid-auto-columns: minmax(150px, 1fr); } }


/* ============================================================
   PHONE MOCKUP — real iPhone treatment
   ============================================================ */
.mockup-w {
  position: relative; overflow: hidden;
  border-radius: 46px;
  border: 8px solid #0b0d12;
  background: #000;
  box-shadow:
    0 0 0 2px #2a3140,
    0 0 0 3px #11141b,
    0 40px 90px -32px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.07);
  isolation: isolate;
}
.mockup-w > img, .mockup-video { border-radius: 38px; }

/* Dynamic Island */
.mockup-w .top-m {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: 56px; display: flex; align-items: center;
  padding: 0 26px; pointer-events: none;
}
.mockup-w .top-m::before {
  content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 94px; height: 30px; border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mockup-w .m-txt {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px;
  color: #fff; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* signal + wifi + battery cluster */
.mockup-w .rect, .mockup-w .dot-r { display: none; }
.mockup-w .top-m::after {
  content: ''; position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 62px; height: 12px;
  background:
    /* battery body */
    linear-gradient(#fff,#fff) right 3px center / 20px 10px no-repeat,
    /* wifi dot */
    radial-gradient(circle at 50% 100%, #fff 42%, transparent 43%) 26px center / 13px 10px no-repeat,
    /* signal bars */
    linear-gradient(#fff,#fff) 0 bottom / 3px 5px no-repeat,
    linear-gradient(#fff,#fff) 5px bottom / 3px 7px no-repeat,
    linear-gradient(#fff,#fff) 10px bottom / 3px 9px no-repeat,
    linear-gradient(#fff,#fff) 15px bottom / 3px 11px no-repeat;
  -webkit-mask: none; opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  border-radius: 2px;
}

/* caption + home indicator */
.mockup-w .bottom-m {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 0 22px 30px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 45%, rgba(0,0,0,.8));
  padding-top: 70px;
}
.mockup-w .bottom-m::after {
  content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.85);
}
.mockup-w .txt-a { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(14px, .95rem, 17px); color: #fff; letter-spacing: .01em; }
.mockup-w .txt-m-s { font-family: 'Poppins', sans-serif; font-size: clamp(12px, .8rem, 14px); color: rgba(255,255,255,.86); margin-top: 3px; }
.mockup-w .progress { margin-top: 14px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; }
.mockup-w .progress-inner { height: 100%; border-radius: 999px; background: #fff; }

/* physical buttons */
.mockup-w::before, .mockup-w::after {
  content: ''; position: absolute; z-index: 5; width: 3px; border-radius: 3px;
  background: #2a3140; pointer-events: none;
}
.mockup-w::before { left: -11px; top: 22%; height: 46px; box-shadow: 0 62px 0 #2a3140, 0 124px 0 #2a3140; }
.mockup-w::after { right: -11px; top: 30%; height: 76px; }
@media (max-width: 700px) {
  .mockup-w { border-radius: 38px; border-width: 6px; }
  .mockup-w > img, .mockup-video { border-radius: 32px; }
  .mockup-w::before, .mockup-w::after { display: none; }
}

/* live Behold feed inherits the strip look */
.pf-ig-live { --behold-row-gap: 2px; --behold-column-gap: 2px; --behold-image-fit: cover; width: 100%; }
.pf-ig-live[hidden] { display: none; }


/* ============================================================
   BRAND MARQUEE — smaller marks, blur-in reveal
   ============================================================ */

.scroll-text { gap: clamp(28px, 3.4vw, 54px); }




/* static brand strip — no marquee scroll */
.scrolling .scroll-text { animation: none !important; transform: none !important; }
.scrolling .scroll-text:not(:first-child) { display: none !important; }
.scrolling .scroll-text { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.scrolling .gradient, .scrolling .gradient-v2 { display: none !important; }
.scrolling { overflow: visible !important; }
.scrolling-logos .scrolling-logos-w { animation: none !important; }
.scrolling-logos .scrolling-logos-w:not(:first-child) { display: none !important; }
.scrolling-logos .scrolling-logos-w { flex-wrap: wrap; justify-content: center; width: 100%; }


/* single-line white brand strip, slow blur reveal */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  flex-wrap: nowrap !important;
  gap: clamp(14px, 2vw, 40px) !important;
  width: 100%;
  overflow: hidden;
}



/* brand strip: never shrink below the text; scroll if the row is too tight */

.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none;
  justify-content: center;
}
.scrolling .scroll-text::-webkit-scrollbar,
.scrolling-logos .scrolling-logos-w::-webkit-scrollbar { display: none; }


/* brand strip: fits on one line, centers only when it fits */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  justify-content: flex-start !important;
  gap: clamp(10px, 1.6vw, 30px) !important;
  overflow-x: auto !important;
}
.scrolling .scroll-text > *:first-child,
.scrolling-logos .scrolling-logos-w > *:first-child { margin-left: auto; }
.scrolling .scroll-text > *:last-child,
.scrolling-logos .scrolling-logos-w > *:last-child { margin-right: auto; }


/* the real spacing came from .logo-text{margin-right:4rem} + .scroll-text padding — zero both, gap owns it */
.scrolling .scroll-text .logo-text,
.scrolling-logos .scrolling-logos-w .pf-client,
.scrolling-logos .scrolling-logos-w .logo-w { margin: 0 !important; }
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w { padding-left: 0 !important; padding-right: 0 !important; }


/* strip breaks out of the container padding and centers; gap tightened so the row fits */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-inline: 16px !important;
  gap: clamp(8px, 1.1vw, 26px) !important;
  justify-content: center !important;
}
/* the auto-margin centering hack is obsolete now that justify-content owns it */
.scrolling .scroll-text > *:first-child,
.scrolling-logos .scrolling-logos-w > *:first-child,
.scrolling .scroll-text > *:last-child,
.scrolling-logos .scrolling-logos-w > *:last-child { margin-left: 0; margin-right: 0; }


/* safe centering: centers when the row fits, falls back to flex-start when it overflows
   so nothing is ever pushed off the left edge and made unreachable */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  justify-content: safe center !important;
}


/* border-box padding was eating the full-bleed width: zero it and tighten the gap */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  padding-inline: 0 !important;
  gap: clamp(8px, 1vw, 24px) !important;
}


/* ============================================================
   BRAND STRIP — single source of truth for type + blur reveal
   ============================================================ */
.logo-text,
.pf-client {
  flex: 0 0 auto !important;
  min-width: auto !important;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 1.05vw, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  color: #fff !important;
  opacity: .62;
  filter: blur(0);
  transform: none;
}
/* pre-reveal */
html.js-reveal .pf-blur-in:not(.is-revealed) .logo-text,
html.js-reveal .pf-blur-in:not(.is-revealed) .pf-client {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translateY(6px) !important;
  transition: none !important;
}
/* revealed */
.pf-blur-in.is-revealed .logo-text,
.pf-blur-in.is-revealed .pf-client {
  opacity: .62 !important;
  filter: blur(0) !important;
  transform: none !important;
  transition: opacity 2.4s cubic-bezier(.22,1,.36,1), filter 2.8s cubic-bezier(.22,1,.36,1), transform 2.4s cubic-bezier(.22,1,.36,1) !important;
}
.pf-blur-in.is-revealed .logo-text:hover,
.pf-blur-in.is-revealed .pf-client:hover { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .pf-blur-in .logo-text,
  .pf-blur-in .pf-client { opacity: .62 !important; filter: none !important; transform: none !important; transition: none !important; }
}


/* client logos — rendered as white monochrome marks so mixed brand art reads on dark */
/* logos sit on a light plate so real brand colors read on the dark band —
   works regardless of whether the source art carries an alpha channel */
.scrolling-logos .scrolling-logos-w .logo-w {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: clamp(40px, 4.4vw, 58px);
  padding: 0 clamp(9px, 1.1vw, 16px);
  border-radius: 10px;
  background: #fff;
  opacity: .9;
  transition: opacity .25s ease, transform .25s ease;
}
.scrolling-logos .scrolling-logos-w .logo-w:hover { opacity: 1; transform: translateY(-2px); }
.pf-client-logo {
  height: clamp(20px, 2.3vw, 32px);
  width: auto;
  max-width: clamp(74px, 10vw, 140px);
  object-fit: contain;
  display: block;
}
/* circular badge marks need more height to match wordmark presence */
.pf-client-logo[src*="client-epic"] { height: clamp(32px, 3.6vw, 48px); max-width: none; }

/* blur reveal applies to the plates */
html.js-reveal .pf-blur-in:not(.is-revealed) .logo-w {
  opacity: 0 !important; filter: blur(18px) !important;
  transform: translateY(6px) !important; transition: none !important;
}
html.js-reveal .pf-blur-in.is-revealed .logo-w {
  opacity: .9 !important; filter: blur(0) !important; transform: none !important;
  transition: opacity 2.4s cubic-bezier(.22,1,.36,1), filter 2.8s cubic-bezier(.22,1,.36,1), transform 2.4s cubic-bezier(.22,1,.36,1) !important;
}


/* white-ink and black-background logos need a dark plate instead of the white one */
.scrolling-logos .scrolling-logos-w .logo-w.is-inverted {
  background: #12161d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
html[data-theme="light"] .scrolling-logos .scrolling-logos-w .logo-w.is-inverted {
  background: #12161d;
}


/* ============================================================
   COMMERCIAL — full-bleed film hero
   ============================================================ */
.pf-film-hero {
  position: relative; min-height: calc(100svh - var(--pf-nav-h, 80px)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; background: #05090F;
  padding: clamp(90px, 12vh, 140px) 20px clamp(96px, 14vh, 150px);
}
.pf-film-bg { position: absolute; inset: 0; z-index: 0; }
.pf-film-bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%); border: 0; pointer-events: none;
}
.pf-film-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,7,12,.72) 0%, rgba(3,7,12,.35) 32%, rgba(3,7,12,.55) 68%, rgba(3,7,12,.94) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(3,7,12,.6) 100%);
}
.pf-film-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.pf-film-title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 10rem) !important;
  line-height: .92; letter-spacing: -0.035em; color: #fff; margin: 0;
  text-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.pf-film-sub {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(10px, 1.3vw, 15px); letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: clamp(14px, 2vh, 26px) 0 0;
}
.pf-film-cta {
  margin-top: clamp(26px, 4vh, 44px);
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .16em; text-transform: uppercase;
  color: #fff !important; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5);
  transition: border-color .25s ease, color .25s ease;
}
.pf-film-cta:hover { color: var(--accent) !important; border-color: var(--accent); }
.pf-film-arrow {
  margin-top: clamp(22px, 3.4vh, 40px); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.72);
  animation: pfFilmBob 2.6s ease-in-out infinite;
}
.pf-film-arrow svg { width: 22px; height: 22px; }
.pf-film-arrow:hover { color: #fff; }
@keyframes pfFilmBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.pf-film-clients {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 3.4vh, 40px); z-index: 2;
  padding: 0 clamp(16px, 3vw, 40px);
}
.pf-film-clients .scrolling-logos-w {
  display: flex; align-items: center; justify-content: safe center;
  gap: clamp(8px, 1vw, 24px); width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pf-film-clients .scrolling-logos-w::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .pf-film-arrow { animation: none; } }
@media (max-width: 700px) {
  .pf-film-hero { min-height: calc(92svh - var(--pf-nav-h, 68px)); }
  .pf-film-clients .logo-w { height: 34px !important; padding: 0 8px !important; }
}


/* nav height drives the film hero's viewport math */
:root { --pf-nav-h: 80px; }
@media (max-width: 991px) { :root { --pf-nav-h: 72px; } }
@media (max-width: 700px) { :root { --pf-nav-h: 68px; } }


/* ============================================================
   COMMERCIAL — edge-to-edge work grid
   ============================================================ */
.pf-work { padding: 0 !important; border: 0 !important; background: #05090F; }
.pf-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
.pf-work-tile { margin: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pf-work-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.pf-work-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.pf-work-tile:hover .pf-work-media img { transform: scale(1.045); opacity: .88; }
.pf-work-cap {
  padding: 15px 18px; text-align: center;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(10px, .78vw, 12.5px); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.78); background: #0C141F;
  transition: color .25s ease, background .25s ease;
}
.pf-work-tile:hover .pf-work-cap { color: #fff; background: #121B28; }
@media (max-width: 900px) { .pf-work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pf-work-grid { grid-template-columns: 1fr; } }


/* shorter film hero — takes up less vertical space */
.pf-film-hero {
  min-height: 0 !important;
  height: clamp(420px, calc(64svh - var(--pf-nav-h, 80px)), 620px) !important;
  padding: clamp(48px, 7vh, 84px) 20px clamp(78px, 11vh, 110px) !important;
}
.pf-film-title { font-size: clamp(2.2rem, 8vw, 6.4rem) !important; }
.pf-film-sub { margin-top: clamp(10px, 1.4vh, 18px); }
.pf-film-cta { margin-top: clamp(18px, 2.6vh, 30px); }
.pf-film-arrow { margin-top: clamp(12px, 1.8vh, 22px); width: 32px; height: 32px; }
.pf-film-arrow svg { width: 18px; height: 18px; }
.pf-film-clients { bottom: clamp(14px, 2.2vh, 26px); }
.pf-film-clients .logo-w { height: clamp(32px, 3.4vw, 44px) !important; }
@media (max-width: 700px) {
  .pf-film-hero { height: clamp(360px, calc(60svh - var(--pf-nav-h, 68px)), 480px) !important; }
}

.pf-work-media iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; min-width: 178%; min-height: 100%; border: 0; pointer-events: none; }


/* work tiles: poster + play, click to load player */
.pf-work-media.pf-work-play { padding: 0; border: 0; cursor: pointer; display: block; width: 100%; }
.pf-work-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.pf-work-play:hover .pf-work-poster { transform: scale(1.045); opacity: .82; }
.pf-work-playicon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,18,.46); border: 1px solid rgba(255,255,255,.42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
.pf-work-playicon svg { width: 19px; height: 19px; margin-left: 3px; }
.pf-work-play:hover .pf-work-playicon { background: #fff; color: #0a0a0a; border-color: transparent; transform: translate(-50%,-50%) scale(1.07); }
.pf-work-media.is-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; transform: none; pointer-events: auto; }


/* work tiles: no play button — the whole tile opens a lightbox */
.pf-work-playicon { display: none !important; }
.pf-work-media.pf-work-play { cursor: zoom-in; }
.pf-work-play::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(5,9,15,.28); opacity: 0; transition: opacity .3s ease;
}
.pf-work-play:hover::after { opacity: 1; }

/* lightbox */
.pf-lb {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 72px);
  background: rgba(4,7,12,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pf-lb[hidden] { display: none; }
.pf-lb-stage { width: min(1180px, 100%); display: flex; flex-direction: column; gap: 18px; }
.pf-lb-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95); }
.pf-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-lb-cap {
  text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(11px, .82vw, 13px); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.pf-lb-close {
  position: absolute; top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pf-lb-close svg { width: 20px; height: 20px; }
.pf-lb-close:hover { background: #fff; color: #0a0a0a; border-color: transparent; }


/* ============================================================
   COMMERCIAL — "The PropertyFlix Difference" cards, premium dark
   (they were white boxes on a dark page; titles rendered invisible)
   ============================================================ */
.cards-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.cards-2x2 .card-item {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(18,27,40,.9), rgba(9,14,22,.92)) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 18px !important;
  padding: clamp(26px, 2.6vw, 40px) !important;
  box-shadow: none !important;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.cards-2x2 .card-item::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(90% 70% at 12% 0%, rgba(27,168,224,.14), transparent 62%);
  transition: opacity .4s ease;
}
.cards-2x2 .card-item:hover {
  border-color: rgba(27,168,224,.45) !important;
  transform: translateY(-5px);
  box-shadow: 0 34px 70px -44px rgba(0,0,0,.95);
}
.cards-2x2 .card-item:hover::before { opacity: 1; }
.cards-2x2 .card-item > * { position: relative; z-index: 1; }

/* icon chip */
.cards-2x2 .card-item .card-item-icon {
  background: rgba(27,168,224,.12) !important;
  border: 1px solid rgba(27,168,224,.28) !important;
  border-radius: 12px !important;
  color: var(--accent) !important;
}
.cards-2x2 .card-item .card-item-icon .icon-card,
.cards-2x2 .card-item .card-item-icon .w-embed {
  background: none !important; border: 0 !important; border-radius: 0 !important;
}
.cards-2x2 .card-item svg { color: var(--accent) !important; }

/* type */
.cards-2x2 .card-item h4 {
  color: #fff !important;
  font-size: clamp(17px, 1.32vw, 21px) !important;
  font-weight: 700; letter-spacing: -0.018em;
  margin: 18px 0 8px;
}
.cards-2x2 .card-item .text-blue {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: clamp(13px, 1.02vw, 15px) !important;
  letter-spacing: .01em;
  line-height: 1.5;
  margin-bottom: 12px;
}
.cards-2x2 .card-item .text-color-gray-dark {
  color: var(--pf-muted) !important;
  font-size: clamp(13px, 1.05vw, 15.5px) !important;
  line-height: 1.7;
}
@media (max-width: 800px) { .cards-2x2 { grid-template-columns: 1fr; } }


/* ============================================================
   FAQ — premium dark treatment
   ============================================================ */
.tabs-menu { gap: 8px; }
.tab-link {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  color: var(--pf-muted) !important;
  font-family: 'Poppins', sans-serif; font-weight: 600 !important;
  font-size: clamp(12px, .92vw, 13.5px) !important; letter-spacing: .01em;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tab-link:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: var(--pf-line-strong) !important; }
.tab-link.w--current {
  background: var(--accent) !important; border-color: transparent !important;
  color: #04121c !important; box-shadow: 0 14px 32px -14px var(--accent);
}

/* accordion */
.faqs .faq-item, .pf-faq-item {
  background: linear-gradient(160deg, rgba(18,27,40,.72), rgba(9,14,22,.8)) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .3s ease, background .3s ease;
}
.faqs .faq-item:hover, .pf-faq-item:hover { border-color: rgba(27,168,224,.4) !important; }
.faq-item-head { padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px) !important; cursor: pointer; }
.faq-q {
  color: #fff !important; font-family: 'Poppins', sans-serif; font-weight: 600 !important;
  font-size: clamp(14px, 1.12vw, 17px) !important; letter-spacing: -0.008em;
}
.faq-arr { color: var(--accent) !important; transition: transform .3s ease; }
.faq-txt {
  color: var(--pf-muted) !important;
  font-size: clamp(13px, 1.05vw, 15.5px) !important; line-height: 1.72;
  padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px);
}

/* "Still have questions?" band — was a white card with white text */
.cta-bottom {
  background: linear-gradient(120deg, rgba(27,168,224,.14), rgba(12,20,31,.9)) !important;
  border: 1px solid rgba(27,168,224,.3) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px) !important;
}
.cta-bottom .co-title, .cta-bottom .co-title strong {
  color: #fff !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  letter-spacing: -0.015em;
}
.cta-bottom p {
  color: var(--pf-muted) !important;
  font-size: clamp(13px, 1.05vw, 15.5px) !important;
}

.cta-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-bottom .cta-bottom-info { display: flex; flex-direction: column; gap: 4px; }


/* ============================================================
   HOMEPAGE — multifamily ambient backdrop
   ============================================================ */
body:has(.pf-ig) .page-wrap { position: relative; }
body:has(.pf-ig) .page-wrap::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(27,168,224,0.16), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(27,168,224,0.09), transparent 65%),
    linear-gradient(180deg, #05090F 0%, #070D16 45%, #05090F 100%);
}
html[data-theme="light"] body:has(.pf-ig) .page-wrap::before {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(27,168,224,0.14), transparent 60%),
    linear-gradient(180deg, #F7F9FC 0%, #EDF3FA 45%, #F7F9FC 100%);
}
/* let the wash read through the alternating bands */
body:has(.pf-ig) .section.bg-white { background-color: transparent !important; }
body:has(.pf-ig) .section.bg-light { background-color: rgba(8,14,22,.55) !important; }
body:has(.pf-ig) .section.bg-light-2,
body:has(.pf-ig) .section.bg-light-3 { background-color: rgba(12,20,31,.6) !important; }
html[data-theme="light"] body:has(.pf-ig) .section.bg-light { background-color: rgba(237,242,248,.7) !important; }
html[data-theme="light"] body:has(.pf-ig) .section.bg-light-2,
html[data-theme="light"] body:has(.pf-ig) .section.bg-light-3 { background-color: rgba(241,245,250,.75) !important; }


/* blur halo was being clipped by the strip's scroll container — let it spill */
.scrolling .scroll-text,
.scrolling-logos .scrolling-logos-w {
  overflow: visible !important;
  padding-block: 26px !important;
}
.scrolling, .scrolling-logos { overflow: visible !important; }
.pf-film-clients .scrolling-logos-w { overflow: visible !important; }


/* feather the left/right edges of the credibility strip */
.scrolling, .scrolling-logos, .pf-film-clients {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 6%, #000 16%, #000 84%, rgba(0,0,0,.35) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 6%, #000 16%, #000 84%, rgba(0,0,0,.35) 94%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* restored Instagram embed: keep the frame on-theme */
.embed-insta .instagram-media { width: 100%; min-width: 0; height: 100%; min-height: 620px; border: 1px solid var(--pf-line); border-radius: 14px; background: #fff; display: block; margin: 0; }





/* ============================================================
   OFFER PANELS — quiet, generous, evenly ranked
   ============================================================ */
.offers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 18px); align-items: stretch;
}
.offers > * { min-width: 0; }

.offer-card {
  display: flex !important; flex-direction: column; height: 100%;
  background: rgba(255,255,255,.022) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 22px !important;
  padding: 0 !important; overflow: hidden;
  box-shadow: none !important;
  transition: background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.offer-card:hover {
  background: rgba(255,255,255,.045) !important;
  border-color: var(--pf-line-strong) !important;
  transform: translateY(-4px);
}
.offer-card.is-featured, .offer-card.c2 {
  background: rgba(27,168,224,.07) !important;
  border-color: rgba(27,168,224,.4) !important;
}

/* media cap */
.offer-card-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1119; }
.offer-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* body becomes the flex column so the CTA can pin to the bottom */
.offer-card-content {
  display: flex !important; flex-direction: column; flex: 1;
  padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 30px) clamp(24px, 2.2vw, 32px);
}
.offer-card-head { margin: 0 0 clamp(14px, 1.6vw, 20px); }
.offer-title {
  font-family: 'Poppins', sans-serif; font-weight: 600 !important;
  font-size: clamp(15px, 1.18vw, 18px) !important;
  line-height: 1.3; letter-spacing: -0.015em; color: var(--pf-ink);
}
.offer-text-w { margin: 0; }
.offer-text-w .text-offer { margin: 0; }
.offer-text-w:empty, .offer-text-w .text-offer:empty { display: none; }

/* price — large, light, quiet label */
.offer-price {
  font-family: 'Poppins', sans-serif; font-weight: 300 !important;
  font-size: clamp(30px, 2.7vw, 42px) !important;
  line-height: 1; letter-spacing: -0.035em; color: var(--pf-ink) !important;
  margin: 0 0 clamp(20px, 2.2vw, 28px); padding: 0; border: 0;
}


/* features — spacing, not rules */
.offer-features {
  display: flex; flex-direction: column; gap: clamp(11px, 1.1vw, 14px);
  padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--pf-line);
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.feature-item {
  display: grid !important; grid-template-columns: 16px 1fr; align-items: start;
  gap: 11px; min-height: 0 !important; padding: 0 !important; border: 0 !important;
}
.feature-item::before {
  content: ''; width: 6px; height: 6px; margin-top: .55em; margin-left: 5px;
  border-radius: 50%; background: var(--accent); opacity: .85;
}
.feature-item .text-offer {
  margin: 0; font-family: 'Poppins', sans-serif;
  font-size: clamp(12.5px, .96vw, 14px) !important; line-height: 1.5;
  color: var(--pf-muted) !important;
}
.offer-card.c2 .feature-item .text-offer { color: rgba(255,255,255,.86) !important; }

/* CTA pinned to the bottom of every card */
.offer-card .button-round {
  margin-top: auto; width: 100%; justify-content: center;
  padding: 14px 20px !important; border-radius: 999px !important;
  background: transparent !important; border: 1px solid var(--pf-line-strong) !important;
  color: var(--pf-ink) !important;
  font-size: clamp(11px, .82vw, 12.5px) !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.offer-card .button-round:hover {
  background: var(--accent) !important; border-color: transparent !important; color: #04121c !important;
}
.offer-card.c2 .button-round { background: var(--accent) !important; border-color: transparent !important; color: #04121c !important; }
.offer-card.c2 .button-round:hover { background: #fff !important; color: #0a0a0a !important; }

@media (max-width: 1180px) { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .offers { grid-template-columns: 1fr; } }


/* ============================================================
   ABOUT — "What Drives Us" cards, centred with refined icons
   ============================================================ */
.cards-3x { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.cards-3x > * { min-width: 0; display: flex; }
.card-el {
  display: flex !important; flex-direction: column; align-items: center; text-align: center;
  width: 100%; height: 100%;
  padding: clamp(34px, 3.4vw, 52px) clamp(24px, 2.4vw, 38px) clamp(36px, 3.6vw, 54px) !important;
  background: rgba(255,255,255,.022) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  transition: background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.card-el:hover {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(27,168,224,.4) !important;
  transform: translateY(-4px);
}
/* icon: a ring, not a filled tile */
.card-el-icon {
  width: clamp(56px, 5vw, 68px); height: clamp(56px, 5vw, 68px);
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 0 clamp(22px, 2.4vw, 30px) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 30%, rgba(27,168,224,.16), rgba(27,168,224,.05) 70%) !important;
  border: 1px solid rgba(27,168,224,.3) !important;
  box-shadow: 0 0 0 6px rgba(27,168,224,.045), inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.card-el:hover .card-el-icon {
  border-color: rgba(27,168,224,.55) !important;
  box-shadow: 0 0 0 8px rgba(27,168,224,.07), 0 0 26px -8px rgba(27,168,224,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
.card-el-icon .icon-d { width: clamp(23px, 2vw, 27px); height: clamp(23px, 2vw, 27px); color: var(--accent); }
.card-el-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.card-el-info { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.1vw, 14px); }
.card-el-info .title-md {
  font-size: clamp(17px, 1.32vw, 21px) !important; letter-spacing: -0.018em; color: var(--pf-ink);
}
.card-el-info p {
  margin: 0; max-width: 34ch;
  font-size: clamp(13px, 1.02vw, 15px) !important; line-height: 1.7; color: var(--pf-muted) !important;
}
@media (max-width: 900px) { .cards-3x { grid-template-columns: 1fr; } .card-el-info p { max-width: 46ch; } }


/* ============================================================
   OFFER PANELS — multifamily typography, no dead space
   ============================================================ */
.offers { align-items: stretch; }
.offer-card { font-family: 'Poppins','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif; }
.offer-card-content { gap: 0; }

/* header block sizes to its content — no reserved empty space */
.offer-card-head { min-height: 0 !important; margin: 0 0 10px !important; }
.offer-title {
  font-weight: 800 !important; letter-spacing: -.3px;
  font-size: clamp(16px, 1.3vw, 21px) !important; line-height: 1.2;
}
.offer-text-w { margin: 0 0 clamp(18px, 2vw, 24px); }
.offer-text-w .text-offer {
  margin: 0; color: #8ea0bd !important;
  font-size: clamp(12.5px, .96vw, 14.5px) !important; line-height: 1.55;
}
.offer-text-w:has(.text-offer:empty) { display: none; }

.offer-price {
  font-weight: 800 !important; letter-spacing: -1.1px;
  font-size: clamp(28px, 2.5vw, 40px) !important;
  margin: 0 0 clamp(16px, 1.8vw, 22px) !important;
}


.offer-features {
  gap: clamp(9px, .9vw, 12px);
  padding-top: clamp(16px, 1.8vw, 22px);
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.feature-item .text-offer {
  font-size: clamp(12.5px, .95vw, 14.5px) !important; line-height: 1.5;
  color: #8ea0bd !important;
}
.offer-card .button-round {
  margin-top: auto; font-weight: 700 !important; letter-spacing: .3px;
  text-transform: none !important; font-size: clamp(12.5px, .95vw, 14px) !important;
}


/* hero wordmark accent matched to the CTA button's brighter blue */
.header-info h1 .text-color-primary {
  color: #29BEF2 !important;
  -webkit-text-fill-color: #29BEF2;
}

/* stop control for lazy-loaded reels */
[data-pf-lazyvid] { position: relative; }
.pf-lazy-stop {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 999px;
  background: rgba(8,12,18,.62); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease;
}
.pf-lazy-stop svg { width: 13px; height: 13px; }
.pf-lazy-stop:hover { background: #fff; color: #0a0a0a; border-color: transparent; }

/* halt decorative motion when the tab is hidden */
html.pf-hidden *, html.pf-hidden *::before, html.pf-hidden *::after {
  animation-play-state: paused !important;
}


/* Package cards: reserve the title + description track so the price, divider
   and feature list share a baseline across a row without padding short cards.
   (Longest description wraps to 2 lines; titles wrap to 2 at narrow widths.) */
/* subgrid: every card shares the row's track heights, so head / description /
   price / features / CTA align with no hardcoded reserve. */
@supports (grid-template-rows: subgrid) {
  .offers { grid-auto-rows: auto; }
  .offer-card {
    display: grid !important;
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-row: span 6;
  }
  .offer-card-content { display: contents !important; }
  .offer-card-image { grid-row: auto; }
  .offer-card .button-round { margin-top: 0 !important; align-self: end; }
}
@supports not (grid-template-rows: subgrid) {
  .offer-card-head { min-height: 45px !important; }
  .offer-text-w { min-height: 78px; }
}
@media (max-width: 700px) {
  .offer-card-head { min-height: 0 !important; }
  .offer-text-w { min-height: 0; }
}

@supports (grid-template-rows: subgrid) {
  .offers { grid-template-rows: repeat(6, auto); }
  .offer-card { grid-template-rows: subgrid; }
}


/* subgrid children lost their padding box — restore it on the card, and let
   the media cap bleed to the card edges instead of being inset. */
@supports (grid-template-rows: subgrid) {
  .offer-card {
    padding: 0 clamp(22px, 2vw, 30px) clamp(24px, 2.2vw, 32px) !important;
  }
  /* media sits above the padded content and bleeds full-bleed to the edges */
  .offer-card-image {
    grid-column: 1 / -1;
    width: auto !important;
    justify-self: stretch;
    align-self: stretch;
    margin: 0 calc(-1 * clamp(22px, 2vw, 30px)) clamp(24px, 2.2vw, 32px);
    aspect-ratio: auto !important;
    height: clamp(150px, 15vw, 210px);
  }
  .offer-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* first content row needs the top padding the removed box used to supply */
  .offer-card-head { padding-top: 0; }
  .offer-card .button-round { margin-top: 0 !important; align-self: end; }
}


/* Testimonial coverflow: larger hero card, gentler feather so the neighbouring
   reels stay readable instead of dissolving into the background. */
.items {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%) !important;
}
.items .avatar-item { flex: 0 0 214px !important; width: 214px !important; }
.items .avatar-item .avatar-image { height: 19rem !important; }
.items .avatar-item:not(.is-active) .text-block { opacity: .58; }


/* infinite coverflow: snapping fights the wrap jump, so the rail free-scrolls */
.items .avatar-item { scroll-snap-align: none !important; }
.items { scroll-snap-type: none !important; }


/* Package descriptions: clamp to two lines with a Read more toggle so every
   card keeps the same height regardless of copy length. */
.offer-text-w { margin: 0 0 clamp(16px, 1.8vw, 22px) !important; min-height: 0 !important; }
.offer-text-w .text-offer {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin: 0;
}
.offer-text-w.is-open .text-offer { -webkit-line-clamp: unset; overflow: visible; }
.pf-more {
  display: none; margin-top: 6px; padding: 0; border: 0; background: none;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--accent); cursor: pointer;
}
.offer-text-w.has-more .pf-more { display: inline-block; }
.pf-more:hover { text-decoration: underline; }


/* Coverflow: the mute control belongs to the focused reel only — on scaled-down
   side cards it would render as an illegible speck. */
.items .avatar-item .icon-p,
.items .avatar-item .pf-vol,
.items .avatar-item .pf-lazy-stop {
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.items .avatar-item.is-active .icon-p,
.items .avatar-item.is-active .pf-vol,
.items .avatar-item.is-active .pf-lazy-stop {
  opacity: 1; pointer-events: auto;
}
/* counter the card's scale so the control keeps a constant on-screen size */
.items .avatar-item.is-active .icon-p { transform: scale(calc(1 / 1.26)); transform-origin: center; }
.items .avatar-item.is-active .avatar-item-w:hover .icon-p { transform: scale(calc(1.12 / 1.26)); }


/* audio control removed from the testimonial reels */
.items .avatar-item .icon-p,
.items .avatar-item.is-active .icon-p { display: none !important; }


/* ============================================================
   CREDIBILITY BAND — hairline dividers, seated flush under the hero
   ============================================================ */
.scrolling, .scrolling-logos {
  position: relative;
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  padding-block: clamp(20px, 2.6vh, 30px) !important;
  margin-top: 0 !important;
}
/* the band is the last child of the hero section, so seat it against the
   hero wrap directly rather than touching the interior pages' .hero-s */
.header .header-wrap { margin-bottom: 0 !important; padding-bottom: clamp(28px, 4vh, 56px) !important; }
.header .scrolling { margin-top: 0 !important; }
.header + .section { padding-top: clamp(48px, 6vw, 92px) !important; }

/* brand mark badge (was a bare "P" letterform) */
.p-txt { display: flex; align-items: center; justify-content: center; }
.p-txt .p-mark { width: 62%; height: 62%; object-fit: contain; display: block; }


/* phone mockup: volume control over the reel
   (.mockup-video is already absolutely positioned, so it anchors this) */
.pf-mvol {
  position: absolute; right: 12px; bottom: 96px; z-index: 6;
  display: flex; align-items: center; gap: 0; padding: 5px;
  border-radius: 999px; background: rgba(6,10,16,.55);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: gap .28s ease, padding .28s ease, background .28s ease;
}
.pf-mvol:hover, .pf-mvol.is-open { gap: 9px; padding: 5px 13px 5px 5px; background: rgba(6,10,16,.72); }
.pf-mvol-btn {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
}
.pf-mvol-btn svg { width: 15px; height: 15px; }
.pf-mvol-range {
  width: 0; opacity: 0; height: 3px; border-radius: 999px; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.32);
  transition: width .28s ease, opacity .28s ease;
}
.pf-mvol:hover .pf-mvol-range, .pf-mvol.is-open .pf-mvol-range { width: 68px; opacity: 1; }
.pf-mvol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; cursor: pointer; }
.pf-mvol-range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }


/* ============================================================
   STICKY HEADER — nav follows the scroll
   ============================================================ */
.navbar {
  position: sticky !important; top: 0; z-index: 1000;
  background-color: rgba(10, 14, 20, .82) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.navbar.is-stuck {
  background-color: rgba(8, 12, 18, .93) !important;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .95);
}
/* the residential sub-nav docks beneath the header rather than under it */
.pf-subnav { top: var(--pf-nav-h, 72px) !important; z-index: 90; }
[id="photography"], [id="videography"], [id="photo-editing"],
[id="listing-services"], [id="packages"] {
  scroll-margin-top: calc(var(--pf-nav-h, 72px) + 74px);
}


/* ============================================================
   RESIDENTIAL HERO — twilight exterior backdrop
   ============================================================ */
.hero-s.res-hero {
  position: relative;
  background-image: url('../images/res-hero.jpg');
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  padding-top: clamp(120px, 16vh, 190px) !important;
  padding-bottom: clamp(80px, 11vh, 130px) !important;
  isolation: isolate;
}
/* legibility scrim — dark at the base so the copy holds, sky stays visible */
.hero-s.res-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,16,.72) 0%, rgba(6,10,16,.42) 34%, rgba(6,10,16,.86) 100%),
    linear-gradient(90deg, rgba(6,10,16,.6), transparent 58%);
}
.hero-s.res-hero > * { position: relative; z-index: 1; }


/* ============================================================
   COMMERCIAL CLIENT STRIP — dividers + even white marks
   ============================================================ */
.pf-film-clients {
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  padding-block: clamp(22px, 3vh, 34px) !important;
  background: rgba(255,255,255,.012);
}
.pf-film-clients .logo-w {
  display: flex; align-items: center; justify-content: center;
  height: clamp(26px, 3vw, 38px); flex: none;
}
.pf-film-clients .pf-client-logo {
  max-height: 100%; width: auto; max-width: clamp(110px, 12vw, 168px);
  object-fit: contain; display: block;
  filter: none !important;           /* marks already ship white */
  opacity: .62; transition: opacity .3s ease;
}
.pf-film-clients .logo-w:hover .pf-client-logo { opacity: 1; }


/* the client marks now ship as transparent white PNGs, so the old light plate
   renders them white-on-white — drop the plate and let them sit on the band */
.pf-film-clients .scrolling-logos-w .logo-w,
.pf-film-clients .scrolling-logos-w .logo-w.is-inverted {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.pf-film-clients .pf-client-logo { height: auto; }


/* client band: smaller marks, even rhythm, crisper rules and reveal */
.pf-film-clients {
  border-top: 1px solid rgba(255,255,255,.09) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  background: none !important;
  padding-block: clamp(18px, 2.4vh, 26px) !important;
}
.pf-film-clients .scrolling-logos-w {
  gap: clamp(26px, 3.2vw, 52px) !important;
  justify-content: center;
}
.pf-film-clients .logo-w { height: clamp(18px, 1.9vw, 26px) !important; }
.pf-film-clients .pf-client-logo {
  max-height: 100%; width: auto;
  max-width: clamp(76px, 8.4vw, 118px);
  opacity: .52;
  transition: opacity .35s ease;
}
.pf-film-clients .logo-w:hover .pf-client-logo { opacity: .95; }
/* softer, quicker reveal — the long blur read as a glitch */
html.js-reveal .pf-film-clients.pf-blur-in:not(.is-revealed) .logo-w {
  opacity: 0 !important; filter: blur(8px) !important; transform: translateY(4px) !important;
}
html.js-reveal .pf-film-clients.pf-blur-in.is-revealed .logo-w {
  opacity: 1 !important; filter: blur(0) !important; transform: none !important;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1) !important;
}
/* narrower feather so the end logos aren't half-erased */
.pf-film-clients {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
}


/* brokerage marquee: logo marks replace the wordmarks */
.logo-text.is-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(16px, 1.7vw, 23px); flex: none;
}
.logo-text.is-mark img {
  max-height: 100%; width: auto; max-width: clamp(78px, 8.6vw, 124px);
  object-fit: contain; display: block;
}


/* ============================================================
   FORM CHIPS — selected state glows instead of stamping a tick
   (Webflow paints an oversized checkmark image over the label)
   ============================================================ */
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radios .radio-button-field {
  display: inline-flex; align-items: center; margin: 0; padding: 0;
  cursor: pointer;
}
.radios .radio-button-field .radio-button,
.radios .radio-button-field .w-checkbox-input {
  position: absolute !important; width: 100% !important; height: 100% !important;
  inset: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  background-image: none !important;   /* kill the stamped tick */
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.radios .radio-button-field .w-form-label {
  position: relative; z-index: 1; margin: 0;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--pf-line-strong);
  background: rgba(255,255,255,.03);
  color: var(--pf-muted);
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.radios .radio-button-field:hover .w-form-label {
  color: var(--pf-ink); border-color: rgba(27,168,224,.5);
}
/* selected: accent fill + blue glow, label stays fully legible */
.radios .radio-button-field:has(input:checked) .w-form-label {
  background: rgba(27,168,224,.16);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(27,168,224,.35), 0 0 18px -2px rgba(27,168,224,.55);
}


/* brokerage marquee: even spacing across the band + a softer, slower resolve */
.scrolling .scroll-text {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(38px, 4.6vw, 84px) !important;
  flex-wrap: nowrap;
}
.scrolling .scroll-text .logo-text { flex: none; }
/* normalise optical weight — the marks vary a lot in intrinsic size */
.logo-text.is-mark { height: clamp(20px, 2.1vw, 30px); }
.logo-text.is-mark img { max-width: clamp(92px, 10vw, 148px); }

/* reveal: start further away and settle, rather than snapping in */
html.js-reveal .scrolling.pf-blur-in:not(.is-revealed) .logo-text {
  opacity: 0 !important;
  filter: blur(16px) !important;
  transform: translateY(10px) scale(.965) !important;
  transition: none !important;
}
html.js-reveal .scrolling.pf-blur-in.is-revealed .logo-text {
  opacity: .72 !important;
  filter: blur(0) !important;
  transform: none !important;
  transition:
    opacity 1.5s cubic-bezier(.16,1,.3,1),
    filter 1.7s cubic-bezier(.16,1,.3,1),
    transform 1.5s cubic-bezier(.16,1,.3,1) !important;
}
html.js-reveal .scrolling.pf-blur-in.is-revealed .logo-text:hover { opacity: 1 !important; }

/* dial the brokerage marks back a notch */
.logo-text.is-mark { height: clamp(15px, 1.6vw, 22px); }
.logo-text.is-mark img { max-width: clamp(72px, 7.6vw, 112px); }

/* brokerage marquee eyebrow */
.scroll-label{display:block;width:100%;text-align:center;font-family:'Poppins',sans-serif;font-size:clamp(9px,.9vw,11px);font-weight:600;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--pf-muted);margin:0;padding:clamp(26px,3.4vh,40px) 0 0}
.scroll-label + .scrolling{border-top:0 !important;padding-top:clamp(14px,1.8vh,22px) !important}


/* ============================================================
   TRUSTED BY — slow seamless marquee with faded edges
   ============================================================ */
.scrolling{position:relative;overflow:hidden !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%) !important}
/* the old hard-edged fade panels are replaced by the mask */
.scrolling .gradient,.scrolling .gradient.is-right{display:none !important}
.scroll-marquee{display:flex;width:max-content;will-change:transform;animation:pfTrust 64s linear infinite}
.scrolling:hover .scroll-marquee{animation-play-state:paused}
.scrolling .scroll-text{flex:none;display:flex !important;align-items:center;justify-content:flex-start !important;
  gap:clamp(38px,4.6vw,84px) !important;padding-right:clamp(38px,4.6vw,84px)}
@keyframes pfTrust{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.scroll-marquee{animation:none}}

/* .scrolling is a flex container, which shrank the max-content rail to 0 */
.scrolling{display:block !important}
.scroll-marquee{flex:none !important;min-width:max-content}

/* marquee marks: intrinsic sizing must not depend on load order */
.logo-text.is-mark img{height:100%;width:auto;min-width:1px}

/* neutralise the legacy full-bleed track overrides inside the marquee rail:
   their negative side margins collapsed max-content width to 0 */
.scroll-marquee .scroll-text{
  width:auto !important;max-width:none !important;min-width:0 !important;
  margin-left:0 !important;margin-right:0 !important;margin-inline:0 !important;
  padding-inline:0 !important;padding-right:clamp(38px,4.6vw,84px) !important;
  overflow:visible !important;overflow-x:visible !important;
  justify-content:flex-start !important;flex-wrap:nowrap !important}
.scroll-marquee{width:max-content !important}

.scroll-marquee{flex-wrap:nowrap !important;align-items:center}
.scroll-marquee .scroll-text.is-clone{display:flex !important}


/* ============================================================
   BACKGROUND — matched to the Brand Builder export (#080A0E)
   ============================================================ */
html[data-theme="dark"], html:not([data-theme]) {
  --pf-bg: #080A0E;
  --pf-band: #0B0E13;
  --pf-surface: #10141B;
  --pf-surface-2: #161B24;
}