/* ==========================================================================
   InvestJuice LOCAL PREVIEW: bright cream / orange homepage hero
   + dark green "Built by us" band + compact chrome gear brand moment.
   Loaded after styles.css; scoped to body.cream-home.
   ========================================================================== */
body.cream-home {
  --ij-cream: #fff4e2;
  --ij-orange: #ff4d12;
  --ij-orange-hover: #e23c00;
  --ij-ink: #10141f;
  --ij-yellow: #ffc23d;
  --ij-green: #0e4a3c;
  --ij-green-deep: #0a3a2f;
  background: var(--ij-cream) !important;
  overflow-x: clip;
}
body.cream-home .page-glow { display: none !important; }

/* ---------- Header on cream ---------- */
body.cream-home .site-header {
  background: rgba(255, 244, 226, 0.94) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(12px) !important;
  backdrop-filter: saturate(1.2) blur(12px) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
body.cream-home .site-header.is-scrolled { border-bottom-color: rgba(16, 20, 31, 0.08) !important; }
body.cream-home .site-header .brand { background: transparent !important; padding: 0 !important; box-shadow: none !important; }
body.cream-home .site-header .brand img { height: 46px !important; width: auto !important; max-width: none !important; display: block !important; filter: none !important; }
body.cream-home .site-header .nav { gap: 2.2rem !important; margin-left: auto; margin-right: 2rem; }
body.cream-home .site-header .nav a {
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--ij-ink) !important;
  background: none !important;
  padding: 0.25rem 0 !important;
}
body.cream-home .site-header .nav a:hover { color: var(--ij-orange) !important; }
body.cream-home .cream-pill,
body.cream-home .cream-hero-cta {
  background: var(--ij-orange) !important;
  border-color: var(--ij-orange) !important;
  color: var(--ij-ink) !important;
  border-radius: 999px !important;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px rgba(255, 77, 18, 0.28) !important;
}
body.cream-home .cream-pill { padding: 0.72rem 1.4rem !important; font-size: 0.98rem !important; }
body.cream-home .cream-pill:hover,
body.cream-home .cream-hero-cta:hover { background: var(--ij-orange-hover) !important; border-color: var(--ij-orange-hover) !important; }

/* ---------- Hero ---------- */
body.cream-home .cream-hero {
  position: relative;
  background: var(--ij-cream);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  overflow: clip;
}
body.cream-home .cream-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
body.cream-home h1.cream-hero-title {
  margin: 0 !important;
  max-width: 9.4em;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.75rem, 5.6vw, 5.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  color: var(--ij-ink) !important;
  -webkit-text-fill-color: var(--ij-ink) !important;
  text-wrap: balance;
  text-shadow: none !important;
}
/* yellow highlighter behind "squeeze" */
body.cream-home .cream-hl {
  position: relative;
  display: inline-block;
  z-index: 0;
  white-space: nowrap;
  padding: 0 0.12em;
  margin-left: 0.04em;
}
body.cream-home .cream-hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.1em;
  right: -0.22em;
  top: 0.24em;
  bottom: 0.02em;
  background: var(--ij-yellow);
  border-radius: 0.14em 0.5em 0.2em 0.45em / 0.4em 0.22em 0.5em 0.25em;
  transform: skewX(-12deg) rotate(-1.6deg);
  box-shadow: 0.08em 0.03em 0 -0.02em rgba(255, 194, 61, 0.55);
}
body.cream-home .cream-hl::after {
  /* dry brush tail on the marker */
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.42em;
  top: 0.46em;
  width: 0.34em;
  height: 0.2em;
  background: var(--ij-yellow);
  border-radius: 0 50% 50% 0;
  transform: skewX(-12deg) rotate(-4deg);
  opacity: 0.85;
}
body.cream-home .cream-hero-sub {
  margin: 1.5rem 0 0 !important;
  max-width: 27rem;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: #4d4a45 !important;
}
body.cream-home .cream-hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
body.cream-home .cream-hero-cta { padding: 1.05rem 2.1rem !important; font-size: 1.12rem !important; }

/* right column */
body.cream-home .cream-hero-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  justify-self: end;
  padding: 0 4% 6% 8%;
}
body.cream-home .cream-hero-blob {
  position: absolute;
  z-index: 0;
  left: -2%;
  right: -4%;
  top: 22%;
  bottom: -2%;
  width: 106%;
  height: 80%;
  fill: var(--ij-green);
}
body.cream-home .cream-hero-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  background: #d9cdb4;
  box-shadow: 0 24px 50px rgba(16, 20, 31, 0.18);
}
body.cream-home .cream-hero-photo picture,
body.cream-home .cream-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
body.cream-home .cream-hero-photo img { object-fit: cover; object-position: 46% 42%; }

/* yellow sticker */
body.cream-home .cream-sticker {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: -2%;
  width: clamp(118px, 12vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ij-yellow);
  color: var(--ij-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 1.02rem);
  line-height: 1.12;
  transform: rotate(-9deg);
  box-shadow: 0 14px 30px rgba(16, 20, 31, 0.22), inset 0 0 0 3px rgba(16, 20, 31, 0.06);
}
body.cream-home .cream-sticker-slice { width: 30%; height: auto; margin-bottom: 0.3em; }
body.cream-home .cream-sticker-swash {
  display: block;
  width: 44%;
  height: 3px;
  margin-top: 0.45em;
  border-radius: 3px;
  background: var(--ij-ink);
  transform: rotate(-3deg);
}

/* ---------- Built by us band: dark green, right under hero ---------- */
body.cream-home #work-sample.cream-built-band {
  background: var(--ij-green) !important;
  color: rgba(255, 244, 226, 0.86) !important;
  padding-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
  border: 0 !important;
}
body.cream-home #work-sample.cream-built-band::before,
body.cream-home #work-sample.cream-built-band::after { display: none !important; }
body.cream-home #work-sample .section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.8rem;
  color: #fff4e2 !important;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
body.cream-home #work-sample .section-label::before,
body.cream-home #work-sample .section-label::after {
  content: "" !important;
  display: block !important;
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: var(--ij-yellow) !important;
  position: static !important;
  margin: 0 !important;
}
body.cream-home #work-sample .section-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.cream-home #work-sample .lede { color: rgba(255, 244, 226, 0.82) !important; }

/* ---------- Bottom brand moment: compact chrome gear card ---------- */
body.cream-home .gear-moment {
  background: var(--ij-cream);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
body.cream-home .gear-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  height: clamp(320px, 28vw, 400px);
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 30px 60px rgba(16, 20, 31, 0.18);
}
body.cream-home .gear-card-copy {
  position: relative;
  z-index: 2;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  max-width: 30rem;
}
body.cream-home .gear-card-kicker {
  margin: 0 0 0.9rem !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ij-yellow) !important;
}
body.cream-home h2.gear-card-title {
  margin: 0 !important;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.cream-home h2.gear-card-title span { color: var(--ij-orange) !important; -webkit-text-fill-color: var(--ij-orange) !important; }
body.cream-home .gear-card-text {
  margin: 1rem 0 0 !important;
  max-width: 24rem;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
body.cream-home .gear-card-media {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 30%;
  pointer-events: none;
}
body.cream-home .gear-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #050506 0%, rgba(5, 5, 6, 0.75) 14%, rgba(5, 5, 6, 0) 40%);
}
body.cream-home .gear-card-plate,
body.cream-home .gear-card-drops { position: absolute; inset: 0; }
body.cream-home .gear-card-plate img,
body.cream-home .gear-card-drops img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
body.cream-home .gear-card-drops { mix-blend-mode: screen; opacity: 0.5; }

/* gentle motion: slow breathe + drift, only while on screen */
@keyframes gear-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes gear-drift { from { transform: translate3d(0, 0, 0) scale(1.02); opacity: 0.42; } to { transform: translate3d(-1.2%, -1%, 0) scale(1.06); opacity: 0.62; } }
body.cream-home .gear-card-plate { transform-origin: 70% 50%; animation: gear-breathe 9s ease-in-out infinite alternate; animation-play-state: paused; }
body.cream-home .gear-card-drops { transform-origin: 70% 50%; animation: gear-drift 11s ease-in-out infinite alternate; animation-play-state: paused; }
body.cream-home .gear-card.is-live .gear-card-plate,
body.cream-home .gear-card.is-live .gear-card-drops { animation-play-state: running; }

/* ==========================================================================
   Rest of homepage: cream / orange / dark green system (restyle only)
   ========================================================================== */
body.cream-home main > .section,
body.cream-home .section-home-inquiry,
body.cream-home #packages,
body.cream-home #squeeze,
body.cream-home #services,
body.cream-home .filmstrip { background: var(--ij-cream) !important; }
body.cream-home #creative-on-call,
body.cream-home main > .section.section-surface:not(#work-sample) { background: #fbe9cc !important; border-color: rgba(16, 20, 31, 0.06) !important; }
body.cream-home main .section::before,
body.cream-home #services::before,
body.cream-home #services::after { background-image: none !important; }

/* labels and headings */
body.cream-home main .section-label { color: var(--ij-green) !important; letter-spacing: 0.14em !important; }
body.cream-home main h2,
body.cream-home main .section-title {
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ij-ink) !important;
  -webkit-text-fill-color: currentColor;
}
body.cream-home .section-head em,
body.cream-home .section-title em { color: #D93800 !important; -webkit-text-fill-color: #D93800 !important; }

/* buttons: brand orange, ink text, pill */
body.cream-home .btn-accent {
  background: var(--ij-orange) !important;
  border-color: var(--ij-orange) !important;
  color: var(--ij-ink) !important;
  border-radius: 999px !important;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 700 !important;
}
body.cream-home .btn-accent:hover { background: var(--ij-orange-hover) !important; border-color: var(--ij-orange-hover) !important; color: var(--ij-ink) !important; }
body.cream-home main .btn-ghost,
body.cream-home main .btn-secondary {
  border-radius: 999px !important;
  border: 2px solid var(--ij-ink) !important;
  color: var(--ij-ink) !important;
  background: transparent !important;
  font-family: "Outfit", "Inter", sans-serif !important;
  font-weight: 700 !important;
}
body.cream-home main .btn-ghost:hover { background: var(--ij-ink) !important; color: var(--ij-cream) !important; }

/* cards: warm surface, soft radius */
body.cream-home .home-inquiry-form,
body.cream-home .package,
body.cream-home .svc-card,
body.cream-home .brand-pitch-point,
body.cream-home .faq-list details,
body.cream-home .faq-item,
body.cream-home .oncall-points > *,
body.cream-home .capacity-banner {
  border-radius: 22px !important;
}
body.cream-home .svc-card-shot { background: #f3e2c4 !important; border-radius: 14px; }
body.cream-home .svc-card:not(.svc-card--featured) { background: #fffaf1 !important; border-color: rgba(16, 20, 31, 0.1) !important; }

/* inquiry form inputs */
body.cream-home .home-inquiry-form input:not(.hp-field),
body.cream-home .home-inquiry-form select,
body.cream-home .home-inquiry-form textarea { border-radius: 14px !important; background: #fff !important; }
body.cream-home .home-inquiry-form input:focus,
body.cream-home .home-inquiry-form select:focus,
body.cream-home .home-inquiry-form textarea:focus { border-color: var(--ij-orange) !important; box-shadow: 0 0 0 3px rgba(255, 77, 18, 0.2) !important; outline: none !important; }
body.cream-home .home-inquiry-form .form-fine a { color: var(--ij-green) !important; }
body.cream-home #home-inquiry-title { font-size: clamp(2rem, 3.6vw, 2.8rem) !important; }

/* Path: dark green band */
body.cream-home #product-path {
  background: radial-gradient(700px 360px at 50% -10%, rgba(255, 194, 61, 0.12), transparent 60%), var(--ij-green) !important;
  color: var(--ij-cream) !important;
}
body.cream-home #product-path .section-label { color: var(--ij-yellow) !important; }
body.cream-home #product-path .section-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.cream-home #product-path .lede { color: rgba(255, 244, 226, 0.85) !important; }
body.cream-home #product-path .product-path-track {
  background: transparent !important;
  border: 0 !important;
  gap: 1rem !important;
}
body.cream-home #product-path .product-path-step {
  background: var(--ij-cream) !important;
  border: 0 !important;
  border-radius: 22px !important;
  color: var(--ij-ink) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
}
body.cream-home #product-path .product-path-step strong { color: var(--ij-ink) !important; font-family: "Outfit", sans-serif !important; font-size: 1.35rem !important; }
body.cream-home #product-path .product-path-step p { color: #4d4a45 !important; }
body.cream-home #product-path .pp-n {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--ij-yellow) !important; color: var(--ij-ink) !important;
  font-weight: 800 !important; letter-spacing: 0 !important;
}

/* Packages: featured card dark green instead of ink */
body.cream-home #pkg-launch-sprint.package {
  background: radial-gradient(420px 260px at 0% 0%, rgba(255, 194, 61, 0.16), transparent 60%), var(--ij-green) !important;
  border-color: transparent !important;
  box-shadow: 0 24px 50px rgba(14, 74, 60, 0.28) !important;
}
body.cream-home #pkg-launch-sprint,
body.cream-home #pkg-launch-sprint h3,
body.cream-home #pkg-launch-sprint .package-price,
body.cream-home #pkg-launch-sprint strong { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.cream-home #pkg-launch-sprint p,
body.cream-home #pkg-launch-sprint li,
body.cream-home #pkg-launch-sprint small,
body.cream-home #pkg-launch-sprint span:not([class*="badge"]):not([class*="tag"]) { color: rgba(255, 244, 226, 0.88) !important; }

/* Services: featured packaging card dark green; tags cream */
body.cream-home .svc-card--featured,
body.cream-home .svc-grid > .svc-card--featured {
  background: radial-gradient(500px 300px at 0% 0%, rgba(255, 194, 61, 0.14), transparent 60%), var(--ij-green) !important;
}
body.cream-home .svc-card--featured .svc-card-n { color: var(--ij-yellow) !important; }

/* Squeeze thesis: marker style highlight, matching hero */
body.cream-home .brand-pitch-accent {
  background: linear-gradient(100deg, transparent 0 1%, rgba(255, 194, 61, 0.95) 2% 97%, transparent 98%) 0 62% / 100% 0.48em no-repeat !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.cream-home .brand-pitch-point { background: #fffaf1 !important; }

/* FAQ */
body.cream-home .faq-list summary::after,
body.cream-home .faq-list .faq-toggle { color: var(--ij-orange) !important; }

/* Final CTA: dark green band (no ink) */
body.cream-home .section-dark.cta-impact,
body.cream-home .cta-impact {
  background: radial-gradient(560px 300px at 50% 120%, rgba(255, 77, 18, 0.28), transparent 70%), var(--ij-green) !important;
}
body.cream-home .cta-impact .section-label { color: var(--ij-yellow) !important; }
body.cream-home .cta-impact h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.cream-home .cta-impact p { color: rgba(255, 244, 226, 0.88) !important; }

/* Footer: deep green, cream text */
body.cream-home .site-footer { background: var(--ij-green-deep) !important; }
body.cream-home .site-footer h4 { color: var(--ij-yellow) !important; }
body.cream-home .site-footer a { color: rgba(255, 244, 226, 0.88) !important; }
body.cream-home .site-footer a:hover { color: #fff !important; }

/* Mobile sticky CTA on cream */
body.cream-home .mobile-cta { background: rgba(255, 244, 226, 0.96) !important; border-top: 1px solid rgba(16, 20, 31, 0.08) !important; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 900px) {
  body.cream-home .site-header .nav { margin-right: 0; }
  body.cream-home .site-header .header-actions { display: none !important; }
  body.cream-home .site-header .brand img { height: 40px !important; }
  body.cream-home .cream-hero { padding: 1rem 0 3rem; }
  body.cream-home .cream-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  body.cream-home h1.cream-hero-title { font-size: clamp(2.6rem, 11.6vw, 3.6rem) !important; max-width: 9em; }
  body.cream-home .cream-hero-sub { margin-top: 1.1rem !important; font-size: 1.05rem !important; }
  body.cream-home .cream-hero-ctas { margin-top: 1.5rem; }
  body.cream-home .cream-hero-visual { justify-self: stretch; max-width: 560px; padding: 0 5% 9% 3%; margin: 0 auto; }
  body.cream-home .cream-hero-blob { left: -4%; right: -4%; width: 108%; top: 18%; height: 84%; }
  body.cream-home .cream-hero-photo { border-radius: 22px; }
  body.cream-home .cream-sticker { width: 104px; font-size: 0.76rem; right: -1%; bottom: -3%; }

  body.cream-home .gear-card { display: block; height: auto; border-radius: 22px; }
  body.cream-home .gear-card-media { position: relative; inset: auto; height: 190px; }
  body.cream-home .gear-card-media::after { background: linear-gradient(180deg, rgba(5, 5, 6, 0) 55%, #050506 100%); }
  body.cream-home .gear-card-plate img,
  body.cream-home .gear-card-drops img { object-position: 72% 50%; }
  body.cream-home .gear-card-copy { padding: 0.5rem 1.4rem 1.6rem; }
  body.cream-home h2.gear-card-title { font-size: 1.6rem !important; }
  body.cream-home .gear-card-text { font-size: 0.95rem !important; }
}
@media (max-width: 420px) {
  body.cream-home .cream-hero-cta { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.cream-home .gear-card-plate,
  body.cream-home .gear-card-drops { animation: none !important; transform: none !important; }
}

/* ---------- fixes after review ---------- */
body.cream-home .btn { -webkit-text-fill-color: currentColor !important; }
body.cream-home #pkg-launch-sprint .btn-ghost,
body.cream-home #pkg-launch-sprint .btn-secondary {
  border-color: rgba(255, 244, 226, 0.85) !important;
  color: var(--ij-cream) !important;
  background: transparent !important;
}
body.cream-home #pkg-launch-sprint .btn-ghost:hover,
body.cream-home #pkg-launch-sprint .btn-secondary:hover { background: var(--ij-cream) !important; color: var(--ij-ink) !important; }
body.cream-home #pkg-launch-sprint .btn-accent { color: var(--ij-ink) !important; }
body.cream-home .oncall-guarantee {
  background: #fffaf1 !important;
  border: 0 !important;
  border-left: 4px solid var(--ij-yellow) !important;
  border-radius: 14px !important;
  color: var(--ij-ink) !important;
}
/* fade media in from the copy side so no tonal banding shows in the black */
body.cream-home .gear-card-media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
body.cream-home .gear-card-media::after { display: none; }
@media (max-width: 900px) {
  body.cream-home .gear-card-media {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
}
/* tighten on faces: less canopy, everyone still in frame */
body.cream-home .cream-hero-photo img { transform: scale(1.14); transform-origin: 48% 88%; }

/* ==========================================================================
   Primary filled buttons: WHITE text on deeper orange (AA)
   #D93800 with #fff = 4.65:1; hover/active #B82F00 with #fff = 6.10:1.
   Bright #FF4D12 stays for accents only (logo Juice, marker, sticker, orange text).
   ========================================================================== */
body.cream-home { --ij-btn: #d93800; --ij-btn-hover: #b82f00; }
body.cream-home .btn-accent,
body.cream-home .btn-primary,
body.cream-home .cream-pill,
body.cream-home .cream-hero-cta,
body.cream-home #pkg-launch-sprint .btn-accent,
body.cream-home .mobile-cta .btn,
body.cream-home .home-inquiry-form button[type="submit"] {
  background: var(--ij-btn) !important;
  border-color: var(--ij-btn) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 10px 24px rgba(217, 56, 0, 0.26) !important;
}
body.cream-home .btn-accent:hover,
body.cream-home .btn-primary:hover,
body.cream-home .cream-pill:hover,
body.cream-home .cream-hero-cta:hover,
body.cream-home .btn-accent:active,
body.cream-home .btn-primary:active,
body.cream-home .home-inquiry-form button[type="submit"]:hover,
body.cream-home .mobile-cta .btn:hover {
  background: var(--ij-btn-hover) !important;
  border-color: var(--ij-btn-hover) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.cream-home .btn-accent:focus-visible,
body.cream-home .btn-primary:focus-visible,
body.cream-home .cream-pill:focus-visible,
body.cream-home .cream-hero-cta:focus-visible,
body.cream-home .home-inquiry-form button[type="submit"]:focus-visible,
body.cream-home .ij-chat-toggle:focus-visible {
  background: var(--ij-btn-hover) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  outline: 3px solid var(--ij-ink) !important;
  outline-offset: 3px !important;
}
/* other filled orange pills */
body.cream-home .package-badge,
body.cream-home .ij-chat-toggle {
  background: var(--ij-btn) !important;
  border-color: var(--ij-btn) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.cream-home .ij-chat-toggle:hover { background: var(--ij-btn-hover) !important; }

/* ===== Crop + spacing fix (2026-10-10, v8) ===== */
body.cream-home #work-sample.cream-built-band { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: clamp(64px, 8vw, 104px) !important; scroll-margin-top: 80px; }
body.cream-home #work-sample .section-head { margin-bottom: 28px !important; }
body.cream-home #work-sample .proof-brands { margin: 0 auto 32px !important; padding: 4px 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.cream-home #work-sample .work-showcase-grid { gap: 28px !important; align-items: stretch !important; margin-top: 0 !important; }
body.cream-home #work-sample .work-card { display: flex !important; flex-direction: column !important; height: 100%; overflow: hidden; }
body.cream-home #work-sample .work-card-copy { padding: 24px !important; flex: 1 1 auto; }
/* Product art: always show the whole frame, never crop the product */
body.cream-home #work-sample .work-card-visual,
body.cream-home #work-sample .work-card-visual[style] { aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important; max-height: none !important; background: #0a3d33 !important; }
body.cream-home #work-sample .work-card-visual img { object-fit: contain !important; object-position: center center !important; padding: 0 !important; height: 100% !important; width: 100% !important; }
body.cream-home #work-sample .work-gallery-item img,
body.cream-home #work-sample .work-card-detail img,
body.cream-home #work-sample .photo-proof-item img { object-fit: contain !important; object-position: center !important; background: #0a3d33 !important; padding: 0 !important; }
body.cream-home #work-sample .work-card-media,
body.cream-home #work-sample .work-card--duo .work-card-media { grid-template-columns: 1fr !important; }
body.cream-home #work-sample .photo-proof-strip { margin-top: 32px !important; gap: 16px !important; }
body.cream-home #work-sample .packages-note--impact { margin-top: 40px !important; margin-bottom: 0 !important; }
body.cream-home .gear-moment img { object-fit: cover; }
@media (max-width: 560px) {
  body.cream-home #work-sample .work-card-copy { padding: 20px !important; }
  body.cream-home #work-sample .proof-brands { margin-bottom: 24px !important; }
}
body.cream-home #work-sample .work-card[hidden], body.cream-home #work-sample .work-card.is-filtered-out { display: none !important; }