/* ============================================================
   SERENA CURA — Modernization Layer
   Additive enhancement over style.css / components.css.
   Palette, fonts and structure inherited. Nothing removed.
   ============================================================ */

:root{
  --dur-fast:.18s;
  --dur:.42s;
  --dur-slow:.7s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ring:0 0 0 3px rgba(250,203,110,.55);
  --elev-1:0 1px 2px rgba(30,50,37,.06), 0 2px 8px rgba(30,50,37,.05);
  --elev-2:0 4px 12px rgba(30,50,37,.08), 0 12px 32px rgba(30,50,37,.07);
  --elev-3:0 8px 24px rgba(30,50,37,.10), 0 24px 60px rgba(30,50,37,.10);
  --success:#2F7D50;
  --danger:#B4452F;
  --text-muted:var(--text-light);
}

/* ---------- Accessibility foundations ---------- */
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--secondary);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ============================================================
   1. ANNOUNCEMENT BAR  (sitewide, dismissible)
   ============================================================ */
.sc-announce{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--accent) 0%,#F7DC9A 45%,var(--tertiary) 100%);
  color:var(--secondary);
  font-size:.9rem;font-weight:600;
  border-bottom:1px solid rgba(45,67,55,.12);
}
.sc-announce[hidden]{display:none !important}
.sc-announce::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:sc-sheen 7s ease-in-out infinite;
}
@keyframes sc-sheen{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sc-announce-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;padding:11px 48px 11px 24px;
  max-width:var(--max-width);margin:0 auto;text-align:center;
}
.sc-announce-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--secondary);color:var(--accent);
  padding:4px 12px;border-radius:50px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}
.sc-pulse{width:7px;height:7px;border-radius:50%;background:#7ED9A0;flex-shrink:0;position:relative}
.sc-pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:#7ED9A0;animation:sc-ping 1.9s cubic-bezier(0,0,.2,1) infinite}
@keyframes sc-ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3);opacity:0}}
.sc-announce-text{color:var(--secondary)}
.sc-announce-link{
  color:var(--secondary);font-weight:800;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap;
}
.sc-announce-link:hover{color:#000}
.sc-announce-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:rgba(45,67,55,.10);border:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--secondary);transition:background var(--dur-fast);
}
.sc-announce-close:hover{background:rgba(45,67,55,.22)}
.sc-announce-short{display:none}
@media (max-width:760px){
  .sc-announce-inner{font-size:.82rem;gap:8px;padding:9px 42px 9px 14px}
  .sc-announce-tag{font-size:.63rem;padding:3px 9px}
  /* the full sentence wraps to 4 lines on a phone - show a compact one */
  .sc-announce-text{display:none}
  .sc-announce-short{display:inline}
}
@media (max-width:400px){
  .sc-announce-tag span.sc-pulse{display:none}
  .sc-announce-inner{gap:6px}
}

/* ============================================================
   2. NOW-AVAILABLE BANNER
   ============================================================ */
.sc-avail{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1E3225 0%,var(--primary) 48%,#3A5A4A 100%);
  color:#fff;padding:64px 0;
}
.sc-avail::before{
  content:'';position:absolute;top:-60%;right:-12%;width:56%;height:220%;
  background:radial-gradient(circle,rgba(250,203,110,.14) 0%,transparent 62%);
  pointer-events:none;animation:sc-drift 15s ease-in-out infinite alternate;
}
@keyframes sc-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,26px,0)}}
.sc-avail-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.sc-avail h2{color:#fff;margin-bottom:.65rem;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.sc-avail p{color:rgba(255,255,255,.86);font-size:1.05rem;max-width:52ch}
.sc-avail-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(250,203,110,.16);border:1px solid rgba(250,203,110,.42);
  color:var(--accent);padding:7px 16px;border-radius:50px;
  font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:18px;
}
.sc-avail-facts{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none;
}
.sc-avail-facts li{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:9px 16px;border-radius:10px;
  font-size:.9rem;font-weight:600;color:#fff;
}
.sc-avail-facts svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sc-avail-actions{display:flex;flex-wrap:wrap;gap:12px}
.sc-avail-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  padding:10px;backdrop-filter:blur(6px);
  box-shadow:var(--elev-3);
}
.sc-avail-card img{width:100%;height:250px;object-fit:cover;border-radius:14px;display:block}
.sc-avail-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:15px 12px 8px;
}
.sc-avail-price strong{color:var(--accent);font-size:1.7rem;font-weight:800;line-height:1}
.sc-avail-price span{color:rgba(255,255,255,.72);font-size:.84rem}
.sc-beds{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(126,217,160,.16);border:1px solid rgba(126,217,160,.4);
  color:#A8E7C0;padding:5px 12px;border-radius:50px;
  font-size:.76rem;font-weight:700;white-space:nowrap;
}
@media (max-width:900px){
  .sc-avail-grid{grid-template-columns:1fr;gap:30px}
  .sc-avail{padding:48px 0}
  .sc-avail-card img{height:210px}
}
@media (max-width:640px){
  .sc-avail-actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   3. PARTNERSHIP BANNER (property owners / landlords)
   ============================================================ */
.sc-partner{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent) 0%,#F6D98F 52%,var(--tertiary) 100%);
  color:var(--secondary);padding:60px 0;
}
.sc-partner::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 12% 84%,rgba(45,67,55,.10) 0%,transparent 46%),
                   radial-gradient(circle at 88% 16%,rgba(255,255,255,.5) 0%,transparent 46%);
}
.sc-partner-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
}
.sc-partner-icon{
  width:76px;height:76px;border-radius:20px;flex-shrink:0;
  background:var(--secondary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--elev-2);
}
.sc-partner-icon svg{width:36px;height:36px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sc-partner h2{color:var(--secondary);margin-bottom:.4rem;font-size:clamp(1.35rem,2.8vw,1.95rem)}
.sc-partner p{color:rgba(35,56,43,.84);margin-bottom:0;font-size:1rem;max-width:60ch}
.sc-partner-points{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;padding:0;list-style:none;
}
.sc-partner-points li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:600;color:var(--secondary);
}
.sc-partner-points svg{width:16px;height:16px;stroke:var(--secondary);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sc-partner .btn-dark{
  background:var(--secondary);color:var(--accent);white-space:nowrap;
  padding:15px 32px;border-radius:10px;font-weight:700;font-size:1rem;
  box-shadow:var(--elev-2);
}
.sc-partner .btn-dark:hover{background:#16241B;color:#fff;transform:translateY(-2px)}
@media (max-width:1024px){
  .sc-partner-grid{grid-template-columns:auto 1fr;gap:22px}
  .sc-partner-grid .btn-dark{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .sc-partner{padding:44px 0}
  .sc-partner-grid{grid-template-columns:1fr;gap:18px}
  .sc-partner-icon{width:60px;height:60px;border-radius:16px}
  .sc-partner-icon svg{width:28px;height:28px}
  .sc-partner .btn-dark{width:100%;justify-content:center}
}

/* ============================================================
   4. SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-left{transform:translateX(-30px)}
.reveal-right{transform:translateX(30px)}
.reveal-scale{transform:scale(.94)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
.reveal-d5{transition-delay:.40s}
/* keep legacy .fade-in working even if observer changes */
.fade-in.is-in{opacity:1;transform:none}

/* ============================================================
   5. HEADER — glass on scroll
   ============================================================ */
.site-header{transition:box-shadow var(--dur) var(--ease-soft),background var(--dur) var(--ease-soft),backdrop-filter var(--dur)}
.site-header.scrolled{
  background:rgba(253,251,247,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(45,67,55,.08),0 8px 28px rgba(30,50,37,.09);
}
.sc-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--accent),var(--tertiary));
  transition:width .1s linear;pointer-events:none;
}

/* ============================================================
   6. BUTTONS & CARDS polish
   ============================================================ */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform .55s var(--ease-out);
}
.btn:hover::after{transform:translateX(100%)}
.btn:active{transform:translateY(1px) scale(.995)}

.card,.housing-card,.testimonial{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.card:hover,.housing-card:hover{transform:translateY(-6px);box-shadow:var(--elev-3)}
.housing-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg)}
.housing-card-images{position:relative;height:220px}
.housing-card-images img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.housing-card:hover .housing-card-images img{transform:scale(1.07)}
.housing-card-images::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(30,50,37,.42),transparent 46%);
}
.housing-card-type,.housing-card-badge{position:absolute;z-index:2}
.housing-card-type{left:14px;top:14px;background:rgba(253,251,247,.94);color:var(--primary);padding:5px 12px;border-radius:50px;font-size:.72rem;font-weight:700}
.housing-card-badge{right:14px;top:14px;padding:5px 12px;border-radius:50px;font-size:.72rem;font-weight:800;letter-spacing:.03em}
.badge-available{background:var(--success);color:#fff;box-shadow:0 0 0 0 rgba(47,125,80,.6);animation:sc-badge 2.6s ease-out infinite}
@keyframes sc-badge{0%{box-shadow:0 0 0 0 rgba(47,125,80,.55)}70%,100%{box-shadow:0 0 0 12px rgba(47,125,80,0)}}
.badge-unavailable{background:rgba(98,90,83,.9);color:#fff}
.housing-card--muted{opacity:.82;filter:saturate(.72)}
.housing-card--muted:hover{opacity:1;filter:none}

/* ============================================================
   7. AVAILABILITY GRID — skeletons + states
   ============================================================ */
.sc-skel{border-radius:var(--radius);background:linear-gradient(100deg,var(--alt) 30%,#EFEAE0 50%,var(--alt) 70%);background-size:220% 100%;animation:sc-shimmer 1.5s linear infinite}
@keyframes sc-shimmer{to{background-position:-220% 0}}
.sc-skel-card{height:172px}
.sc-empty,.sc-error{
  grid-column:1/-1;text-align:center;padding:40px 24px;border-radius:var(--radius);
  background:var(--alt);color:var(--text-light);font-size:.95rem;
}
.sc-error{background:#FBEFEC;color:var(--danger)}

/* ============================================================
   8. FORMS — multi-step polish (markup unchanged)
   ============================================================ */
.form-group input,.form-group textarea,.form-group select{
  min-height:48px;font-size:16px; /* 16px stops iOS zoom-on-focus */
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{background:#fff}
.form-group input:user-invalid,.form-group select:user-invalid{border-color:var(--danger)}
.sc-form label{cursor:pointer}
.sc-form input[type=checkbox],.sc-form input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--primary);cursor:pointer}
.form-progress-step .step-circle{transition:background var(--dur),color var(--dur),transform var(--dur)}
.form-progress-step.active .step-circle{transform:scale(1.12)}
.sc-form .btn{min-height:50px}

/* ============================================================
   9. MISC
   ============================================================ */
.sticky-call{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.sticky-call:hover{transform:scale(1.08)}
.sc-countup{font-variant-numeric:tabular-nums}
img{background:var(--alt)}
section{scroll-margin-top:90px}
@media (max-width:768px){
  .btn{min-height:46px}
  .nav a{min-height:46px;display:flex;align-items:center}
}

/* ============================================================
   10. PHOTO SLIDER (availability banner)
   ============================================================ */
.sc-slider{position:relative;border-radius:14px;overflow:hidden;background:var(--alt);touch-action:pan-y}
.sc-slider-viewport{overflow:hidden;border-radius:14px}
.sc-slider-track{display:flex;will-change:transform;transition:transform .55s var(--ease-out)}
.sc-slider-track.no-anim{transition:none}
.sc-slide{flex:0 0 100%;min-width:100%;position:relative;line-height:0}
.sc-slide img{width:100%;height:290px;object-fit:cover;display:block}
.sc-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(30,50,37,.5),transparent 45%);pointer-events:none}

.sc-slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(253,251,247,.9);color:var(--secondary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(30,50,37,.28);
  transition:background var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);
  opacity:0;
}
.sc-slider:hover .sc-slider-nav,.sc-slider:focus-within .sc-slider-nav{opacity:1}
.sc-slider-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.sc-slider-nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sc-slider-prev{left:10px}
.sc-slider-next{right:10px}

.sc-slider-dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.sc-slider-dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:all var(--dur-fast);
}
.sc-slider-dots button:hover{background:rgba(255,255,255,.8)}
.sc-slider-dots button[aria-selected="true"]{background:var(--accent);width:22px;border-radius:50px}

.sc-slider-count{
  position:absolute;right:12px;top:12px;z-index:3;
  background:rgba(30,50,37,.74);color:#fff;backdrop-filter:blur(4px);
  padding:4px 11px;border-radius:50px;font-size:.74rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .sc-slide img{height:230px}
  .sc-slider-nav{opacity:1;width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .sc-slider-track{transition:none}
}

/* ghost button for use on the dark availability banner */
.sc-btn-ghost{
  background:rgba(255,255,255,.08);color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
}
.sc-btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#fff;transform:translateY(-1px)}