/* Urban revamp styles */
/* Fonts: Permanent Marker (headline), Raleway (body), Great Vibes (script) */

:root{
    --bg: #000000;
    --card: #0f0f0f;
    --pink: #ec0ad5;
    --pink-2: #ff55d9;
    --light: #ffffff;
    --muted: #9a9a9a;
    --glass: rgba(255,255,255,0.03);
  }
  
  /* Reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Raleway", sans-serif;
    background: var(--bg);
    color: var(--light);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
  }
  
  /* NAVBAR */
  .site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(0,0,0,0.85),rgba(0,0,0,0.6));backdrop-filter: blur(2px)}
  .navbar{
    max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  }
  .logo-img{height:60px; width:auto; object-fit:contain}
  
  /* toggle */
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
  .nav-toggle .bar{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:all .25s ease}
  .nav-toggle.open .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle.open .bar:nth-child(2){opacity:0}
  .nav-toggle.open .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  
  /* Menu */
  .nav-menu{display:flex;gap:18px;list-style:none;align-items:center}
  .nav-menu a{color:#fff;text-decoration:none;padding:8px 10px;display:inline-block;position:relative;font-weight:600}
  .nav-menu a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:3px;background:var(--pink);transform:translateX(-50%);transition:width .25s}
  .nav-menu a:hover::after{width:70%}
  a.cta{background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#fff;padding:10px 16px;border-radius:6px;box-shadow:0 6px 18px rgba(236,10,213,0.18)}
  
/* HERO */
.hero { padding: 48px 20px 60px; }
.hero-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
}

/* STATIC POLAROID COLLEGE (no carousel) */
.hero-left {
  position: relative;
  height: 520px; /* ensure space for absolutely-positioned polaroids */
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.polaroid {
  width: 260px; height: 260px;
  background: #fff; padding: 14px 14px 28px;
  border-radius: 6px; border: 8px solid #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,0.7);
  position: absolute; transform-origin: center center; overflow: hidden;
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placement and tilt */
.polaroid-top    { top: 10%; left: 6%;  transform: rotate(-14deg) scale(.98); }
.polaroid-mid    { top: 34%; left: 34%; transform: rotate(6deg)   scale(1.02); width: 340px; height: 260px; }
.polaroid-bottom { bottom: 6%; left: 6%; transform: rotate(20deg)  scale(.98); }

/* RIGHT TEXT */
.hero-right { padding: 28px; }
.micro { color: var(--pink); font-weight: 700; letter-spacing: .6px; margin-bottom: 6px; }
.headline{
  font-family: "Permanent Marker", sans-serif;
  font-size: 64px; line-height: .9; margin: 4px 0 12px;
  text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 4px 18px rgba(236,10,213,0.12);
  /* proper gradient text */
  background: linear-gradient(180deg, var(--pink), #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-family: "Great Vibes", cursive; font-size: 34px; margin: 6px 0 14px; color: #e6e6e6; }
.sub { color: var(--muted); max-width: 520px; margin-bottom: 20px; }

/* CTA */
.urban-btn {
  display: inline-block; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--pink), var(--pink-2)); color: #fff; border: none;
  box-shadow: 0 6px 28px rgba(236,10,213,0.22); transition: transform .22s, box-shadow .22s;
}
.urban-btn:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(236,10,213,0.32); }

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-left { height: 420px; }
  .polaroid-mid { left: 18%; top: 28%; }
  .polaroid-top { left: 60%; top: 6%; }
  .polaroid-bottom { left: 30%; bottom: 4%; }
  .headline { font-size: 48px; }
}
@media (max-width: 675px){
  .hero-left { display: none; } /* keep content first on mobile */
  .hero-right { text-align: center; }
  .headline { font-size: 36px; }
}

  /* SERVICES */
  .services{max-width:1200px;margin:48px auto;padding:0 20px;text-align:center}
  .services h2{font-size:28px;margin-bottom:18px;color:#fff}
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
  .service{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.04);
    padding:20px;border-radius:10px;font-weight:700;display:flex;gap:12px;align-items:center;justify-content:center;flex-direction:column
  }
  .service i{font-size:22px;color:var(--pink);margin-bottom:8px}
  .service span{color:#fff}
  
  /* FOOTER */
  .site-footer{background:linear-gradient(180deg,#050505,#0f0f0f);padding:36px 20px;margin-top:40px}
  .footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .socials a{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;margin-right:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#fff;text-decoration:none}
  .footer-logo{height:50px;object-fit:contain;margin-right:14px}
  .footer-inner p{color:#bdbdbd;font-size:14px}
  
  /* RESPONSIVE */
  @media (max-width: 980px){
    .hero-inner{grid-template-columns:1fr;gap:28px}
    .hero-left{height:420px}
    .polaroid-mid{left:18%;top:28%}
    .polaroid-top{left:60%;top:6%}
    .polaroid-bottom{left:30%;bottom:4%}
    .headline{font-size:48px}
    .services-grid{grid-template-columns:repeat(2,1fr)}
  }
  
  @media (max-width: 675px){
    .nav-menu{position:fixed;right:0;top:0;height:100%;width:260px;background:linear-gradient(180deg,#0f0f0f,#070707);flex-direction:column;padding:80px 20px;transform:translateX(100%);transition:transform .28s}
    .nav-menu.open{transform:translateX(0)}
    .nav-toggle{display:block}
    .nav-menu a{font-size:18px;padding:12px 0}
    .hero-left{display:none} /* hide collage on small screens to prioritize content */
    .hero-right{text-align:center}
    .headline{font-size:36px}
    .services-grid{grid-template-columns:1fr}
    .polaroid{display:none}
  }
  





  /* Products page additions */
.products-hero{padding:40px 20px;background:#000;color:#fff;text-align:center}
.products-hero h1{font-family:"Permanent Marker", system-ui, sans-serif;font-size:42px;margin:0}
.products-hero p{color:#cfcfcf;margin-top:8px}

.products-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:16px 20px;background:#111;border-bottom:1px solid rgba(255,255,255,0.06)}
.products-toolbar .pill{border:1px solid rgba(255,255,255,0.14);background:#111;color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.products-toolbar .pill.active{background:linear-gradient(90deg,#ec0ad5,#ff55d9);border-color:transparent}
.products-toolbar input[type="search"]{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.14);background:#0b0b0b;color:#fff;min-width:240px}

.products-wrap{max-width:1200px;margin:24px auto;padding:0 20px}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 20px rgba(0,0,0,0.06)}
.product-media{aspect-ratio:4/3;background:#f5f5f5;display:flex;align-items:center;justify-content:center}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-body{padding:12px 14px}
.product-title{font-weight:800;margin:0 0 4px}
.product-meta{font-size:0.9rem;color:#595959}
.product-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:0.75rem;background:#f6e9f6;color:#40013a;border:1px solid #f0b3e3;border-radius:999px;padding:4px 8px}

@media (max-width:980px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:675px){.products-grid{grid-template-columns:1fr}}
  


/* Packages page (urban) */
.packages-hero{padding:40px 20px;background:#000;color:#fff;text-align:center;border-bottom:1px solid rgba(255,255,255,0.06)}
.packages-hero h1{font-family:"Permanent Marker",system-ui,sans-serif;font-size:42px;margin:0}
.packages-hero p{color:#cfcfcf;margin-top:8px}

.packages-wrap{max-width:1200px;margin:24px auto;padding:0 20px}
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.package-card{
  position:relative;background:#0f0f0f;border:1px solid rgba(255,255,255,0.06);border-radius:14px;
  box-shadow:0 10px 20px rgba(0,0,0,0.15);padding:16px;display:flex;flex-direction:column;gap:12px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.package-card:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(236,10,213,0.15); border-color:rgba(236,10,213,0.35); }

.pkg-head{display:flex;align-items:center;justify-content:space-between}
.pkg-title{font-weight:900;letter-spacing:.3px}
.pkg-price{
  font-weight:900;padding:6px 10px;border-radius:8px;
  background:linear-gradient(90deg,#ec0ad5,#ff55d9);color:#fff;box-shadow:0 6px 20px rgba(236,10,213,0.25)
}

.pkg-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pkg-list li{display:flex;gap:10px;align-items:flex-start;color:#dcdcdc}
.pkg-list i{color:#ec0ad5;margin-top:2px}

.pkg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.package-card .button{
  background:linear-gradient(90deg,#ec0ad5,#ff55d9);color:#fff;border:none;border-radius:8px;padding:10px 14px;
  font-weight:800;cursor:pointer;box-shadow:0 6px 24px rgba(236,10,213,0.22);text-decoration:none;display:inline-block
}
.package-card .button:hover{filter:brightness(1.06)}
.package-card .button.outline{
  background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff;box-shadow:none
}
.package-card .button.outline:hover{border-color:#fff}

.badge-popular .pkg-price{background:linear-gradient(90deg,#ff6b6b,#ff8e53)}
.pkg-badge{
  position:absolute; top:12px; left:12px; font-size:.75rem; font-weight:900; letter-spacing:.4px;
  background:#1a1a1a; border:1px solid rgba(255,255,255,0.14); color:#fff; border-radius:999px; padding:4px 8px;
}

/* Focused deep-link highlight */
.pkg-focus{outline:2px solid #ec0ad5; box-shadow:0 0 0 6px rgba(236,10,213,0.12) inset}

/* Responsive */
@media (max-width:980px){ .packages-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:675px){ .packages-grid{grid-template-columns:1fr} }