/*! CLM Bundle CSS v3 — consolidated, mobile-first, top 1% perf target Merges: hero rotator + front-page grid + directory + utility bar + hub + ads Load: preload as async CSS; critical hero CSS inlined in */ :root{ /* Region palettes (bright, distinct, dopamine) */ --region-accent:#F26B3A; --region-accent-2:#FFB847; --region-ink:#0C1E2C; /* Type + spacing */ --clm-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --clm-font-display:'DM Serif Display','Playfair Display',Georgia,serif; --clm-radius:18px; --clm-radius-sm:12px; --clm-text:#111; --clm-text-muted:#5b5b5b; --clm-surface:#fff; --clm-surface-2:#f7f6f2; --clm-border:#e5e2da; --clm-primary:#01696F; --clm-primary-hover:#0C4E54; } body[data-region="wasatch-back"]{--region-accent:#F26B3A;--region-accent-2:#FFB847;--region-ink:#0C1E2C} body[data-region="wasatch-front"]{--region-accent:#3B7DDD;--region-accent-2:#7DB3FF;--region-ink:#0A1420} body[data-region="southern-utah"]{--region-accent:#E14D2A;--region-accent-2:#FFC258;--region-ink:#2B0F0A} body[data-region="mountainland"]{--region-accent:#0F9D8B;--region-accent-2:#7CE0CE;--region-ink:#062723} body[data-region="cache-valley"]{--region-accent:#7A4CD1;--region-accent-2:#B98BFF;--region-ink:#180B32} body[data-region="uintah-basin"]{--region-accent:#B85C00;--region-accent-2:#F2A24B;--region-ink:#221000} body[data-region="bear-river"]{--region-accent:#2E7D3A;--region-accent-2:#8ED987;--region-ink:#0A1D0F} body[data-region="six-county"]{--region-accent:#C0392B;--region-accent-2:#F19082;--region-ink:#2A0A08} body[data-region="castle-country"]{--region-accent:#8B4513;--region-accent-2:#D4A574;--region-ink:#200D02} body[data-region="san-juan"]{--region-accent:#B03060;--region-accent-2:#F17ba3;--region-ink:#1F0714} body[data-region="tooele"]{--region-accent:#5D6D7E;--region-accent-2:#AAB7C4;--region-ink:#0F1620} *,*::before,*::after{box-sizing:border-box} img,video{max-width:100%;height:auto;display:block} /* ============================== HERO ROTATOR ============================== */ .clm-hero-rotator{position:relative;overflow:hidden;min-height:min(780px,88vh);color:#fff;isolation:isolate;background:var(--region-ink);--slide-accent:var(--region-accent);--slide-accent-2:var(--region-accent-2)} .clm-hr-media{position:absolute;inset:0;z-index:0} .clm-hr-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 8s ease-out;will-change:opacity,transform} .clm-hr-slide-bg.is-active{opacity:1;transform:scale(1.14)} .clm-hr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .clm-hr-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,14,24,.35) 0%,rgba(6,14,24,.15) 40%,rgba(6,14,24,.55) 78%,rgba(6,14,24,.88) 100%),linear-gradient(96deg,rgba(6,14,24,.82) 0%,rgba(6,14,24,.35) 55%,rgba(6,14,24,0) 100%)} .clm-hr-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:clamp(48px,8vh,110px) clamp(20px,4vw,40px) clamp(90px,12vh,130px);min-height:inherit;display:flex;flex-direction:column;justify-content:center} .clm-hr-slides{position:relative;min-height:340px} .clm-hr-slide{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .7s ease,transform .7s ease} .clm-hr-slide.is-active{opacity:1;transform:none;pointer-events:auto;position:relative} .clm-hr-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:clamp(.68rem,.82vw,.78rem);letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:#fff;padding:8px 14px;border-radius:999px;margin-bottom:20px;background:color-mix(in srgb,var(--slide-accent) 80%,transparent);box-shadow:0 6px 20px color-mix(in srgb,var(--slide-accent) 40%,transparent)} .clm-hr-eyebrow a{color:#fff;text-decoration:none;opacity:.9} .clm-hr-eyebrow a:hover{opacity:1;text-decoration:underline} .clm-hr-title{font-family:var(--clm-font-display);font-size:clamp(1.9rem,4.6vw,4rem);line-height:1.02;margin:0 0 clamp(12px,1.6vw,20px);font-weight:400;letter-spacing:-.02em;max-width:920px;text-shadow:0 2px 20px rgba(0,0,0,.35)} .clm-hr-title em{font-style:italic;background:linear-gradient(90deg,var(--slide-accent),var(--slide-accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:400} .clm-hr-sub{font-family:var(--clm-font-body);font-size:clamp(.98rem,1.35vw,1.15rem);line-height:1.55;max-width:640px;color:rgba(255,255,255,.9);margin:0 0 clamp(20px,2.6vw,30px);font-weight:400} .clm-hr-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .clm-hr-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;background:linear-gradient(120deg,var(--slide-accent),var(--slide-accent-2));color:#0a1420!important;font-weight:700;text-decoration:none;font-size:clamp(.95rem,1vw,1.05rem);letter-spacing:.005em;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 10px 30px color-mix(in srgb,var(--slide-accent) 45%,transparent);border:none;cursor:pointer;font-family:var(--clm-font-body)} .clm-hr-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px color-mix(in srgb,var(--slide-accent) 60%,transparent);filter:brightness(1.05)} .clm-hr-cta:focus-visible{outline:2px solid #fff;outline-offset:3px} .clm-hr-cta span.arrow{font-size:1.15em;transition:transform .2s ease} .clm-hr-cta:hover span.arrow{transform:translateX(4px)} .clm-hr-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff!important;font-weight:600;text-decoration:none;font-size:clamp(.9rem,.95vw,1rem);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .18s ease,border-color .18s ease;font-family:var(--clm-font-body)} .clm-hr-cta-secondary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)} .clm-hr-mls-bar{margin-top:clamp(20px,2.6vw,28px);display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 6px 6px 22px;min-width:min(560px,92vw);max-width:640px;box-shadow:0 12px 36px rgba(0,0,0,.28);transition:all .35s cubic-bezier(.2,.7,.2,1)} .clm-hr-mls-bar input{flex:1;border:none;background:transparent;outline:none;color:#28251d;font-size:1rem;padding:12px 8px;font-family:var(--clm-font-body);min-width:0} .clm-hr-mls-bar input::placeholder{color:#7a7974} .clm-hr-mls-bar button{border:none;background:linear-gradient(135deg,var(--slide-accent),var(--slide-accent-2));color:#0a1420;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 6px 18px color-mix(in srgb,var(--slide-accent) 40%,transparent)} .clm-hr-mls-bar button:hover{transform:scale(1.06)} .clm-hr-mls-bar.is-sticky{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9998;width:min(560px,92vw);min-width:0;box-shadow:0 12px 40px rgba(0,0,0,.28);margin:0} .clm-hr-mls-bar.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-16px) scale(.9)} .clm-hr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px) clamp(24px,3vw,42px);margin-top:clamp(36px,6vw,60px);padding-top:clamp(20px,2.6vw,28px);border-top:1px solid rgba(255,255,255,.16);max-width:920px} .clm-hr-stat .val{font-family:var(--clm-font-display);font-size:clamp(1.55rem,2.4vw,2.2rem);font-weight:600;color:var(--slide-accent-2);line-height:1;letter-spacing:-.015em} .clm-hr-stat .lbl{font-family:var(--clm-font-body);font-size:clamp(.65rem,.78vw,.74rem);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:8px;font-weight:600} .clm-hr-controls{position:absolute;z-index:5;bottom:clamp(20px,3vw,32px);right:clamp(20px,4vw,40px);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:rgba(10,20,32,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.35)} .clm-hr-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0} .clm-hr-arrow:hover{background:linear-gradient(135deg,var(--slide-accent),var(--slide-accent-2));color:#0a1420;border-color:transparent;transform:scale(1.06);box-shadow:0 6px 18px color-mix(in srgb,var(--slide-accent) 45%,transparent)} .clm-hr-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px} .clm-hr-arrow svg{display:block} .clm-hr-dots{display:flex;gap:6px;padding:0 6px;align-items:center} .clm-hr-dot{width:16px;height:6px;padding:0;border:none;cursor:pointer;background:transparent;position:relative;transition:width .35s cubic-bezier(.2,.7,.2,1)} .clm-hr-dot::before{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.28);transition:background .2s ease} .clm-hr-dot:hover::before{background:rgba(255,255,255,.5)} .clm-hr-dot.is-active{width:44px} .clm-hr-dot.is-active::before{background:rgba(255,255,255,.22)} .clm-hr-dot.is-active::after{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--slide-accent),var(--slide-accent-2));width:var(--dot-progress,0%);box-shadow:0 0 12px color-mix(in srgb,var(--slide-accent) 60%,transparent);transition:width .1s linear} .clm-hr-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px} .clm-hr-progress{position:absolute;z-index:3;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08)} .clm-hr-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--slide-accent),var(--slide-accent-2));transition:width .12s linear;box-shadow:0 0 12px color-mix(in srgb,var(--slide-accent) 60%,transparent)} /* ============================== DOPAMINE CARDS + GRIDS Instagram/Reels/Pinterest feel ============================== */ .clm-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,32px)} .clm-section{margin:clamp(40px,6vw,72px) 0} .clm-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap} .clm-section-head h2{font-family:var(--clm-font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;margin:0;color:var(--clm-text);line-height:1.1;letter-spacing:-.015em} .clm-section-head .sub{color:var(--clm-text-muted);font-size:.95rem;margin-top:4px} .clm-section-head .cta{color:var(--region-accent);font-weight:600;text-decoration:none;font-size:.92rem;white-space:nowrap} .clm-section-head .cta:hover{text-decoration:underline} .clm-grid{display:grid;gap:clamp(14px,1.8vw,22px)} .clm-grid--2{grid-template-columns:repeat(2,1fr)} .clm-grid--3{grid-template-columns:repeat(3,1fr)} .clm-grid--4{grid-template-columns:repeat(4,1fr)} .clm-grid--6{grid-template-columns:repeat(6,1fr)} @media(max-width:1024px){ .clm-grid--4{grid-template-columns:repeat(3,1fr)} .clm-grid--6{grid-template-columns:repeat(4,1fr)} } @media(max-width:780px){ .clm-grid--3,.clm-grid--4{grid-template-columns:repeat(2,1fr)} .clm-grid--6{grid-template-columns:repeat(3,1fr)} } @media(max-width:460px){ .clm-grid--4,.clm-grid--6{grid-template-columns:repeat(2,1fr)} } /* Dopamine tile — full-bleed photo + gradient overlay + chunky title */ .clm-tile{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--clm-radius);overflow:hidden;background:#111;color:#fff;text-decoration:none;isolation:isolate;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease} .clm-tile:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px rgba(0,0,0,.25)} .clm-tile-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease;z-index:0} .clm-tile:hover .clm-tile-img{transform:scale(1.08)} .clm-tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%);pointer-events:none} .clm-tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,20px)} .clm-tile-eyebrow{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--region-accent) 88%,transparent);color:#0a1420;margin-bottom:10px} .clm-tile-title{font-family:var(--clm-font-display);font-size:clamp(1.2rem,1.8vw,1.55rem);font-weight:600;line-height:1.1;margin:0 0 6px;color:#fff} .clm-tile-meta{font-size:.85rem;color:rgba(255,255,255,.86);display:flex;gap:10px;flex-wrap:wrap} .clm-tile-meta .dot{opacity:.5} /* Wide tile (2×1) for hero-strip categories */ .clm-tile--wide{aspect-ratio:16/9} .clm-tile--wide .clm-tile-title{font-size:clamp(1.4rem,2.4vw,2rem)} /* Small tile (dense) */ .clm-tile--sm{aspect-ratio:1/1} .clm-tile--sm .clm-tile-title{font-size:1rem} /* Category chip strip */ .clm-catchips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;margin-bottom:14px} .clm-catchips::-webkit-scrollbar{display:none} .clm-catchip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:#fff;color:var(--clm-text);border:1px solid var(--clm-border);font-weight:600;font-size:.9rem;text-decoration:none;transition:all .15s ease;white-space:nowrap;font-family:var(--clm-font-body)} .clm-catchip:hover{border-color:var(--region-accent);color:var(--region-accent);transform:translateY(-1px)} .clm-catchip.is-active{background:linear-gradient(120deg,var(--region-accent),var(--region-accent-2));color:#0a1420;border-color:transparent} /* Smart-buy MLS card */ .clm-smartbuy{position:relative;border-radius:var(--clm-radius);overflow:hidden;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit;display:block} .clm-smartbuy:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.12)} .clm-smartbuy-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#f0ede4;position:relative} .clm-smartbuy-badge{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:999px;background:linear-gradient(120deg,var(--region-accent),var(--region-accent-2));color:#0a1420;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .clm-smartbuy-body{padding:14px 16px 18px} .clm-smartbuy-price{font-family:var(--clm-font-display);font-size:1.5rem;font-weight:600;color:var(--clm-text);line-height:1;margin-bottom:4px} .clm-smartbuy-addr{font-size:.9rem;color:var(--clm-text-muted);margin-bottom:8px} .clm-smartbuy-stats{display:flex;gap:12px;font-size:.85rem;color:var(--clm-text-muted)} .clm-smartbuy-stats b{color:var(--clm-text);font-weight:700} /* TL;DR box */ .clm-tldr{background:linear-gradient(135deg,#fff9f2,#fdf3e6);border:1px solid #f0e0c0;border-left:4px solid var(--region-accent);border-radius:var(--clm-radius-sm);padding:20px 22px;margin:24px 0;font-size:1rem;line-height:1.55;color:var(--clm-text)} .clm-tldr strong{color:var(--region-ink)} /* Neighborhood pin card (rounded pill card) */ .clm-hood-pin{background:#fff;border-radius:var(--clm-radius-sm);border:1px solid var(--clm-border);padding:16px 18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;transition:all .18s ease} .clm-hood-pin:hover{border-color:var(--region-accent);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06)} .clm-hood-pin .tier{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--region-accent);font-weight:700} .clm-hood-pin .name{font-family:var(--clm-font-display);font-size:1.15rem;color:var(--clm-text);font-weight:600;line-height:1.1} .clm-hood-pin .price{font-size:.9rem;color:var(--clm-text-muted)} /* School card */ .clm-school{background:#fff;border:1px solid var(--clm-border);border-radius:var(--clm-radius-sm);padding:16px;display:flex;flex-direction:column;gap:6px} .clm-school .name{font-weight:700;font-family:var(--clm-font-display);font-size:1.05rem;color:var(--clm-text)} .clm-school .lvl{font-size:.78rem;color:var(--clm-text-muted);text-transform:uppercase;letter-spacing:.1em} .clm-school .rating{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--region-accent)} /* Empty-state card */ .clm-empty{background:linear-gradient(135deg,#f7f6f2,#f0ede4);border:1px dashed #d4d1ca;border-radius:var(--clm-radius-sm);padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .2s ease} .clm-empty:hover{border-color:var(--region-accent);background:linear-gradient(135deg,#fff9f2,#fdf3e6)} .clm-empty .icon{font-size:1.8rem} .clm-empty h4{margin:0;font-family:var(--clm-font-display);font-size:1.05rem;color:var(--clm-text)} .clm-empty p{margin:0;font-size:.85rem;color:var(--clm-text-muted);line-height:1.4} .clm-empty a{color:var(--region-accent);font-weight:600;text-decoration:none;font-size:.9rem;margin-top:6px} .clm-empty a:hover{text-decoration:underline} /* ============================== BUTTONS ============================== */ .clm-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-family:var(--clm-font-body);text-decoration:none;font-size:.95rem;transition:all .18s ease;cursor:pointer;border:none;line-height:1} .clm-btn--accent{background:linear-gradient(120deg,var(--region-accent),var(--region-accent-2));color:#0a1420} .clm-btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--region-accent) 45%,transparent)} .clm-btn--ghost{background:transparent;color:var(--region-accent);border:1.5px solid var(--region-accent)} .clm-btn--ghost:hover{background:var(--region-accent);color:#fff} /* ============================== CRE8WP HUB — floating bottom-right (Podium/Kinsta style) ============================== */ .cre8wp-hub{position:fixed;bottom:20px;right:20px;z-index:9997;font-family:var(--clm-font-body)} .cre8wp-hub-launcher{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--region-accent),var(--region-accent-2));color:#0a1420;border:none;cursor:pointer;box-shadow:0 12px 30px color-mix(in srgb,var(--region-accent) 45%,transparent),0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:transform .2s ease} .cre8wp-hub-launcher:hover{transform:scale(1.06)} .cre8wp-hub-launcher svg{width:26px;height:26px} .cre8wp-hub-panel{position:absolute;bottom:76px;right:0;width:min(360px,calc(100vw - 40px));background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);overflow:hidden;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s ease} .cre8wp-hub.is-open .cre8wp-hub-panel{opacity:1;transform:none;pointer-events:auto} .cre8wp-hub-header{padding:18px 20px 14px;background:linear-gradient(135deg,var(--region-accent),var(--region-accent-2));color:#0a1420} .cre8wp-hub-header h3{margin:0 0 4px;font-family:var(--clm-font-display);font-size:1.2rem;font-weight:600} .cre8wp-hub-header p{margin:0;font-size:.85rem;opacity:.85} .cre8wp-hub-modules{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:#eee} .cre8wp-hub-module{background:#fff;padding:16px 12px;text-align:center;text-decoration:none;color:var(--clm-text);transition:background .15s ease;cursor:pointer;border:none;font-family:inherit;font-size:.85rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px} .cre8wp-hub-module:hover{background:#f7f6f2;color:var(--region-accent)} .cre8wp-hub-module .icon{font-size:1.6rem;line-height:1} .cre8wp-hub-footer{padding:10px 16px;background:#f7f6f2;font-size:.75rem;color:var(--clm-text-muted);text-align:center;border-top:1px solid var(--clm-border)} .cre8wp-hub-close{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.12);border:none;width:26px;height:26px;border-radius:50%;color:#0a1420;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;line-height:1} .cre8wp-hub-close:hover{background:rgba(0,0,0,.24)} @media(max-width:480px){ .cre8wp-hub{bottom:14px;right:14px} .cre8wp-hub-panel{bottom:70px;width:calc(100vw - 28px)} } /* ============================== VIDEO ADS PLUGIN — pre-roll + lightbox ============================== */ .cre8wp-video-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--clm-radius-sm);overflow:hidden} .cre8wp-video-wrap video{width:100%;height:100%;object-fit:cover;display:block} .cre8wp-ad-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75)} .cre8wp-ad-overlay video{max-width:100%;max-height:100%} .cre8wp-ad-skip{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:6px;cursor:pointer;font-family:var(--clm-font-body);font-size:.85rem;font-weight:600} .cre8wp-ad-skip:disabled{opacity:.5;cursor:not-allowed} .cre8wp-ad-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease} .cre8wp-ad-lightbox.is-open{opacity:1;pointer-events:auto} .cre8wp-ad-lightbox-inner{max-width:960px;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;position:relative} .cre8wp-ad-lightbox-close{position:absolute;top:-40px;right:0;background:transparent;border:none;color:#fff;font-size:32px;cursor:pointer;line-height:1} /* ============================== RESPONSIVE — MOBILE HERO ============================== */ @media (max-width:1024px){.clm-hero-rotator{min-height:640px}.clm-hr-stats{max-width:100%}} @media (max-width:780px){ .clm-hero-rotator{min-height:560px} .clm-hr-inner{padding:clamp(80px,12vh,110px) 20px 96px} .clm-hr-slides{min-height:auto} .clm-hr-eyebrow{font-size:.7rem;padding:6px 12px;margin-bottom:14px} .clm-hr-title{font-size:clamp(1.75rem,8.4vw,2.4rem);line-height:1.05;margin-bottom:12px} .clm-hr-sub{font-size:.95rem;line-height:1.5;margin-bottom:20px;max-width:100%} .clm-hr-cta-row{flex-direction:row;flex-wrap:wrap;gap:10px} .clm-hr-cta{padding:13px 22px;font-size:.95rem} .clm-hr-cta-secondary{padding:13px 18px;font-size:.9rem} .clm-hr-mls-bar{min-width:0;width:100%;margin-top:18px;padding:5px 5px 5px 18px} .clm-hr-mls-bar input{font-size:.95rem;padding:11px 6px} .clm-hr-mls-bar button{width:40px;height:40px} .clm-hr-stats{grid-template-columns:repeat(2,1fr);gap:14px 24px;margin-top:28px;padding-top:18px} .clm-hr-stat .val{font-size:1.5rem} .clm-hr-stat .lbl{font-size:.65rem} .clm-hr-controls{bottom:14px;right:50%;transform:translateX(50%);padding:6px 8px;gap:8px} .clm-hr-arrow{width:34px;height:34px} .clm-hr-dot{height:5px;width:12px} .clm-hr-dot.is-active{width:32px} } @media (max-width:380px){ .clm-hr-title{font-size:1.65rem} .clm-hr-cta{padding:12px 18px} .clm-hr-cta-secondary{padding:12px 14px;font-size:.85rem} } @media (prefers-reduced-motion:reduce){ .clm-hr-slide-bg,.clm-hr-slide,.clm-hr-progress-fill,.clm-hr-dot.is-active::after,.clm-hr-mls-bar,.clm-tile-img{transition:none!important} .clm-hr-slide-bg.is-active{transform:none} } /* ============================================================ DIRECTORY STACK — dopamine grids for every vertical ============================================================ */ .clm-dir-section{padding:56px 0;position:relative} .clm-dir-section+.clm-dir-section{border-top:1px solid var(--clm-line,#eae7df)} .clm-dir-section.is-dark{background:#0C1E2C;color:#F4EFE6} .clm-dir-section.is-dark .clm-sec-eyebrow{color:var(--region-accent,#F26B3A)} .clm-dir-section.is-dark .clm-sec-title{color:#fff} .clm-dir-section.is-dark .clm-sec-sub{color:rgba(244,239,230,.75)} .clm-dir-inner{max-width:1280px;margin:0 auto;padding:0 24px} .clm-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap} .clm-sec-head-left{flex:1 1 400px;min-width:0} .clm-sec-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--region-accent,#F26B3A);margin-bottom:8px} .clm-sec-title{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.08;margin:0 0 6px;color:#0C1E2C} .clm-sec-sub{font-size:1rem;color:#6b6558;margin:0;max-width:64ch} .clm-sec-viewall{flex:0 0 auto;font-weight:600;font-size:.9rem;color:var(--region-accent,#F26B3A);text-decoration:none;padding:10px 16px;border:1.5px solid currentColor;border-radius:999px;transition:all .18s ease;white-space:nowrap} .clm-sec-viewall:hover{background:var(--region-accent,#F26B3A);color:#fff} /* Category tile grid */ .clm-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .clm-cat-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #eae7df;border-radius:16px;padding:20px 18px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden;min-height:132px} .clm-cat-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--region-accent,#F26B3A)0%,transparent 60%);opacity:0;transition:opacity .18s ease;pointer-events:none} .clm-cat-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(12,30,44,.18);border-color:var(--region-accent,#F26B3A)} .clm-cat-tile:hover::before{opacity:.06} .clm-cat-tile-icon{font-size:1.75rem;line-height:1;margin-bottom:12px;position:relative;z-index:1} .clm-cat-tile-name{font-family:'DM Serif Display',Georgia,serif;font-size:1.1rem;line-height:1.15;color:#0C1E2C;margin:0 0 4px;position:relative;z-index:1} .clm-cat-tile-desc{font-size:.82rem;color:#6b6558;line-height:1.4;margin:0 0 auto;flex:1 1 auto;position:relative;z-index:1} .clm-cat-tile-cta{font-size:.78rem;font-weight:600;color:var(--region-accent,#F26B3A);margin-top:12px;letter-spacing:.02em;position:relative;z-index:1} .clm-cat-tile-cta::after{content:" →";transition:transform .18s ease;display:inline-block} .clm-cat-tile:hover .clm-cat-tile-cta::after{transform:translateX(3px)} .is-dark .clm-cat-tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .is-dark .clm-cat-tile-name{color:#fff} .is-dark .clm-cat-tile-desc{color:rgba(244,239,230,.65)} /* Mortgage rates strip */ .clm-rates-strip{background:linear-gradient(135deg,#0C1E2C 0%,#1a3446 100%);color:#F4EFE6;border-radius:20px;padding:28px 32px;display:grid;grid-template-columns:1.2fr 3fr;gap:32px;align-items:center;position:relative;overflow:hidden} .clm-rates-strip::before{content:"";position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,var(--region-accent,#F26B3A)0%,transparent 60%);opacity:.18;pointer-events:none} .clm-rates-strip-head{position:relative;z-index:1} .clm-rates-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--region-accent,#F26B3A);margin-bottom:8px} .clm-rates-strip-title{font-family:'DM Serif Display',Georgia,serif;font-size:1.6rem;line-height:1.1;margin:0 0 6px;color:#fff} .clm-rates-sub{font-size:.85rem;color:rgba(244,239,230,.7);margin:0 0 12px} .clm-rates-cta{display:inline-block;font-size:.85rem;font-weight:700;color:var(--region-accent,#F26B3A);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px} .clm-rates-cta:hover{color:#fff;border-color:#fff} .clm-rates-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative;z-index:1} .clm-rate-cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 12px;text-align:center} .clm-rate-val{font-family:'DM Serif Display',Georgia,serif;font-size:1.55rem;line-height:1;color:#fff;margin:0 0 4px;font-variant-numeric:tabular-nums} .clm-rate-lbl{font-size:.68rem;color:rgba(244,239,230,.6);text-transform:uppercase;letter-spacing:.08em;margin:0} /* Deals rail */ .clm-deal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .clm-deal-card{position:relative;background:#fff;border:1px solid #eae7df;border-radius:18px;padding:22px 20px 20px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;overflow:hidden;min-height:170px;display:flex;flex-direction:column} .clm-deal-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(12,30,44,.2)} .clm-deal-badge{position:absolute;top:14px;right:14px;background:var(--region-accent,#F26B3A);color:#fff;font-size:.72rem;font-weight:800;padding:6px 12px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase} .clm-deal-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--region-accent,#F26B3A);margin:0 0 8px} .clm-deal-title{font-family:'DM Serif Display',Georgia,serif;font-size:1.15rem;line-height:1.2;color:#0C1E2C;margin:0 0 8px;padding-right:60px} .clm-deal-desc{font-size:.85rem;color:#6b6558;line-height:1.45;margin:0 0 auto;flex:1 1 auto} .clm-deal-cta{font-size:.8rem;font-weight:700;color:var(--region-accent,#F26B3A);margin-top:14px;letter-spacing:.02em} .clm-deal-cta::after{content:" →";display:inline-block;transition:transform .18s ease} .clm-deal-card:hover .clm-deal-cta::after{transform:translateX(4px)} /* Jobs rail */ .clm-job-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .clm-job-card{background:#fff;border:1px solid #eae7df;border-left:4px solid var(--region-accent,#F26B3A);border-radius:12px;padding:20px 22px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;gap:6px} .clm-job-card:hover{transform:translateX(3px);box-shadow:0 10px 24px -10px rgba(12,30,44,.15)} .clm-job-title{font-family:'DM Serif Display',Georgia,serif;font-size:1.1rem;line-height:1.2;color:#0C1E2C;margin:0} .clm-job-employer{font-size:.85rem;color:#6b6558;font-weight:600;margin:0} .clm-job-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;color:#6b6558;margin-top:4px} .clm-job-meta span{display:inline-flex;align-items:center;gap:4px} .clm-job-meta .clm-job-salary{color:var(--region-accent,#F26B3A);font-weight:700} .clm-job-cta{font-size:.78rem;font-weight:700;color:var(--region-accent,#F26B3A);margin-top:6px} /* Neighborhood reel (horizontal snap) */ .clm-nbh-reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;margin:0 -24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .clm-nbh-reel::-webkit-scrollbar{height:6px} .clm-nbh-reel::-webkit-scrollbar-thumb{background:#d4cfc2;border-radius:99px} .clm-nbh-reel > *{flex:0 0 300px;scroll-snap-align:start} /* Real Estate News block */ .clm-news-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px} .clm-news-grid > *:first-child{grid-row:span 2} @media (max-width:900px){.clm-news-grid{grid-template-columns:1fr;}.clm-news-grid > *:first-child{grid-row:auto}} /* Section colored backgrounds (alternating) */ .clm-dir-section.is-tinted{background:#F7F4EE} .clm-dir-section.is-tinted .clm-cat-tile{background:#fff} /* Responsive */ @media (max-width:1100px){ .clm-cat-grid{grid-template-columns:repeat(3,1fr)} .clm-rates-grid{grid-template-columns:repeat(3,1fr)} .clm-rates-strip{grid-template-columns:1fr;gap:20px} .clm-deal-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .clm-dir-section{padding:44px 0} .clm-cat-grid{grid-template-columns:repeat(2,1fr);gap:12px} .clm-cat-tile{padding:16px 14px;min-height:118px} .clm-cat-tile-icon{font-size:1.5rem} .clm-cat-tile-name{font-size:1rem} .clm-cat-tile-desc{font-size:.78rem} .clm-rates-strip{padding:22px 20px} .clm-rates-grid{grid-template-columns:repeat(2,1fr);gap:10px} .clm-rate-val{font-size:1.3rem} .clm-deal-grid{grid-template-columns:1fr} .clm-job-grid{grid-template-columns:1fr} .clm-sec-title{font-size:1.6rem} .clm-sec-head{margin-bottom:22px} } /* ========================================================================== CLM v3 CSS ALIGNMENT PATCH — appended 2026-07-05 22:45 MDT Aligns bundle.css with actual PHP class output. PHP outputs: .clm-grid.clm-grid--3/4, .clm-rates-row, .clm-rate-cell > .v + .l ========================================================================== */ /* ---- Grid system (matches inc-clm-directory-sections.php output) ---- */ .clm-grid{display:grid;gap:16px} .clm-grid--2{grid-template-columns:repeat(2,1fr)} .clm-grid--3{grid-template-columns:repeat(3,1fr)} .clm-grid--4{grid-template-columns:repeat(4,1fr)} .clm-grid--5{grid-template-columns:repeat(5,1fr)} .clm-grid--6{grid-template-columns:repeat(6,1fr)} @media (max-width:1100px){ .clm-grid--4,.clm-grid--5,.clm-grid--6{grid-template-columns:repeat(3,1fr)} } @media (max-width:800px){ .clm-grid--3,.clm-grid--4,.clm-grid--5,.clm-grid--6{grid-template-columns:repeat(2,1fr);gap:12px} } @media (max-width:480px){ .clm-grid{gap:10px} } /* ---- Rates strip (matches .clm-rates-row + .clm-rate-cell > .v + .l) ---- */ .clm-rates-strip{background:linear-gradient(135deg,#0C1E2C 0%,#132C40 100%);color:#fff;border-radius:20px;padding:32px 36px;margin:8px 0 40px;box-shadow:0 20px 50px -20px rgba(12,30,44,.35)} .clm-rates-strip-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)} .clm-rates-eyebrow{font-family:var(--clm-font-body);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--region-accent,#F26B3A);margin:0 0 4px} .clm-rates-strip-head h3{font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:1.6rem;font-weight:400;margin:0;color:#fff;line-height:1.15} .clm-rates-sub{font-size:.85rem;color:rgba(255,255,255,.65);margin:6px 0 0} .clm-rates-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .clm-rate-cell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 14px;text-align:left;transition:background .18s ease,transform .18s ease} .clm-rate-cell:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)} .clm-rate-cell .v{display:block;font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:1.5rem;font-weight:400;color:#fff;line-height:1.1;margin-bottom:4px;letter-spacing:-.01em} .clm-rate-cell .l{display:block;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;line-height:1.2} @media (max-width:1100px){.clm-rates-row{grid-template-columns:repeat(3,1fr)}} @media (max-width:720px){ .clm-rates-strip{padding:24px 22px;border-radius:16px} .clm-rates-row{grid-template-columns:repeat(2,1fr);gap:10px} .clm-rate-cell{padding:12px 12px} .clm-rate-cell .v{font-size:1.25rem} .clm-rates-strip-head h3{font-size:1.3rem} } /* ---- Ghost / secondary button used across sections ---- */ .clm-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;font-family:var(--clm-font-body);font-weight:700;font-size:.88rem;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;cursor:pointer;border:none;letter-spacing:.005em} .clm-btn--ghost{background:transparent;color:var(--region-accent,#F26B3A);border:1.5px solid color-mix(in srgb,var(--region-accent,#F26B3A) 40%,transparent)} .clm-btn--ghost:hover{background:var(--region-accent,#F26B3A);color:#0a1420;border-color:var(--region-accent,#F26B3A);transform:translateY(-1px)} .clm-btn--solid{background:var(--region-accent,#F26B3A);color:#0a1420} .clm-btn--solid:hover{filter:brightness(1.08);transform:translateY(-1px)} /* ---- Section headers (used by clm_section_header()) ---- */ .clm-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px;flex-wrap:wrap} .clm-sec-head-left{flex:1;min-width:280px} .clm-sec-eyebrow{font-family:var(--clm-font-body);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--region-accent,#F26B3A);margin:0 0 8px;display:block} .clm-sec-title{font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:clamp(1.7rem,2.4vw,2.3rem);font-weight:400;line-height:1.12;color:#0C1E2C;margin:0 0 8px;letter-spacing:-.01em} .clm-sec-sub{font-size:.98rem;color:#4a4740;margin:0;max-width:70ch;line-height:1.55} .clm-sec-viewall{white-space:nowrap;flex-shrink:0} /* ---- Cat tile refinement (higher specificity to override any conflict) ---- */ .clm-cat-tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #eae7df;border-radius:14px;padding:20px 18px;text-decoration:none;color:inherit;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,border-color .2s ease;min-height:132px;position:relative;overflow:hidden} .clm-cat-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--region-accent,#F26B3A),var(--region-accent-2,#FFB847));transform:scaleX(0);transform-origin:left;transition:transform .28s ease} .clm-cat-tile:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(12,30,44,.15),0 4px 10px -4px rgba(12,30,44,.08);border-color:color-mix(in srgb,var(--region-accent,#F26B3A) 30%,#eae7df)} .clm-cat-tile:hover::before{transform:scaleX(1)} .clm-cat-tile-icon{font-size:1.7rem;line-height:1;margin-bottom:2px} .clm-cat-tile-name{font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:1.05rem;line-height:1.2;color:#0C1E2C;margin:0;font-weight:400} .clm-cat-tile-desc{font-size:.82rem;color:#6b6558;line-height:1.4;margin:0;flex:1} .clm-cat-tile-cta{font-size:.75rem;font-weight:700;color:var(--region-accent,#F26B3A);margin-top:auto;letter-spacing:.02em;display:inline-flex;align-items:center;gap:4px} .clm-cat-tile-cta::after{content:"→";transition:transform .18s ease} .clm-cat-tile:hover .clm-cat-tile-cta::after{transform:translateX(3px)} /* ---- Directory section rhythm ---- */ .clm-dir-section{padding:64px 0;position:relative} .clm-dir-section.is-dark{background:#0C1E2C;color:#fff} .clm-dir-section.is-dark .clm-sec-title{color:#fff} .clm-dir-section.is-dark .clm-sec-sub{color:rgba(255,255,255,.7)} .clm-dir-section.is-dark .clm-cat-tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#fff} .clm-dir-section.is-dark .clm-cat-tile-name{color:#fff} .clm-dir-section.is-dark .clm-cat-tile-desc{color:rgba(255,255,255,.65)} .clm-dir-section.is-tinted{background:#F7F4EE} .clm-dir-inner{max-width:1240px;margin:0 auto;padding:0 24px} @media (max-width:720px){.clm-dir-section{padding:44px 0}.clm-dir-inner{padding:0 18px}} /* ---- FIX: Hero primary CTA visibility (was rendering nearly invisible) ---- */ .clm-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px} .clm-hero-ctas .clm-hr-cta{background:linear-gradient(135deg,var(--region-accent,#F26B3A),var(--region-accent-2,#FFB847))!important;color:#0a1420!important;padding:15px 28px!important;font-size:1rem!important;box-shadow:0 12px 30px color-mix(in srgb,var(--region-accent,#F26B3A) 45%,transparent)!important;font-weight:700!important} .clm-hero-ctas .clm-hr-cta:hover{transform:translateY(-2px);filter:brightness(1.08)} .clm-hero-ctas .clm-hr-cta-secondary{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.35)!important;padding:15px 26px!important;backdrop-filter:blur(10px)} .clm-hero-ctas .clm-hr-cta-secondary:hover{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.6)!important} /* ---- FIX: Hub launcher position — must not overlap hero content ---- */ .cre8wp-hub{bottom:24px!important;right:24px!important;z-index:9997} @media (max-width:900px){.cre8wp-hub{bottom:16px!important;right:16px!important}} .cre8wp-hub-launcher{width:auto!important;height:auto!important;padding:12px 20px 12px 16px!important;border-radius:999px!important;display:inline-flex!important;gap:8px!important;font-family:var(--clm-font-body)!important;font-weight:700!important;font-size:.88rem!important;color:#0a1420!important;background:linear-gradient(135deg,var(--region-accent,#F26B3A),var(--region-accent-2,#FFB847))!important;box-shadow:0 14px 40px color-mix(in srgb,var(--region-accent,#F26B3A) 50%,transparent),0 4px 10px rgba(0,0,0,.12)!important} .cre8wp-hub-launcher svg{width:20px!important;height:20px!important} .cre8wp-hub-launcher-label{display:inline-block;white-space:nowrap;max-width:none} /* ---- Hero region — ensure sufficient bottom padding so hub doesn't cover CTAs ---- */ .clm-county-hero{padding-bottom:100px} @media (max-width:720px){.clm-county-hero{padding-bottom:90px}} /* ---- TL;DR block ---- */ .clm-tldr{background:linear-gradient(180deg,#FDF6EC 0%,#F7F4EE 100%);padding:28px 0;border-bottom:1px solid #eae7df} .clm-tldr-inner{max-width:1240px;margin:0 auto;padding:0 24px} .clm-tldr-eyebrow{font-family:var(--clm-font-body);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--region-accent,#F26B3A);margin:0 0 8px} .clm-tldr p{font-size:1rem;color:#3d3a34;line-height:1.6;margin:0;max-width:88ch} /* ---- Longform typography ---- */ .clm-longform{max-width:800px;margin:0 auto;padding:60px 24px;font-size:1.05rem;line-height:1.72;color:#28251d} .clm-longform h2{font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:1.75rem;font-weight:400;color:#0C1E2C;margin:2em 0 .6em;letter-spacing:-.01em;line-height:1.2} .clm-longform h3{font-family:var(--clm-font-display,'DM Serif Display'),Georgia,serif;font-size:1.3rem;font-weight:400;color:#0C1E2C;margin:1.6em 0 .5em;line-height:1.25} .clm-longform p{margin:0 0 1.15em} .clm-longform ul,.clm-longform ol{margin:0 0 1.15em;padding-left:1.4em} .clm-longform li{margin-bottom:.4em} .clm-longform a{color:var(--region-accent,#F26B3A);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* ---- Breadcrumbs ---- */ .clm-crumbs{font-family:var(--clm-font-body);font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:14px;letter-spacing:.02em} .clm-crumbs a{color:rgba(255,255,255,.8);text-decoration:none} .clm-crumbs a:hover{color:#fff} .clm-crumbs .sep{margin:0 8px;opacity:.5} /* ============================================================ FRONT-PAGE STYLES (merged into bundle 2026-07-06) Was previously dequeued — merging here so home page has layout ============================================================ */ /* ---------- SERP INDEX SECTION ---------- */ .clm-serp-index { background: #0F1720; color: #E8E8E6; padding: 64px 0; border-top: 3px solid #D4A017; } .clm-serp-index .clm-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; } .clm-serp-index .clm-eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #D4A017; margin: 0 0 16px; } .clm-serp-h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 20px; max-width: 1100px; } .clm-serp-lede { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: #B8B7B4; margin: 0 0 40px; max-width: 800px; } .clm-serp-lede a { color: #D4A017; text-decoration: none; border-bottom: 1px solid rgba(212,160,23,0.35); } .clm-serp-lede a:hover { color: #ffffff; border-bottom-color: #ffffff; } .clm-serp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { .clm-serp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .clm-serp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } .clm-serp-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: #1B2531; border: 1px solid #2A3846; border-radius: 10px; text-decoration: none; color: #E8E8E6; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; overflow: hidden; } .clm-serp-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #D4A017; transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } .clm-serp-tile:hover { background: #22303F; border-color: #3A4C61; transform: translateY(-2px); } .clm-serp-tile:hover::before { transform: scaleY(1); } .clm-serp-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(212,160,23,0.12); color: #D4A017; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 6px; } .clm-serp-tile[data-icon="search"] .clm-serp-tile__icon::before { content: '⌕'; font-size: 18px; } .clm-serp-tile[data-icon="map"] .clm-serp-tile__icon::before { content: '◆'; font-size: 14px; } .clm-serp-tile[data-icon="building"] .clm-serp-tile__icon::before { content: '▣'; font-size: 16px; } .clm-serp-tile[data-icon="flag"] .clm-serp-tile__icon::before { content: '▲'; font-size: 12px; } .clm-serp-tile[data-icon="grad-cap"] .clm-serp-tile__icon::before { content: '◈'; font-size: 14px; } .clm-serp-tile[data-icon="chart"] .clm-serp-tile__icon::before { content: '📊'; font-size: 15px; } .clm-serp-tile[data-icon="flame"] .clm-serp-tile__icon::before { content: '★'; font-size: 15px; } .clm-serp-tile[data-icon="store"] .clm-serp-tile__icon::before { content: '▢'; font-size: 14px; } .clm-serp-tile[data-icon="user-check"] .clm-serp-tile__icon::before { content: '◉'; font-size: 14px; } .clm-serp-tile[data-icon="truck"] .clm-serp-tile__icon::before { content: '➜'; font-size: 15px; } .clm-serp-tile[data-icon="home-key"] .clm-serp-tile__icon::before { content: '⌂'; font-size: 15px; } .clm-serp-tile[data-icon="calendar"] .clm-serp-tile__icon::before { content: '▤'; font-size: 14px; } .clm-serp-tile[data-icon="contract"] .clm-serp-tile__icon::before { content: '≡'; font-size: 14px; } .clm-serp-tile[data-icon="ticket"] .clm-serp-tile__icon::before { content: '◐'; font-size: 14px; } .clm-serp-tile[data-icon="tag"] .clm-serp-tile__icon::before { content: '◇'; font-size: 14px; } .clm-serp-tile[data-icon="article"] .clm-serp-tile__icon::before { content: '❖'; font-size: 14px; } .clm-serp-tile__label { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 2px 0 0; } .clm-serp-tile__sub { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.35; color: #97A1AC; letter-spacing: 0.01em; } /* ---------- GENERIC SECTION UTILITIES ---------- */ .clm-section { padding: 72px 0; background: #FAF9F5; } .clm-section--tight { padding: 56px 0; } .clm-section--alt { background: #F1EFEA; } .clm-section .clm-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .clm-section { padding: 48px 0; } .clm-section--tight { padding: 40px 0; } .clm-section .clm-wrap { padding: 0 20px; } } .clm-section-eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #96703B; margin: 0 0 12px; } .clm-section-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #0F1720; margin: 0 0 32px; } .clm-section-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 32px; } .clm-section-title-row .clm-section-title { margin-bottom: 0; } .clm-section-cta { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #96703B; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .clm-section-cta:hover { color: #0F1720; border-bottom-color: #96703B; } /* ---------- CARD GRIDS ---------- */ .clm-card-grid, .clm-grid, .clm-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .clm-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .clm-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .clm-card-grid, .clm-grid, .clm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 460px) { .clm-card-grid, .clm-grid, .clm-grid--3 { grid-template-columns: 1fr; } } .clm-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #E5E4E0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .clm-card:hover { border-color: #96703B; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,23,32,0.08); } .clm-card__media { aspect-ratio: 4 / 3; background: #1B2531; background-size: cover; background-position: center; } .clm-card__body { padding: 16px 18px 18px; } .clm-card__title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #0F1720; margin: 0 0 4px; line-height: 1.25; } .clm-card__meta { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #6E6E6A; } /* ---------- VIDEO WALL ---------- */ .clm-video-wall { background: #F1EFEA; padding: 72px 0; } .clm-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 900px) { .clm-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 600px) { .clm-video-grid { grid-template-columns: 1fr; } } .clm-video-card { background: #ffffff; border: 1px solid #E5E4E0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .clm-video-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,23,32,0.08); } .clm-video-embed { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0F1720; cursor: pointer; } .clm-video-embed iframe, .clm-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .clm-video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .clm-video-embed__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(212,160,23,0.95); border: 3px solid #ffffff; display: flex; align-items: center; justify-content: center; color: #0F1720; z-index: 2; transition: transform 0.2s; cursor: pointer; } .clm-video-embed:hover .clm-video-embed__play { transform: translate(-50%, -50%) scale(1.08); } .clm-video-embed__play svg { width: 26px; height: 26px; margin-left: 3px; } .clm-video-card__title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: #0F1720; margin: 18px 20px 6px; } .clm-video-card__caption { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: #6E6E6A; margin: 0 20px 20px; } /* ---------- AD BAND ---------- */ .clm-adband { background: #FFFFFF; padding: 24px 0; border-top: 1px solid #E5E4E0; border-bottom: 1px solid #E5E4E0; } .clm-adband .clm-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; text-align: center; } /* ---------- VIDEO LIGHTBOX ---------- */ #clm-video-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 999999; display: none; align-items: center; justify-content: center; padding: 20px; } #clm-video-lightbox.is-open { display: flex; } #clm-video-lightbox__inner { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; } #clm-video-lightbox video { width: 100%; height: 100%; object-fit: contain; } #clm-video-lightbox__close { position: absolute; top: -44px; right: 0; background: transparent; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 0; } /* ---------- KILL CHAT HUB LEAK ---------- */ .chathub-launcher, .chathub-widget, #chathub-launcher, #chathub-widget, .clm-crm-chathub, .chathub-fab, [class*="chathub"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* But keep our cre8wp-hub bubble */ #cre8wp-hub, .cre8wp-hub__bubble { display: flex !important; visibility: visible !important; pointer-events: auto !important; } /* ============ RICH SERP TILES v2 — hero image + chip + title + desc + CTA ============ */ .clm-serp-grid--rich { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1400px) { .clm-serp-grid--rich { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .clm-serp-grid--rich { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 560px) { .clm-serp-grid--rich { grid-template-columns: 1fr; gap: 14px; } } .clm-serp-tile--rich { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; background: #FFFFFF; border: 1px solid #E5E1D8; border-radius: 14px; text-decoration: none; color: #1F2937; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,32,0.04); } .clm-serp-tile--rich::before { display: none; } .clm-serp-tile--rich:hover { background: #FFFFFF; border-color: #D4A017; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,23,32,0.10), 0 2px 6px rgba(15,23,32,0.06); } .clm-serp-tile__media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #0F1720 0%, #22303F 100%); overflow: hidden; } .clm-serp-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; } .clm-serp-tile--rich:hover .clm-serp-tile__media img { transform: scale(1.05); } .clm-serp-tile__media.is-fallback { background: linear-gradient(135deg, #0F1720 0%, #D4A017 200%); } .clm-serp-tile__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .clm-serp-tile__chip { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 11px; font-weight: 500; color: #6B7280; letter-spacing: 0.02em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clm-serp-tile__title { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: #0F1720; margin: 0; letter-spacing: -0.01em; } .clm-serp-tile__desc { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4B5563; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .clm-serp-tile__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; background: #0F1720; color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; border-radius: 8px; align-self: flex-start; transition: background 0.2s ease, transform 0.2s ease; border: 1px solid #0F1720; } .clm-serp-tile--rich:hover .clm-serp-tile__cta { background: #D4A017; border-color: #D4A017; color: #0F1720; transform: translateX(2px); } /* Dark-mode variant — inherits from data-theme=dark on or body */ [data-theme="dark"] .clm-serp-tile--rich, body.dark-mode .clm-serp-tile--rich { background: #1B2531; border-color: #2A3846; color: #E8E8E6; } [data-theme="dark"] .clm-serp-tile__title, body.dark-mode .clm-serp-tile__title { color: #FFFFFF; } [data-theme="dark"] .clm-serp-tile__desc, body.dark-mode .clm-serp-tile__desc { color: #B8C0CC; } [data-theme="dark"] .clm-serp-tile__chip, body.dark-mode .clm-serp-tile__chip { color: #97A1AC; } [data-theme="dark"] .clm-serp-tile__cta, body.dark-mode .clm-serp-tile__cta { background: #D4A017; color: #0F1720; border-color: #D4A017; } [data-theme="dark"] .clm-serp-tile--rich:hover, body.dark-mode .clm-serp-tile--rich:hover { border-color: #D4A017; box-shadow: 0 12px 32px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20); } [data-theme="dark"] .clm-serp-tile--rich:hover .clm-serp-tile__cta, body.dark-mode .clm-serp-tile--rich:hover .clm-serp-tile__cta { background: #FFFFFF; color: #0F1720; border-color: #FFFFFF; }