/*
 * Chef Juan's® Brand Styling — Cheffy-inspired
 * Scoped to body.cj-brand so it doesn't leak into WooCommerce or SiteOrigin
 * pages we don't want to touch.
 *
 * Palette: matte black + brass gold + off-white cream.
 * Type: Cormorant Garamond (display) + Manrope (body) + JetBrains Mono (labels).
 */

body.cj-brand {
  --cj-paper: #0d0d0d;
  --cj-paper-2: #1a1614;
  --cj-paper-3: #17130f;
  --cj-ink: #f4ede0;
  --cj-ink-muted: #b8b1a0;
  --cj-ink-soft: #8a8272;
  --cj-brass: #c9a44a;
  --cj-brass-hi: #dbb85a;
  --cj-brass-lo: #8a6b2f;
  --cj-pepper: #7a2818;
  --cj-divider: #2a231e;
  --cj-shadow: rgba(0, 0, 0, 0.6);
}

/* Reset the theme's beige everywhere on scoped pages */
body.cj-brand,
body.cj-brand #page,
body.cj-brand #masthead,
body.cj-brand #content,
body.cj-brand #main,
body.cj-brand .site-content,
body.cj-brand .content-area,
body.cj-brand #primary,
body.cj-brand .entry-content {
  background: var(--cj-paper) !important;
  color: var(--cj-ink) !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.cj-brand {
  font-size: 17px;
  line-height: 1.65;
}

/* Header — dark, gold underline */
body.cj-brand #masthead,
body.cj-brand .site-header,
body.cj-brand .header-wrap {
  background: var(--cj-paper) !important;
  border-bottom: 1px solid var(--cj-divider);
}
body.cj-brand .site-title a,
body.cj-brand .header-wrap a { color: var(--cj-ink) !important; }
body.cj-brand .main-navigation a,
body.cj-brand #mainnav a { color: var(--cj-ink) !important; }
body.cj-brand .main-navigation a:hover,
body.cj-brand #mainnav a:hover { color: var(--cj-brass) !important; }

/* Headings — Cormorant Garamond serif */
body.cj-brand h1,
body.cj-brand h2,
body.cj-brand h3,
body.cj-brand h4,
body.cj-brand h5,
body.cj-brand .entry-content h1,
body.cj-brand .entry-content h2,
body.cj-brand .entry-content h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: var(--cj-ink) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
body.cj-brand .entry-content h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.05; margin: 0 0 20px; }
body.cj-brand .entry-content h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  margin: 48px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cj-brass);
  display: inline-block;
  padding-right: 24px;
}
body.cj-brand .entry-content h3 {
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--cj-brass-hi) !important;
  margin: 28px 0 10px;
  font-style: italic;
}

/* Body copy */
body.cj-brand .entry-content p {
  margin: 0 0 18px;
  max-width: 100%;
  color: var(--cj-ink);
}
body.cj-brand .entry-content strong { color: var(--cj-ink) !important; font-weight: 600; }
body.cj-brand .entry-content em { color: var(--cj-brass-hi); font-style: italic; }

/* Links — brass gold with underline animation */
body.cj-brand .entry-content a,
body.cj-brand .cj-hero-copy a {
  color: var(--cj-brass) !important;
  text-decoration: underline;
  text-decoration-color: var(--cj-brass-lo);
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
body.cj-brand .entry-content a:hover { color: var(--cj-brass-hi) !important; text-decoration-color: var(--cj-brass); }

/* Lists — brass gold bullets */
body.cj-brand .entry-content ul { padding-left: 20px; margin: 0 0 24px; }
body.cj-brand .entry-content ul li { margin-bottom: 8px; }
body.cj-brand .entry-content ul li::marker { color: var(--cj-brass); }
body.cj-brand .entry-content ol { padding-left: 24px; margin: 0 0 24px; }
body.cj-brand .entry-content ol li::marker { color: var(--cj-brass); font-family: "JetBrains Mono", monospace; font-size: 0.9em; font-weight: 500; }

/* Blockquotes — testimonial cards */
body.cj-brand .entry-content blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--cj-paper-2);
  border-left: 3px solid var(--cj-brass);
  border-radius: 0 4px 4px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--cj-ink);
  max-width: 42em;
}
body.cj-brand .entry-content blockquote strong,
body.cj-brand .entry-content blockquote em {
  display: block;
  margin-top: 12px;
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--cj-brass);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Container widths — ~90% of the viewport on desktop (Kenneth's ask: ≥80%) */
body.cj-brand .container,
body.cj-brand .site-content .container,
body.cj-brand #main > .container {
  max-width: min(1720px, 90vw) !important;
  padding-left: 24px;
  padding-right: 24px;
}
body.cj-brand .entry-content {
  max-width: min(1720px, 90vw);
  margin: 0 auto;
  padding: 0 24px 96px;
}
/* Pages without a hero band (like /quote/) need clearance below the site logo */
body.cj-brand:not(.has-post-thumbnail) .entry-content { padding-top: 72px; }
/* Body copy relaxed to 62rem (~990px) — a wider reading measure that still stays legible */
body.cj-brand .entry-content > p,
body.cj-brand .entry-content > ul,
body.cj-brand .entry-content > ol {
  max-width: 100%;
}
body.cj-brand .entry-content > blockquote { max-width: 100%; }

/* ========== HERO band — full-width, Cheffy-style composition
   Left: big serif headline + eyebrow + sub + placeholder CTA row
   Right: chef portrait with gold curved shape behind + rotating plate device
   Behind: giant "CHEF" watermark
   Full viewport width — breaks out of the .entry-content wrapper. */
.cj-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 100px 40px 0;
  background: linear-gradient(180deg, #0d0d0d 0%, #17130f 100%);
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 72px;
}
/* Big "CHEF" watermark behind everything — anchored to the LEFT on desktop
   so it lives behind the copy column instead of behind the chef portrait. */
.cj-hero::before {
  content: "CHEF";
  position: absolute;
  left: -2%;
  bottom: -40px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(180px, 30vw, 460px);
  line-height: 0.9;
  color: var(--cj-brass);
  opacity: 0.07;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .cj-hero::before { left: 50%; transform: translateX(-50%); font-size: clamp(140px, 28vw, 260px); }
}
/* Subtle radial glow */
.cj-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle at center, rgba(201, 164, 74, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.cj-hero-inner {
  position: relative;
  z-index: 1;
  max-width: min(1720px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 900px) {
  .cj-hero { padding: 60px 24px 0; margin-bottom: 48px; }
  .cj-hero-inner { grid-template-columns: 1fr; gap: 40px; align-items: center; }
}

/* Left column — copy, centered vertically in the hero (independent of the
   chef stage which is bottom-aligned) */
.cj-hero-copy {
  text-align: left;
  max-width: 640px;
  align-self: center;
}
.cj-hero-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cj-brass);
  font-weight: 500;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cj-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--cj-brass);
}
.cj-hero-eyebrow sup { font-size: 0.7em; opacity: 0.8; margin-left: 2px; }
.cj-hero-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(44px, 7vw, 88px) !important;
  font-weight: 500 !important;
  line-height: 0.98 !important;
  color: var(--cj-ink) !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cj-hero-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--cj-ink-muted);
  line-height: 1.45;
  margin: 0 0 32px;
  max-width: 32em;
}

/* Right column — chef portrait staged with gold curved shape + rotating plate.
   `align-items: end` on the parent lets the chef sit on the ground line. */
.cj-hero-stage {
  position: relative;
  width: 100%;
  min-height: 780px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (max-width: 900px) { .cj-hero-stage { min-height: 560px; } }

/* Ground shadow disabled — chef now overhangs the hero's bottom, so no
   floor to cast a shadow onto. */

/* Gold organic backdrop shape — behind the chef */
.cj-hero-shape {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6%;
  top: 4%;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 68% at 50% 55%,
      var(--cj-brass) 0%,
      var(--cj-brass) 52%,
      var(--cj-brass-lo) 82%,
      transparent 100%);
  border-radius: 46% 54% 42% 58% / 60% 55% 45% 40%;
  filter: saturate(1.1);
  opacity: 0.92;
}

/* Chef portrait — contained inside the hero, sits on the bottom edge (hero
   overflow: hidden clips the source photo's soft alpha edge, no bottom fade). */
.cj-hero-portrait-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 780px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0;
}
.cj-hero-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Rotating plate device — bigger, positioned in the lower-left of the stage
   where the chef's gesture / body lines direct the eye. */
.cj-hero-plate {
  position: absolute;
  z-index: 5;   /* above chef so it reads as foreground */
  left: -5%;
  bottom: 12%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cj-paper-3);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 0 8px rgba(244, 237, 224, 0.05),
    0 0 0 1px rgba(201, 164, 74, 0.4);
  animation: cj-plate-spin 40s linear infinite;
}
.cj-hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-hero-plate.is-placeholder {
  background:
    radial-gradient(circle at 40% 40%, var(--cj-paper-2) 0%, var(--cj-paper-3) 55%, #0a0a08 100%),
    var(--cj-paper-3);
  border: 1px dashed var(--cj-brass-lo);
}
.cj-hero-plate.is-placeholder::before {
  content: "PLATE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cj-brass-lo);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  animation: cj-plate-spin 40s linear infinite reverse;
}
@keyframes cj-plate-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cj-hero-plate,
  .cj-hero-plate.is-placeholder::before { animation: none; }
}
@media (max-width: 900px) {
  .cj-hero-plate { width: 180px; height: 180px; left: 2%; bottom: 4%; }
}

/* ========== Section band divider (::before on H2 after certain sections) ========== */
body.cj-brand .entry-content > h2:first-of-type { margin-top: 20px; }

/* FAQ block styling — auto-detected via "Frequently Asked Questions" heading */
body.cj-brand .entry-content h2 + h3 {
  font-family: "Manrope", sans-serif !important;
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  color: var(--cj-ink) !important;
  margin: 24px 0 6px;
  padding: 0;
  border: 0;
}

/* Sidebar / footer widgets, transparent background so widgets don't
   render as visible dark rectangles against the footer color. */
body.cj-brand #secondary,
body.cj-brand .widget-area {
  background: transparent !important;
  color: var(--cj-ink) !important;
}
body.cj-brand .widget,
body.cj-brand .footer-widgets .widget,
body.cj-brand .site-footer .widget {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.cj-brand .widget-title,
body.cj-brand .widgettitle {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: var(--cj-brass) !important;
  border-bottom: 1px solid var(--cj-divider) !important;
  padding-bottom: 8px;
  background: transparent !important;
}
body.cj-brand .widget a { color: var(--cj-ink) !important; }
body.cj-brand .widget a:hover { color: var(--cj-brass) !important; }

/* Footer, single flat background so there are no widget boxes visible. */
body.cj-brand .site-footer,
body.cj-brand #colophon,
body.cj-brand .footer-widgets,
body.cj-brand .site-info {
  background: var(--cj-paper) !important;
  color: var(--cj-ink-muted) !important;
  border-top: 1px solid var(--cj-divider);
}
body.cj-brand .site-footer a { color: var(--cj-brass) !important; }
body.cj-brand .site-footer h3,
body.cj-brand .site-footer h4 { color: var(--cj-ink) !important; }

/* Footer logo widget, kill its background too. */
body.cj-brand .site-footer .widget_media_image,
body.cj-brand .site-footer .widget_custom_html,
body.cj-brand .site-footer .widget_text,
body.cj-brand .site-footer img,
body.cj-brand .footer-widgets img {
  background: transparent !important;
  box-shadow: none !important;
}

/* Buttons — brass */
body.cj-brand .button,
body.cj-brand button:not(.wc-block-cart-item__remove-link),
body.cj-brand input[type="submit"],
body.cj-brand .wp-block-button__link {
  background: var(--cj-brass) !important;
  color: var(--cj-paper) !important;
  border: 0 !important;
  border-radius: 3px !important;
  padding: 14px 28px !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease !important;
}
body.cj-brand .button:hover,
body.cj-brand input[type="submit"]:hover { background: var(--cj-brass-hi) !important; color: var(--cj-paper) !important; }

/* Real, wired CTAs: every [Label ->] in the source copy becomes an anchor
   with class="cj-cta" pointing at /quote/?service=X. */
body.cj-brand .entry-content a.cj-cta {
  display: inline-block;
  padding: 16px 32px;
  margin: 8px 6px 8px 0;
  background: var(--cj-brass) !important;
  color: var(--cj-paper) !important;
  border: 1px solid var(--cj-brass);
  border-radius: 3px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
body.cj-brand .entry-content a.cj-cta:hover,
body.cj-brand .entry-content a.cj-cta:focus-visible {
  background: var(--cj-brass-hi) !important;
  color: var(--cj-paper) !important;
  outline: none;
}
body.cj-brand .entry-content a.cj-cta span {
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.15s ease;
}
body.cj-brand .entry-content a.cj-cta:hover span { transform: translateX(3px); }

/* WPForms styling to match brand */
body.cj-brand .wpforms-form {
  background: var(--cj-paper-2);
  padding: 32px;
  border-radius: 4px;
  border: 1px solid var(--cj-divider);
  margin: 24px 0;
}
body.cj-brand .wpforms-form label,
body.cj-brand .wpforms-form legend {
  color: var(--cj-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
}
body.cj-brand .wpforms-form input[type="text"],
body.cj-brand .wpforms-form input[type="email"],
body.cj-brand .wpforms-form input[type="tel"],
body.cj-brand .wpforms-form input[type="number"],
body.cj-brand .wpforms-form input[type="date"],
body.cj-brand .wpforms-form select,
body.cj-brand .wpforms-form textarea {
  background: var(--cj-paper-3) !important;
  color: var(--cj-ink) !important;
  border: 1px solid var(--cj-divider) !important;
  border-radius: 3px !important;
  padding: 12px 14px !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
}
body.cj-brand .wpforms-form input:focus,
body.cj-brand .wpforms-form select:focus,
body.cj-brand .wpforms-form textarea:focus {
  border-color: var(--cj-brass) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 164, 74, 0.2) !important;
}
body.cj-brand .wpforms-form .wpforms-field-description {
  color: var(--cj-ink-muted) !important;
}
body.cj-brand .wpforms-form .wpforms-submit {
  background: var(--cj-brass) !important;
  color: var(--cj-paper) !important;
  border: 0 !important;
  padding: 16px 40px !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  cursor: pointer;
  transition: background 0.15s ease !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px;
}
body.cj-brand .wpforms-form .wpforms-submit:hover { background: var(--cj-brass-hi) !important; }
/* Hide the idle spinner (WPForms shows a spinner beside the label even when not processing) */
body.cj-brand .wpforms-form .wpforms-submit-spinner {
  display: none !important;
}
body.cj-brand .wpforms-form .wpforms-submit.wpforms-submit-processing .wpforms-submit-spinner {
  display: inline-block !important;
  margin-left: 8px;
}

/* Preformatted / code */
body.cj-brand code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  background: var(--cj-paper-2);
  color: var(--cj-brass-hi);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Horizontal rule */
body.cj-brand hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cj-brass-lo) 50%, transparent 100%);
  margin: 40px 0;
}

/* Selection color */
body.cj-brand ::selection { background: var(--cj-brass); color: var(--cj-paper); }

/* ================================================================
   ENVIRONMENT hero pattern
   Opt in per page with postmeta _cj_hero_style = "environment".
   Uses the featured image as a full-bleed background (chef composed on
   the right, environment fills the left), and puts a blurred dim veil
   over the left portion so the copy reads cleanly.
   ================================================================ */
.cj-hero.cj-hero-environment {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding: 0;
  min-height: 760px;
  display: flex;
  align-items: stretch;
  position: relative;
}
@media (max-width: 900px) {
  .cj-hero.cj-hero-environment { min-height: 560px; }
}
/* No CHEF watermark or gold glow in environment mode.
   The `::before` is reused below for the sharp foreground image overlay,
   so only `::after` needs to be hidden here (the CHEF watermark rule was
   on the base `.cj-hero::before` which we override below). */
.cj-hero.cj-hero-environment::after { display: none; }

/* Blur veil covers the full hero so backdrop-filter blurs everything,
   then the horizontal gradient on top darkens only the LEFT half and
   fades to transparent on the right so the sharp chef reads on the right.
   (Kept simple, no mask-image which can block backdrop-filter in some browsers.) */
/* CHEF watermark on environment pages: soft brass text over the blurred veil,
   sits behind the hero copy but in front of the veil. */
.cj-hero.cj-hero-environment .cj-hero-watermark {
  position: absolute;
  left: -2%;
  bottom: -40px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(180px, 30vw, 460px);
  line-height: 0.9;
  color: var(--cj-brass);
  opacity: 0.09;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .cj-hero.cj-hero-environment .cj-hero-watermark {
    left: 50%; transform: translateX(-50%);
    font-size: clamp(140px, 28vw, 260px);
  }
}

.cj-hero.cj-hero-environment .cj-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-backdrop-filter: blur(18px) saturate(108%);
  backdrop-filter: blur(18px) saturate(108%);
  background: linear-gradient(90deg,
    rgba(13, 13, 13, 0.92) 0%,
    rgba(13, 13, 13, 0.86) 30%,
    rgba(13, 13, 13, 0.62) 52%,
    rgba(13, 13, 13, 0.22) 72%,
    rgba(13, 13, 13, 0.05) 88%,
    transparent 100%);
  pointer-events: none;
}
/* Sharp foreground: a copy of the same image, positioned on the right,
   soft-masked on its left edge so it blends into the blurred veil.
   This overrides the base `.cj-hero::before` CHEF watermark completely. */
.cj-hero.cj-hero-environment::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 55%;
  height: auto;
  z-index: 2;
  background-image: inherit;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  opacity: 1;
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .cj-hero.cj-hero-environment .cj-hero-veil {
    background: linear-gradient(180deg,
      rgba(13, 13, 13, 0.55) 0%,
      rgba(13, 13, 13, 0.82) 55%,
      rgba(13, 13, 13, 0.92) 100%);
  }
  .cj-hero.cj-hero-environment::before { display: none; }
}

.cj-hero.cj-hero-environment .cj-hero-inner {
  position: relative;
  z-index: 3;  /* above watermark (z:2), veil (z:1), and sharp foreground (z:2) */
  max-width: min(1720px, 90vw);
  margin: 0 auto;
  padding: 100px 40px 100px;
  display: block;
  width: 100%;
}
@media (max-width: 900px) {
  .cj-hero.cj-hero-environment .cj-hero-inner {
    padding: 72px 24px 72px;
  }
}

.cj-hero.cj-hero-environment .cj-hero-copy {
  max-width: 640px;
  align-self: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.cj-brand * { transition: none !important; animation: none !important; }
}