/* cf-next (2026-10-24): visual upgrades layer. On for everyone since 2026-10-24. Uses cf-kit tokens. */

/* 1. Town page service cards: the whole card is the link; a plain text link instead of a two-line outline pill */
html body #coastal-redesign .services-section .service-card{display:flex !important;flex-direction:column !important;position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
html body #coastal-redesign .services-section .service-card:hover{border-color:var(--ck-navy) !important;box-shadow:0 18px 36px -28px rgba(15,45,89,.45) !important}
html body #coastal-redesign .services-section .service-card .card-cta{display:inline-flex !important;align-items:center;gap:6px;width:auto !important;min-height:0 !important;margin-top:auto !important;padding:10px 0 0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;color:var(--ck-navy) !important;font-size:.9rem !important;font-weight:700 !important;text-align:left !important;justify-content:flex-start !important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ck-oak)}
html body #coastal-redesign .services-section .service-card .card-cta:hover{text-decoration-thickness:2px}
html body #coastal-redesign .services-section .service-card .card-cta:focus-visible{outline:3px solid rgba(15,45,89,.35);outline-offset:3px}

html body #coastal-redesign .services-section .service-card .card-meta{flex:1 1 auto}

/* 2. Footer: hours on their own line under the phone number */
html .cf-footer .cf-hours{display:block !important;flex-basis:100%;width:100%;margin:6px 0 0 !important}

/* 3. Projects page on wider screens: every project visible in a grid instead of a cut-off carousel */
@media (min-width:901px){
  html body #coastal-redesign .portfolio-grid.slider-mode{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;overflow:visible !important;scroll-snap-type:none !important;gap:28px !important}
  html body #coastal-redesign .portfolio-grid.slider-mode .portfolio-card{min-width:0 !important;flex:none !important}
  html body #coastal-redesign .portfolio-slider-btn{display:none !important}
}
html body #coastal-redesign .portfolio-card .portfolio-img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto !important}
html body #coastal-redesign .portfolio-card{cursor:pointer}
html body #coastal-redesign .portfolio-card h3{font-size:1.15rem !important;line-height:1.3 !important}

/* 4. Case studies: readable label on the photo banner */
html body #coastal-redesign .cf-location-eyebrow{color:#e0be6a !important;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* 5. Photo viewer for project photos */
.cfx-zoom{cursor:zoom-in}
.cfx-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,18,32,.92);display:flex;align-items:center;justify-content:center;padding:56px 16px 72px}
.cfx-lb[hidden]{display:none}
.cfx-lb img{max-width:min(1200px,100%);max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.cfx-lb figcaption{position:absolute;left:16px;right:16px;bottom:20px;text-align:center;color:#e6e9ef;font:500 .92rem/1.4 "CF Inter",Inter,system-ui,sans-serif}
.cfx-lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer}
.cfx-lb button:hover{background:rgba(255,255,255,.22)}
.cfx-lb button:focus-visible{outline:3px solid #e0be6a;outline-offset:2px}
.cfx-lb .x{top:12px;right:12px}
.cfx-lb .pv{left:12px;top:50%;transform:translateY(-50%)}
.cfx-lb .nx{right:12px;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){html body #coastal-redesign .services-section .service-card{transition:none}}