/* =========================================================
   Signesto Café — custom theme layer on top of Bootstrap 5
   ========================================================= */

:root{
  --maroon:        #4A1010; /* Deep Coffee Maroon from finalized logo */
  --maroon-dark:   #2D0909; /* Dark Chocolate Footer Maroon */
  --maroon-mid:    #6B2020;
  --gold:          #C48D3F; /* Warm Golden Laurel Amber from finalized logo */
  --gold-light:    #E8BA78;
  --cream:         #F6EFE6;
  --paper:         #FFFDF9;
  --ink:           #241A17;
  --muted:         #7C6E68;
  --line:          #E7DCD1;

  --bs-primary: var(--maroon);
  --bs-body-color: var(--ink);
  --bs-body-font-family: "DM Sans", system-ui, sans-serif;
  --bs-link-color: var(--maroon);
  --bs-link-hover-color: var(--maroon-dark);

  --font-display: "Fraunces", Georgia, serif;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden !important;
  max-width:100% !important;
}
body{
  background:var(--paper);
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden !important;
  max-width:100% !important;
  width:100%;
  position:relative;
}
main, section, header, footer{
  max-width:100% !important;
  overflow-x:hidden;
  box-sizing:border-box !important;
}

a, a:hover, a:focus{ text-decoration:none; }

::selection{ background:var(--maroon); color:#fff; }

/* focus visibility kept intentionally strong, not removed */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

h1,h2,h3,.font-display{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-0.01em;
  font-weight:600;
}

.eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--maroon);
  margin-bottom:.6rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.light{ color:var(--gold-light); }
.eyebrow.light::before{ background:var(--gold-light); }

.text-muted-cafe{ color:var(--muted); }
.text-maroon{ color:var(--maroon) !important; }
.text-gold{ color:var(--gold) !important; }
.bg-maroon{ background:var(--maroon) !important; }
.bg-maroon-dark{ background:var(--maroon-dark) !important; }
.bg-gold{ background:var(--gold) !important; color:#fff !important; }
.bg-cream{ background:var(--cream) !important; }

.lede{
  font-size:1.05rem;
  color:var(--muted);
  max-width:34rem;
}

/* -------- buttons -------- */
.btn{
  border-radius:100px;
  font-weight:600;
  font-size:.9rem;
  padding:.72rem 1.5rem;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn-maroon{
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:#fff;
}
.btn-maroon:hover{ background:var(--maroon-dark); border-color:var(--maroon-dark); color:#fff; }

.btn-gold{
  background:var(--gold);
  border:1px solid var(--gold);
  color:#fff;
}
.btn-gold:hover{ background:#b0782e; border-color:#b0782e; color:#fff; }

.btn-cream{
  background:var(--paper);
  border:1px solid var(--paper);
  color:var(--maroon);
}
.btn-cream:hover{ background:#fff; color:var(--maroon-dark); }

.btn-outline-cream{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}
.btn-outline-cream:hover{ background:rgba(255,255,255,.12); color:#fff; }

.btn-outline-maroon{
  border:1px solid var(--maroon);
  color:var(--maroon);
  background:transparent;
}
.btn-outline-maroon:hover{ background:var(--maroon); color:#fff; }

.btn-outline-gold{
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
}
.btn-outline-gold:hover{ background:var(--gold); color:#fff; }

/* -------- navbar & brand logo -------- */
.navbar-signesto{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-top:.5rem;
  padding-bottom:.5rem;
}
.brand-logo-img{
  height:44px;
  width:44px;
  object-fit:contain;
  border-radius:50%;
  border:1.5px solid var(--gold);
  background:#fff;
  padding:1px;
  flex-shrink:0;
  transition:transform .25s ease;
}
.navbar-brand-cafe:hover .brand-logo-img{
  transform:scale(1.06);
}
.navbar-brand-cafe{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  line-height:1;
  color:var(--maroon) !important;
  display:flex;
  align-items:center;
  gap:.65rem;
}
.navbar-brand-cafe small{
  display:block;
  font-family:"DM Sans",sans-serif;
  font-size:.55rem;
  letter-spacing:.28em;
  font-weight:700;
  color:var(--gold);
  margin-top:2px;
}
.navbar-brand-cafe .mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--maroon);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff; font-size:1rem; flex:none;
}
.nav-link-cafe{
  font-weight:600;
  font-size:.88rem;
  color:var(--ink) !important;
  padding:.5rem 1rem !important;
  position:relative;
}
.nav-link-cafe.active{ color:var(--maroon) !important; }
.nav-link-cafe.active::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.15rem;
  height:2px; background:var(--maroon);
}

/* -------- hero -------- */
.hero-section{ background:var(--maroon); overflow:hidden; }
.hero-copy{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:4.5rem clamp(1.5rem,6vw,4.5rem);
  min-height:480px;
  width:100%;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden;
}
/* JS sets an exact pixel padding-left (matching the navbar logo's
   left edge) as an inline style; the clamp() above is the fallback
   used before JS runs / if it's unavailable. */
.hero-copy::before{
  content:"";
  position:absolute; top:-160px; left:-220px;
  width:420px; height:420px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  z-index:-1;
}
.hero-heading{
  color:#fff;
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);
  line-height:1.05;
}
.hero-heading .accent{ color:#F0D9CE; }
.hero-copy .lede{ color:#EFE1DB; max-width:30rem; }

/* -------- hero stats -------- */
.hero-stats{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-top: 2.25rem;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero-stat-item{
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 .25rem !important;
  margin: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff;
  text-align: center;
  box-sizing: border-box !important;
}

.hero-stat-item:last-child{
  border-right: 0 !important;
}

.hero-stat-item i{
  font-size: 1.2rem;
  color: #F0D9CE;
  margin-bottom: 0.2rem;
  display: block;
}

.hero-stat-item strong{
  display: block;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: normal;
  word-wrap: break-word;
}

.hero-stat-item span{
  display: block;
  font-size: 0.65rem;
  color: #E3C9BF;
  line-height: 1.15;
  margin-top: 2px;
  white-space: normal;
  word-wrap: break-word;
}

@media (max-width: 575.98px){
  .hero-stats{ margin-top: 1.75rem; }
  .hero-stat-item{ padding: 0 .15rem !important; }
  .hero-stat-item i{ font-size: 1.05rem; }
  .hero-stat-item strong{ font-size: 0.7rem; letter-spacing: -0.02em; }
  .hero-stat-item span{ font-size: 0.6rem; opacity: 0.9; }
}

/* -------- hero carousel (right side) -------- */
.hero-carousel{ min-height:420px; position:relative; }
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{ min-height:420px; height:100%; }
.hero-slide{
  width:100%; height:100%; min-height:420px;
  background-size:cover; background-position:center;
  position:relative;
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(42,8,8,.30), rgba(42,8,8,0) 55%);
}
.hero-stamp{
  position:absolute; right:1.75rem; bottom:1.75rem; z-index:3;
  text-align:right; color:#fff; font-size:.95rem; line-height:1.25;
  pointer-events:none;
}
.hero-stamp b{ display:block; font-weight:700; }

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ width:3.5rem; opacity:1; }
.hero-carousel-arrow{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.5);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.95rem;
  transition:background-color .18s ease;
}
.hero-carousel .carousel-control-prev:hover .hero-carousel-arrow,
.hero-carousel .carousel-control-next:hover .hero-carousel-arrow{
  background:rgba(255,255,255,.32);
}
.hero-carousel-indicators{ bottom:1.4rem; left:1.75rem; right:auto; margin:0; justify-content:flex-start; z-index:3; }
.hero-carousel-indicators [data-bs-target]{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.5); border:0; opacity:1; margin:0 4px;
}
.hero-carousel-indicators .active{ background:#fff; }

/* -------- page header banner (for inner pages) -------- */
.page-header-banner{
  background:var(--maroon);
  padding:3.5rem 0;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.page-header-banner::after{
  content:"";
  position:absolute;
  right:-100px; bottom:-100px;
  width:300px; height:300px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.page-header-banner h1{
  color:#fff;
  font-size:clamp(2.2rem, 3.8vw, 3.2rem);
  margin-bottom:.5rem;
}
.breadcrumb-cafe{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  color:#F0DAD3;
  margin-bottom:.75rem;
}
.breadcrumb-cafe a{ color:#fff; font-weight:600; }
.breadcrumb-cafe a:hover{ text-decoration:underline; }

/* -------- story -------- */
.story-photo{
  height:100%;
  min-height:340px;
  border-radius:.5rem;
  background:url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=80") center/cover;
}
.rule{ width:44px; height:3px; background:var(--maroon); margin:1.25rem 0; border:0; }

/* timeline */
.timeline-track{
  position:relative;
  padding-left:2rem;
  border-left:2px solid var(--line);
}
.timeline-item{
  position:relative;
  margin-bottom:2.2rem;
}
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute;
  left:-2.45rem;
  top:.25rem;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--maroon);
  border:3px solid var(--paper);
}
.timeline-year{
  font-family:var(--font-display);
  color:var(--maroon);
  font-weight:700;
  font-size:1.1rem;
}

/* -------- section heading -------- */
.section-heading h2{ font-size:clamp(1.9rem, 3vw, 2.6rem); }
.section-heading p{ color:var(--muted); max-width:36rem; }
.link-underline-cafe{
  color:var(--maroon); font-weight:700; font-size:.85rem;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .18s ease, color .18s ease;
}
.link-underline-cafe:hover{ color:var(--maroon-dark); gap:.6rem; }

/* -------- menu filters & search -------- */
.menu-filters .btn{
  font-size:.82rem;
  padding:.5rem 1.15rem;
  border:1px solid var(--line);
  color:var(--ink);
  background:#fff;
}
.menu-filters .btn.active{
  background:var(--maroon); border-color:var(--maroon); color:#fff;
}
.dietary-tag{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.7rem;
  font-weight:700;
  padding:.2rem .55rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.badge-vegan{ background:#E8F5E9; color:#2E7D32; }
.badge-gf{ background:#FFF8E1; color:#F57F17; }
.badge-special{ background:#FCE4EC; color:#C2185B; }
.badge-isl{ background:#E1F5FE; color:#0288D1; }

.search-box-cafe{
  position:relative;
}
.search-box-cafe input{
  border-radius:50px;
  border:1px solid var(--line);
  padding:.65rem 1.25rem .65rem 2.8rem;
  font-size:.9rem;
  width:100%;
}
.search-box-cafe input:focus{
  border-color:var(--maroon);
  box-shadow:0 0 0 3px rgba(74,16,16,.12);
  outline:0;
}
.search-box-cafe i{
  position:absolute;
  left:1rem; top:50%;
  transform:translateY(-50%);
  color:var(--muted);
}

/* -------- menu cards -------- */
.menu-card{
  border:1px solid var(--line);
  border-radius:.6rem;
  overflow:hidden;
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.menu-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(74,16,16,.1);
}
.menu-card img{ height:160px; object-fit:cover; width:100%; }
.menu-card .card-body{ padding:1rem 1.1rem 1.2rem; flex:1; display:flex; flex-direction:column; }
.menu-card h3{ font-size:1.05rem; margin-bottom:.2rem; }
.menu-card p{ font-size:.82rem; color:var(--muted); margin-bottom:.75rem; flex:1; }
.menu-card .card-footer-custom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:.5rem;
  border-top:1px dashed var(--line);
}
.menu-card .price{ color:var(--maroon); font-weight:700; font-size:1rem; }
.menu-card.d-none{ display:none !important; }

/* -------- impact -------- */
.impact-photo{
  min-height:320px;
  background:url("https://images.unsplash.com/photo-1528605248644-14dd04022da1?auto=format&fit=crop&w=1400&q=80") center/cover;
}
.impact-section h2{
  color:#fff;
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  max-width:32rem;
}
.impact-stat{ color:#fff; border-right:1px solid rgba(255,255,255,.22); padding:0 .75rem; }
.impact-stat:last-child{ border-right:0; }
.impact-stat i{ font-size:1.5rem; color:#F0D9CE; margin-bottom:.4rem; display:block; }
.impact-stat b{ display:block; font-size:.86rem; }
.impact-stat span{ display:block; font-size:.72rem; color:#E3C9BF; }

/* -------- gallery & lightbox -------- */
@media (min-width: 992px){
  .col-lg-2-4{ flex:0 0 20%; max-width:20%; }
}
.gallery-item{
  border-radius:.4rem;
  overflow:hidden;
  height:220px;
  position:relative;
  cursor:pointer;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-overlay{
  position:absolute; inset:0;
  background:rgba(42,8,8,.55);
  display:flex;
  align-items:center; justify-content:center;
  flex-direction:column;
  color:#fff; opacity:0;
  transition:opacity .25s ease;
  padding:1rem; text-align:center;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay i{ font-size:1.6rem; margin-bottom:.3rem; color:#F0D9CE; }

/* Lightbox Modal */
.lightbox-modal .modal-content{
  background:transparent; border:0;
}
.lightbox-img{
  max-height:80vh; object-fit:contain; border-radius:.5rem; width:100%;
}
.lightbox-caption{
  color:#fff; text-align:center; margin-top:.75rem; font-size:.95rem;
}

/* -------- team cards -------- */
.team-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.6rem;
  overflow:hidden;
  text-align:center;
  padding:1.5rem 1rem;
}
.team-avatar{
  width:90px; height:90px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 1rem;
  border:3px solid var(--cream);
}

/* -------- reviews -------- */
.review-track{
  display:flex;
  gap:1.1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.review-track::-webkit-scrollbar{ display:none; }
.review-card{
  scroll-snap-align:start;
  flex:0 0 min(340px,85%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:.6rem;
  padding:1.6rem;
}
.review-card .quote-mark{
  font-family:var(--font-display);
  color:var(--maroon);
  font-size:2.6rem;
  line-height:.4;
  display:block;
  margin-bottom:.8rem;
}
.review-card p{ color:var(--muted); font-size:.92rem; min-height:4.4rem; }
.review-card cite{ font-style:normal; font-weight:700; color:var(--maroon); font-size:.85rem; }
.review-nav-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--maroon);
  display:inline-flex; align-items:center; justify-content:center;
}
.review-nav-btn:hover{ background:var(--maroon); color:#fff; border-color:var(--maroon); }

/* -------- visit & reservation -------- */
.visit-list{ list-style:none; padding:0; margin:1.5rem 0; }
.visit-list li{ display:flex; gap:.85rem; margin:.85rem 0; color:var(--muted); font-size:.94rem; }
.visit-list i{ color:var(--maroon); width:1.1rem; margin-top:.2rem; }
.map-frame{
  border-radius:.6rem;
  overflow:hidden;
  border:1px solid var(--line);
  min-height:360px;
}
.map-frame iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; }

.reservation-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.8rem;
  padding:2rem;
  box-shadow:0 10px 30px rgba(74,16,16,.05);
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .85rem;
  border-radius:50px;
  font-size:.78rem;
  font-weight:700;
  background:#E8F5E9;
  color:#2E7D32;
  border:1px solid #A5D6A7;
  transition:all .3s ease;
}
.status-dot{
  width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0;
}
.status-green{
  background:#2E7D32;
  box-shadow:0 0 0 0 rgba(46,125,50,0.7);
  animation:pulseGreen 1.6s infinite;
}
.status-red{
  background:#D32F2F;
  box-shadow:0 0 0 0 rgba(211,47,47,0.7);
  animation:pulseRed 1.6s infinite;
}

@keyframes pulseGreen{
  0%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(46,125,50,0.7); }
  70%{ transform:scale(1); box-shadow:0 0 0 6px rgba(46,125,50,0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(46,125,50,0); }
}
@keyframes pulseRed{
  0%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(211,47,47,0.7); }
  70%{ transform:scale(1); box-shadow:0 0 0 6px rgba(211,47,47,0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(211,47,47,0); }
}

/* -------- footer -------- */
.footer-cafe{ background:var(--maroon-dark); color:#E7D6D1; }
.footer-cafe a{ color:#E7D6D1; }
.footer-cafe a:hover{ color:#fff; }
.footer-cafe h4{ color:#fff; font-size:.85rem; letter-spacing:.05em; margin-bottom:1rem; }
.footer-brand-mark{ display:flex; align-items:center; gap:.75rem; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.4rem; }
.footer-logo-img{
  height:48px;
  width:48px;
  object-fit:contain;
  border-radius:50%;
  border:1.5px solid var(--gold);
  background:#fff;
  padding:2px;
  flex-shrink:0;
}
.social-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff !important;
  background:transparent;
  transition:all .2s ease;
}
.footer-cafe a.social-btn:hover,
.social-btn:hover{
  background:#fff !important;
  border-color:#fff !important;
  color:var(--maroon-dark) !important;
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.social-btn i{ color:inherit; }
.footer-divider{ border-color:rgba(255,255,255,.15); }

/* -------- accessibility widget button -------- */
.a11y-toggle-btn{
  position:fixed;
  bottom:1.5rem; right:1.5rem;
  z-index:999;
  width:46px; height:46px; border-radius:50%;
  background:var(--maroon); color:#fff;
  border:2px solid #fff;
  box-shadow:0 4px 15px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer;
}
.a11y-toggle-btn:hover{ background:var(--maroon-dark); color:#fff; }

/* Bootstrap only ships spacing up to 5; add a slightly larger section rhythm */
@media (min-width: 992px){
  .py-lg-6{ padding-top:5.5rem !important; padding-bottom:5.5rem !important; }
}

/* -------- global transitions -------- */
a, .btn, .nav-link-cafe, .menu-card, .gallery-item img, .social-btn,
.review-nav-btn, .hero-carousel-arrow, .link-underline-cafe{
  transition:all .25s ease;
}

/* -------- scroll reveal -------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* -------- responsive tweaks -------- */
@media (max-width: 767.98px){
  .hero-copy{ padding-block:3rem 2.5rem; text-align:left; }
  .hero-heading{ font-size:clamp(2rem, 8vw, 2.75rem); }
  .hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item, .hero-slide{ min-height:340px; }
  .impact-stat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:.9rem; margin-bottom:.9rem; }
  .a11y-toggle-btn{ width:42px; height:42px; font-size:1.1rem; bottom:1.2rem; right:1.2rem; }
}

/* =====================================================
    DREAMS PAGE
===================================================== */

/* =====================================================
    COMPACT HERO
===================================================== */

.dreams-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #4c1718 0%,
            #6b2423 55%,
            #8b3930 100%
        );

    padding: 58px 0 62px;
}

.dreams-hero::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);

    top: -150px;
    right: -60px;
}

.dreams-hero::after {
    content: "✦";

    position: absolute;

    right: 8%;
    bottom: -45px;

    font-family: "Fraunces", serif;

    font-size: 130px;

    color: rgba(255,255,255,.04);
}

.dreams-hero-content {
    position: relative;
    z-index: 2;
}

.dreams-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(255,255,255,.23);

    border-radius: 50px;

    color: #f7dfbd;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.dreams-hero h1 {
    font-family: "Fraunces", serif;

    font-size: clamp(40px, 5vw, 62px);

    line-height: 1.05;

    color: #fff;

    margin: 18px 0 12px;
}

.dreams-hero h1 span {
    color: #f1c995;
}

.dreams-hero p {
    max-width: 650px;

    margin: auto;

    color: rgba(255,255,255,.76);

    font-size: 16px;

    line-height: 1.7;
}


/* =====================================================
    INTRO
===================================================== */

.dream-intro {
    background: #fffaf5;

    padding: 65px 0;
}

.dream-intro-icon {
    width: 65px;
    height: 65px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f6eadc;

    color: #7a2828;

    font-size: 28px;

    margin-bottom: 20px;
}

.dream-intro h2 {
    font-family: "Fraunces", serif;

    font-size: clamp(32px, 4vw, 46px);

    color: #351b19;

    line-height: 1.2;
}

.dream-intro h2 span {
    color: #8a3530;
}

.dream-intro p {
    color: #725f58;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
    HOW IT WORKS
===================================================== */

.dream-process {
    background: #f5eadf;

    padding: 65px 0;
}

.dream-step-card {
    height: 100%;

    background: #fff;

    border: 1px solid rgba(92,43,36,.08);

    border-radius: 18px;

    padding: 27px 23px;

    position: relative;

    transition: .3s ease;
}

.dream-step-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(60,30,20,.09);
}

.dream-step-number {
    position: absolute;

    top: 15px;
    right: 18px;

    font-family: "Fraunces", serif;

    color: rgba(122,40,40,.09);

    font-size: 40px;

    font-weight: 700;
}

.dream-step-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f8eee4;

    color: #7a2828;

    border-radius: 14px;

    font-size: 23px;

    margin-bottom: 18px;
}

.dream-step-card h3 {
    font-family: "Fraunces", serif;

    color: #351b19;

    font-size: 23px;

    margin-bottom: 8px;
}

.dream-step-card p {
    color: #77635c;

    line-height: 1.65;

    font-size: 15px;

    margin-bottom: 0;
}


/* =====================================================
    APP DOWNLOAD
===================================================== */

.dream-app {
    padding: 65px 0;

    background: #fff;
}

.dream-app-box {
    position: relative;

    overflow: hidden;

    background: #4b1c1d;

    border-radius: 24px;

    padding: 45px;
}

.dream-app-box::after {
    content: "☾";

    position: absolute;

    right: 30px;
    bottom: -70px;

    color: rgba(255,255,255,.05);

    font-size: 210px;

    font-family: "Fraunces", serif;
}

.dream-app-content {
    position: relative;

    z-index: 2;
}

.dream-app-box h2 {
    font-family: "Fraunces", serif;

    color: #fff;

    font-size: clamp(30px, 4vw, 40px);

    margin-bottom: 10px;
}

.dream-app-box p {
    color: rgba(255,255,255,.72);

    line-height: 1.75;

    max-width: 650px;
}

.app-store-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}

.app-store-btn {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 10px 18px;

    background: #fff;

    color: #351b19;

    border-radius: 8px;

    text-decoration: none;

    transition: .3s;
}

.app-store-btn:hover {
    background: #f4d8b1;

    color: #351b19;

    transform: translateY(-2px);
}

.app-store-btn i {
    font-size: 25px;
}

.app-store-btn small {
    display: block;

    font-size: 8px;

    letter-spacing: 1px;
}

.app-store-btn strong {
    display: block;

    font-size: 14px;
}


/* =====================================================
    SPECIAL COFFEE
===================================================== */

.special-coffee {
    padding: 70px 0;

    background: #f4e8db;
}

.coffee-cup {
    width: 85px;
    height: 85px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #7a2828;

    font-size: 36px;

    box-shadow:
        0 10px 25px rgba(60,30,20,.08);
}

.special-coffee h2 {
    font-family: "Fraunces", serif;

    color: #351b19;

    font-size: clamp(32px, 4vw, 42px);
}

.special-coffee p {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    color: #725f58;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
    QUOTE
===================================================== */

.dream-quote {
    padding: 65px 0;

    background: #fff;
}

.dream-quote-icon {
    color: #c99962;

    font-size: 32px;
}

.dream-quote blockquote {
    max-width: 800px;

    margin: 12px auto 0;

    font-family: "Fraunces", serif;

    font-size: clamp(27px, 3.5vw, 40px);

    line-height: 1.35;

    color: #44211e;
}

.dream-quote small {
    display: block;

    margin-top: 18px;

    color: #8a756b;

    letter-spacing: 1px;
}


/* =====================================================
    MOBILE
===================================================== */

@media (max-width: 767px) {

    .dreams-hero {
        padding: 45px 0 50px;
    }

    .dreams-hero h1 {
        font-size: 42px;
    }

    .dreams-hero p {
        font-size: 15px;
    }

    .dream-intro,
    .dream-process,
    .dream-app,
    .special-coffee {
        padding: 50px 0;
    }

    .dream-app-box {
        padding: 32px 22px;
    }

    .app-store-buttons {
        flex-direction: column;
    }

    .app-store-btn {
        width: 100%;
    }

}

.dream-terms-modal {

        border: 0;

        border-radius: 22px;

        overflow: hidden;

        box-shadow:
            0 25px 70px rgba(40,20,15,.25);

    }


    /* HEADER */

    .dream-terms-header {

        padding: 20px 24px;

        background:
            linear-gradient(
                135deg,
                #4c1718,
                #7a2828
            );

        color: #fff;

        border-bottom: 0;

    }


    .dream-terms-header .eyebrow {

        color: #e9c894;

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .dream-terms-header .modal-title {

        font-family: "Fraunces", serif;

        font-size: 23px;

    }


    .dream-terms-header .btn-close {

        filter: invert(1);

        opacity: .8;

    }


    .dream-terms-icon {

        width: 48px;

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: rgba(255,255,255,.12);

        color: #f1c995;

        font-size: 21px;

    }


    /* BODY */

    .dream-terms-body {

        padding: 25px 28px;

        max-height: 65vh;

        overflow-y: auto;

        background: #fffaf5;

    }


    /* INTRO */

    .dream-terms-intro {

        display: flex;

        align-items: flex-start;

        gap: 13px;

        padding: 16px 18px;

        margin-bottom: 22px;

        background: #f5eadf;

        border-radius: 12px;

        color: #725f58;

        font-size: 14px;

        line-height: 1.65;

    }


    .dream-terms-intro i {

        color: #8a3530;

        font-size: 20px;

        flex-shrink: 0;

    }


    /* TERM ITEM */

    .dream-term-item {

        display: flex;

        gap: 15px;

        padding: 18px 0;

        border-bottom: 1px solid #eaded3;

    }


    .dream-term-item:last-of-type {

        border-bottom: 0;

    }


    .dream-term-number {

        flex: 0 0 36px;

        width: 36px;

        height: 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #f2e3d4;

        color: #7a2828;

        font-size: 11px;

        font-weight: 700;

    }


    .dream-term-item h6 {

        margin: 0 0 6px;

        color: #351b19;

        font-family: "Fraunces", serif;

        font-size: 17px;

    }


    .dream-term-item p {

        margin: 0;

        color: #725f58;

        font-size: 13px;

        line-height: 1.7;

    }


    /* HIGHLIGHT */

    .dream-term-highlight {

        margin: 8px 0;

        padding: 18px;

        border: 1px solid #ead8c6;

        border-radius: 13px;

        background: #fff;

    }


    .dream-term-highlight .dream-term-number {

        background: #7a2828;

        color: #fff;

    }


    /* LIST */

    .dream-terms-list {

        margin: 10px 0 0;

        padding-left: 18px;

        color: #77635c;

        font-size: 12px;

        line-height: 1.8;

    }


    /* FINAL MESSAGE */

    .dream-terms-footer {

        display: flex;

        align-items: center;

        gap: 14px;

        margin-top: 20px;

        padding: 17px 20px;

        border-radius: 13px;

        background: #4b1c1d;

        color: #fff;

    }


    .dream-terms-footer > i {

        font-size: 27px;

        color: #f1c995;

    }


    .dream-terms-footer strong {

        display: block;

        font-family: "Fraunces", serif;

        font-size: 17px;

    }


    .dream-terms-footer p {

        color: rgba(255,255,255,.7);

        font-size: 12px;

    }


    .dream-terms-updated {

        text-align: right;

        margin: 14px 0 0;

        color: #9b8981;

        font-size: 10px;

    }


    /* FOOTER */

    .dream-terms-modal-footer {

        padding: 14px 24px;

        background: #fff;

        border-top: 1px solid #eaded3;

    }


    .dream-terms-close-btn {

        padding: 9px 23px;

        border-radius: 50px;

        background: #7a2828;

        color: #fff;

        font-weight: 600;

        font-size: 13px;

    }


    .dream-terms-close-btn:hover {

        background: #5d1e1e;

        color: #fff;

    }


    /* MOBILE */

    @media (max-width: 575px) {

        .dream-terms-body {

            padding: 20px 18px;

            max-height: 70vh;

        }

        .dream-terms-header {

            padding: 17px 18px;

        }

        .dream-terms-header .modal-title {

            font-size: 19px;

        }

        .dream-terms-icon {

            width: 42px;

            height: 42px;

            font-size: 18px;

        }

        .dream-term-item {

            gap: 11px;

        }

        .dream-term-number {

            flex-basis: 32px;

            width: 32px;

            height: 32px;

            font-size: 10px;

        }

    }