/* ===== Cross-browser stability for the hero ===== */

/* 1) Always fit: scale the foreground slightly (you said 90% works) */
.hero-video .fg-wrap{
  transform-origin: top center;
  transform: scale(var(--fg-scale, 0.90));   /* default 90% everywhere */
}

/* Optional: let it grow a bit on very wide desktops */
@media (min-aspect-ratio: 16/9) and (min-width: 1400px){
  .hero-video .fg-wrap{ transform: scale(var(--fg-scale-wide, 0.94)); }
}

/* 2) Keep arrow inside on all OS: add safe-area bottom */
.hero-video .fg-wrap{
  padding-bottom: calc(var(--fg-bot, 10vh) + env(safe-area-inset-bottom, 0px));
}

/* 3) Headings: fluid sizes + prevent ugly wraps */
.hero-video h1{
  font-size: clamp(2.4rem, 8vw, 6rem);
  line-height: 1.05;
  max-width: min(90vw, 18ch);
  margin: 0 auto;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
}
.hero-video h2{
  font-size: clamp(1.1rem, 3.3vw, 2.2rem);
  line-height: 1.15;
  max-width: min(92vw, 28ch);
  margin: 0 auto;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
}

/* If your heading reads: Authentic Mexican Mesquite,
   keep the last two words together to stop the “Mexican↵Mesquite” split. */
.hero-video h2 .nowrap{ white-space: nowrap; }

/* 4) Platform quirks: keep text metrics steady */
html{
  -webkit-text-size-adjust: 100%;   /* iOS text zoom quirks */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

/* 5) Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .show-fg .scroll-down{ animation: none; opacity: 1; }
}

/* 6) Extra safety for very short viewports (small laptops) */
@media (max-height: 720px){
  .hero-video .fg-wrap{ transform: scale(0.88); }
}









textarea {
  height: 50px;   /* reduce this number to shrink box height */
  resize: vertical; /* keeps manual resizing if you want */
}

textarea {
  height: 90px;     /* matches visual rhythm of other boxes */
  width: 105%;      /* keeps same length as input fields */
  resize: none;     /* optional – disables manual resize */
}





/* Submit Button Color + Animation */

form input[type="submit"],
form button[type="submit"] {
  background-color: #F15A2B !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
  transform: scale(1.05) !important; /* default slightly larger */
}

form input[type="submit"]:hover,
form button[type="submit"]:hover {
  background-color: #d63e0f !important;
  transform: scale(1.0) !important; /* shrinks on hover */
  box-shadow: 0 3px 6px rgba(0,0,0,0.2) !important;
}

/* Contact Us Icon Animations */
.elementor-icon-box-icon,
.elementor-icon {
  transition: all 0.25s ease;
  transform: scale(1.05);
}

/* Hover state (shrinks slightly like your social icons) */
.elementor-icon-box-icon:hover,
.elementor-icon:hover {
  transform: scale(1.0);
}

/* Default state */
.elementor-icon-box-wrapper {
  transition: all 0.25s ease;
  transform: scale(1.05);
}

/* Hover state: shrink entire box (icon + text) */
.elementor-icon-box-wrapper:hover {
  transform: scale(1.0);
}




/* === CARD BASE === */
.products-row .prod-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
  cursor:pointer;
}
.products-row .prod-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* === FRONT LAYER (IMAGE + TITLE) === */
.products-row .prod-front{
  position:relative;
  z-index:2;
  transition:transform .40s ease, opacity .40s ease;
}

/* === BACK LAYER (HEADING + TEXT) === */
.products-row .prod-desc{
  position:absolute;
  inset:0;
  z-index:1;
  background:#fff;
  padding:20px 24px;
  transform:translateY(100%);
  opacity:0;
  transition:transform .50s ease, opacity .40s ease;

  /* Center content */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:12px;
  overflow:visible;
}

/* Make sure everything inside the back card is visible */
.products-row .prod-desc > *{
  position:relative !important;
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  margin:0;
}

/* === TEXT STYLING === */
.products-row .prod-desc,
.products-row .prod-desc p{ 
  color:#333 !important; 
  font-size:16px;
  line-height:1.5;
  margin:0;
}

/* Heading style */
.products-row .prod-desc .elementor-heading-title,
.products-row .prod-desc h1,
.products-row .prod-desc h2,
.products-row .prod-desc h3,
.products-row .prod-desc h4,
.products-row .prod-desc h5,
.products-row .prod-desc h6{
  color:#F15A2B !important;      /* heading color */
  font-size:35px !important;     /* heading size */
  font-weight:700 !important;
  line-height:1.3 !important;
  text-transform:none;
  margin: 0px !important;
  letter-spacing:0.5px;
}

/* === OPEN STATE === */
.products-row .prod-card.open .prod-front{
  transform:translateY(-28px) scale(.985);
  opacity:0;
  pointer-events:none;
}
.products-row .prod-card.open .prod-desc{
  transform:translateY(0);
  opacity:1;
  z-index:5;
  pointer-events:auto;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce){
  .products-row .prod-card,
  .products-row .prod-front,
  .products-row .prod-desc{
    transition:none; transform:none; opacity:1;
  }
}

/* cap text width so it wraps the same in editor and live */
.products-row .prod-desc{padding:24px}
.products-row .prod-desc > *{max-width:560px;margin:0 auto}

.products-row .prod-desc{
  padding:40px 32px 28px;  /* smaller bottom space */
  max-width:460px;         /* slightly wider text */
}

.products-row .prod-desc .elementor-heading-title{
  margin-bottom:8px;
  line-height:1.2;
}

.products-row .prod-desc p{
  line-height:1.6;
}







/* hide everything at start */
.fg { 
  opacity: 0; 
  transform: translateY(12px); 



	
	
	
	
	/* Fix: ensure clicks pass through any nesting inside .fg-wrap */
.hero-video .fg-wrap *{ pointer-events:auto !important; }

	
	
	
	
	
	
	
	:root{
  --bg:#FDF6F0; --ink:#2B2B2B; --brand:#C65A1E; --taupe:#CDC6BF;
}

/* flashcard container */
.flashcard{
  border-radius:28px;
  background:var(--bg);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  overflow:hidden;             /* clips image to rounded corners */
  position:relative;
}

/* right image fills column cleanly */
.flashcard .elementor-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* CTA chip */
.cta-card{
  position:absolute; right:24px; bottom:24px;
  background:#0f3b35; color:#e8f2ef;
  padding:18px 22px; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:320px
}
.cta-title{font:600 22px/1.1 'Inter',system-ui}
.cta-sub{opacity:.85; margin:.35rem 0 .6rem}
.cta-btn{display:inline-block; font-weight:600; color:#fff;
  background:var(--brand); padding:8px 12px; border-radius:999px; text-decoration:none}

/* Decorative Aztec rule (optional) */
.aztec-hr{height:10px; border-radius:999px; background:#FFECDA;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--brand) 28%, transparent);
  margin-top:16px}
  
/* Hover lift */
.flashcard:hover{transform:translateY(-2px); transition:transform .25s ease}

/* Responsive */
@media (max-width:1024px){
  .flashcard{border-radius:22px}
  .cta-card{right:16px; bottom:16px}
}
@media (max-width:768px){
  .flashcard{padding:24px}
  .cta-card{position:static; margin-top:14px}
}