/* ===========================================================
   CopiesAmerica - Flyers hero slider
   Fixed-design canvas: 1280 x 720px, but every value below is
   expressed in cqw (percent of the box's own rendered width via
   CSS container queries) so it scales cleanly at any embed size -
   full-width desktop hero, a narrower carousel slot, or mobile.
   =========================================================== */

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

body { font-family: 'Poppins', Arial, sans-serif; }

.flyers-hero { width: 100%; }

.flyers-hero .hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 0.8cqw;
  background: linear-gradient(160deg, #f5f6f8 0%, #eceef2 55%, #dfe1e7 100%);
  color: #0a1f3d;
}

/* soft diagonal window-light streak, matching the reference photo's
   light background instead of the old dark neon rays */
.flyers-hero .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 42%,
    transparent 54%
  );
  pointer-events: none;
}

.flyers-hero .glow {
  position: absolute;
  top: -10%;
  right: 8%;
  width: 55cqw;
  height: 55cqw;
  background: radial-gradient(circle, rgba(18, 86, 184, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ---------------- content column ---------------- */

.flyers-hero .hero-content {
  position: absolute;
  top: 8.5cqw;
  left: 7cqw;
  width: 42cqw;
  z-index: 2;
}

.flyers-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  font-size: 1.4cqw;
  font-weight: 600;
  letter-spacing: 0.2cqw;
  text-transform: uppercase;
  margin-bottom: 1cqw;
  white-space: nowrap;
}

.flyers-hero .eyebrow .rule {
  flex: 0 0 3.4cqw;
  height: 0.16cqw;
  background: #1256b8;
  display: inline-block;
}

.flyers-hero .headline {
  font-weight: 900;
  line-height: 0.94;
  margin-bottom: 1.6cqw;
}

.flyers-hero .headline .line { display: block; }

.flyers-hero .line-white {
  font-size: 7.6cqw;
  color: #0a1f3d;
}

.flyers-hero .line-grad {
  font-size: 7.6cqw;
  color: #1256b8;
}

.flyers-hero .line-script {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: 5cqw;
  line-height: 1.1;
  color: #1256b8;
  margin-top: 0.5cqw;
}

.flyers-hero .sub {
  font-size: 1.5cqw;
  line-height: 1.5;
  color: #445468;
  max-width: 38cqw;
  margin-bottom: 2cqw;
}

.flyers-hero .badges {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 0.98cqw;
  font-weight: 600;
  letter-spacing: 0.03cqw;
  text-transform: uppercase;
  margin-bottom: 2.4cqw;
  flex-wrap: wrap;
}
.flyers-hero .badges li { display: flex; align-items: center; gap: 0.55cqw; white-space: nowrap; }
.flyers-hero .badges li svg { width: 1.5cqw; height: 1.5cqw; color: #1256b8; flex-shrink: 0; }
.flyers-hero .badges .sep { opacity: 0.35; font-weight: 300; }
.flyers-hero .badges { color: #0a1f3d; }

.flyers-hero .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  background: #1256b8;
  color: #ffffff;
  font-size: 1.4cqw;
  font-weight: 700;
  text-decoration: none;
  padding: 1.05cqw 2.1cqw;
  border-radius: 0.4cqw;
  box-shadow: 0 0.7cqw 1.8cqw rgba(18, 86, 184, 0.35);
  white-space: nowrap;
}
.flyers-hero .cta svg { width: 1.4cqw; height: 1.4cqw; }

/* ---------------- coded flyer mockups (right side) ---------------- */

.flyers-hero .mockup-stack {
  position: absolute;
  top: 0;
  right: 0;
  width: 54cqw;
  height: 100%;
  z-index: 1;
}

.flyers-hero .flyer {
  position: absolute;
  width: 30cqw;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-radius: 0.8cqw;
  box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
}

/* placeholder product photo fills the card frame - recommended
   source size noted next to each <img> in the HTML */
.flyers-hero .flyer-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.flyers-hero .flyer-back {
  top: 5cqw;
  left: 2cqw;
  transform: rotate(-6deg);
  opacity: 0.9;
}

.flyers-hero .flyer-mid {
  top: 19cqw;
  left: 11cqw;
  width: 31cqw;
  transform: rotate(3deg);
}

.flyers-hero .flyer-front {
  top: 30cqw;
  left: 19cqw;
  width: 33cqw;
  transform: rotate(-3deg);
  box-shadow: 0 2cqw 3.6cqw rgba(0, 0, 0, 0.4);
}

/* keep the mockups from getting cluttered on very narrow slots */
@container (max-width: 480px) {
  .flyers-hero .flyer-back { display: none; }
  .flyers-hero .sub { display: none; }
}

/* ===========================================================
   CopiesAmerica - Posters, Banners & Signs hero slider
   Same shared stylesheet, added below the Flyers hero rules.
   Same 1280 x 720 canvas / cqw-scaling pattern as above.
   =========================================================== */

.pbs-hero { width: 100%; }

.pbs-hero .hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 0.8cqw;
  background: linear-gradient(115deg, #0a1836 0%, #123a7a 45%, #1a63c4 78%, #2f86e6 100%);
  color: #ffffff;
}

/* soft diagonal light streak, matching the reference photo */
.pbs-hero .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.10) 48%,
    transparent 62%
  );
  pointer-events: none;
}

.pbs-hero .glow {
  position: absolute;
  bottom: -18%;
  right: 4%;
  width: 46cqw;
  height: 46cqw;
  background: radial-gradient(circle, rgba(120, 190, 255, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

/* ---------------- content column ---------------- */

.pbs-hero .hero-content {
  position: absolute;
  top: 12.5cqw;
  left: 6.5cqw;
  width: 40cqw;
  z-index: 2;
}

.pbs-hero .eyebrow {
  display: inline-block;
  font-size: 1.15cqw;
  font-weight: 700;
  letter-spacing: 0.15cqw;
  text-transform: uppercase;
  color: #ffffff;
  border: 0.12cqw solid rgba(255, 255, 255, 0.65);
  border-radius: 1.6cqw;
  padding: 0.7cqw 1.5cqw;
  margin-bottom: 1.8cqw;
}

.pbs-hero .headline {
  font-weight: 900;
  line-height: 1.02;
  margin: 0 0 1.6cqw;
}

.pbs-hero .headline .line { display: block; }

.pbs-hero .line-white { font-size: 5.3cqw; color: #ffffff; }

.pbs-hero .line-accent {
  font-size: 5.3cqw;
  background: linear-gradient(90deg, #6fc3ff 0%, #a3d9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pbs-hero .sub {
  font-size: 1.4cqw;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34cqw;
  margin-bottom: 1.7cqw;
}

.pbs-hero .badges {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  letter-spacing: 0.03cqw;
  text-transform: uppercase;
  margin-bottom: 2.6cqw;
  flex-wrap: wrap;
  color: #ffffff;
}
.pbs-hero .badges li { display: flex; align-items: center; gap: 0.55cqw; white-space: nowrap; }
.pbs-hero .badges li svg { width: 1.5cqw; height: 1.5cqw; color: #6fc3ff; flex-shrink: 0; }
.pbs-hero .badges .sep { opacity: 0.4; font-weight: 300; }

.pbs-hero .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  background: #ffffff;
  color: #123a7a;
  font-size: 1.4cqw;
  font-weight: 700;
  text-decoration: none;
  padding: 1.05cqw 2.1cqw;
  border-radius: 2.4cqw;
  box-shadow: 0 0.7cqw 1.8cqw rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.pbs-hero .cta svg { width: 1.4cqw; height: 1.4cqw; }

/* ---------------- product placeholder cards (right side) ---------------- */

.pbs-hero .mockup-stack {
  position: absolute;
  top: 0;
  right: 0;
  width: 52cqw;
  height: 100%;
  z-index: 1;
}

.pbs-hero .card {
  position: absolute;
  width: 26cqw;
  aspect-ratio: 4 / 3;
  background: #f4f7fb;
  border-radius: 0.9cqw;
  box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* placeholder icon - the posters-banners-signs subpages don't have
   real product photography on the site yet, so this uses the site's
   own "no preview" icon as an obvious swap-me placeholder. Replace
   the <img class="card-img"> src with a real photo once photography
   is ready; recommended source size noted next to each <img> in the
   HTML. */
.pbs-hero .card-img {
  display: block !important;
  width: 42% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 0.55;
}

.pbs-hero .card-label {
  margin-top: 0.9cqw;
  font-family: Arial, sans-serif;
  font-size: 1.05cqw;
  font-weight: 700;
  color: #123a7a;
  text-transform: uppercase;
  letter-spacing: 0.04cqw;
}

.pbs-hero .card-banners {
  top: 2cqw;
  left: 0cqw;
  width: 25cqw;
  transform: rotate(-6deg);
  opacity: 0.92;
}

.pbs-hero .card-signs {
  top: 23cqw;
  left: 11cqw;
  width: 26cqw;
  transform: rotate(4deg);
}

.pbs-hero .card-posters {
  top: 9cqw;
  left: 23cqw;
  width: 24cqw;
  transform: rotate(-3deg);
  box-shadow: 0 2cqw 3.6cqw rgba(0, 0, 0, 0.4);
}

/* keep the cards from getting cluttered on very narrow slots */
@container (max-width: 480px) {
  .pbs-hero .card-banners { display: none; }
  .pbs-hero .sub { display: none; }
}

/* ===========================================================
   CopiesAmerica - Booklets hero slider
   Same shared stylesheet, added below the Posters/Banners/Signs
   hero rules. Same 1280 x 720 canvas / cqw-scaling pattern.
   =========================================================== */

.booklets-hero { width: 100%; }

.booklets-hero .hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 0.8cqw;
  background: linear-gradient(135deg, #0b2b2e 0%, #103a3f 40%, #145560 75%, #1c7a86 100%);
  color: #ffffff;
}

/* soft diagonal light streak */
.booklets-hero .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 48%,
    transparent 62%
  );
  pointer-events: none;
}

.booklets-hero .glow {
  position: absolute;
  top: -14%;
  right: 6%;
  width: 50cqw;
  height: 50cqw;
  background: radial-gradient(circle, rgba(232, 183, 78, 0.20) 0%, transparent 70%);
  pointer-events: none;
}

/* ---------------- content column ---------------- */

.booklets-hero .hero-content {
  position: absolute;
  top: 12cqw;
  left: 6.5cqw;
  width: 40cqw;
  z-index: 2;
}

.booklets-hero .eyebrow {
  display: inline-block;
  font-size: 1.15cqw;
  font-weight: 700;
  letter-spacing: 0.15cqw;
  text-transform: uppercase;
  color: #e8b74e;
  border: 0.12cqw solid rgba(232, 183, 78, 0.55);
  border-radius: 1.6cqw;
  padding: 0.7cqw 1.5cqw;
  margin-bottom: 1.8cqw;
}

.booklets-hero .headline {
  font-weight: 900;
  line-height: 1.02;
  margin: 0 0 1.6cqw;
}

.booklets-hero .headline .line { display: block; }

.booklets-hero .line-white { font-size: 5.3cqw; color: #ffffff; }

.booklets-hero .line-accent {
  font-size: 5.3cqw;
  background: linear-gradient(90deg, #e8b74e 0%, #f4d998 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.booklets-hero .sub {
  font-size: 1.4cqw;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34cqw;
  margin-bottom: 1.7cqw;
}

.booklets-hero .badges {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  letter-spacing: 0.03cqw;
  text-transform: uppercase;
  margin-bottom: 2.6cqw;
  flex-wrap: wrap;
  color: #ffffff;
}
.booklets-hero .badges li { display: flex; align-items: center; gap: 0.55cqw; white-space: nowrap; }
.booklets-hero .badges li svg { width: 1.5cqw; height: 1.5cqw; color: #e8b74e; flex-shrink: 0; }
.booklets-hero .badges .sep { opacity: 0.4; font-weight: 300; }

.booklets-hero .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  background: #ffffff;
  color: #103a3f;
  font-size: 1.4cqw;
  font-weight: 700;
  text-decoration: none;
  padding: 1.05cqw 2.1cqw;
  border-radius: 2.4cqw;
  box-shadow: 0 0.7cqw 1.8cqw rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.booklets-hero .cta svg { width: 1.4cqw; height: 1.4cqw; }

/* ---------------- product photo cards (right side) ---------------- */

.booklets-hero .mockup-stack {
  position: absolute;
  top: 0;
  right: 0;
  width: 54cqw;
  height: 100%;
  z-index: 1;
}

.booklets-hero .card {
  position: absolute;
  width: 30cqw;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-radius: 0.8cqw;
  box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.35);
  overflow: hidden;
  cursor: pointer;
  display: block;
}

/* real product photo fills the card frame - recommended source size
   noted next to each <img> in the HTML */
.booklets-hero .card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.booklets-hero .card-back {
  top: 5cqw;
  left: 2cqw;
  transform: rotate(-6deg);
  opacity: 0.9;
}

.booklets-hero .card-mid {
  top: 19cqw;
  left: 11cqw;
  width: 31cqw;
  transform: rotate(3deg);
}

.booklets-hero .card-front {
  top: 30cqw;
  left: 19cqw;
  width: 33cqw;
  transform: rotate(-3deg);
  box-shadow: 0 2cqw 3.6cqw rgba(0, 0, 0, 0.45);
}

/* keep the cards from getting cluttered on very narrow slots */
@container (max-width: 480px) {
  .booklets-hero .card-back { display: none; }
  .booklets-hero .sub { display: none; }
}