/* ============================================================
   OLIVE CO. — stylesheet
   Colors:
     --tan:       #E8E0CE  (page background)
     --tan2:      #DDD3BC
     --tan3:      #F0E9DC
     --algae:     #AFA231  (green)
     --algae-dark:#7A6E1A
     --charcoal:  #1A1816
     --muted:     #7A7060
     --border:    #C4B89E
     --wine:      #4C0004
   Fonts: Cormorant Garamond (headings), system-ui (body)
============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --tan:#E8E0CE;
  --tan2:#DDD3BC;
  --tan3:#F0E9DC;
  --algae:#AFA231;
  --algae-dark:#7A6E1A;
  --charcoal:#1A1816;
  --muted:#7A7060;
  --border:#C4B89E;
  --wine:#4C0004;
}

body{
  background:var(--tan);
  font-family:system-ui,-apple-system,sans-serif;
  color:var(--charcoal);
}

/* ============================================================
   HERO / MAIN LAYOUT
============================================================ */
.hero{padding:3rem 2.5rem 2.5rem;}

.hero-top{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3rem;
  align-items:center;
  margin-bottom:3rem;
}

.hero-tagline h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:28px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.5px;
}
.hero-tagline h1 em{font-style:italic;color:var(--algae-dark);}
.hero-tagline p{
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin-top:1rem;
  max-width:300px;
}

.services-title{
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.25rem;
}

/* ============================================================
   SERVICE GRID
============================================================ */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--border);
}

.svc-card{
  padding:1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-height:160px;
  cursor:pointer;
  transition:opacity .15s;
}
.svc-card:hover{opacity:.88;}
.svc-card.tan{background:var(--tan);}
.svc-card.tan2{background:var(--tan2);}
.svc-card.tan3{background:var(--tan3);}
.svc-card.algae{background:var(--algae);}

.svc-grid-bottom{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--border);
  margin-top:1px;
  margin-bottom:3rem;
}
.svc-card-bottom{
  padding:1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-height:160px;
  cursor:pointer;
}
.flower-card{background:var(--tan3);}
.cta-card{background:var(--wine);}
.cta-card .svc-name{color:#F5E9E9;font-size:24px;}
.cta-card .svc-desc-text{font-size:12px;color:rgba(245,233,233,.65);line-height:1.6;}

.svc-dot{width:6px;height:6px;border-radius:50%;background:var(--algae);margin-bottom:.25rem;}
.svc-dot.dk{background:rgba(0,0,0,.3);}
.svc-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:400;color:var(--charcoal);line-height:1.1;}
.svc-name.dk{color:#1A1816;}
.svc-desc{font-size:12px;color:var(--muted);line-height:1.6;}
.svc-desc.dk{color:rgba(0,0,0,.5);}
.svc-arrow{font-size:11px;color:var(--muted);margin-top:auto;padding-top:.75rem;}
.svc-arrow.dk{color:rgba(0,0,0,.35);}

/* ============================================================
   CTA BUTTON
============================================================ */
button.cta-btn{
  display:inline-block;
  font-family:system-ui,sans-serif !important;
  font-size:13px !important;
  padding:10px 22px !important;
  cursor:pointer;
  letter-spacing:.3px;
  font-weight:700 !important;
  width:fit-content;
  margin-top:.75rem;
  background:#F5F0E6 !important;
  color:#4C0004 !important;
  border:2px solid #4C0004 !important;
  -webkit-appearance:none;
  appearance:none;
}

/* ============================================================
   CONTACT + FOOTER
============================================================ */
.contact-block{
  display:flex;
  gap:3rem;
  flex-wrap:wrap;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}
.contact-label{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.35rem;
}
.contact-value{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  color:var(--charcoal);
}

footer{
  padding:1.25rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
footer p{font-size:11px;color:var(--muted);}

/* ============================================================
   MODALS
============================================================ */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(26,24,22,.55);
  z-index:100;
  align-items:flex-end;
  justify-content:center;
}
.modal-overlay.open{display:flex;}

.modal{
  background:var(--tan);
  width:100%;
  max-width:640px;
  max-height:88vh;
  overflow-y:auto;
  padding:2.5rem;
  position:relative;
}

.modal-close{
  position:absolute;
  top:1.25rem;
  right:1.5rem;
  font-size:18px;
  color:var(--muted);
  cursor:pointer;
  background:none;
  border:none;
}

.modal-label{
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}
.modal-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;
  font-weight:400;
  line-height:1.1;
  margin-bottom:.5rem;
}
.modal-title em{font-style:italic;color:var(--algae-dark);}
.modal-intro{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:1.75rem;max-width:480px;}

.modal-section{margin-bottom:1.75rem;}
.modal-section-title{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--algae-dark);
  margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}

.modal-note{
  font-size:13px;
  color:var(--muted);
  line-height:1.75;
  background:var(--tan3);
  padding:1rem 1.25rem;
  border-left:2px solid var(--algae);
}
.modal-note strong{color:var(--charcoal);font-weight:500;}

/* ============================================================
   VIEWS (steps inside modals)
============================================================ */
.view{display:none;}
.view.active{display:block;}

.back-btn{
  font-size:12px;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  margin-bottom:1.5rem;
  padding:0;
  display:flex;
  align-items:center;
  gap:.4rem;
}

/* ============================================================
   FORMS
============================================================ */
.form-group{margin-bottom:1.1rem;}
.form-label{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
  display:block;
}
.form-input{
  width:100%;
  background:var(--tan2);
  border:.5px solid var(--border);
  padding:.6rem .875rem;
  font-size:13px;
  color:var(--charcoal);
  font-family:system-ui,sans-serif;
  outline:none;
}
.form-input:focus{border-color:var(--algae-dark);}
textarea.form-input{resize:vertical;min-height:80px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}

.checkbox-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem;}
.checkbox-item{display:flex;align-items:center;gap:.6rem;font-size:13px;cursor:pointer;}
.checkbox-item input{accent-color:var(--algae-dark);width:14px;height:14px;}

.radio-group{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;}
.radio-pill{
  font-size:12px;
  padding:5px 12px;
  border:.5px solid var(--border);
  background:var(--tan2);
  cursor:pointer;
  color:var(--muted);
}
.radio-pill.selected{background:var(--algae);color:#2A2600;border-color:var(--algae);}

.pref-tag{
  font-size:12px;
  padding:6px 13px;
  border:.5px solid var(--border);
  background:var(--tan2);
  cursor:pointer;
  color:var(--muted);
  border-radius:14px;
}
.pref-tag.selected{background:var(--algae);color:#2A2600;border-color:var(--algae);}
.pref-hint{font-size:11px;color:var(--muted);margin-bottom:.6rem;margin-top:.25rem;}

.file-upload{
  background:var(--tan2);
  border:.5px dashed var(--border);
  padding:1.25rem;
  text-align:center;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
  position:relative;
}
.file-upload input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
}
.file-upload:hover{border-color:var(--algae-dark);}

.divider{height:.5px;background:var(--border);margin:1.5rem 0;}

/* ============================================================
   ADD-ONS (bins)
============================================================ */
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:.5rem;}
.addon-item{
  padding:.875rem 1rem;
  background:var(--tan2);
  border:.5px solid var(--border);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.addon-item.selected{background:var(--algae);border-color:var(--algae);}
.addon-item-name{font-size:12px;color:var(--charcoal);line-height:1.4;}
.addon-item.selected .addon-item-name{color:#2A2600;}
.addon-item-check{font-size:14px;color:var(--muted);flex-shrink:0;margin-left:.5rem;}
.addon-item.selected .addon-item-check{color:#2A2600;}
.addon-summary{
  margin-top:1rem;
  padding:.875rem 1rem;
  background:var(--tan3);
  border:.5px solid var(--border);
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  display:none;
}
.addon-summary strong{color:var(--charcoal);}

/* ============================================================
   PACKAGE CARDS
============================================================ */
.package-card{
  background:var(--tan2);
  padding:1.1rem 1.25rem;
  margin-bottom:8px;
  cursor:pointer;
  border:.5px solid transparent;
  transition:border-color .15s;
}
.package-card:hover{border-color:var(--algae-dark);}
.package-card.selected{border-color:var(--algae);background:var(--tan3);}
.package-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:400;color:var(--charcoal);margin-bottom:.25rem;}
.package-price{font-size:11px;color:var(--algae-dark);letter-spacing:.5px;margin-bottom:.4rem;}
.package-desc{font-size:12px;color:var(--muted);line-height:1.6;}

/* ============================================================
   BASKET TAGS / CUSTOMIZABLE
============================================================ */
.basket-tag{
  display:inline-block;
  background:var(--tan3);
  border:.5px solid var(--border);
  font-size:11px;
  color:var(--muted);
  padding:4px 10px;
  margin:3px;
}
.customizable-tag{
  display:inline-block;
  background:var(--algae);
  color:#2A2600;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 10px;
  margin-bottom:1rem;
}

/* ============================================================
   GIFT SECTION (open house)
============================================================ */
.gift-section{
  background:var(--tan3);
  border:1px solid var(--border);
  padding:1.25rem;
  margin-top:1.5rem;
  margin-bottom:1.25rem;
  display:none;
}
.gift-section-title{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--algae-dark);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.gift-summary-bar{
  background:var(--tan3);
  border-left:2px solid var(--algae);
  padding:.875rem 1.1rem;
  margin-bottom:1.25rem;
  font-size:13px;
  color:var(--charcoal);
  display:none;
}

/* ============================================================
   QUOTE BOX (baskets)
============================================================ */
.quote-box{
  background:var(--charcoal);
  color:var(--tan);
  padding:1.5rem;
  margin:1.5rem 0;
}
.quote-box-title{
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--algae);
  margin-bottom:.75rem;
}
.quote-line{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:.4rem 0;
  border-bottom:.5px solid rgba(255,255,255,.1);
}
.quote-line:last-child{border-bottom:none;font-weight:500;padding-top:.75rem;font-size:14px;}
.quote-line span:last-child{color:var(--algae);}
.quote-note{font-size:11px;color:rgba(255,255,255,.4);margin-top:.75rem;line-height:1.6;}

/* ============================================================
   SUCCESS SCREEN
============================================================ */
.success-box{text-align:center;padding:2rem 1rem;}
.success-box h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:400;margin-bottom:.75rem;}
.success-box p{font-size:13px;color:var(--muted);line-height:1.8;}

/* ============================================================
   STEP INDICATOR
============================================================ */
.step-indicator{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.step{font-size:11px;color:var(--muted);}
.step.active{color:var(--charcoal);font-weight:500;}
.step-dot{width:6px;height:6px;border-radius:50%;background:var(--border);}
.step-dot.done{background:var(--algae);}
.step-dot.active{background:var(--charcoal);}
.step-divider{height:.5px;width:20px;background:var(--border);}

/* ============================================================
   CHECKLIST REQUIRED BANNER
============================================================ */
.checklist-required{
  background:var(--tan3);
  border:1px solid var(--algae);
  padding:1rem 1.25rem;
  margin-bottom:1.5rem;
  font-size:13px;
  color:var(--charcoal);
  line-height:1.7;
}
.checklist-required strong{color:var(--algae-dark);}

/* ============================================================
   SERVICE ROWS (events, flower cart overview)
============================================================ */
.svc-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:.9rem 0;
  border-bottom:.5px solid var(--border);
  gap:2rem;
}
.svc-row:first-child{border-top:.5px solid var(--border);}
.svc-row-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px;
  font-weight:400;
  color:var(--algae-dark);
  flex-shrink:0;
}
.svc-row-desc{font-size:13px;color:var(--muted);text-align:right;max-width:260px;line-height:1.5;}

/* ============================================================
   FLOWER CART HERO BOX
============================================================ */
.flower-hero{
  background:var(--tan3);
  padding:1.75rem;
  margin-bottom:1.75rem;
  border:1px solid var(--border);
}
.flower-hero p{font-size:13px;color:var(--muted);line-height:1.7;}

/* ============================================================
   BUTTONS
============================================================ */
button.btn-dark{
  background:var(--charcoal);
  color:var(--tan);
  font-size:12px;
  padding:9px 20px;
  border:none;
  cursor:pointer;
  letter-spacing:.3px;
  font-weight:500;
}
button.btn-algae{
  background:var(--algae);
  color:#2A2600;
  font-size:12px;
  padding:9px 20px;
  border:none;
  cursor:pointer;
  letter-spacing:.3px;
  font-weight:500;
}

/* ============================================================
   AGREEMENT BLOCK
============================================================ */
.agreement-block{
  background:var(--tan3);
  border:1px solid var(--border);
  border-left:2px solid var(--algae);
  padding:1rem 1.25rem;
  margin:1.25rem 0;
}
.agreement-check{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}
.agreement-check input{
  accent-color:var(--algae-dark);
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:2px;
  cursor:pointer;
}
.agreement-check a{
  color:var(--algae-dark);
  text-decoration:underline;
}
.agreement-check a:hover{color:var(--charcoal);}
button:disabled{opacity:.45;cursor:not-allowed;}

/* ============================================================
   RESPONSIVE — basic mobile adjustments
============================================================ */
@media(max-width:480px){
  .hero{padding:2rem 1.25rem;}
  .hero-top{grid-template-columns:1fr;gap:1.5rem;}
  .hero-top svg{width:180px;}
  .form-row{grid-template-columns:1fr;}
  .addon-grid{grid-template-columns:1fr;}
  .modal{padding:1.5rem;}
  .contact-block{gap:1.5rem;}
}

/* About + FAQ */
.about-block,.faq-block{padding:2.5rem 0 0;}
.about-h{font-family:Georgia,serif;font-weight:400;font-size:22px;color:var(--charcoal);margin-bottom:.75rem;}
.about-p{font-size:13px;line-height:1.8;color:var(--muted);max-width:560px;}
.faq-block{padding-bottom:2.5rem;border-bottom:1px solid var(--border);}
.faq-item{border-top:1px solid var(--border);padding:.9rem 0;}
.faq-item summary{cursor:pointer;font-size:13px;color:var(--charcoal);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";float:right;color:var(--algae-dark);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:.6rem;max-width:560px;}
.about-photos{display:flex;gap:12px;margin-bottom:1rem;}
.about-photos img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:1px solid var(--border);}
.about-photos img:first-child{object-position:center 30%;}

/* Mobile polish */
html{-webkit-text-size-adjust:100%;}
img{max-width:100%;}
.svc-card,.svc-card-bottom{min-width:0;overflow-wrap:break-word;}
.cta-btn{overflow-wrap:normal;word-break:normal;white-space:normal;}
@media(max-width:600px){
  input,select,textarea{font-size:16px !important;}   /* stops iPhone auto-zoom when tapping a field */
  .modal-close{min-width:44px;min-height:44px;}
  .about-photos img{width:96px;height:96px;}
}
@media(max-width:360px){
  .svc-grid,.svc-grid-bottom{grid-template-columns:1fr;}
}

/* Event photo strip */
.event-gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:2.75rem 0 1.5rem;padding-bottom:6px;}
.event-gallery img{flex:0 0 78%;max-width:340px;height:190px;object-fit:cover;border-radius:4px;scroll-snap-align:start;}
@media(min-width:700px){.event-gallery img{flex-basis:32%;height:170px;}}


.event-gallery img:only-child{flex:0 0 100%;max-width:100%;height:auto;object-fit:contain;}

/* Info links + About/FAQ modals */
.info-links{display:flex;gap:2rem;flex-wrap:wrap;padding:1.75rem 0 2.5rem;border-bottom:1px solid var(--border);}
.info-link{background:none;border:0;padding:0;font-family:Georgia,serif;font-size:20px;font-weight:700;color:var(--algae-dark);cursor:pointer;}
.info-link span{color:var(--algae-dark);}
.info-link:hover{opacity:.7;}
.about-block,.faq-block{padding:1rem 0 0;border:0;}
.faq-block{padding-bottom:0;}
.about-photos{display:flex;gap:12px;margin:1rem 0 1.25rem;}
.about-photos img{width:150px;height:188px;object-fit:cover;border-radius:10px;border:1px solid var(--border);}
.about-photos img:first-child{object-position:center top;}
@media(max-width:600px){.about-photos img{width:calc(50% - 6px);height:auto;aspect-ratio:4/5;}}

.basket-photo{margin:1.5rem 0 1.25rem;}
.basket-photo img{display:block;width:100%;max-width:170px;height:auto;border-radius:6px;}
.basket-photo figcaption{font-size:11px;color:var(--muted);margin-top:.5rem;letter-spacing:.3px;}

/* Inspiration strip */
.inspo-block{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.inspo-label{font-family:Georgia,serif;font-size:18px;font-weight:700;color:var(--algae-dark);margin-bottom:.75rem;}
.inspo-label span{font-size:13px;font-weight:400;color:var(--muted);font-style:italic;}
.inspo-block .event-gallery{margin:0 0 .5rem;}
/* inspiration strip at top of forms */
.inspo-block{margin:1rem 0 1.5rem;padding-top:0;border-top:none;}
.inspo-block .event-gallery{align-items:flex-start;}
.inspo-block .event-gallery img,.inspo-block .event-gallery img:only-child{flex:0 0 auto;width:auto;max-width:none;height:230px;object-fit:initial;}

/* Olive heart */
.about-photos{align-items:center;}
.olive-heart{width:170px;height:auto;flex:0 0 auto;}
@media(max-width:600px){.about-photos img{width:calc(50% - 6px);}.olive-heart{width:calc(50% - 6px);}}
.about-block .about-p+.about-p{margin-top:.9rem;}