/* ============================================================
CINCH HOME BUYERS — SHARED SECTIONS STYLESHEET
Extracted from city page section files for browser caching.
Included via
injected by buildShell() in scripts/build-site.js.
DO NOT define :root CSS variables here — they are already
injected globally by buildShell().
============================================================ */
/* ============================================================
HERO SECTION — .cinch-hdr
============================================================ */
.cinch-hdr {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--dark: #1a1a1a;
--body: #4a4a4a;
--muted: #94a3b8;
--border: #e8e8e8;
--bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ─── TOP URGENCY BAR ─── */
.cinch-topbar {
background: var(--dark); color: #fff; text-align: center;
padding: 10px 24px; font-size: 13px; font-weight: 600;
letter-spacing: 0.3px; display: flex; align-items: center;
justify-content: center; gap: 12px; position: relative; z-index: 1001;
}
.cinch-topbar-pulse { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: ctbPulse 2s infinite; flex-shrink: 0; }
@keyframes ctbPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.cinch-topbar a { color: var(--red); text-decoration: underline; font-weight: 700; transition: color 0.2s; }
.cinch-topbar a:hover { color: #ff4a52; }
.cinch-topbar-phone { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.15); }
.cinch-topbar-phone a { color: #fff; text-decoration: none; font-weight: 700; }
/* ─── NAV ─── */
.cinch-nav {
background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.12); padding: 0 48px;
display: flex; align-items: center; justify-content: space-between;
height: 76px; position: sticky; top: 0; z-index: 1000;
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.cinch-nav-logo { display: flex; align-items: center; text-decoration: none; }
.cinch-nav-logo-img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.cinch-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cinch-nav-link {
display: flex; align-items: center; gap: 4px;
font-size: 14px; font-weight: 600; color: var(--body);
text-decoration: none; padding: 8px 14px; border-radius: 8px;
transition: all 0.2s; white-space: nowrap;
}
.cinch-nav-link:hover, .cinch-nav-link.active { color: var(--red); background: var(--red-light); }
.cinch-nav-arrow { width: 16px; height: 16px; fill: var(--muted); transition: transform 0.2s; }
/* Dropdown */
.cinch-nav-dropdown { position: relative; }
.cinch-nav-dropdown:hover .cinch-nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cinch-nav-dropdown:hover .cinch-nav-arrow { transform: rotate(180deg); fill: var(--red); }
.cinch-nav-dropdown-menu {
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px);
background: #fff; border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 16px 48px rgba(0,0,0,0.1); padding: 12px;
opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
z-index: 100; min-width: 540px;
}
.cinch-nav-dropdown.invest .cinch-nav-dropdown-menu { min-width: 400px; left: auto; right: 0; transform: translateY(-8px); }
.cinch-nav-dropdown.invest:hover .cinch-nav-dropdown-menu { transform: translateY(0); }
.cinch-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cinch-dd-item {
display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px;
text-decoration: none; color: var(--dark); transition: background 0.2s;
}
.cinch-dd-item:hover { background: var(--red-light); }
.cinch-dd-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cinch-dd-icon.sell { background: #fde8e8; } .cinch-dd-icon.sell svg { fill: var(--red); }
.cinch-dd-icon.how { background: #e0f2fe; } .cinch-dd-icon.how svg { fill: #0369a1; }
.cinch-dd-icon.areas { background: #dcfce7; } .cinch-dd-icon.areas svg { fill: #15803d; }
.cinch-dd-icon.calc { background: #fef9c3; } .cinch-dd-icon.calc svg { fill: #a16207; }
.cinch-dd-icon svg { width: 18px; height: 18px; }
.cinch-dd-text { display: flex; flex-direction: column; gap: 2px; }
.cinch-dd-title { font-size: 14px; font-weight: 700; color: var(--dark); }
.cinch-dd-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.cinch-dd-divider { height: 1px; background: var(--border); margin: 8px 0; }
.cinch-invest-items { display: flex; flex-direction: column; gap: 2px; }
.cinch-invest-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.2s; }
.cinch-invest-item:hover { background: var(--red-light); }
.cinch-invest-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cinch-invest-icon svg { width: 20px; height: 20px; }
.cinch-invest-icon.passive { background: #d1fae5; } .cinch-invest-icon.passive svg { fill: #065f46; }
.cinch-invest-icon.deals { background: #ede9fe; } .cinch-invest-icon.deals svg { fill: #5b21b6; }
.cinch-invest-icon.faq { background: #dbeafe; } .cinch-invest-icon.faq svg { fill: #1e40af; }
.cinch-invest-returns {
background: linear-gradient(135deg, #1a1a1a, #2a1a1c); border-radius: 12px;
padding: 16px; margin-top: 4px; text-decoration: none; color: #fff;
display: flex; align-items: center; justify-content: space-between; transition: all 0.3s;
}
.cinch-invest-returns:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.cinch-invest-returns-left { display: flex; flex-direction: column; gap: 2px; }
.cinch-invest-returns-label { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cinch-invest-returns-value { font-size: 28px; font-weight: 800; color: var(--red); }
.cinch-invest-returns-sub { font-size: 12px; color: rgba(255,255,255,0.5); }
.cinch-dd-featured-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
/* CTA actions */
.cinch-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cinch-nav-phone {
font-size: 14px; font-weight: 700; color: var(--dark); text-decoration: none;
display: flex; align-items: center; gap: 6px; padding: 8px 14px;
border-radius: 8px; transition: all 0.2s;
}
.cinch-nav-phone:hover { background: var(--red-light); color: var(--red); }
.cinch-nav-phone svg { width: 16px; height: 16px; fill: var(--red); }
.cinch-nav-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--red); color: #fff; text-decoration: none;
font-size: 14px; font-weight: 700; padding: 12px 24px;
border-radius: 100px; transition: all 0.3s;
box-shadow: 0 2px 8px rgba(193,39,45,0.25); white-space: nowrap;
border: none; font-family: inherit; cursor: pointer;
}
.cinch-nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(193,39,45,0.3); }
.cinch-nav-cta svg { width: 16px; height: 16px; fill: #fff; }
.cinch-hamburger {
display: none; width: 44px; height: 44px; border: 2px solid var(--border);
border-radius: 10px; background: var(--bg); cursor: pointer;
align-items: center; justify-content: center; flex-direction: column; gap: 6px;
padding: 0; flex-shrink: 0; position: relative; z-index: 10; transition: all 0.2s;
}
.cinch-hamburger:hover { border-color: var(--red); background: var(--red-light); }
.cinch-hamburger span { display: block; width: 22px; height: 2.5px; background: var(--dark); border-radius: 2px; transition: all 0.3s; }
.cinch-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.cinch-hamburger.open span:nth-child(2) { opacity: 0; }
.cinch-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
/* ─── HERO ─── */
.cinch-hero-wrap {
position: relative; min-height: 600px; display: flex;
align-items: center; justify-content: center;
padding: 20px 24px; overflow: hidden;
}
.cinch-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cinch-hero-bg::after {
content:''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(26,26,26,0.82) 0%, rgba(45,18,21,0.75) 50%, rgba(26,26,26,0.82) 100%);
}
.cinch-hero-content {
position: relative; z-index: 1; max-width: 100%; width: 100%;
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.cinch-hero-text { color: #fff; }
.cinch-hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(193,39,45,0.2); border: 1px solid rgba(193,39,45,0.35);
border-radius: 100px; padding: 8px 18px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.2px; color: #ff6b6b; margin-bottom: 24px;
}
.cinch-hero-badge-dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: ctbPulse 2s infinite; }
.cinch-hero-wrap h1 { font-size: clamp(32px,4.5vw,50px); font-weight: 800; line-height: 1.1; margin-bottom: 18px; letter-spacing: -1.5px; color: #fff; }
.cinch-hero-wrap h1 span { color: var(--red); }
.cinch-hero-sub { font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.65; margin-bottom: 32px; max-width: 460px; }
.cinch-hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.cinch-hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 600; }
.cinch-hero-trust-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; }
.cinch-hero-trust-icon svg { width: 15px; height: 15px; fill: var(--red); }
/* ─── FORM CARD ─── */
.cinch-form-card {
background: #fff; border-radius: 20px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
overflow: hidden; max-width: 480px; width: 100%;
}
.cinch-hero-wrap .cinch-form-card { justify-self: end; }
.cinch-form-progress { display: flex; height: 4px; background: #f1f5f9; }
.cinch-form-progress-fill { height: 100%; background: var(--red); transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.cinch-form-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #f1f5f9; }
.cinch-form-step-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; cursor: default; }
.cinch-form-step-num {
width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; background: #f1f5f9; color: var(--muted); transition: all 0.3s;
}
.cinch-form-step-tab.active .cinch-form-step-num { background: #C1272D; color: #fff; }
.cinch-form-step-tab.done .cinch-form-step-num { background: #d1fae5; color: #065f46; }
.cinch-form-step-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s; }
.cinch-form-step-tab.active .cinch-form-step-label { color: #C1272D; }
.cinch-form-step-tab.done .cinch-form-step-label { color: #065f46; }
.cinch-form-body { padding: 28px 32px 32px; }
.cinch-form-panel { display: none; }
.cinch-form-panel.active { display: block; animation: cfFadeIn 0.3s ease-out; }
@keyframes cfFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.cinch-form-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.cinch-form-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.cinch-input-group { margin-bottom: 16px; }
.cinch-input-group:last-of-type { margin-bottom: 20px; }
.cinch-input-label { display: block; font-size: 12px; font-weight: 700; color: var(--body); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.cinch-input {
width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px;
font-size: 15px; font-family: inherit; color: var(--dark); background: var(--bg);
transition: all 0.25s; outline: none;
}
.cinch-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(193,39,45,0.1); }
.cinch-input::placeholder { color: #cbd5e1; }
.cinch-input.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.cinch-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cinch-input-error { font-size: 12px; color: #ef4444; font-weight: 600; margin-top: 4px; display: none; align-items: center; gap: 4px; }
.cinch-input-error.show { display: flex; }
.cinch-select {
min-height: 52px;
width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px;
font-size: 15px; font-family: inherit; color: var(--dark); background: var(--bg);
transition: all 0.25s; outline: none; cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
.cinch-select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(193,39,45,0.1); }
.cinch-textarea {
width: 100%; padding: 14px 16px; border: 2px solid #C1272D; border-radius: 12px;
font-size: 15px; font-family: inherit; color: var(--dark); background: var(--bg);
transition: all 0.25s; outline: none; resize: vertical; min-height: 80px;
}
.cinch-textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(193,39,45,0.1); }
.cinch-form-btn {
width: 100%; padding: 16px 24px; background-color: #C1272D; color: #ffffff;
border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
font-family: inherit; cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 10px; transition: all 0.3s;
box-shadow: 0 4px 16px rgba(193,39,45,0.3);
}
.cinch-form-btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.cinch-form-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cinch-form-btn svg { width: 18px; height: 18px; fill: #fff; }
.cinch-form-btn-row { display: flex; gap: 12px; }
.cinch-form-btn-back {
padding: 16px 20px; background: #ffffff; color: var(--red); border: none;
border-radius: 12px; font-size: 14px; font-weight: 700; font-family: inherit;
cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.cinch-form-btn-back:hover { background: #e2e8f0; }
.cinch-form-btn-next {
flex-grow: 1; padding: 16px 24px; background: var(--red); color: #fff;
border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
font-family: inherit; cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 8px; transition: all 0.3s;
box-shadow: 0 4px 16px rgba(193,39,45,0.3);
}
.cinch-form-btn-next:hover { background: var(--red-dark); transform: translateY(-1px); }
.cinch-form-btn-next:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cinch-form-btn-next svg { width: 16px; height: 16px; fill: #fff; }
.cinch-form-trust {
text-align: center; padding: 14px 24px; border-top: 1px solid #f1f5f9;
font-size: 12px; color: var(--muted); font-weight: 600;
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.cinch-form-trust span { display: flex; align-items: center; gap: 5px; }
.cinch-form-trust svg { width: 14px; height: 14px; fill: var(--muted); }
.cinch-form-success { display: none; text-align: center; padding: 40px 32px; }
.cinch-form-success.active { display: block; animation: cfFadeIn 0.4s ease-out; }
.cinch-form-success-icon { width: 64px; height: 64px; border-radius: 50%; background: #d1fae5; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.cinch-form-success-icon svg { width: 32px; height: 32px; fill: #065f46; }
.cinch-form-success h3 { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.cinch-form-success p { font-size: 15px; color: var(--body); line-height: 1.6; }
/* ─── MODAL OVERLAY ─── */
.cinch-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
z-index: 9999; display: none; align-items: center; justify-content: center;
padding: 24px; opacity: 0; transition: opacity 0.3s;
}
.cinch-modal-overlay.open { display: flex; opacity: 1; }
.cinch-modal-overlay.visible { opacity: 1; }
.cinch-modal-inner { position: relative; max-width: 480px; width: 100%; transform: translateY(20px); transition: transform 0.3s; }
.cinch-modal-overlay.visible .cinch-modal-inner { transform: translateY(0); }
.cinch-modal-close {
position: absolute; top: -48px; right: 0;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,0.15); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 20px; font-family: inherit; transition: all 0.2s;
}
.cinch-modal-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); }
/* ─── PHONE FORMATTING VISUAL ─── */
.cinch-phone-wrap { position: relative; }
.cinch-phone-format { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--muted); pointer-events: none; }
.cinch-phone-format.valid { color: #065f46; }
.cinch-phone-format.invalid { color: #ef4444; }
/* Google Places autocomplete */
.pac-container { border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,0.1); margin-top: 4px; font-family: 'DM Sans', sans-serif; z-index: 10001; }
.pac-item { padding: 10px 16px; font-size: 14px; cursor: pointer; }
.pac-item:hover { background: var(--red-light); }
.pac-icon { display: none; }
/* ─── MOBILE NAV DRAWER ─── */
.cinch-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; transition: opacity 0.3s; }
.cinch-mobile-backdrop.open { display: block; opacity: 1; }
.cinch-mobile-drawer {
position: fixed; top: 0; right: 0; width: 300px; max-width: 85vw;
height: 100%; background: #fff; z-index: 9999;
transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.cinch-mobile-drawer.open { transform: translateX(0); }
.cinch-mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.cinch-mobile-drawer-close { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--body); transition: all 0.2s; }
.cinch-mobile-drawer-close:hover { background: var(--red-light); color: var(--red); }
.cinch-mobile-nav-list { list-style: none; padding: 12px 0; margin: 0; }
.cinch-mobile-nav-item { border-bottom: 1px solid #f1f1f1; }
.cinch-mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: 15px; font-weight: 600; color: var(--body); text-decoration: none; transition: all 0.2s; }
.cinch-mobile-nav-link:hover { background: var(--red-light); color: var(--red); }
.cinch-mobile-sub { display: none; background: #fafafa; padding: 0; margin: 0; list-style: none; }
.cinch-mobile-sub.open { display: block; }
.cinch-mobile-sub a { display: block; padding: 12px 24px 12px 40px; font-size: 14px; color: var(--body); text-decoration: none; font-weight: 500; transition: all 0.2s; }
.cinch-mobile-sub a:hover { color: var(--red); background: var(--red-light); }
.cinch-mobile-cta { display: block; margin: 16px 24px; padding: 14px 24px; background: var(--red); color: #fff; text-align: center; font-size: 15px; font-weight: 700; border-radius: 100px; text-decoration: none; transition: background 0.2s; }
.cinch-mobile-cta:hover { background: var(--red-dark); }
.cinch-mobile-phone { display: block; margin: 0 24px 20px; padding: 12px 24px; border: 2px solid var(--border); text-align: center; font-size: 15px; font-weight: 700; color: var(--dark); border-radius: 100px; text-decoration: none; transition: all 0.2s; }
.cinch-mobile-phone:hover { border-color: var(--red); color: var(--red); }
.cinch-mobile-arrow { width: 16px; height: 16px; fill: var(--muted); transition: transform 0.25s; }
.cinch-mobile-arrow.open { transform: rotate(180deg); }
/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
.cinch-nav { padding: 0 16px; height: 70px; }
.cinch-nav-links { display: none; }
.cinch-hamburger { display: flex; }
.cinch-nav-cta { display: none; }
.cinch-hero-content { grid-template-columns: 1fr; gap: 40px; }
.cinch-hero-wrap .cinch-form-card { justify-self: center; }
.cinch-topbar-phone { display: none; }
}
@media (max-width:600px) {
.cinch-hero-wrap { padding: 48px 16px; min-height: auto; }
.cinch-form-body { padding: 24px 20px 28px; }
.cinch-input-row { grid-template-columns: 1fr; }
.cinch-nav-phone { display: none; }
.cinch-hero-trust { gap: 12px; }
.cinch-nav-logo-img { height: 36px; max-width: 160px; }
.cinch-nav { padding: 0 12px; height: 64px; }
.cinch-topbar { padding: 8px 12px; font-size: 11px; }
}
@keyframes chFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.cinch-hero-text { animation: chFadeUp 0.6s ease-out; }
.cinch-hero-wrap .cinch-form-card { animation: chFadeUp 0.6s ease-out 0.15s backwards; }
/* ============================================================
TRUST SECTION — .cinch-trust
============================================================ */
.cinch-trust {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--dark: #1a1a1a;
--body: #4a4a4a;
--muted: #888;
--border: #e8e8e8;
--bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
padding: 30px 24px;
max-width: 95%;
margin: 0 auto;
}
.cinch-trust .ct-experience { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 80px; }
.cinch-trust .ct-text { display: flex; flex-direction: column; gap: 24px; }
.cinch-trust .ct-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.cinch-trust .ct-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; }
.cinch-trust .ct-title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: var(--dark); line-height: 1.15; }
.cinch-trust .ct-title span { color: var(--red); }
.cinch-trust .ct-desc { font-size: 16px; color: var(--body); line-height: 1.75; }
.cinch-trust .ct-desc strong { color: var(--dark); font-weight: 700; }
.cinch-trust .ct-signature { display: flex; align-items: center; gap: 16px; padding-top: 8px; }
.cinch-trust .ct-sig-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--red-light) 0%, #fde8e8 100%); border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--red); flex-shrink: 0; }
.cinch-trust .ct-sig-info { display: flex; flex-direction: column; gap: 2px; }
.cinch-trust .ct-sig-name { font-size: 16px; font-weight: 700; color: var(--dark); }
.cinch-trust .ct-sig-role { font-size: 13px; color: var(--muted); }
.cinch-trust .ct-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cinch-trust .ct-stat { background: #fafafa; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; }
.cinch-trust .ct-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 0 2px 2px 0; }
.cinch-trust .ct-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); border-color: rgba(193, 39, 45, 0.2); }
.cinch-trust .ct-stat:hover::before { transform: scaleY(1); }
.cinch-trust .ct-stat-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--red-light); display: flex; align-items: center; justify-content: center; }
.cinch-trust .ct-stat-icon svg { width: 20px; height: 20px; fill: var(--red); }
.cinch-trust .ct-stat-value { font-size: 36px; font-weight: 800; color: var(--dark); line-height: 1; }
.cinch-trust .ct-stat-label { font-size: 14px; color: var(--muted); line-height: 1.4; }
.cinch-trust .ct-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--red), var(--border), transparent); margin-bottom: 80px; }
.cinch-trust .ct-partners { text-align: center; }
.cinch-trust .ct-partners-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.cinch-trust .ct-partners-eyebrow::before, .cinch-trust .ct-partners-eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; }
.cinch-trust .ct-partners-title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--dark); margin-bottom: 48px; }
.cinch-trust .ct-logos { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.cinch-trust .ct-logo-card { background: #fafafa; border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-decoration: none; color: inherit; width: 260px; min-height: 180px; }
.cinch-trust .ct-logo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); border-color: rgba(193, 39, 45, 0.2); background: #ffffff; }
.cinch-trust .ct-logo-img { max-width: 160px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: grayscale(0%); opacity: 0.8; transition: all 0.3s; }
.cinch-trust .ct-logo-card:hover .ct-logo-img { filter: grayscale(70%); opacity: 1; }
.cinch-trust .ct-logo-name { font-size: 16px; font-weight: 700; color: var(--dark); }
.cinch-trust .ct-logo-sub { font-size: 13px; color: var(--muted); margin-top: -4px; }
.cinch-trust .ct-quote-bar { margin-top: 56px; background: var(--red-light); border: 1px solid rgba(193, 39, 45, 0.12); border-radius: 16px; padding: 32px 40px; display: flex; align-items: center; gap: 24px; text-align: left; }
.cinch-trust .ct-quote-mark { font-size: 56px; font-weight: 800; color: var(--red); line-height: 1; flex-shrink: 0; opacity: 0.3; }
.cinch-trust .ct-quote-text { font-size: 17px; font-style: italic; color: var(--body); line-height: 1.65; }
.cinch-trust .ct-quote-text strong { color: var(--dark); font-style: normal; }
@media (max-width: 900px) {
.cinch-trust .ct-experience { grid-template-columns: 1fr; gap: 40px; }
.cinch-trust .ct-logos { gap: 16px; }
.cinch-trust .ct-logo-card { min-width: 200px; padding: 24px 32px; }
}
@media (max-width: 600px) {
.cinch-trust { padding: 56px 16px; }
.cinch-trust .ct-stats { grid-template-columns: 1fr; }
.cinch-trust .ct-logos { flex-direction: column; align-items: stretch; }
.cinch-trust .ct-logo-card { min-width: unset; }
.cinch-trust .ct-quote-bar { flex-direction: column; text-align: center; padding: 28px 24px; gap: 12px; }
}
@keyframes ctFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.cinch-trust .ct-stat { animation: ctFadeUp 0.5s ease-out backwards; }
.cinch-trust .ct-stat:nth-child(1) { animation-delay: 0.1s; }
.cinch-trust .ct-stat:nth-child(2) { animation-delay: 0.18s; }
.cinch-trust .ct-stat:nth-child(3) { animation-delay: 0.26s; }
.cinch-trust .ct-stat:nth-child(4) { animation-delay: 0.34s; }
.cinch-trust .ct-logo-card { animation: ctFadeUp 0.5s ease-out backwards; }
.cinch-trust .ct-logo-card:nth-child(1) { animation-delay: 0.1s; }
.cinch-trust .ct-logo-card:nth-child(2) { animation-delay: 0.2s; }
.cinch-trust .ct-logo-card:nth-child(3) { animation-delay: 0.3s; }
/* ============================================================
CITY INTRO SECTION — .cinch-city-intro
============================================================ */
.cinch-city-intro {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--dark: #1a1a1a;
--body: #4a4a4a;
--muted: #888;
--border: #e8e8e8;
--bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
padding: 72px 24px;
}
.ci-wrap { max-width: 1200px; margin: 0 auto; }
.ci-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--red); background: var(--red-light); border: 1px solid rgba(193,39,45,0.2); border-radius: 100px; padding: 7px 18px; margin-bottom: 20px; }
.ci-intro { max-width: 860px; margin-bottom: 56px; }
.ci-h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--dark); line-height: 1.18; margin-bottom: 24px; letter-spacing: -1px; }
.ci-h1 em { font-style: normal; color: var(--red); }
.ci-lead { font-size: 17px; color: var(--body); line-height: 1.75; margin-bottom: 20px; max-width: 760px; }
.ci-body { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; margin-bottom: 64px; }
.ci-body-copy h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--dark); line-height: 1.25; margin-bottom: 18px; letter-spacing: -0.5px; }
.ci-body-copy h2 em { font-style: normal; color: var(--red); }
.ci-body-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: 18px; }
.ci-body-copy p:last-of-type { margin-bottom: 24px; }
.ci-body-copy strong { color: var(--dark); font-weight: 600; }
.ci-checklist { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.ci-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--body); line-height: 1.6; }
.ci-checklist svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; margin-top: 2px; }
.ci-body-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--red); color: #fff; border: none; border-radius: 100px; font-size: 15px; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.25s; box-shadow: 0 4px 16px rgba(193,39,45,0.25); }
.ci-body-cta:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(193,39,45,0.32); }
.ci-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 16px 48px rgba(0,0,0,0.18); }
.ci-video-wrap iframe, .ci-video-wrap .video-facade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.ci-how-it-works { margin-top: 64px; border-top: 1px solid var(--border); padding-top: 56px; }
.ci-how-it-works h2 { font-size: 28px; font-weight: 800; color: var(--dark); margin-bottom: 32px; }
.ci-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ci-step { padding: 28px; background: #f7f8fa; border-radius: 16px; position: relative; }
.ci-step-num { font-size: 48px; font-weight: 800; color: rgba(193,39,45,0.08); line-height: 1; margin-bottom: 8px; }
.ci-step h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; }
.ci-step p { font-size: 14px; color: var(--body); line-height: 1.65; margin: 0; }
.ci-market { background: #f7f7f8; border-radius: 20px; padding: 48px 48px; margin-top: 56px; margin-bottom: 56px; border: 1px solid var(--border); }
.ci-market h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--dark); margin-bottom: 20px; letter-spacing: -0.5px; }
.ci-market p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: 18px; max-width: 860px; }
.ci-market strong { color: var(--dark); font-weight: 600; }
.ci-neighborhoods { margin-bottom: 0; }
.ci-neighborhoods h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--dark); margin-bottom: 8px; letter-spacing: -0.5px; }
.ci-neighborhoods-sub { font-size: 16px; color: var(--muted); margin-bottom: 28px; }
.ci-hood-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ci-hood-list li { font-size: 15px; color: var(--body); line-height: 1.65; padding: 20px; background: #f7f8fa; border-radius: 12px; border-left: 4px solid var(--red); }
.ci-hood-list li strong { display: block; font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
@media (max-width: 1024px) {
.ci-body { grid-template-columns: 1fr; gap: 36px; }
.ci-video-wrap { max-width: 560px; }
}
@media (max-width: 768px) {
.cinch-city-intro { padding: 48px 16px; }
.ci-market { padding: 32px 24px; }
.ci-hood-list { grid-template-columns: 1fr; }
.ci-steps { grid-template-columns: 1fr; }
}
/* ============================================================
SOLUTIONS SECTION 1 — .cinch-solutions (solutions-section)
============================================================ */
.cinch-solutions {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--red-glow: rgba(193, 39, 45, 0.08);
--dark: #1a1a1a;
--body: #4a5a4a;
--muted: #888;
--border: #e8e8e8;
--bg: #ffffff;
--card-bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
padding: 10px 24px;
max-width: 1240px;
margin: 0 auto;
}
.cinch-solutions .cs-header { text-align: center; margin-bottom: 56px; }
.cinch-solutions .cs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.cinch-solutions .cs-eyebrow::before, .cinch-solutions .cs-eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; }
.cinch-solutions .cs-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--dark); line-height: 1.15; margin-bottom: 14px; }
.cinch-solutions .cs-subtitle { font-size: 17px; color: var(--body); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.cinch-solutions .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.cinch-solutions .cs-grid-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 820px; margin: 0 auto; }
.cinch-solutions .cs-card { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px 28px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 16px; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; }
.cinch-solutions .cs-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: center; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cinch-solutions .cs-card:hover { border-color: rgba(193, 39, 45, 0.25); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(193, 39, 45, 0.08); }
.cinch-solutions .cs-card:hover::after { transform: scaleX(1); }
.cinch-solutions .cs-card:hover .cs-card-icon { background: var(--red); }
.cinch-solutions .cs-card:hover .cs-card-icon svg { fill: #fff; }
.cinch-solutions .cs-card:hover .cs-card-arrow { transform: translateX(6px); color: var(--red); }
.cinch-solutions .cs-card-num { position: absolute; top: 20px; right: 24px; font-size: 64px; font-weight: 800; color: rgba(193, 39, 45, 0.05); line-height: 1; pointer-events: none; user-select: none; }
.cinch-solutions .cs-card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--red-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.35s; }
.cinch-solutions .cs-card-icon svg { width: 24px; height: 24px; fill: var(--red); transition: fill 0.35s; }
.cinch-solutions .cs-card-title { font-size: 19px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.cinch-solutions .cs-card-desc { font-size: 15px; color: var(--body); line-height: 1.65; flex-grow: 1; }
.cinch-solutions .cs-card-cta { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; }
.cinch-solutions .cs-card-link { font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: 0.2px; }
.cinch-solutions .cs-card-arrow { font-size: 20px; color: var(--muted); transition: all 0.3s; line-height: 1; }
@media (max-width: 900px) { .cinch-solutions .cs-grid { grid-template-columns: repeat(2, 1fr); } .cinch-solutions .cs-grid-bottom { grid-template-columns: 1fr; max-width: 100%; } }
@media (max-width: 600px) { .cinch-solutions { padding: 56px 16px; } .cinch-solutions .cs-grid { grid-template-columns: 1fr; } .cinch-solutions .cs-grid-bottom { grid-template-columns: 1fr; } }
@keyframes csSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.cinch-solutions .cs-card { animation: csSlideUp 0.5s ease-out backwards; }
.cinch-solutions .cs-card:nth-child(1) { animation-delay: 0.05s; }
.cinch-solutions .cs-card:nth-child(2) { animation-delay: 0.12s; }
.cinch-solutions .cs-card:nth-child(3) { animation-delay: 0.19s; }
.cinch-solutions .cs-card:nth-child(4) { animation-delay: 0.26s; }
.cinch-solutions .cs-card:nth-child(5) { animation-delay: 0.33s; }
/* ============================================================
SOLUTIONS SECTION 2 — .cinch-solutions (solutions2-section)
NOTE: Both solutions sections share .cinch-solutions root
but solutions2 uses different child class names (cs-wrap,
cs-tag, cs-header-body, etc.) so there is no conflict.
============================================================ */
/* solutions2 adds its own CSS vars via a second .cinch-solutions block */
/* The child-class overrides below are scoped sufficiently */
.cs-wrap { max-width: 95%; margin: 0 auto; }
.cs-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-red, #C1272D); background: var(--cs-red-soft, rgba(193,39,45,0.06)); padding: 6px 16px; border-radius: 100px; margin-bottom: 16px; }
.cs-header { text-align: center; margin-bottom: 28px; }
.cs-header h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; line-height: 1.2; color: #1a1a2e; margin: 0 0 16px 0; }
.cs-header h2 em { font-style: normal; color: #C1272D; }
.cs-header-body { font-size: 1.02rem; line-height: 1.7; color: #444; max-width: 740px; margin: 0 auto 28px; }
.cs-header-body strong { color: #1a1a2e; font-weight: 600; }
.cs-header-cta { display: inline-flex; align-items: center; gap: 8px; background: #C1272D; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; padding: 14px 36px; border: none; border-radius: 100px; cursor: pointer; transition: background 0.25s, transform 0.15s ease; box-shadow: 0 4px 16px rgba(193,39,45,0.2); margin-bottom: 12px; }
@media (hover: hover) and (pointer: fine) { .cs-header-cta:hover { background: #a82025; transform: translateY(-1px); } }
.cs-header-cta:active { transform: translateY(0); }
.cs-header-cta svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-header-phone { display: block; font-size: 0.88rem; color: #666; margin-top: 4px; }
.cs-header-phone a { color: #C1272D; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cs-header-phone a:hover { text-decoration: underline; } }
.cs-divider { width: 60px; height: 3px; background: #C1272D; opacity: 0.2; border-radius: 3px; margin: 48px auto; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.cs-card { background: #f7f7f8; border: 1px solid #e8e8e8; border-radius: 14px; padding: 32px 28px; text-align: center; position: relative; transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; }
@media (hover: hover) and (pointer: fine) {
.cs-card:hover { border-color: rgba(193,39,45,0.25); box-shadow: 0 8px 32px rgba(193,39,45,0.06); transform: translateY(-2px); }
.cs-card:hover .cs-card-icon { background: rgba(193,39,45,0.12); }
.cs-card:hover .cs-card-icon svg { stroke: #a82025; }
}
.cs-card-icon { width: 56px; height: 56px; margin: 0 auto 18px; background: rgba(193,39,45,0.06); border-radius: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.cs-card-icon svg { width: 26px; height: 26px; fill: none; stroke: #C1272D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.cs-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.08rem; font-weight: 700; color: #1a1a2e; margin: 0 0 10px 0; line-height: 1.3; }
.cs-card p { font-size: 0.9rem; line-height: 1.65; color: #666; margin: 0; }
.cs-card p strong { color: #1a1a2e; font-weight: 600; }
.cs-bottom { text-align: center; }
.cs-bottom-cta { display: inline-flex; align-items: center; gap: 10px; background: #C1272D; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; padding: 16px 40px; border: none; border-radius: 100px; cursor: pointer; transition: background 0.25s, transform 0.15s ease, box-shadow 0.25s ease; box-shadow: 0 4px 16px rgba(193,39,45,0.2); }
@media (hover: hover) and (pointer: fine) { .cs-bottom-cta:hover { background: #a82025; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(193,39,45,0.3); } }
.cs-bottom-cta:active { transform: translateY(0); }
.cs-bottom-cta svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-bottom-sub { margin-top: 14px; font-size: 0.88rem; color: #666; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) {
.cs-grid { grid-template-columns: 1fr; gap: 12px; }
.cs-card { text-align: left; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; }
.cs-card-icon { margin: 0; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; }
.cs-card-icon svg { width: 22px; height: 22px; }
.cs-card-body { flex: 1; }
.cs-header-cta, .cs-bottom-cta { width: 100%; justify-content: center; }
.cs-divider { margin: 36px auto; }
}
/* ============================================================
VIDEO / SOCIAL PROOF SECTION — .cinch-proof
============================================================ */
.cinch-proof {
--cp-red: #C1272D;
--cp-red-dark: #a82025;
--cp-red-soft: rgba(193,39,45,0.06);
--cp-text: #1a1a2e;
--cp-text-mid: #444;
--cp-text-muted: #666;
--cp-bg: #f9f9fa;
--cp-white: #ffffff;
--cp-border: #e8e8e8;
--cp-radius: 14px;
--cp-ease: cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--cp-bg);
color: var(--cp-text);
padding: 20px 20px;
-webkit-font-smoothing: antialiased;
}
.cp-wrap { max-width: 95%; margin: 0 auto; }
.cp-header { text-align: center; margin-bottom: 56px; }
.cp-tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-red); background: var(--cp-red-soft); padding: 6px 16px; border-radius: 100px; margin-bottom: 16px; }
.cp-tag svg { width: 14px; height: 14px; fill: var(--cp-red); }
.cp-heading { font-family: 'DM Sans', sans-serif; font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; line-height: 1.2; color: var(--cp-text); margin: 0 0 12px 0; }
.cp-heading em { font-style: normal; color: var(--cp-red); }
.cp-subhead { font-size: 1.05rem; line-height: 1.6; color: var(--cp-text-muted); max-width: 600px; margin: 0 auto; }
.cp-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 48px; }
.cp-video-card { background: var(--cp-white); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.04); transition: box-shadow 0.3s var(--cp-ease); }
@media (hover: hover) and (pointer: fine) { .cp-video-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.08); } }
.cp-video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cp-video-embed iframe, .cp-video-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: cover; border-radius: 0; }
.cp-vid-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.cp-vid-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.cp-vid-badge.testimonial svg { fill: #22c55e; }
.cp-vid-badge.commercial svg { fill: #fff; }
.cp-video-body { padding: 20px 24px 24px; }
.cp-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.cp-stars svg { width: 16px; height: 16px; fill: #F59E0B; }
.cp-quote { font-size: 0.95rem; line-height: 1.7; color: var(--cp-text-mid); font-style: italic; margin: 0 0 16px 0; position: relative; padding-left: 20px; }
.cp-quote::before { content: '\201C'; position: absolute; left: 0; top: -4px; font-size: 2rem; font-weight: 800; color: var(--cp-red); opacity: 0.25; font-family: Georgia, serif; font-style: normal; line-height: 1; }
.cp-author { display: flex; align-items: center; gap: 10px; }
.cp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cp-red); color: #fff; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-avatar.commercial-avatar { background: var(--cp-text); }
.cp-author-name { font-size: 0.88rem; font-weight: 700; color: var(--cp-text); }
.cp-author-detail { font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 1px; }
.cp-vid-desc { font-size: 0.92rem; line-height: 1.7; color: var(--cp-text-mid); margin: 0 0 16px 0; }
.cp-vid-desc strong { color: var(--cp-text); font-weight: 600; }
.cp-cta-row { text-align: center; margin-bottom: 72px; }
.cp-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--cp-red); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; padding: 14px 36px; border: none; border-radius: 100px; cursor: pointer; transition: background 0.25s var(--cp-ease), transform 0.15s ease; box-shadow: 0 4px 16px rgba(193,39,45,0.2); }
@media (hover: hover) and (pointer: fine) { .cp-cta-btn:hover { background: var(--cp-red-dark); transform: translateY(-1px); } }
.cp-cta-btn:active { transform: translateY(0); }
.cp-cta-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-divider { width: 60px; height: 3px; background: var(--cp-red); opacity: 0.2; border-radius: 3px; margin: 0 auto 72px; }
.cp-local { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cp-local-copy h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; color: var(--cp-text); line-height: 1.25; margin: 0 0 20px 0; }
.cp-local-copy h2 em { font-style: normal; color: var(--cp-red); }
.cp-local-copy p { font-size: 0.95rem; line-height: 1.75; color: var(--cp-text-mid); margin: 0 0 16px 0; }
.cp-local-copy p strong { color: var(--cp-text); font-weight: 600; }
.cp-landmarks { list-style: none; padding: 0; margin: 20px 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-landmarks li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--cp-text-mid); padding: 8px 12px; background: var(--cp-white); border: 1px solid var(--cp-border); border-radius: 8px; }
.cp-landmarks li svg { width: 14px; height: 14px; fill: none; stroke: var(--cp-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cp-coverage { background: var(--cp-white); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 32px; }
.cp-coverage h3 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--cp-text); margin: 0 0 8px 0; display: flex; align-items: center; gap: 8px; }
.cp-coverage h3 svg { width: 18px; height: 18px; fill: none; stroke: var(--cp-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cp-coverage > p { font-size: 0.88rem; line-height: 1.6; color: var(--cp-text-muted); margin: 0 0 20px 0; }
.cp-city-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--cp-text-muted); padding: 6px 14px; background: var(--cp-bg); border: 1px solid var(--cp-border); border-radius: 100px; white-space: nowrap; }
.cp-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-red); flex-shrink: 0; }
.cp-pill.primary { background: var(--cp-red-soft); border-color: rgba(193,39,45,0.2); color: var(--cp-red); font-weight: 700; }
.cp-pill.primary .cp-pill-dot { box-shadow: 0 0 0 2px rgba(193,39,45,0.2); }
.cp-cov-divider { height: 1px; background: var(--cp-border); margin: 20px 0; }
.cp-cov-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cp-text-muted); margin-bottom: 12px; }
@media (max-width: 900px) { .cp-videos { grid-template-columns: 1fr; gap: 20px; } .cp-local { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) {
.cinch-proof { padding: 56px 16px; }
.cp-videos { gap: 16px; margin-bottom: 36px; }
.cp-video-body { padding: 16px 18px 20px; }
.cp-cta-btn { width: 100%; justify-content: center; }
.cp-cta-row { margin-bottom: 48px; }
.cp-divider { margin-bottom: 48px; }
.cp-landmarks { grid-template-columns: 1fr; }
.cp-coverage { padding: 24px 20px; }
}
/* ============================================================
COMPARISON SECTION — .cinch-comparison
============================================================ */
.cinch-comparison {
--red: #C1272D;
--red-dark: #8E1B22;
--red-light: #FEF2F2;
--red-glow: rgba(193, 39, 45, 0.08);
--green: #10B981;
--green-light: #D1FAE5;
--dark: #1a1a1a;
--body: #4a5a4a;
--muted: #888;
--border: #e5e7eb;
--bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: transparent;
padding: 20px 24px;
max-width: 85%;
margin: 0 auto;
perspective: 1000px;
}
.cinch-comparison .ct-header { text-align: center; margin-bottom: 64px; }
.cinch-comparison .ct-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.cinch-comparison .ct-eyebrow::before, .cinch-comparison .ct-eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; }
.cinch-comparison .ct-title { font-size: clamp(32px, 5vw, 48px); font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 16px; }
.cinch-comparison .ct-subtitle { font-size: 18px; color: var(--body); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.cinch-comparison .ct-container { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.cinch-comparison .ct-column { background: var(--bg); border-radius: 24px; padding: 40px 32px; border: 2px solid var(--border); position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-style: preserve-3d; }
.cinch-comparison .ct-column.traditional { background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
.cinch-comparison .ct-column.traditional:hover { transform: translateY(-4px) rotateY(-2deg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }
.cinch-comparison .ct-column.cinch { background: linear-gradient(135deg, #ffffff 0%, var(--red-light) 100%); border: 2px solid rgba(193, 39, 45, 0.3); box-shadow: 0 8px 24px rgba(193, 39, 45, 0.15), 0 0 0 1px rgba(193, 39, 45, 0.1); }
.cinch-comparison .ct-column.cinch::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); border-radius: 24px; z-index: -1; opacity: 0; transition: opacity 0.4s; }
.cinch-comparison .ct-column.cinch:hover { transform: translateY(-8px) rotateY(2deg) scale(1.02); box-shadow: 0 20px 48px rgba(193, 39, 45, 0.25), 0 0 0 2px var(--red); }
.cinch-comparison .ct-column.cinch:hover::before { opacity: 0.05; }
.cinch-comparison .ct-col-header { text-align: center; margin-bottom: 32px; position: relative; }
.cinch-comparison .ct-col-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.cinch-comparison .traditional .ct-col-badge { background: #f3f4f6; color: #6b7280; }
.cinch-comparison .cinch .ct-col-badge { background: var(--red); color: white; box-shadow: 0 4px 12px rgba(193, 39, 45, 0.3); position: relative; }
.cinch-comparison .cinch .ct-col-badge::before { content: ''; margin-right: 6px; }
.cinch-comparison .ct-col-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.cinch-comparison .traditional .ct-col-title { color: #374151; }
.cinch-comparison .cinch .ct-col-title { color: var(--red); }
.cinch-comparison .ct-col-subtitle { font-size: 14px; color: var(--body); line-height: 1.5; }
.cinch-comparison .ct-features { display: flex; flex-direction: column; gap: 24px; }
.cinch-comparison .ct-feature { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: rgba(255, 255, 255, 0.6); border-radius: 12px; border: 1px solid var(--border); transition: all 0.3s; }
.cinch-comparison .cinch .ct-feature { background: rgba(255, 255, 255, 0.8); border-color: rgba(193, 39, 45, 0.15); }
.cinch-comparison .ct-feature:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.cinch-comparison .ct-feature-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.cinch-comparison .ct-feature-label::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.cinch-comparison .ct-feature-value { font-size: 18px; font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 8px; }
.cinch-comparison .traditional .ct-feature-value { color: #6b7280; }
.cinch-comparison .cinch .ct-feature-value { color: var(--red); }
.cinch-comparison .ct-feature-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 16px; }
.cinch-comparison .traditional .ct-feature-icon { background: #f3f4f6; }
.cinch-comparison .cinch .ct-feature-icon { background: var(--green-light); color: var(--green); }
.cinch-comparison .ct-feature-desc { font-size: 13px; color: var(--body); line-height: 1.5; }
.cinch-comparison .ct-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; margin-left: 8px; }
.cinch-comparison .traditional .ct-badge { background: #fee2e2; color: #991b1b; }
.cinch-comparison .cinch .ct-badge { background: var(--green-light); color: var(--green); }
.cinch-comparison .ct-cta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.cinch-comparison .ct-button { display: block; width: 100%; padding: 16px 24px; text-align: center; text-decoration: none; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.3px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; -webkit-tap-highlight-color: rgba(193, 39, 45, 0.2); }
.cinch-comparison .traditional .ct-button { background: #f3f4f6; color: #374151; border: 2px solid #e5e7eb; }
.cinch-comparison .traditional .ct-button:hover { background: #e5e7eb; transform: translateY(-2px); }
.cinch-comparison .cinch .ct-button { background: var(--red); color: white; box-shadow: 0 4px 16px rgba(193, 39, 45, 0.3); border: 2px solid var(--red); }
.cinch-comparison .cinch .ct-button:hover { background: var(--red-dark); transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px rgba(193, 39, 45, 0.4); }
.cinch-comparison .cinch .ct-button:active { transform: translateY(-2px) scale(1); }
@media (max-width: 768px) {
.cinch-comparison { padding: 56px 16px; }
.cinch-comparison .ct-container { grid-template-columns: 1fr; gap: 24px; }
.cinch-comparison .ct-column { padding: 32px 24px; }
.cinch-comparison .ct-column.traditional:hover, .cinch-comparison .ct-column.cinch:hover { transform: none; }
.cinch-comparison .ct-col-title { font-size: 20px; }
.cinch-comparison .ct-features { gap: 16px; }
.cinch-comparison .ct-feature { padding: 16px; }
}
/* ============================================================
SERVICE AREA MAP — .cinch-map
============================================================ */
.cinch-map {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--gray: #666666;
--gray-light: #999;
--gray-bg: #f5f5f5;
--gray-border: #e5e5e5;
--dark: #333333;
--white: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--white);
padding: 20px 24px;
}
.cinch-map a { text-decoration: none; color: inherit; touch-action: manipulation; }
.cm-container { max-width: 95%; margin: 0 auto; }
.cm-header { text-align: center; margin-bottom: 40px; }
.cm-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.cm-eyebrow::before, .cm-eyebrow::after { content: ''; width: 20px; height: 2px; background: var(--red); border-radius: 2px; }
.cm-title { font-size: clamp(26px, 3.5vw, 40px); font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 12px; }
.cm-title span { color: var(--red); }
.cm-subtitle { font-size: 16px; color: var(--gray); line-height: 1.7; max-width: 560px; margin: 0 auto 24px; }
.cm-season { display: inline-flex; align-items: center; gap: 10px; background: var(--gray-bg); border: 1px solid var(--gray-border); border-radius: 50px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--gray); }
.cm-season-icon { font-size: 18px; }
.cm-season-name { color: var(--dark); font-weight: 700; }
.cm-map-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-border); box-shadow: 0 4px 24px rgba(0,0,0,0.06); height: 480px; margin-top: 32px; margin-bottom: 32px; background: var(--gray-bg); }
#cinchMap { width: 100%; height: 100%; }
#cm-weather-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.cm-live-badge { position: absolute; top: 14px; left: 14px; z-index: 11; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border: 1px solid var(--gray-border); border-radius: 50px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); animation: cmPulse 2s infinite; }
@keyframes cmPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.cm-live-badge span { font-size: 12px; font-weight: 700; color: var(--gray); letter-spacing: 0.3px; }
.cm-legend { position: absolute; bottom: 14px; left: 14px; z-index: 11; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border: 1px solid var(--gray-border); border-radius: 10px; padding: 10px 14px; display: flex; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--gray); }
.cm-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cm-legend-dot.hq { background: var(--red); box-shadow: 0 0 0 3px rgba(193,39,45,0.2); }
.cm-legend-dot.city { background: var(--red); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--red); }
.cm-legend-dot.area { background: rgba(193,39,45,0.15); border: 1px solid rgba(193,39,45,0.4); }
.cm-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 36px; }
.cm-city { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border: 1px solid var(--gray-border); border-radius: 12px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .cm-city { transition: background 0.2s, border-color 0.2s; } .cm-city:hover { background: var(--gray-bg); border-color: #ccc; } }
@media (hover: none) { .cm-city:active { background: var(--gray-bg); } }
.cm-city-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.cm-city-name { font-size: 14px; font-weight: 600; color: var(--dark); flex-grow: 1; }
.cm-city-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 5px; }
.cm-city-tag.hq { background: var(--red-light); color: var(--red); }
.cm-city-tag.active { background: var(--gray-bg); color: var(--gray-light); }
.cm-cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cm-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; padding: 14px 28px; border-radius: 12px; border: none; cursor: pointer; font-family: inherit; touch-action: manipulation; }
.cm-cta-btn svg { width: 18px; height: 18px; fill: #fff; }
@media (hover: hover) and (pointer: fine) { .cm-cta-btn { transition: background 0.2s; } .cm-cta-btn:hover { background: var(--red-dark); } }
.cm-cta-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--gray); font-size: 15px; font-weight: 700; padding: 14px 24px; border-radius: 12px; border: 1px solid var(--gray-border); background: var(--white); font-family: inherit; touch-action: manipulation; }
.cm-cta-phone svg { width: 16px; height: 16px; fill: var(--red); }
@media (hover: hover) and (pointer: fine) { .cm-cta-phone { transition: background 0.2s, border-color 0.2s; } .cm-cta-phone:hover { background: var(--gray-bg); border-color: #ccc; } }
.cm-marker { width: 22px; height: 22px; background: var(--red); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; }
.cm-marker-hq { width: 32px; height: 32px; background: var(--red); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(193,39,45,0.15), 0 3px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; animation: cmRing 3s infinite; }
.cm-marker-hq svg { width: 14px; height: 14px; fill: #fff; }
@keyframes cmRing { 0% { box-shadow: 0 0 0 0 rgba(193,39,45,0.3), 0 3px 12px rgba(0,0,0,0.15); } 70% { box-shadow: 0 0 0 12px rgba(193,39,45,0), 0 3px 12px rgba(0,0,0,0.15); } 100% { box-shadow: 0 0 0 0 rgba(193,39,45,0), 0 3px 12px rgba(0,0,0,0.15); } }
.mapboxgl-popup-content { background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 10px !important; padding: 10px 14px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; font-family: 'DM Sans', sans-serif !important; color: #333 !important; }
.mapboxgl-popup-tip { border-top-color: #fff !important; }
.mapboxgl-popup-close-button { color: #999 !important; font-size: 18px !important; }
.cm-popup-name { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 2px; }
.cm-popup-tag { font-size: 11px; color: #C1272D; font-weight: 600; }
@media (max-width: 900px) { .cm-cities { grid-template-columns: repeat(3, 1fr); } .cm-map-wrap { height: 400px; } }
@media (max-width: 600px) {
.cinch-map { padding: 48px 16px; }
.cm-cities { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cm-city { padding: 10px 12px; }
.cm-map-wrap { height: 320px; border-radius: 12px; margin-top: 24px; margin-bottom: 24px; }
.cm-cta-row { flex-direction: column; }
.cm-cta-btn, .cm-cta-phone { width: 100%; justify-content: center; }
.cm-legend { gap: 10px; padding: 8px 10px; }
.cm-legend-item { font-size: 10px; }
}
/* ============================================================
BUY HOUSES SECTION — .areas-section
============================================================ */
/* NOTE: :root vars from this section are covered by buildShell() globally */
.areas-section {
font-family: 'DM Sans', sans-serif;
background: #111111;
color: #2a2a2a;
-webkit-font-smoothing: antialiased;
max-width: 1600px;
margin: 0 auto;
padding: 20px 24px;
}
.areas-header { text-align: center; margin-bottom: 56px; }
.areas-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(193, 39, 45, 0.1); border: 1px solid rgba(193, 39, 45, 0.3); border-radius: 100px; padding: 8px 20px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #C1272D; margin-bottom: 24px; }
.areas-badge svg { width: 16px; height: 16px; fill: #C1272D; flex-shrink: 0; }
.areas-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; color: #111111; }
.areas-title span { color: #C1272D; }
.areas-subtitle { font-size: 18px; color: #a0a0a0; max-width: 620px; margin: 0 auto; line-height: 1.6; }
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 48px; }
.area-card { position: relative; background: #ffffff; border: 1px solid #1a2a2a; border-radius: 14px; padding: 28px 24px; text-decoration: none; color: #2a2a2a; display: flex; flex-direction: column; gap: 14px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; cursor: pointer; }
.area-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #C1272D; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.area-card:hover { border-color: rgba(193, 39, 45, 0.5); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(193, 39, 45, 0.15); }
.area-card:hover::before { transform: scaleX(1); }
.area-card:hover .area-arrow { transform: translateX(4px); color: #C1272D; }
.area-card:hover .area-name { color: #C1272D; }
.area-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(193, 39, 45, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.area-icon svg { width: 20px; height: 20px; fill: #C1272D; }
.area-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; transition: color 0.3s; line-height: 1.2; }
.area-tagline { font-size: 14px; color: #a0a0a0; line-height: 1.5; }
.area-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid #1a2a2a; }
.area-cta { font-size: 13px; font-weight: 700; color: #C1272D; letter-spacing: 0.3px; }
.area-arrow { font-size: 18px; color: #6b6b6b; transition: all 0.3s; line-height: 1; }
.area-card.featured { grid-column: span 2; background: linear-gradient(135deg, #ffffff 40%, #1f1214 350%); border-color: rgba(193, 39, 45, 0.3); padding: 36px 32px; }
.area-card.featured .area-name { font-size: 26px; }
.area-card.featured .area-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.area-card.featured .stat { display: flex; flex-direction: column; gap: 2px; }
.area-card.featured .stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: #C1272D; }
.area-card.featured .stat-label { font-size: 12px; color: #6b6b6b; text-transform: uppercase; letter-spacing: 1px; }
.area-card.cta-card { background: #C1272D; border-color: #C1272D; text-align: center; align-items: center; justify-content: center; min-height: 200px; }
.area-card.cta-card:hover { background: #8E1B22; border-color: #8E1B22; box-shadow: 0 12px 40px rgba(193, 39, 45, 0.3); }
.area-card.cta-card .area-name { font-size: 24px; color: #fff; }
.area-card.cta-card:hover .area-name { color: #fff; }
.area-card.cta-card .area-tagline { color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.area-card.cta-card .area-bottom { border-top-color: rgba(255, 255, 255, 0.2); justify-content: center; }
.area-card.cta-card .area-cta { color: #fff; font-size: 15px; }
.area-card.cta-card .area-arrow { color: #fff; }
.area-card.cta-card .cta-icon svg { width: 36px; height: 36px; fill: #fff; }
.areas-trust { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 32px 0; border-top: 1px solid #1a2a2a; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #a0a0a0; }
.trust-item svg { width: 20px; height: 20px; fill: #C1272D; flex-shrink: 0; }
.trust-item strong { color: #111111; font-weight: 700; }
@media (max-width: 768px) { .areas-section { padding: 56px 16px; } .areas-grid { grid-template-columns: 1fr; gap: 12px; } .area-card.featured { grid-column: span 1; padding: 28px 24px; } .area-card.featured .area-name { font-size: 22px; } .areas-trust { gap: 20px; } }
@media (min-width: 769px) and (max-width: 1024px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.area-card { animation: fadeUp 0.5s ease-out backwards; }
.area-card:nth-child(1) { animation-delay: 0.05s; }
.area-card:nth-child(2) { animation-delay: 0.1s; }
.area-card:nth-child(3) { animation-delay: 0.15s; }
.area-card:nth-child(4) { animation-delay: 0.2s; }
.area-card:nth-child(5) { animation-delay: 0.25s; }
.area-card:nth-child(6) { animation-delay: 0.3s; }
.area-card:nth-child(7) { animation-delay: 0.35s; }
.area-card:nth-child(8) { animation-delay: 0.4s; }
.area-card:nth-child(9) { animation-delay: 0.45s; }
.area-card:nth-child(10) { animation-delay: 0.5s; }
.area-card:nth-child(11) { animation-delay: 0.55s; }
.area-card:nth-child(12) { animation-delay: 0.6s; }
.area-card:nth-child(13) { animation-delay: 0.65s; }
.area-card:nth-child(14) { animation-delay: 0.7s; }
/* ============================================================
FOUNDER SECTION — .cinch-founder
============================================================ */
.cinch-founder {
--red: #C1272D;
--red-dark: #9E1F24;
--red-light: #FEF2F2;
--dark: #1a1a1a;
--body: #4a4a4a;
--muted: #888;
--border: #e8e8e8;
--bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
padding: 10px 24px;
max-width: 95%;
margin: 0 auto;
}
.cf-founder { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 96px; }
.cf-images { position: relative; display: flex; flex-direction: column; gap: 0; }
.cf-img-primary { position: relative; z-index: 2; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1); border: 4px solid #fff; aspect-ratio: 4 / 3.5; background: #f0f0f0; }
.cf-img-primary img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-img-primary::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); border-radius: 24px; z-index: -1; opacity: 0.12; }
.cf-img-secondary { position: relative; z-index: 3; width: 65%; align-self: flex-end; margin-top: -60px; margin-right: -24px; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); border: 4px solid #fff; aspect-ratio: 16 / 10; background: #f0f0f0; }
.cf-img-secondary img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-img-badge { position: absolute; top: 20px; left: 20px; z-index: 5; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; box-shadow: 0 4px 12px rgba(193, 39, 45, 0.4); }
.cf-text { display: flex; flex-direction: column; gap: 24px; }
.cf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.cf-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; }
.cf-title { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: var(--dark); line-height: 1.15; }
.cf-title span { color: var(--red); }
.cf-desc { font-size: 16px; color: var(--body); line-height: 1.75; }
.cf-desc strong { color: var(--dark); font-weight: 700; }
.cf-values { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.cf-value { display: inline-flex; align-items: center; gap: 8px; background: var(--red-light); border: 1px solid rgba(193, 39, 45, 0.12); border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--dark); transition: all 0.3s; }
.cf-value:hover { border-color: var(--red); background: #fde8e8; transform: translateY(-2px); }
.cf-value svg { width: 16px; height: 16px; fill: var(--red); flex-shrink: 0; }
.cf-accountability { background: #fafafa; border: 1px solid var(--border); border-radius: 24px; padding: 64px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; overflow: hidden; }
.cf-accountability::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(193, 39, 45, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.cf-acc-left { display: flex; flex-direction: column; gap: 24px; }
.cf-acc-title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--dark); line-height: 1.2; }
.cf-acc-title span { color: var(--red); }
.cf-acc-desc { font-size: 16px; color: var(--body); line-height: 1.75; }
.cf-acc-img { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #e8e8e8; margin-top: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.cf-acc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-acc-right { display: flex; flex-direction: column; gap: 32px; }
.cf-progress { display: flex; flex-direction: column; gap: 16px; }
.cf-progress-header { display: flex; justify-content: space-between; align-items: baseline; }
.cf-progress-donated { font-size: 42px; font-weight: 800; color: var(--red); line-height: 1; }
.cf-progress-goal { font-size: 16px; color: var(--muted); font-weight: 600; }
.cf-progress-goal strong { color: var(--dark); }
.cf-progress-bar-wrap { width: 100%; height: 16px; background: #e4e4e4; border-radius: 100px; overflow: hidden; position: relative; }
.cf-progress-bar { height: 100%; background: linear-gradient(90deg, var(--red), #e84348); border-radius: 100px; position: relative; transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: cfBarGrow 1.5s ease-out 0.3s backwards; }
@keyframes cfBarGrow { from { width: 0; } }
.cf-progress-bar::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 100px; }
.cf-progress-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.cf-milestones { display: flex; flex-direction: column; gap: 12px; }
.cf-milestone { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 14px; transition: all 0.3s; }
.cf-milestone:hover { border-color: rgba(193, 39, 45, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); transform: translateX(4px); }
.cf-milestone-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.cf-milestone-icon.done { background: rgba(34, 197, 94, 0.1); }
.cf-milestone-icon.done svg { fill: #16a34a; width: 22px; height: 22px; }
.cf-milestone-icon.next { background: var(--red-light); }
.cf-milestone-icon.next svg { fill: var(--red); width: 22px; height: 22px; }
.cf-milestone-icon.future { background: #f5f5f5; }
.cf-milestone-icon.future svg { fill: #ccc; width: 22px; height: 22px; }
.cf-milestone-info { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.cf-milestone-label { font-size: 15px; font-weight: 700; color: var(--dark); }
.cf-milestone-sub { font-size: 13px; color: var(--muted); }
.cf-milestone-amount { font-size: 16px; font-weight: 800; color: var(--dark); white-space: nowrap; }
.cf-acc-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; padding: 16px 32px; border-radius: 12px; transition: all 0.3s; align-self: flex-start; box-shadow: 0 4px 16px rgba(193, 39, 45, 0.25); cursor: pointer; border: none; }
.cf-acc-cta:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(193, 39, 45, 0.3); }
.cf-acc-cta svg { width: 18px; height: 18px; fill: #fff; }
@media (max-width: 900px) { .cf-founder { grid-template-columns: 1fr; gap: 40px; } .cf-images { max-width: 420px; margin: 0 auto; } .cf-accountability { grid-template-columns: 1fr; padding: 40px 28px; gap: 40px; } }
@media (max-width: 600px) { .cinch-founder { padding: 56px 16px; } .cf-img-secondary { width: 60%; margin-top: -60px; } .cf-accountability { padding: 32px 20px; } .cf-progress-donated { font-size: 32px; } .cf-values { gap: 8px; } .cf-value { padding: 8px 14px; font-size: 13px; } }
@keyframes cfFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.cf-founder { animation: cfFadeUp 0.6s ease-out; }
.cf-accountability { animation: cfFadeUp 0.6s ease-out 0.15s backwards; }
.cf-milestone:nth-child(1) { animation: cfFadeUp 0.4s ease-out 0.2s backwards; }
.cf-milestone:nth-child(2) { animation: cfFadeUp 0.4s ease-out 0.3s backwards; }
.cf-milestone:nth-child(3) { animation: cfFadeUp 0.4s ease-out 0.4s backwards; }
/* ============================================================
TESTIMONIALS SECTION — .cinch-testimonials
============================================================ */
.cinch-testimonials {
--red: #C1272D;
--red-dark: #a82025;
--red-soft: rgba(193, 39, 45, 0.07);
--dark: #1a1a2e;
--muted: #666;
--bg: #fafafa;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
padding: 80px 24px;
overflow: hidden;
position: relative;
-webkit-font-smoothing: antialiased;
}
.cinch-testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 260px; background: linear-gradient(180deg, rgba(193, 39, 45, 0.03) 0%, transparent 100%); pointer-events: none; }
.cinch-testimonials .testimonials-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.cinch-testimonials .testimonials-header { text-align: center; margin-bottom: 48px; }
.cinch-testimonials .testimonials-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--red-soft); border: 1px solid rgba(193, 39, 45, 0.2); border-radius: 100px; padding: 8px 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 20px; }
.cinch-testimonials .testimonials-badge svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cinch-testimonials .testimonials-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 14px; }
.cinch-testimonials .testimonials-title em { font-style: normal; color: var(--red); }
.cinch-testimonials .testimonials-subtitle { font-size: 1.02rem; color: var(--muted); max-width: 640px; margin: 0 auto 16px; line-height: 1.65; }
.cinch-testimonials .testimonials-rating { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.cinch-testimonials .rating-stars { display: flex; gap: 2px; }
.cinch-testimonials .rating-star { color: #f59e0b; font-size: 20px; }
.cinch-testimonials .rating-text { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.cinch-testimonials .trustindex-wrap { margin-bottom: 48px; min-height: 180px; }
.cinch-testimonials .hc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.cinch-testimonials .hc-card { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.cinch-testimonials .hc-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.07); border-color: rgba(193, 39, 45, 0.2); }
.cinch-testimonials .hc-card::before { content: '\201C'; position: absolute; top: 16px; right: 20px; font-size: 56px; font-weight: 800; color: var(--red); opacity: 0.12; line-height: 1; font-family: Georgia, serif; }
.cinch-testimonials .hc-stars { display: flex; gap: 3px; }
.cinch-testimonials .hc-star { color: #f59e0b; font-size: 16px; }
.cinch-testimonials .hc-quote { font-size: 0.95rem; color: #4a4a4a; line-height: 1.7; flex-grow: 1; font-style: italic; }
.cinch-testimonials .hc-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid #e8e8e8; }
.cinch-testimonials .hc-name { font-size: 0.95rem; font-weight: 700; color: #1a1a2e; }
.cinch-testimonials .hc-detail { font-size: 0.82rem; color: #888; }
.cinch-testimonials .hc-situation { display: inline-block; background: var(--red-soft); border: 1px solid rgba(193, 39, 45, 0.15); color: var(--red); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 4px; width: fit-content; }
@media (max-width: 900px) { .cinch-testimonials .hc-cards { grid-template-columns: 1fr; gap: 16px; } }
.cinch-testimonials .testimonials-cta { text-align: center; }
.cinch-testimonials .cta-button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: var(--red); color: white; text-decoration: none; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 16px rgba(193, 39, 45, 0.2); }
.cinch-testimonials .cta-button svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .cinch-testimonials .cta-button:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(193, 39, 45, 0.3); } }
.cinch-testimonials .cta-button:active { transform: translateY(0); }
.cinch-testimonials .cta-subtext { margin-top: 14px; font-size: 0.88rem; color: var(--muted); }
.cinch-testimonials .cta-subtext a { color: var(--red); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cinch-testimonials .cta-subtext a:hover { text-decoration: underline; } }
@media (max-width: 768px) { .cinch-testimonials { padding: 56px 16px; } .cinch-testimonials .testimonials-header { margin-bottom: 32px; } .cinch-testimonials .cta-button { width: 100%; justify-content: center; } }
/* ============================================================
FAQ SECTION — .cinch-faq
============================================================ */
.cinch-faq {
--faq-bg: #ffffff;
--faq-surface: #f7f7f8;
--faq-surface-open: #fefefe;
--faq-border: #e8e8e8;
--faq-border-active: #C1272D;
--faq-text: #1a1a2e;
--faq-text-mid: #444;
--faq-text-muted: #666;
--faq-accent: #C1272D;
--faq-accent-soft: rgba(193,39,45,0.07);
--faq-accent-softer: rgba(193,39,45,0.04);
--faq-radius: 12px;
--faq-ease: cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'DM Sans', sans-serif;
background: var(--faq-bg);
color: var(--faq-text);
padding: 20px 20px;
position: relative;
-webkit-font-smoothing: antialiased;
}
.cinch-faq-wrap { max-width: 90%; margin: 0 auto; }
.cinch-faq-head { text-align: center; margin-bottom: 40px; }
.cinch-faq-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faq-accent); background: var(--faq-accent-soft); padding: 6px 16px; border-radius: 100px; margin-bottom: 16px; }
.cinch-faq-h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px 0; color: var(--faq-text); }
.cinch-faq-h2 em { font-style: normal; color: var(--faq-accent); }
.cinch-faq-sub { font-size: 1.05rem; color: var(--faq-text-muted); margin: 0 auto; line-height: 1.6; max-width: 600px; }
.cinch-faq-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.cinch-faq-tab { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; padding: 8px 20px; border: 1.5px solid var(--faq-border); border-radius: 100px; background: transparent; color: var(--faq-text-muted); cursor: pointer; transition: all 0.25s var(--faq-ease); white-space: nowrap; }
.cinch-faq-tab[data-selected="true"] { background: var(--faq-text); color: #fff; border-color: var(--faq-text); }
@media (hover: hover) and (pointer: fine) { .cinch-faq-tab:not([data-selected="true"]):hover { border-color: var(--faq-text-mid); color: var(--faq-text); background: var(--faq-accent-softer); } }
.cinch-faq-list { display: flex; flex-direction: column; gap: 8px; }
.cinch-faq-item { background: var(--faq-surface); border-radius: var(--faq-radius); border: 1.5px solid transparent; overflow: hidden; transition: border-color 0.3s var(--faq-ease), background 0.3s var(--faq-ease), box-shadow 0.3s var(--faq-ease); }
.cinch-faq-item[data-hidden="true"] { display: none; }
.cinch-faq-item[data-open="true"] { background: var(--faq-surface-open); border-color: var(--faq-border-active); box-shadow: 0 2px 12px rgba(193,39,45,0.06); }
@media (hover: hover) and (pointer: fine) { .cinch-faq-item:not([data-open="true"]):hover { background: #f0f0f2; } }
.cinch-faq-q { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--faq-text); transition: color 0.25s var(--faq-ease); }
.cinch-faq-item[data-open="true"] .cinch-faq-q { color: var(--faq-accent); }
.cinch-faq-q:focus-visible { outline: 2px solid var(--faq-accent); outline-offset: -2px; border-radius: var(--faq-radius); }
.cinch-faq-plus { flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; position: relative; }
.cinch-faq-plus span { position: absolute; top: 50%; left: 50%; width: 14px; height: 2.5px; background: var(--faq-text-muted); border-radius: 2px; transition: transform 0.35s var(--faq-ease), background 0.25s var(--faq-ease); }
.cinch-faq-plus span:first-child { transform: translate(-50%, -50%); }
.cinch-faq-plus span:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.cinch-faq-item[data-open="true"] .cinch-faq-plus span { background: var(--faq-accent); }
.cinch-faq-item[data-open="true"] .cinch-faq-plus span:first-child { transform: translate(-50%, -50%) rotate(180deg); }
.cinch-faq-item[data-open="true"] .cinch-faq-plus span:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.cinch-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--faq-ease); }
.cinch-faq-a-inner { padding: 0 24px 24px 64px; font-size: 0.95rem; line-height: 1.75; color: var(--faq-text-mid); }
.cinch-faq-a-inner p { margin: 0 0 14px 0; }
.cinch-faq-a-inner p:last-child { margin-bottom: 0; }
.cinch-faq-a-inner strong { color: var(--faq-text); font-weight: 600; }
.cinch-faq-a-inner ul { margin: 8px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cinch-faq-a-inner ul li { line-height: 1.6; }
.cinch-faq-a-inner ul li::marker { color: var(--faq-accent); }
.cinch-faq-steps { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.cinch-faq-step { display: flex; gap: 14px; align-items: flex-start; }
.cinch-faq-step-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--faq-accent-soft); color: var(--faq-accent); font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cinch-faq-step-t { font-size: 0.9rem; color: var(--faq-text-mid); line-height: 1.6; }
.cinch-faq-nudge { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.88rem; font-weight: 700; color: var(--faq-accent); background: var(--faq-accent-soft); border: none; border-radius: 100px; padding: 8px 18px; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.cinch-faq-nudge svg { width: 14px; height: 14px; fill: none; stroke: var(--faq-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .cinch-faq-nudge:hover { background: var(--faq-accent); color: #fff; } .cinch-faq-nudge:hover svg { stroke: #fff; } }
.cinch-faq-cta { margin-top: 40px; text-align: center; }
.cinch-faq-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: var(--faq-accent); color: white; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.25s; box-shadow: 0 4px 16px rgba(193, 39, 45, 0.2); }
.cinch-faq-cta-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .cinch-faq-cta-btn:hover { background: #a82025; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(193, 39, 45, 0.3); } }
.cinch-faq-cta-sub { margin-top: 12px; font-size: 0.88rem; color: var(--faq-text-muted); }
.cinch-faq-cta-sub a { color: var(--faq-accent); font-weight: 600; text-decoration: none; }
@media (max-width: 768px) { .cinch-faq-wrap { max-width: 100%; } .cinch-faq-a-inner { padding-left: 24px; } }
/* ============================================================
SERVICE AREA BOTTOM SECTION — .cinch-bottom
============================================================ */
.cinch-bottom {
--cb-red: #C1272D;
--cb-red-dark: #a82025;
--cb-red-soft: rgba(193,39,45,0.06);
--cb-red-softer: rgba(193,39,45,0.03);
--cb-text: #1a1a2e;
--cb-text-mid: #444;
--cb-text-muted: #666;
--cb-bg: #ffffff;
--cb-surface: #f7f7f8;
--cb-border: #e8e8e8;
--cb-radius: 14px;
--cb-ease: cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--cb-text);
-webkit-font-smoothing: antialiased;
}
.cb-areas { background: var(--cb-bg); padding: 40px 20px; }
.cb-areas-wrap { max-width: 85%; margin: 0 auto; }
.cb-areas-head { text-align: center; margin-bottom: 48px; }
.cb-areas-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-red); background: var(--cb-red-soft); padding: 6px 16px; border-radius: 100px; margin-bottom: 16px; }
.cb-areas-head h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.2; color: var(--cb-text); margin: 0 0 16px 0; }
.cb-areas-head h2 em { font-style: normal; color: var(--cb-red); }
.cb-areas-head p { font-size: 1.02rem; line-height: 1.7; color: var(--cb-text-muted); max-width: 680px; margin: 0 auto; }
.cb-areas-head p strong { color: var(--cb-text); font-weight: 600; }
.cb-areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 48px; }
.cb-area-group { margin-bottom: 28px; }
.cb-area-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cb-text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cb-area-label svg { width: 14px; height: 14px; fill: none; stroke: var(--cb-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-city-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-city-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: var(--cb-text-mid); text-decoration: none; transition: all 0.25s var(--cb-ease); white-space: nowrap; }
.cb-city-link svg { width: 14px; height: 14px; fill: none; stroke: var(--cb-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.2s var(--cb-ease); }
@media (hover: hover) and (pointer: fine) { .cb-city-link:hover { background: var(--cb-red-soft); border-color: rgba(193,39,45,0.25); color: var(--cb-red); } .cb-city-link:hover svg { transform: translateX(2px); } }
.cb-city-link.primary { background: var(--cb-red-soft); border-color: rgba(193,39,45,0.2); color: var(--cb-red); font-weight: 700; }
.cb-areas-img { width: 100%; border-radius: var(--cb-radius); border: 1px solid var(--cb-border); overflow: hidden; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.cb-areas-img img { width: 100%; height: 280px; object-fit: cover; display: block; }
.cb-areas-copy { font-size: 0.93rem; line-height: 1.75; color: var(--cb-text-mid); }
.cb-areas-copy p { margin: 0 0 14px 0; }
.cb-areas-copy p:last-child { margin-bottom: 0; }
.cb-areas-copy strong { color: var(--cb-text); font-weight: 600; }
.cb-areas-copy a { color: var(--cb-red); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cb-areas-copy a:hover { text-decoration: underline; } }
.cb-areas-cta { text-align: center; padding-top: 8px; }
.cb-areas-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--cb-red); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; padding: 14px 36px; border: none; border-radius: 100px; cursor: pointer; transition: background 0.25s var(--cb-ease), transform 0.15s ease; box-shadow: 0 4px 16px rgba(193,39,45,0.2); }
@media (hover: hover) and (pointer: fine) { .cb-areas-cta-btn:hover { background: var(--cb-red-dark); transform: translateY(-1px); } }
.cb-areas-cta-btn:active { transform: translateY(0); }
.cb-areas-cta-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-areas-phone { margin-top: 14px; font-size: 0.88rem; color: var(--cb-text-muted); }
.cb-areas-phone a { color: var(--cb-red); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cb-areas-phone a:hover { text-decoration: underline; } }
.cb-blog { background: var(--cb-surface); padding: 72px 20px 80px; border-top: 1px solid var(--cb-border); }
.cb-blog-wrap { max-width: 1100px; margin: 0 auto; }
.cb-blog-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 20px; }
.cb-blog-head h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; color: var(--cb-text); margin: 0 0 6px 0; }
.cb-blog-head h2 em { font-style: normal; color: var(--cb-red); }
.cb-blog-head p { font-size: 0.92rem; color: var(--cb-text-muted); margin: 0; }
.cb-blog-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--cb-red); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .cb-blog-all:hover { opacity: 0.75; } }
.cb-blog-all svg { width: 14px; height: 14px; fill: none; stroke: var(--cb-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cb-blog-card { background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow 0.3s var(--cb-ease), border-color 0.3s var(--cb-ease), transform 0.2s var(--cb-ease); }
@media (hover: hover) and (pointer: fine) { .cb-blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); border-color: rgba(193,39,45,0.2); transform: translateY(-2px); } .cb-blog-card:hover .cb-blog-thumb img { transform: scale(1.04); } .cb-blog-card:hover .cb-blog-title { color: var(--cb-red); } }
.cb-blog-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cb-surface); }
.cb-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--cb-ease); }
.cb-blog-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.cb-blog-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cb-red); background: var(--cb-red-soft); padding: 4px 10px; border-radius: 5px; margin-bottom: 10px; width: fit-content; }
.cb-blog-title { font-family: 'DM Sans', sans-serif; font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--cb-text); margin: 0 0 10px 0; transition: color 0.25s var(--cb-ease); }
.cb-blog-excerpt { font-size: 0.86rem; line-height: 1.6; color: var(--cb-text-muted); margin: 0 0 16px 0; flex: 1; }
.cb-blog-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cb-border); padding-top: 14px; margin-top: auto; }
.cb-blog-date { font-size: 0.78rem; font-weight: 600; color: var(--cb-text-muted); }
.cb-blog-read { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--cb-red); }
.cb-blog-read svg { width: 13px; height: 13px; fill: none; stroke: var(--cb-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .cb-areas-grid { grid-template-columns: 1fr; gap: 32px; } .cb-blog-grid { grid-template-columns: 1fr; } .cb-blog-card { flex-direction: row; } .cb-blog-thumb { width: 140px; min-width: 140px; aspect-ratio: auto; } .cb-blog-body { padding: 16px 18px; } .cb-blog-head { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (max-width: 600px) { .cb-areas { padding: 56px 16px; } .cb-blog { padding: 48px 16px 56px; } .cb-blog-card { flex-direction: column; } .cb-blog-thumb { width: 100%; min-width: unset; aspect-ratio: 16 / 9; } .cb-areas-cta-btn { width: 100%; justify-content: center; } .cb-areas-img img { height: 200px; } }
/* ============================================================
STICKY CTA SECTION — .cinch-sticky-cta
============================================================ */
.cinch-sticky-cta {
--cta-red: #C1272D;
--cta-red-dark: #9E1F24;
--cta-dark: #1a1a1a;
--cta-bg: #ffffff;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--cta-bg);
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -1px 4px rgba(0, 0, 0, 0.06);
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cinch-sticky-cta.visible { transform: translateY(0); }
.cinch-sticky-cta-inner { display: flex; align-items: center; gap: 12px; max-width: 768px; margin: 0 auto; }
.cinch-sticky-cta-trust { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; min-width: 0; }
.cinch-sticky-cta-stars { display: flex; align-items: center; gap: 2px; }
.cinch-sticky-cta-stars svg { width: 14px; height: 14px; fill: #FBBF24; flex-shrink: 0; }
.cinch-sticky-cta-rating { font-size: 12px; font-weight: 700; color: var(--cta-dark); margin-left: 4px; white-space: nowrap; }
.cinch-sticky-cta-label { font-size: 11px; color: #6b7280; font-weight: 600; white-space: nowrap; }
.cinch-sticky-cta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--cta-red); color: #ffffff; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 700; padding: 14px 20px; border: none; border-radius: 12px; cursor: pointer; min-height: 48px; transition: background 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 8px rgba(193, 39, 45, 0.3); }
.cinch-sticky-cta-btn:active { background: var(--cta-red-dark); transform: scale(0.98); }
.cinch-sticky-cta-btn svg { width: 18px; height: 18px; fill: #ffffff; flex-shrink: 0; }
.cinch-sticky-cta-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; flex-shrink: 0; padding: 0; -webkit-tap-highlight-color: transparent; transition: background 0.2s; }
.cinch-sticky-cta-close:active { background: #f3f4f6; }
.cinch-sticky-cta-close svg { width: 14px; height: 14px; fill: #9ca3af; }
@media (min-width: 769px) { .cinch-sticky-cta { display: none !important; } }
@media (max-width: 768px) { .cinch-sticky-cta { display: block; } }
@media (max-width: 374px) { .cinch-sticky-cta-trust { display: none; } .cinch-sticky-cta-btn { font-size: 14px; padding: 12px 16px; } }
/* ============================================================
NEARBY CITIES SECTION — .nc-nearby-section
NOTE: