.campaign-package-grid article {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.campaign-package-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #16231c;
}

.campaign-package-image img {
  position: absolute;
  width: 200%;
  height: 200%;
  max-width: none;
  object-fit: cover;
}

.campaign-q1 img { left: 0; top: 0; }
.campaign-q2 img { left: -100%; top: 0; }
.campaign-q3 img { left: 0; top: -100%; }
.campaign-q4 img { left: -100%; top: -100%; }

.campaign-package-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.campaign-package-grid .campaign-package-body > p {
  min-height: 2.82em;
}

.campaign-package-price {
  margin-top: auto;
  padding-top: 19px;
}

.campaign-package-price small {
  display: block;
  color: var(--campaign-muted);
  font-size: .7rem;
  font-weight: 700;
}

.campaign-package-grid .campaign-package-price strong {
  display: block;
  margin: 2px 0 0;
  padding: 0;
  color: #557022;
  font-size: 1.05rem;
}

.campaign-package-price b {
  display: block;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f2f7e8;
  color: #49661b;
  font-size: 1.08rem;
  line-height: 1.2;
}

.campaign-package-grid .campaign-package-price b span {
  display: block;
  margin: 0 0 2px;
  color: #6d812c;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.3;
  text-transform: uppercase;
}

.campaign-package-grid .campaign-package-features {
  display: block;
  margin-top: 12px;
  color: var(--campaign-muted);
  font-size: .76rem;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .campaign-package-grid article { min-height: 0; }
  .campaign-package-grid .campaign-package-body > p { min-height: 0; }
  .campaign-package-body { padding: 22px 24px 24px; }
}

/* Dedicated package visuals replace the original four-panel concept sheet. */
.campaign-q1 img,
.campaign-q2 img,
.campaign-q3 img,
.campaign-q4 img { left: 0; top: 0; width: 100%; height: 100%; }

/* Color examples are selected below each image so the display itself stays clean. */
.campaign-color-carousel { touch-action:pan-y; }
.campaign-color-track { display:flex; width:300%; height:100%; transform:translateX(0); transition:transform .42s cubic-bezier(.22,.78,.22,1); }
.campaign-color-carousel[data-color-index="1"] .campaign-color-track { transform:translateX(-33.333333%); }
.campaign-color-carousel[data-color-index="2"] .campaign-color-track { transform:translateX(-66.666667%); }
.campaign-color-slide { flex:0 0 33.333333%; width:33.333333%; height:100%; margin:0; }
.campaign-color-slide img { position:static; display:block; width:100%; height:100%; object-fit:cover; }
.campaign-package-color-picker { padding:10px 13px 12px; border-bottom:1px solid #e4e8dc; background:#fbfcf8; text-align:center; }
.campaign-package-color-picker p { margin:0 0 8px; color:#63735e; font-size:.63rem; font-weight:800; letter-spacing:.04em; line-height:1.25; text-transform:uppercase; }
.campaign-color-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.campaign-color-controls button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:30px; padding:5px 4px; border:1px solid #dce3d5; border-radius:7px; background:#fff; color:#53604f; font-size:.64rem; font-weight:800; line-height:1; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease; }
.campaign-color-controls button:hover { border-color:#9daf96; background:#f4f8ee; }
.campaign-color-controls button.is-active { border-color:#315b34; background:#eaf2df; box-shadow:inset 0 0 0 1px #315b34; color:#173c22; }
.campaign-color-controls button:focus-visible { outline:3px solid #f6c854; outline-offset:2px; }
.campaign-color-swatch { display:inline-flex; flex:0 0 auto; width:18px; height:9px; border-radius:99px; background:#f7c45a; box-shadow:0 0 5px rgba(247,196,90,.65); }
.campaign-color-swatch.red-white { background:linear-gradient(90deg,#d92727 0 35%,#fff5d5 35% 65%,#d92727 65%); box-shadow:0 0 5px rgba(217,39,39,.5); }
.campaign-color-swatch.multicolor { background:linear-gradient(90deg,#d92727 0 24%,#2a9e53 24% 48%,#2770c9 48% 72%,#fff2c5 72%); box-shadow:0 0 5px rgba(42,112,201,.5); }
@media (prefers-reduced-motion:reduce) { .campaign-color-track { transition:none; } }
@media (max-width:620px) { .campaign-package-color-picker { padding:10px 13px 12px; } .campaign-color-controls button { font-size:.61rem; } }

@media (min-width: 851px) { .campaign-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.campaign-starting-banner { display:grid; grid-template-columns:1fr auto; gap:5px 30px; align-items:center; margin:0 0 32px; padding:20px 24px; border:1px solid #d5dfbc; border-radius:14px; background:linear-gradient(115deg,#173c22,#345d21); box-shadow:0 14px 30px rgba(20,57,31,.14); color:#fff; }
.campaign-starting-banner p { margin:0; color:#dcebc9; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.campaign-starting-banner strong { grid-row:span 2; font-family:"Fraunces",Georgia,serif; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1; text-align:right; }
.campaign-starting-banner s { color:#d7dfce; font-size:.6em; font-weight:600; }
.campaign-starting-banner em { color:#ffe09a; font-style:normal; }
.campaign-starting-banner span { color:#eff5e6; font-size:.84rem; line-height:1.4; }
@media (max-width:620px) { .campaign-starting-banner { grid-template-columns:1fr; gap:8px; padding:19px 20px; margin-bottom:26px; } .campaign-starting-banner strong { grid-row:auto; order:2; text-align:left; } .campaign-starting-banner span { order:3; } }

/* Compact inspiration gallery before package pricing. */
.campaign-gallery { padding:70px 0 42px; overflow:hidden; background:#fff; }
.campaign-gallery-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.62fr); gap:28px; align-items:end; }
.campaign-gallery-heading h2 { margin:7px 0 0; color:#14391f; font-family:"Fraunces",Georgia,serif; font-size:clamp(2rem,4vw,3.35rem); line-height:1.02; letter-spacing:-.035em; }
.campaign-gallery-heading h2 em { color:#557022; font-style:normal; }
.campaign-gallery-heading > p { max-width:34rem; margin:0 0 3px; color:#5d6b60; font-size:.94rem; line-height:1.58; }
.campaign-gallery-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; height:clamp(310px,32vw,454px); margin-top:28px; }
.campaign-gallery-item { min-width:0; margin:0; overflow:hidden; border-radius:12px; background:#dce8d1; box-shadow:0 10px 22px rgba(20,57,31,.08); }
.campaign-gallery-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.campaign-gallery-item:hover img { transform:scale(1.035); }
.campaign-gallery-featured { grid-row:span 2; }
.campaign-gallery-featured img { object-position:center 63%; }
@media (max-width:700px) {
  .campaign-gallery { padding:52px 0 28px; }
  .campaign-gallery-heading { grid-template-columns:1fr; gap:13px; }
  .campaign-gallery-heading > p { margin:0; font-size:.88rem; }
  .campaign-gallery-grid { display:flex; height:auto; gap:12px; margin-top:23px; padding:0 20px 10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .campaign-gallery-item, .campaign-gallery-featured { flex:0 0 min(82vw,360px); aspect-ratio:4 / 3; scroll-snap-align:start; }
  .campaign-gallery-featured img { object-position:center 60%; }
}
