/* =====================
   VARIABLES
===================== */
:root {
  --olive: #364025;
  --light-olive: #899064;
  --font: Poppins, sans-serif;
}

/* =====================
   RESET & GLOBAL
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: #fff;
  color: #222;
  overflow-x: hidden;
}

/* =====================
   HERO SECTION
===================== */
/* ---------- Page / hero ---------- */
.jarred-page{ position: relative; }

.jarred-page .hero{
  position: relative;
  margin-top: -72px;
  width: 100%;
  height: 135vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.jarred-page .hero img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
}
/* White overlay (exact 30%) */
.jarred-page .hero::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255, 255, 255, 0.499);
  pointer-events:none;
}

/* ---------- Contact form overlay ---------- */
.contact-form{
  position: absolute;      /* sits on top of the hero */
  top: clamp(98px, 12vh, 140px);
  left: 180px;
  width: min(92vw, 1200px);
  z-index: 2;
  color: var(--olive);
  font-family: var(--font);
}

/* Kill the exported absolute positioning inside (Figma styles) */
.contact-form [style]{
  position: static !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  background: none !important;
}

/* Layout the inner wrapper like a real form */
.contact-form > div{
  display: grid !important;
  gap: 14px !important;
}

/* Headings / subtext */
.contact-form h1,
.contact-form .title{ 
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--olive);
}
.contact-form .sub{
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(63,63,63,.80);
  opacity: .95;
  margin-top: 4px;
  max-width: 550px;
}

/* Labels */
.contact-form .label{
  font-size: 18px !important;
  font-weight: 400;
  line-height: 27px;
  color: rgba(63,63,63,.80);
  margin-top: 6px;
}

/* Style the “rectangles” as inputs (those divs with white bg in your HTML) */
.contact-form [style*="rgba(255, 255, 255"]{
  background: rgba(255,255,255,.85) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.10) !important;
  height: 60px !important;
}

/* Real form fields (clean + translucent like your screenshot) */
.contact-form .form{
  display:grid; gap:14px; margin-top:20px;
  max-width: 620px;
}

.contact-form .form input,
.contact-form .form textarea{
  width: 100%;
  padding: 18px;
  background: rgba(255,255,255,.85);
  border: 0;
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  font: 16px/1.4 var(--font);
  color: #2a2a2a;
}

.contact-form .form textarea{ 
  resize: vertical; 
  min-height: 220px; 
}

.contact-form .btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width: 200px; 
  height: 60px;
  background: #899064;
  color:#FEFEFF;
  font-size:18px; 
  font-weight:400; 
  letter-spacing:.04px;
  border:0; 
  border-radius: 0; 
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.136);
}
.contact-form .btn:hover{ 
  filter: brightness(0.95); 
}

/* Optional: keep your previous override to neutralize Figma inline styles if naa pa */
.contact-form [style]{ 
  position:static !important; 
  left:auto !important; 
  top:auto !important; 
  width:auto !important; 
  height:auto !important; 
  background:none !important; 
}

/* Generic button tweak if needed */
.btn{
  margin-top: 15px;
}

/* =====================================================
   CONTACT MODAL
===================================================== */

/* Dim background + center modal */
#contactModal {
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 1050;
}

/* Remove Bootstrap margin */
#contactModal .modal-dialog {
  margin: 0;
  max-width: 380px;
}

/* Force readable gray text */
#contactModal .text-muted {
  color: #555 !important;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Modal card base */
#contactModal .modal-content {
  color: #222;
  background: #fff;
  z-index: 9999;
}

/* Card style */
.contact-modal-custom {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  font-family: 'Poppins', sans-serif;
  text-align: center;
  padding: 24px 20px;
  position: relative;
}

/* Icon circle */
#contactModal .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 32px;
  color: #364025;
  border: 4px solid #364025;
  background: #fff;
}

/* Success title */
#contactModal .text-success-title {
  color: #364025;
  font-size: 20px;
  font-weight: 600;
}

/* Error title */
#contactModal .text-danger {
  color: #364025 !important;
  font-size: 20px;
  font-weight: 600;
}

/* Olive button */
#contactModal .btn-olive {
  background: #364025;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 32px;
  display: inline-block;
  font-size: 14px;
  margin-top: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

#contactModal .btn-olive:hover {
  background: #2b321e;
  transform: translateY(-1px);
}

/* Pop-in animation */
#contactModal.show .modal-dialog {
  animation: contactModalIn .25s ease;
}

@keyframes contactModalIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Remove Bootstrap's default backdrop */
.modal-backdrop.show {
  opacity: 0 !important;
}

/* =====================
   RESPONSIVE
===================== */

/* tablets */
@media (max-width: 900px){
  .jarred-page .hero{ height:110vh; }
  .contact-form{ left:24px; right:24px; width:auto; }
  .jarred-page .hero img{ object-position:center top; }
}

/* phones */
@media (max-width: 560px){
  .jarred-page .hero{ height:180vh; }
  .contact-form{ top:96px; left:16px; right:16px; }
  .contact-form .title{ font-size:30px; }
  .contact-form .sub,
  .contact-form .sub + .sub{ font-size:16px !important; }
  .contact-form .form input,
  .contact-form .form textarea {
    font-size: 16px !important;
  }
  .contact-form .label {
    font-size: 16px !important;
  }
  .btn{ 
    width:100%;
    font-size: 16px !important; 
  }
}

/* smaller phones */
@media (max-width: 380px){
  .contact-form .title{ font-size:28px; }
}

/* ===== SAFE FADE (alias for .reveal/.in) ===== */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
  }
  html.js .reveal.in{
    opacity: 1;
    transform: none;
  }
}