/* ==================================================================
   THE POINTE NORTH HILLS — On Video
   Design language cloned from the Modern Storage® Unpacked™ podcast
   site blueprint, rebranded in The Pointe North Hills' teal/charcoal.
================================================================== */
:root{
  --charcoal:#1a1a1a;
  --teal:#00748f;
  --teal-hover:#005d72;
  --teal-tint:rgba(0,116,143,.12);
  --bg:#f7f9fa;
  --border:#e6eaec;
  --ink:#1a1a1a;
  --body:#4b5563;
  --muted:#6b7280;
  --faint:#9ca3af;
  --max:1280px;
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}

.wordmark{font-family:"Bebas Neue",sans-serif;letter-spacing:.03em;color:var(--teal);font-size:1.5rem;line-height:1;white-space:nowrap}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:800;font-size:.92rem;border:none;transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 10px 24px rgba(0,116,143,.28)}
.btn-teal:hover{background:var(--teal-hover)}
.btn-ghost-dark{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.18)}
.btn-charcoal{background:var(--charcoal);color:#fff}
.btn-charcoal:hover{background:#333}
.btn-white{background:#fff;color:var(--teal)}
.btn-white:hover{background:#eef7f9}
.btn-sm{padding:9px 20px;font-size:.82rem}
.btn svg{width:14px;height:14px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:1px solid rgba(255,255,255,.1);transition:background .35s,border-color .35s}
/* Home page: header floats over full-viewport hero */
body.page-home header{position:fixed;width:100%;background:var(--charcoal);border-bottom-color:rgba(255,255,255,.1)}
.nav-inner{max-width:1400px;margin:0 auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.header-logo{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-links>li{position:relative}
.nav-links>li>a{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#e5e7eb;padding:10px 14px;border-radius:6px;white-space:nowrap;transition:color .2s,background .2s}
.nav-links>li>a:hover,.nav-links>li>a.on{color:#fff;background:rgba(255,255,255,.1)}
.cta-header{
  margin-left:10px;
  flex-shrink:0;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#00a8c9,#00748f);
  box-shadow:0 6px 22px rgba(0,116,143,.5);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.cta-header:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,116,143,.65)}
.burger{display:none;background:none;border:none;padding:8px;flex-shrink:0;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#d1d5db;margin:4px 0;border-radius:2px}
@media(max-width:1260px){.nav-links{display:none}.burger{display:block}}
@media(max-width:480px){
  .nav-inner{padding:12px 14px;gap:8px}
  .header-logo{height:36px}
  .cta-header{padding:8px 12px;font-size:.72rem;margin-left:6px}
  .burger{padding:6px}
}

/* ---------- mobile nav panel ---------- */
.mnav{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55)}
.mnav.open{display:block}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84%);background:var(--charcoal);padding:24px 20px;overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
.mnav-close{display:block;margin-left:auto;background:none;border:none;color:#fff;font-size:1.8rem;line-height:1;padding:6px 10px;cursor:pointer}
.mnav-panel a{display:block;padding:14px 6px;font-size:.95rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#e5e7eb;border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s}
.mnav-panel a:hover,.mnav-panel a.on{color:var(--teal)}
.mnav-panel a.mnav-phone{margin-top:16px;border:none;background:var(--teal);color:#fff;border-radius:999px;text-align:center;padding:14px}
@media(min-width:1261px){.mnav{display:none!important}}

/* ---------- hero (resort banner) ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  max-height:1180px;
  display:flex;
  align-items:flex-start;
  color:#fff;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:-2% -2% -2% -2%;
  background-image:url('assets/pool-grand-hero.jpg');
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  animation:heroZoom 26s ease-out forwards;
  will-change:transform;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(4,8,11,.32) 0%, rgba(4,8,11,.12) 40%, rgba(4,8,11,0) 70%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto;padding:0 28px 0;animation:heroFadeUp 1.1s var(--ease) .15s both;display:flex;flex-direction:column;align-items:center;text-align:center}
body.page-home .hero-inner{padding-top:108px}
.hero h1{font-size:clamp(3.6rem,7.5vw,7rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin:0 0 48px;text-shadow:0 6px 34px rgba(0,0,0,.55)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.btn-hero-lg{padding:24px 48px;font-size:1.15rem}
.btn-hero-primary{
  background:linear-gradient(135deg,#00c2e0 0%,#00a8c9 45%,#005d72 100%);
  color:#fff;
  box-shadow:0 12px 34px rgba(0,168,201,.5),0 0 0 1px rgba(255,255,255,.08) inset;
  border:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn-hero-primary:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(0,168,201,.65),0 0 0 1px rgba(255,255,255,.14) inset}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@media(max-width:768px){.hero{height:92vh;min-height:600px}.hero-bg{background-position:center 48%}}
@media(max-width:480px){.hero{height:88vh;min-height:560px}.hero-sub{margin-bottom:36px}}

.thumb{display:block;position:relative;width:100%;aspect-ratio:16/9;background:var(--charcoal);overflow:hidden;border-radius:16px;cursor:pointer}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.thumb:hover img{transform:scale(1.05)}
.thumb .veil{position:absolute;inset:0;background:rgba(0,0,0,.15);transition:background .2s}
.thumb:hover .veil{background:rgba(0,0,0,.42)}
.thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.thumb .play span{width:56px;height:56px;border-radius:999px;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.35);transform:scale(.9);transition:transform .2s}
.thumb:hover .play span{transform:scale(1.08)}
.thumb .play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.thumb .tag{position:absolute;top:12px;left:12px;background:var(--teal);color:#fff;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:5px}


/* ---------- featured ---------- */
.featured{background:var(--bg);border-bottom:1px solid var(--border);padding:64px 0}
.divider{display:flex;align-items:center;gap:12px;margin-bottom:32px;color:var(--faint)}
.divider .line{height:1px;flex:1;background:var(--border)}
.divider span.lbl{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.featured-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1024px){.featured-grid{grid-template-columns:1fr 1fr;gap:48px}}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pill{font-size:.72rem;font-weight:800;background:var(--charcoal);color:#fff;padding:5px 14px;border-radius:999px;transition:background .2s}
.pill:hover{background:var(--teal)}
.featured h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:900;line-height:1.25;margin:0 0 16px}
.featured p.body{color:var(--body);line-height:1.7;margin:0 0 24px}
.takeaways{margin:0 0 24px}
.takeaways .lbl{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.takeaways li{display:flex;gap:12px;font-size:.9rem;color:#374151}
.takeaways .num{color:var(--teal);font-weight:900;flex-shrink:0}
.featured-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- filter bar ---------- */
.filter-bar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:87px;z-index:40}
.filter-bar .wrap{padding:14px 24px;overflow-x:auto}
.filter-row{display:flex;gap:8px;min-width:max-content}
.chip{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:#f0f2f3;color:#6b7280;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.chip:hover{background:var(--teal);color:#fff}
.chip.active{background:var(--charcoal);color:#fff}

/* ---------- video grid ---------- */
.grid-section{background:#e9eef4;padding:64px 24px}
.grid-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:36px;max-width:var(--max);margin-left:auto;margin-right:auto}
.grid-head h2{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;margin:0}
.grid-head p{color:var(--muted);margin:6px 0 0}
.grid-head .view-all{font-size:.88rem;font-weight:800;color:var(--teal)}
.grid-head .view-all:hover{color:var(--teal-hover)}
.card-grid{display:grid;grid-template-columns:1fr;gap:28px;max-width:var(--max);margin-left:auto;margin-right:auto}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.card-grid{grid-template-columns:1fr 1fr 1fr}}
.vcard{background:#fff;border:1px solid #dce2e8;border-radius:20px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08),0 0 0 0 transparent;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease}
.vcard:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.13),0 4px 10px rgba(0,0,0,.06)}
.vcard .body-p{padding:20px;display:flex;flex-direction:column;flex:1}
.vcard .date{font-size:.72rem;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.vcard h3{font-size:1rem;font-weight:900;line-height:1.35;margin:0 0 10px}
.vcard a.title:hover h3{color:var(--teal)}
.vcard p.desc{font-size:.88rem;color:var(--muted);line-height:1.6;margin:0 0 16px;flex:1}
.vcard .watch{align-self:flex-start;font-size:.76rem;font-weight:900;color:#fff;background:var(--teal);padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:background .2s}
.vcard .watch:hover{background:var(--teal-hover)}
.vcard .watch svg{width:11px;height:11px}
.grid-more{text-align:center;margin-top:48px;max-width:var(--max);margin-left:auto;margin-right:auto}

/* ---------- categories ---------- */
.categories{background:var(--charcoal);padding:80px 0}
.cat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
.cat-head h2{color:#fff;font-size:1.9rem;font-weight:900;letter-spacing:-.02em;margin:6px 0 0}
.cat-head p{color:#9ca3af;max-width:32ch;margin:8px 0 0}
.cat-head .view-all{color:var(--teal);font-size:.88rem;font-weight:800}
.cat-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.cat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cat-grid{grid-template-columns:1fr 1fr 1fr}}
.cat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:24px;display:flex;gap:16px;align-items:flex-start;transition:all .2s}
.cat-card:hover{background:rgba(255,255,255,.08);border-color:var(--teal)}
.cat-dot{width:8px;height:8px;border-radius:999px;background:var(--teal);margin-top:8px;flex-shrink:0;transition:transform .2s}
.cat-card:hover .cat-dot{transform:scale(1.5)}
.cat-card h3{color:#fff;font-weight:900;margin:0 0 6px;transition:color .2s}
.cat-card:hover h3{color:var(--teal)}
.cat-card p{color:#9ca3af;font-size:.8rem;line-height:1.6;margin:0 0 10px}
.cat-card .reveal-link{font-size:.75rem;font-weight:800;color:var(--teal);opacity:0;transition:opacity .2s}
.cat-card:hover .reveal-link{opacity:1}

/* ---------- subscribe cta ---------- */
.subscribe-cta{background:var(--teal);padding:64px 0;text-align:center}
.subscribe-cta .wrap{max-width:640px}
.subscribe-cta h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:900;letter-spacing:-.02em;margin:0 0 14px}
.subscribe-cta p{color:rgba(255,255,255,.85);font-size:1.05rem;margin:0 0 36px}
.subscribe-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:#9ca3af}
.f-conv{background:var(--teal);padding:20px 0}
.f-conv .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.f-conv p{color:#fff;font-weight:700;margin:0;font-size:.98rem}
.f-sub{border-bottom:1px solid rgba(255,255,255,.1);padding:32px 0}
.f-sub .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.f-sub h3{color:#fff;font-size:1.2rem;font-weight:900;margin:0}
.f-sub-ctas{display:flex;flex-wrap:wrap;gap:12px}
.f-cols{padding:48px 0;display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){.f-cols{grid-template-columns:5fr 3fr 4fr}}
.f-col h4{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;margin:0 0 18px}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.f-col ul a{font-size:.86rem;font-weight:600;color:#d1d5db}
.f-col ul a:hover{color:var(--teal)}
.f-about p{max-width:36ch;line-height:1.7;font-size:.9rem;margin:14px 0 20px}
.f-social{display:flex;gap:16px}
.f-social a{font-size:.78rem;font-weight:700;color:#6b7280}
.f-social a:hover{color:var(--teal)}
.f-legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.78rem;color:#6b7280}

/* ==================================================================
   CATEGORY PAGES (/apartment-tours.html, etc.)
================================================================== */
.cat-page-header{background:var(--charcoal);color:#fff;padding:44px 0 36px}
.cat-page-header .back-btn{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#9ca3af;margin-bottom:20px;transition:color .2s}
.cat-page-header .back-btn:hover{color:#fff}
.cat-page-header h1{font-size:clamp(2rem,4vw,3.4rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin:0 0 10px}
.cat-page-header .sub{color:#9ca3af;font-size:.96rem;margin:0}
.cat-empty{text-align:center;padding:80px 24px;max-width:var(--max);margin-left:auto;margin-right:auto}
.cat-empty h3{font-size:1.4rem;font-weight:900;margin:0 0 12px;color:var(--ink)}
.cat-empty p{color:var(--muted);max-width:46ch;margin:0 auto 28px}

/* ---------- video card category tag ---------- */
.vcard .cat{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin:0 0 8px;display:inline-block;transition:color .2s}
.vcard .cat:hover{color:var(--teal-hover)}
/* ---------- category page archive context ---------- */
.cat-page-header .archive-label{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:10px}
.cat-page-header .count{font-size:.85rem;color:#9ca3af;margin-top:12px;font-weight:600}

/* ==================================================================
   VIDEO DETAIL PAGE (/videos/[slug].html)
================================================================== */
.detail-hero{background:var(--charcoal);color:#fff;padding:32px 0 48px}
.breadcrumb{font-size:.78rem;font-weight:700;color:#9ca3af;margin-bottom:20px}
.breadcrumb a{color:#9ca3af}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .sep{margin:0 6px;color:#4b5563}
.detail-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.detail-hero h1{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;max-width:44ch}
.detail-meta{display:flex;flex-wrap:wrap;gap:16px;color:#9ca3af;font-size:.85rem;font-weight:600}
.detail-meta span{display:inline-flex;align-items:center;gap:6px}

.detail-body{max-width:900px;margin:0 auto;padding:48px 24px 80px}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--charcoal);box-shadow:0 20px 50px rgba(0,0,0,.15);margin-bottom:16px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}

.detail-body h2{font-size:1.5rem;font-weight:900;letter-spacing:-.01em;margin:0 0 20px}
.summary-box{background:var(--bg);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;padding:24px 28px;margin-bottom:48px}
.summary-box .lbl{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:12px}
.summary-box p{color:#374151;line-height:1.75;margin:0;font-size:1rem}

.takeaway-list{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.takeaway-card{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 24px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.takeaway-card .tnum{font-size:1.4rem;font-weight:900;color:var(--teal);flex-shrink:0;line-height:1}
.takeaway-card p{margin:0;color:#374151;line-height:1.65;font-size:.96rem}

.notes-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:32px;margin-bottom:56px}
.notes-box p{color:var(--body);line-height:1.8;margin:0 0 20px;font-size:.98rem}
.notes-box p:last-child{margin-bottom:0}

.related-head{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.related-grid{grid-template-columns:1fr 1fr 1fr}}
.related-card{display:block}
.related-card .thumb{margin-bottom:10px}
.related-card .date{font-size:.7rem;color:var(--faint);font-weight:700;text-transform:uppercase;margin:0 0 4px}
.related-card h3{font-size:.9rem;font-weight:800;line-height:1.35;margin:0}
.related-card:hover h3{color:var(--teal)}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:800;color:var(--teal);margin-top:40px}
.back-link:hover{color:var(--teal-hover)}

/* ---------- load more ---------- */
.card-grid.limited .vcard:nth-child(n+13){display:none}