/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  /* Sunset Gradient Palette from logo */
  --color-sunset-pink: #FF5C9C;
  --color-sunset-orange: #FFA845;
  --color-sunset-yellow: #FFD15C;
  --color-ocean-blue: #6CE3FF;
  /* Deep purple background tone */
  --color-deep-purple: #2D1E3A;
  /* Near-white for backgrounds */
  --color-near-white: #FDFDFD;
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --max-width: 1200px;
}

/* Body */
body {
  font-family: var(--font-family);
  color: var(--color-deep-purple);
  line-height: 1.6;
  background: var(--color-near-white);
}

/* Container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
header {
   background: linear-gradient(
    180deg,
    var(--color-sunset-pink) 0%,
    var(--color-sunset-orange) 25%,
    var(--color-sunset-yellow) 50%,
    var(--color-ocean-blue) 75%,
    var(--color-ocean-blue) 100%
  );
  opacity: 0.85;;
  border-bottom: 1px solid #eaeaea;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo img {
  max-height: 150px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  color: var(--color-deep-purple);
  font-weight: bold;
  transition: color 0.3s ease;
}
nav a:hover {
  color: var(--color-sunset-pink);
}

/* Hero Section */
.hero {
  position: relative;
  height: 60vh;
  background: var(--color-deep-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.hero-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Sunset gradient effect */
  background: linear-gradient(
    180deg,
    var(--color-sunset-pink) 0%,
    var(--color-sunset-orange) 25%,
    var(--color-sunset-yellow) 50%,
    var(--color-ocean-blue) 75%,
    var(--color-ocean-blue) 100%
  );
  opacity: 0.85;
}
.hero .btn {
  position: relative;
  z-index: 1;
}
/* ── Home Page Hero ── */
.hero-section {
  background: linear-gradient(
    to right,
    rgba(255, 92, 156, 0.9),
    rgba(255, 180, 60, 0.9)
  ), url('../assets/hero-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}

.hero-section .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-section .hero-subtext {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-section .btn-primary {
  padding: 0.75rem 2rem;
  font-size: 1.125rem;
  background: var(--color-sunset-pink);
  border: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.hero-section .btn-primary:hover {
  background: var(--color-sunset-orange);
}


/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  transition: filter 0.3s ease;
}
.btn-primary {
  background: var(--color-sunset-orange);
  color: #ffffff;
}
.btn-primary:hover {
  filter: brightness(0.9);
}

/* Gallery Section */
.gallery {
  background: var(--color-near-white);
  padding: 4rem 0;
}
.gallery h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

/* Carousel Styles */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

/* Make every slide a 16:9 box */
.carousel-slide {
  position: relative;            /* for absolute‐positioned img */
  aspect-ratio: 16 / 9;          /* modern browsers */
  /* fallback for older browsers: */
  /* height: 50vh; */
  overflow: hidden;
  flex: 0 0 100%;                /* keep full‐width */
}

/* Fill and crop the image inside */
.carousel-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* crop to fill */
  object-position: center;       /* center the crop */
  display: block;
}

/* override for portraits */
.carousel-slide img.portrait {
  object-fit: contain;
  background: var(--color-near-white);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 2rem;
  z-index: 10;
}

.carousel-btn.prev {
  left: 1rem;
}

.carousel-btn.next {
  right: 1rem;
}




/* Footer */
footer {
  background: var(--color-deep-purple);
  color: #ffffff;
  padding: 2rem 0;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.footer-content h3 {
  margin-bottom: 1rem;
}
.socials ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.socials a {
  color: #ffffff;
  text-decoration: none;
}
.subscribe input[type="email"] {
  padding: 0.5rem;
  border: none;
  border-radius: 3px;
  margin-right: 0.5rem;
}
.subscribe button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 3px;
  background: var(--color-sunset-pink);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.subscribe button:hover {
  opacity: 0.9;
}
.copyright {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }
}

/* HAMBURGER MENU */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--color-deep-purple);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* animate into “X” */
.hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* Hide nav by default on small screens */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
  nav {
    position: absolute;
    top: 60px;           /* adjust to your header height */
    left: 0;
    width: 100%;
    background: var(--color-near-white);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    z-index: 1000;
  }
  /* stack links vertically */
  .nav-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 2rem;

  }
  /* When open */
  /* when the nav-open class is present on <nav>, show it */
  nav.nav-open {
    max-height: 500px;   /* plenty to reveal all links */
  }
}

/* SOCIAL ICON HOVER */
.socials a {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.socials a:hover {
  color: var(--color-sunset-pink);
}

/* Lightbox Overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 30, 58, 0.9); /* deep-purple with opacity */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 80%;
  border: 5px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
/* Lightbox close button */
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

/* ========== Glam Page Styles ========== */
.glam {
  padding: 4rem 0;
  background: var(--color-ocean-blue);
  color: #fff;
}
.glam h2,
.glam h3 {
  text-align: center;
  margin-bottom: 1rem;
}
.glam .pricing {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.glam .plan {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 2rem;
  width: 320px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-deep-purple);
}
.glam .plan h4 {
  margin-bottom: 1rem;
  color: var(--color-sunset-pink);
}
.glam .plan .subtitle {
  font-style: italic;
  margin-bottom: 1rem;
}
.glam .pricing-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}
.glam .pricing-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-deep-purple);
}
.glam .pricing-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-sunset-orange);
}
.glam .note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-deep-purple);
}
.glam .add-on {
  margin-top: 1rem;
  font-weight: bold;
  color: var(--color-sunset-pink);
}
.glam .btn-primary {
  display: block;
  margin: 2rem auto 0;
}

/* Mobile helper button that opens the hamburger menu */
@media (max-width: 768px) {
  .btn-see-menu {
    display: inline-block;
    margin-top: 0.75rem;
    background: transparent;
    border: 2px solid var(--color-deep-purple);
    color: var(--color-deep-purple);
    font-weight: 600;
  }
  .btn-see-menu:active { transform: translateY(1px); }
}


/* Responsive tweak */
@media (max-width: 768px) {
  .glam .pricing {
    flex-direction: column;
    align-items: center;
  }
  .glam .plan {
    width: 100%;
    max-width: 400px;
  }
}

/* ===== Glam Gallery Styles ===== */
.glam-gallery {
  display: grid;
  /* auto-fit columns at minimum 180px each */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.glam-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* placeholder box (before real images go in) */
.glam-photo-placeholder {
  width: 100%;
  /* maintain 4:3 aspect ratio */
  padding-top: 75%;
  background-color: #f0f0f0;
  border: 2px dashed var(--color-sunset-pink);
}

/* once you swap in real <img> tags: */
.glam-gallery-item img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Tweak Glam carousel height & spacing */
.glam-carousel .carousel-slide .glam-photo-placeholder {
  /* reduce aspect ratio from 4:3 to 2:1 for a shorter box */
  padding-top: 50%;
}

.glam-carousel .carousel-track-container {
  /* space between carousel and pricing */
  margin-bottom: 2.5rem;
}

/* (If you need extra gap) */
.glam .pricing {
  margin-top: 2.5rem;
}

/* Glam headings & intro in sunset pink */
.glam h2,
.glam h3,
.glam .intro {
  color: var(--color-near-white);
}

/* Glam Carousel Core */
.glam-carousel {
  position: relative;
  overflow: hidden;
}

.glam-carousel .carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

/* Make every glam slide a consistent 16:9 container */
.glam-carousel .carousel-slide {
  flex: 0 0 100%;
  /* for modern browsers: */
  aspect-ratio: 16 / 9;
  /* fallback for older: */
  /* height: 50vh; */
  overflow: hidden;
  position: relative;
}

.glam-carousel .carousel-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}
.glam-carousel .carousel-slide img.contain {
  object-fit: contain;
  object-position: center;

}
.glam-carousel .carousel-track-container {
  background: transparent !important;
  padding: 0 !important;
}

/* ================= Playful Prints Page Styles ================= */
.fun-font, .fun-font * {
  font-family: 'Poppins', sans-serif;
}

/* Header cart styling */
.cart {
  margin-left: 1rem;
}
.cart img {
  width: 24px;
  vertical-align: middle;
}
#cart-count {
  background: var(--color-sunset-pink);
  color: #fff;
  border-radius: 50%;
  padding: 0.1rem 0.5rem;
  font-size: 0.9rem;
  margin-left: 0.2rem;
}

/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0;

}

.plan.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  position: relative;
  text-align: center;
}
.plan.card h4 {
  margin-bottom: 0.5rem;
  color: var(--color-deep-purple);
}
.plan.card .price {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-sunset-pink);
  margin-bottom: 1rem;

}

/* Add-ons grid */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.addon-item {
  background: var(--color-sunset-orange);
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .addons-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.plan.card.premium,  .price,  .pricing-list{
  list-style: none;
}

    /* Polaroid-style floating images */
    #prints {
      position: relative;
    }
    .polaroid {
      position: absolute;
      background-color: #fff;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      border: 5px solid #fff;
      border-bottom-width: 20px;
      border-radius: 4px;
      overflow: hidden;
    }
    .polaroid::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      background: var(--color-near-white);
    }
    /* Force each image to fill & crop the polaroid box */
.polaroid img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop-to-fill */
  object-position: center;
}

.p_pack{
  text-align: center;
}
    
    /* Positions & sizes for each placeholder */
    .float1 { top: -15%; left: 0.5%; transform: rotate(-8deg); width: 350px; height: 370px; }
    .float2 { top: -15%; right: 1%; transform: rotate(7deg); width: 300px; height: 550px; }
    .float3 { top: 30%; left: 1%; transform: rotate(3deg); width: 300px; height: 400px; }
    .float4 { bottom: 15%; right: 12%; transform: rotate(-5deg); width: 300px; height: 340px; }
    .float5 { bottom: -10%; left: 5%; transform: rotate(-10deg); width: 390px; height: 380px; }
    .float6 { top: 65%; right: 1%; transform: rotate(12deg); width: 260px; height: 300px; }
    .float7 { top: 90%; left: 30%; transform: rotate(-10deg); width: 260px; height: 220px; }
    .float8 { top: 90%; left: 57%; transform: rotate(15deg); width: 220px; height: 210px; }
    .float9 { top: 85%; left: 69%; transform: rotate(10deg); width: 210px; height: 180px; }
    .float10 { top: 85%; left: 80%; transform: rotate(-10deg); width: 240px; height: 200px; }
    /* Hide floats on small screens for clarity */
    @media (max-width: 768px) {
      .polaroid { display: none; }
    }

/* ===== Digital Page Styles ===== */
.fun-font,
.fun-font * {
  font-family: 'Poppins', sans-serif;
}

#digital {
  padding: 2rem 0;
  position: relative; /* for any background blobs */
}

/* ── Make digital flip-back media fill the card perfectly ── */
#digital .flip-back {
  /* remove the text-padding so our media can fill the whole face */
  padding: 10 !important;
}

#digital .flip-back img,
#digital .flip-back video {
  position: absolute !important;
  top: 0; 
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important; 
}

.d{
  text-align: center;
}

.options ul {
  list-style: none;
  padding-left: 0;
}

.options ul li::before {
  content: "• ";
  color: inherit;       /* or a brand color */
}


/* ── Services Grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  margin-bottom: 3rem;
}

/* ── Flip-Card Base ── */
.service-card {
  perspective: 800px;
  position: relative; /* keep it above any background */
}

.service-card .flip-inner {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 square */
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.service-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  border: 5px solid #fff;
  border-bottom-width: 20px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  background: #fff;
}

/* ── Front Face ── */
.flip-front {
  background: var(--color-sunset-yellow) !important;
  border-color: var(--color-sunset-yellow) !important;
  color: var(--color-deep-purple);
  font-weight: bold;
  font-size: 1rem;
}

.flip-front .price {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  color: var(--color-sunset-pink);
}

/* ── Back Face ── */
.flip-back {
  background: var(--color-ocean-blue);
  color: #fff;
  transform: rotateY(180deg);
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1rem;
}

.flip-back h4 {
  color: var(--color-sunset-pink);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.flip-back .pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0.9rem;
}

.flip-back .pricing-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}

.flip-back .pricing-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-sunset-pink);
}

/* ── Highlight Package Card ── */
.highlight-packages-grid {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative; 
  padding: 20px 0 0 0;
}

.highlight-packages-grid .service-card.highlight {
  margin: 0 auto;
  padding: 0 auto;
}

.service-card.highlight .flip-inner {
  width: 400px !important;
  padding-top: 300px !important;
}

/* match the other cards’ back styling */
.service-card.highlight .flip-back {
  background: var(--color-ocean-blue);
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 1.5rem;
  color: var(--color-deep-purple);
  backface-visibility: hidden;
}

/* ── Alternate Front Colors ── */
.services-grid .service-card:nth-child(odd) .flip-front {
  background: var(--color-sunset-yellow) !important;
  border-color: var(--color-sunset-yellow) !important;
}

.services-grid .service-card:nth-child(even) .flip-front {
  background: var(--color-sunset-orange) !important;
  border-color: var(--color-sunset-orange) !important;
}

/* ── Utility ── */
.services-d {
  text-align: center;
  margin: 2rem 0;
}

.options{
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .highlight-packages-grid {
    flex-direction: column;
    align-items: center;
  }
  .service-card.highlight .flip-inner {
    width: 100% !important;
    padding-top: 75% !important; /* maintain aspect ratio */
  }
}
.blob {
  box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.5); 
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
}
.blob1 { width: 400px; height: 400px; background: var(--color-sunset-orange); top: 100px; left: 50px; }
.blob2 { width: 300px; height: 300px; background: var(--color-ocean-blue); bottom: 100px; right: 60px; }
.blob3 { width: 500px; height: 500px; background: var(--color-sunset-yellow); top: -100px; right: 100px; }
.blob4 { width: 350px; height: 350px; background: var(--color-sunset-pink); bottom: 80px; left: 100px; }
.blob5 { width: 450px; height: 450px; background: var(--color-sunset-orange); top: -150px; left: 450px; }
.blob6 { width: 300px; height: 300px; background: var(--color-ocean-blue); bottom: -100px; right: 100px; } 
.blob7 { width: 400px; height: 400px; background: var(--color-sunset-yellow); top: -200px; right: -100px; }
.blob8 { width: 250px; height: 250px; background: var(--color-sunset-pink); bottom: -150px; left: 150px; }
.blob9 { width: 350px; height: 350px; background: var(--color-sunset-orange); top: 350px; left: -50px; }
.blob10 { width: 300px; height: 300px; background: var(--color-ocean-blue); bottom: -200px; right: -60px; }
.blob11 { width: 450px; height: 450px; background: var(--color-sunset-yellow); top: 200px; right: -300px; }
.blob12 { width: 400px; height: 400px; background: var(--color-sunset-pink); bottom: -250px; left: -250px; }  
.blob13 { width: 500px; height: 500px; background: var(--color-sunset-orange); top: -100px; left: -150px; } 
.blob14 { width: 300px; height: 300px; background: var(--color-ocean-blue); bottom: 200px; right: 400px; }  
.blob15 { width: 400px; height: 400px; background: var(--color-sunset-yellow); top: 300px; right: 250px; }
.blob16 { width: 250px; height: 250px; background: var(--color-sunset-pink); bottom: 350px; left: 350px; }  
.blob17 { width: 350px; height: 350px; background: var(--color-sunset-orange); top: 450px; left: 450px; }

    /* ===== Mobile Studio Page Styles ===== */
    body#mobile-studio {
  background: linear-gradient(
    to bottom,
    var(--color-deep-purple) 0%,
    var(--color-ocean-blue) 40%,
    var(--color-sunset-pink) 80%,
    var(--color-sunset-yellow) 100%
  );
}
    #mobile-studio-section { padding: 4rem 0; position: relative; }
    #mobile-studio-section h2 { text-align: center; margin-bottom: 0.5rem; }
    #mobile-studio-section .intro { text-align: center; margin-bottom: 2rem; }

    /* 1) If any float shells are still in the DOM, hide them */
#mobile-studio-section .polaroid-ms,
#mobile-studio-section [class^="ms-float"] {
  display: none !important;
}

/* 2) Constrain + center the services grid on desktop */
#mobile-studio-section .services-grid {
  /* keep content centered and prevent massive spacing */
  max-width: 960px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1rem 1.25rem;
  justify-items: center;   /* center each card in its cell */
  align-items: stretch;
}

/* 3) Add-ons grid: same centering treatment */
#mobile-studio-section .addons-grid {
  max-width: 900px;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
}

/* 4) Headings & intro centered with readable width */
#mobile-studio-section h2,
#mobile-studio-section .intro,
#mobile-studio-section .subtext {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.mobile-package{
  text-align: center;
}

.intro{
  padding-left: 20%;
  padding-right: 20%;
}

    /* Package Flip Cards */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      justify-items: center;
      margin-bottom: 1rem;
    }
    .service-card {
      perspective: 800px;
      width: 70%;
    }
    #mobile-studio-section .service-card .flip-inner {
      position: relative;
      width: 100%; padding-top: 100%;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }
    .service-card:hover .flip-inner { transform: rotateY(180deg); }
    .flip-front, .flip-back {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      backface-visibility: hidden;
      border: 5px solid #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
      border-bottom-width: 20px;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.5rem;
    }
    .flip-front {
      background: var(--color-sunset-yellow);
      color: var(--color-deep-purple);
      font-weight: bold;
    }
    .flip-front .price {
      font-size: 1.25rem;
      margin-top: 0.5rem;
      color: var(--color-sunset-pink);
    }
    .flip-back {
      background: var(--color-ocean-blue);
      color: #fff;
      transform: rotateY(180deg);
      padding: 1rem;
    }
    .flip-back h4 {
      margin-bottom: 0.5rem;
      color: #fff;
      font-size: 1rem;
    }
    .flip-back .pricing-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
      text-align: left;
      width: 100%;
    }
    .flip-back .pricing-list li {
      position: relative;
      padding-left: 1.2rem;
      margin-bottom: 0.5rem;
    }
    .flip-back .pricing-list li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--color-sunset-pink);
    }
    .subtext {
      text-align: center;
      font-size: 0.9rem;
      margin-bottom: 2rem;
      color: var(--color-deep-purple);
    }

    /* Add-Ons Grid */
    .addons-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1.5rem;
      margin: 0 auto;
      max-width: 800px;
    }
    .addon-card {
      background: var(--color-sunset-yellow);
      color: var(--color-deep-purple);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      padding: 1rem;
      text-align: center;
      font-weight: 500;
      font-size: 0.95rem;
    }
    .addon-card .price { display: block; margin-top: 0.5rem; color: var(--color-sunset-pink); }

    @media (max-width: 768px) {
      .services-grid { grid-template-columns: 1fr; }
      .addons-grid { grid-template-columns: 1fr 1fr; }
    }


/* ===== Trading Cards Page Styles ===== */
body#trading-cards {
  font-family: 'Poppins', sans-serif;
  padding: 4rem 0;
    background:
    repeating-linear-gradient(
      135deg,
      var(--color-sunset-pink) 0, var(--color-sunset-pink) 1px,
      transparent 1px, transparent 10px
    ),
    #fff;
}

/* ── Trading Cards Hero: force a single column stack ── */
#trading-cards .hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto 3rem;    /* center and space below */
  max-width: 800px;       /* constrain width */
  width: 100%;
}

/* Ensure each child takes full width of the hero */
#trading-cards .hero > * {
  width: 100%;
  margin-bottom: 1rem;    /* consistent spacing */
}

/* But left‐align your bullet list */
#trading-cards .hero ul {
  text-align: left;
  list-style: disc inside;
  padding: 0;
  margin: 1rem auto;
  max-width: 600px;
}

/* Tidy up last paragraph (“Perfect for”) */
#trading-cards .hero p:last-of-type {
  max-width: 800px;
  margin: 0 auto 2rem;
}


/* Package Details */
#trading-cards .package {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}
#trading-cards .package h3 {
  font-size: 1.75rem;
  color: var(--color-sunset-pink);
  margin-bottom: 0.5rem;
}
#trading-cards .package .price {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-sunset-orange);
  margin-bottom: 1rem;
}
#trading-cards .package ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
#trading-cards .package ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}
#trading-cards .package ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-sunset-pink);
}

/* Add-Ons */
#trading-cards .addons {
  max-width: 600px;
  margin: 0 auto 3rem;
}
#trading-cards .addons h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-deep-purple);
}
#trading-cards .addons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#trading-cards .addons ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-deep-purple);
}
#trading-cards .addons ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-sunset-orange);
}

/* Trading-Cards Carousel */
.tc-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto 2rem;
  max-width: 1000px;
}
.tc-carousel .carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}
.tc-carousel .carousel-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.tc-carousel .carousel-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.tc-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 2rem;
  z-index: 10;
}
.tc-carousel .prev { left: 1rem; }
.tc-carousel .next { right: 1rem; }

/* ── Hero list with custom icon bullets ── */
#trading-cards .hero ul {
  list-style: none;      /* kill default bullets */
  margin: 1rem auto 2rem;
  padding: 0;
  max-width: 600px;
  text-align: left;
}
#trading-cards .hero ul li {
  position: relative;
  padding-left: 1.75rem; /* room for the icon */
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}
#trading-cards .hero ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;          /* tweak to vertically center the icon */
  width: 1rem;
  height: 1rem;
  background: url('Bella SoCal/assets/cards.png') no-repeat center/contain;
}
#trading-cards .hero ul li:hover {
  color: var(--color-sunset-pink);
}

/* ── Package section tinted background ── */
#trading-cards .package {
  background: rgba(255, 92, 156, 0.1); /* 10% of #FF5C9C */
}

/* Add-Ons Grid & Background */
#addons-section {
  padding: 4rem 0;
  background: 
    linear-gradient(135deg, var(--color-sunset-pink) 0%, var(--color-sunset-orange) 100%);
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.addon-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.addon-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 0.75rem;
}

.addon-card h4 {
  font-size: 1rem;
  color: var(--color-deep-purple);
}

.addon-card:hover {
  transform: translateY(-5px);
}

/* Make videos in addon-cards fit just like images */
.addon-card video {
  width: 100%;               /* fill the card’s width */
  height: 140px;             /* match your img height */
  object-fit: cover;         /* crop to fill without distortion */
  object-position: center;   /* center the crop */
  display: block;            /* remove inline quirks */
  margin-bottom: 0.75rem;    /* same gap below as images */
}

/* Contact Page Styles */
#contact-section {
  padding: 4rem 0;
  background: linear-gradient(
    135deg,
    var(--color-sunset-pink) 0%,
    var(--color-sunset-orange) 100%
  );
  color: #fff;
}
#contact-section .container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
#contact-section h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}
#contact-section p {
  margin-bottom: 2rem;
  font-size: 1rem;
}
#contact-section .form-wrapper {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
#contact-section .form-wrapper iframe {
  width: 100%;
  border: none;
}
/* FAQs Accordion Styles */
#faqs-section {
  padding: 4rem 0;
}
#faqs-section .faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}
#faqs-section .faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.125rem;
  padding: 1rem 0;
  cursor: pointer;
  position: relative;
}
#faqs-section .faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 1.25rem;
  transition: transform 0.3s;
}
#faqs-section .faq-question.open::after {
  content: '−';
}
#faqs-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 1rem;
  color: var(--color-deep-purple);
}

/* ===== About Page ===== */
#about { padding-top: 0; }

/* Hero */
.about-hero {
  padding: 5rem 1rem 3rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-sunset-pink), var(--color-sunset-orange));
  position: relative;
}
.about-hero .container { max-width: 920px; margin: 0 auto; }
.about-hero h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
.about-hero .tagline { font-size: 1.05rem; line-height: 1.7; }

.about-stats {
  margin-top: 1.5rem;
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.about-stats .stat {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.75rem 1rem; border-radius: 999px;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.about-stats .stat strong { font-size: 1.25rem; }
.about-stats .stat span { font-size: 0.9rem; }

/* Sections */
.about-section { padding: 3rem 0; }
.about-section .container { max-width: 1000px; margin: 0 auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.about-section h2 { color: var(--color-deep-purple); margin-bottom: 0.5rem; }
.about-section h3 { color: var(--color-sunset-pink); margin-top: 0.75rem; margin-bottom: 0.25rem; }
.about-section p { color: var(--color-deep-purple); }

/* Differentiators */
.pill-list { 
  list-style: none; padding: 0; margin: 1rem 0 1.25rem; 
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pill-list li {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 0.5rem 0.75rem; border-radius: 999px;
  color: var(--color-deep-purple); font-size: 0.95rem;
}
.quote { 
  font-style: italic; color: var(--color-deep-purple);
  background: #fff; border-left: 4px solid var(--color-sunset-orange);
  padding: 0.75rem 1rem; border-radius: 6px; display: inline-block;
}
.venues { margin-top: 0.75rem; color: var(--color-deep-purple); }

/* Steps */
.steps { 
  counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0;
}
.steps li {
  position: relative; padding-left: 2.25rem; margin-bottom: 0.75rem;
  color: var(--color-deep-purple);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.05rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-sunset-yellow);
  color: var(--color-deep-purple);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* Gallery (5 slots) */
.about-gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 1rem;
}
.about-photo {
  position: relative; width: 100%; padding-top: 70%; /* 10:7-ish */
  background: #fff;
  border: 5px solid #fff; border-bottom-width: 20px;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  overflow: hidden;
}
/* When you add real images inside .about-photo, make them fill perfectly */
.about-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* CTA */
.about-cta { 
  padding: 3rem 1rem; text-align: center; 
  background: linear-gradient(135deg, var(--color-ocean-blue), var(--color-deep-purple));
  color: #fff;
}
.about-cta .container { max-width: 900px; margin: 0 auto; }
.about-cta .cta-buttons { display: inline-flex; gap: 1rem; margin-top: 1rem; }
.about-cta .btn { padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 700; }
.about-cta .btn-primary { background: var(--color-sunset-pink); border: none; }
.about-cta .btn-secondary { background: transparent; border: 2px solid #fff; color: #fff; }
.about-cta .btn-primary:hover { background: var(--color-sunset-orange); }
.about-cta .btn-secondary:hover { background: rgba(255,255,255,0.15); }

/* Responsive */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

/* 1) Fix the unit bug (was `padding: 10`) */
#digital .flip-back { padding: 10px !important; }

/* 2) Hard‑center the highlight card on desktop */
.highlight-packages-grid {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the flex item itself have a width and center it */
.highlight-packages-grid .service-card.highlight {
  flex: 0 0 auto;           /* don’t stretch */
  width: 400px;             /* match the inner width */
  margin-inline: auto;      /* center in the row */
}

/* Keep your 400×300 ratio on desktop */
@media (min-width: 769px) {
  .service-card.highlight .flip-inner {
    width: 100% !important;     /* use the parent’s 400px */
    padding-top: 300px !important;
    margin: 0 auto;             /* belt‑and‑suspenders centering */
  }
}

/* On mobile, let it be full‑width (you already had this, just ensuring) */
@media (max-width: 768px) {
  .highlight-packages-grid {
    flex-direction: column;
    align-items: center;
  }
  .service-card.highlight {
    width: 100%;
    max-width: 480px;           /* optional cap */
  }
  .service-card.highlight .flip-inner {
    width: 100% !important;
    padding-top: 75% !important;
  }
}

/* 3) Safety: keep faces anchored to the card box */
.service-card.highlight .flip-front,
.service-card.highlight .flip-back {
  inset: 0;
}

/* --- Mobile NAV: make it a true full-screen overlay --- */
@media (max-width: 768px) {
  /* Keep header clickable; make sure it sits above page */
  header { position: relative; z-index: 10002; }

  /* The overlay itself */
  header nav {
    position: fixed;          /* detach from page flow */
    inset: 0;                 /* top/right/bottom/left: 0 */
    background: #fff;         /* solid background so content never shows through */
    z-index: 10000;           /* above any page content */
    opacity: 0;               /* hidden by default */
    pointer-events: none;     /* ignore clicks when closed */
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    max-height: none;         /* no height cap */
    overflow: auto;           /* scroll menu if it’s taller than 100vh */
  }

  /* opened state */
  header nav.nav-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* vertical list layout inside overlay */
  header nav .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 2rem;
    margin: 0;
  }

  /* keep the hamburger above the overlay so it can close it */
  .hamburger {
    position: relative;
    z-index: 10001;
  }

  /* stop background scrolling when menu is open */
  body.menu-open { overflow: hidden; }
}

/* Decorative blobs must never float above UI */
.blob { z-index: 0; }

/* Footer trigger */
.subscribe-link {
  cursor: pointer;
  text-decoration: underline;
}



/* Prevent background scroll when modal open */
.body--lock {
  overflow: hidden;
}

/* Optional: make Brevo form full-width inside modal */
#sib-container {
  box-shadow: none !important;
  border-width: 0 !important;
  background: rgba(255,92,156,0.90) !important; /* 0.90 = 90% opacity */
  max-width: 100% !important;
}

/* Bigger modal, edge-to-edge content so the Brevo background is fully visible */
.modal__dialog {
  margin: 4vh auto;
  max-width: 1080px;        /* increase width on desktop */
  width: calc(100% - 32px); /* mobile-safe */
  padding: 0;               /* remove inner padding so background reaches edges */
  background: transparent;  /* let Brevo container provide the background */
  box-shadow: none;         /* optional: rely on Brevo card/border */
  border-radius: 0;         /* rounded corners will come from Brevo container */
}

/* Let the Brevo container handle shape and spacing */
#sib-container {
  max-width: 50% !important;  /* fill the modal width */
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;             /* clip inner edges cleanly */
  border-width: 2px !important; /* keep your brand border if desired */
}

/* Optional: give the inner form some breathing room without shrinking the image */
#sib-form {
  padding: 24px 24px 28px;
}

/* Make the close button readable over images */
.modal__close {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  mix-blend-mode: normal;
}

/* Use this if you can't edit the inline style and want to force 'contain' */
.sib-form {
  background-size: contain !important;   /* or keep 'cover' if you like */
  min-height: 70vh;                      /* make room for the full image */
  background-color: #000;                /* optional letterbox */
}

#sib-container p,
#sib-container label,
#sib-container span {
  color: #fff !important; /* white text */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* subtle shadow for contrast */
}
/* Base style for subscribe button */
#sib-container .sib-form-block__button {
  display: inline-block;
  width: auto;                 /* Change to 100% if you want full width */
  padding: 12px 24px;
  background-color: #FFD15C !important; 
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

/* Hover effect - brand blue */
#sib-container .sib-form-block__button:hover {
  background-color: #6ce3ff !important;
}

/* site trigger button (boxed) */
#subscribeTrigger.subscribe-link {
  display: inline-block;
  padding: 25px 20px;
  line-height: 1.2 !important;  /* tighter vertical text spacing */
  background: #ff5c9c;                 /* base pink */
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: background-color .25s ease, color .25s ease, transform .05s ease, box-shadow .25s ease;
}

/* hover highlight to brand blue */
#subscribeTrigger.subscribe-link:hover {
  background: #6ce3ff;                 /* brand blue */
  color: #0d0d0d;                      /* readable on blue */
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}

/* keyboard focus ring */
#subscribeTrigger.subscribe-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,227,255,.45);
}

/* press feedback */
#subscribeTrigger.subscribe-link:active {
  transform: translateY(1px);
}

/* Force exact height and center the text */
#subscribeTrigger.subscribe-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  height: 50px !important;           /* <- adjust this value to taste */
  min-height: 36px !important;
  padding: 0 14px !important;         /* horizontal only; no vertical growth */
  line-height: 1 !important;
  font-size: 18px !important;

  background: #ff5c9c;
  color: #fff;
  border-radius: 10px;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;                /* keep single-line */
  flex: 0 0 auto !important;          /* ignore parent flex stretching */
}

/* Hover to brand blue */
#subscribeTrigger.subscribe-link:hover{
  background: #6ce3ff;
  color: #0d0d0d;
}

/* Move the trigger down only on Prints */
#prints-page #subscribeTrigger.subscribe-link{
  margin-top: 32px !important;   /* tweak value */
}

/* Optional: give extra room on small screens */
@media (max-width: 640px){
  #prints-page #subscribeTrigger.subscribe-link{
    margin-top: 100px !important;
  }
}

/* ---------- Base (already have something like this) ---------- */
html, body { height: 100%; }
.sib-form{
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 5vw, 48px) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #1f1430;
}
#sib-container{
  max-width: 720px !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: rgba(255,92,156,.82) !important;
}

/* Improve text contrast on any background */
#sib-container p, #sib-container label, #sib-container span{
  color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Buttons & inputs: comfortable defaults */
#sib-form input.input{ height: 44px; }
#sib-form .sib-form-block__button{ min-height: 44px; padding: 10px 16px; }

/* ---------- XL screens (wider card) ---------- */
@media (min-width: 1440px){
  #sib-container{ max-width: 840px !important; }
}

/* ---------- L (desktops/tablets landscape) ---------- */
@media (max-width: 1024px){
  .sib-form{ padding: 6vw !important; background-position: center top !important; }
  #sib-container{ max-width: 780px !important; }
}

/* ---------- M (tablets & large phones) ---------- */
@media (max-width: 768px){
  /* Let the image subject stay in view and give more side padding */
  .sib-form{ padding: 7vw !important; background-position: center top !important; }

  #sib-container{ max-width: 92vw !important; border-radius: 14px !important; }

  /* Tweak typography slightly tighter */
  #sib-container .sib-text-form-block p{ font-size: 15px; line-height: 1.45; }

  /* Inputs & button: full width, big tap targets */
  #sib-form .entry__field .input{ width: 100%; height: 46px; }
  #sib-form .sib-form-block__button{ width: 100%; min-height: 48px; font-weight: 700; }

  /* Opt-in row: better wrapping & spacing */
  #sib-form .entry_mcq .entry__choice label{
    display: flex; align-items: flex-start; gap: 10px;
  }
}

/* ---------- S (phones) ---------- */
@media (max-width: 480px){
  .sib-form{ padding: 16px !important; }
  #sib-container{ max-width: 94vw !important; border-radius: 12px !important; }

  /* Tighten inside spacing a bit */
  #sib-form{ padding: 16px !important; }
  #sib-container .sib-form-block{ margin-bottom: 10px !important; }

  /* Inputs & button: still finger-friendly */
  #sib-form .entry__field .input{ height: 48px; font-size: 16px; }
  #sib-form .sib-form-block__button{ min-height: 48px; font-size: 16px; }

  /* Keep checkbox text readable on small screens */
  #sib-form .entry_mcq p{ margin: 0; font-size: 14px; line-height: 1.45; }
}

/* ---------- Orientation tweaks (landscape phones) ---------- */
@media (max-height: 500px) and (orientation: landscape){
  .sib-form{ align-items: flex-start !important; padding-top: 16px !important; }
}

/* ---------- Respect devices without hover (avoid sticky hover) ---------- */
@media (hover: none){
  #sib-form .sib-form-block__button:hover{ filter: none; }
}

/* ---------- iOS safe areas (notch) ---------- */
@supports (padding: max(0px)){
  .sib-form{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}