/* ============================================================
   Semberlee — shared page styles
   Used by the Homepage and Full Floral Arrangements pages.
   Header + drawer styles live in nav.css.
   ============================================================ */

:root{
  --cream:#F7EFEA;
  --blush:#F3DDD6;
  --rose-light:#E8B4A6;
  --rose:#D97C87;
  --rose-mid:#C15C6A;
  --rose-deep:#8B3A47;
  --ink:#332622;
  --ink-soft:#7A645D;
  --line:#EADCD3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* ---------- HERO ---------- */
.hero{position:relative; padding:38px 0 70px; overflow:hidden;}
.hero-grid{display:flex; flex-direction:column; align-items:center; gap:54px;}
.hero-copy{max-width:760px; text-align:center;}
.eyebrow{
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rose-mid); font-weight:600; margin-bottom:18px; display:block;
}
.hero h1{font-size:3.15rem; line-height:1.08; margin-bottom:22px;}
.hero h1 em{font-style:italic; color:var(--rose-deep);}
.hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:690px; margin:0 auto 32px;}
.occasion-pills{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:26px;}
.occasion-pills span{
  font-size:0.78rem; font-weight:500; color:var(--ink-soft);
  border:1px solid var(--rose-light); padding:6px 14px; border-radius:999px;
  background:#fff;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.btn{
  display:inline-block; padding:14px 26px; border-radius:999px; font-size:0.93rem; font-weight:500;
  transition:.2s; border:1.5px solid transparent;
}
.btn-primary{background:var(--rose-deep); color:var(--cream);}
.btn-primary:hover{background:var(--rose-mid);}
.btn-outline{border-color:var(--rose-deep); color:var(--rose-deep);}
.btn-outline:hover{background:var(--rose-deep); color:var(--cream);}

.hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-art figure{position:relative; width:100%; max-width:700px;}
.hero-art figure::before{
  content:''; position:absolute; inset:26px -22px -26px 22px;
  background:var(--blush); border-radius:200px 200px 26px 26px; z-index:0;
}
.hero-photo{
  position:relative; z-index:1; display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:200px 200px 26px 26px;
  box-shadow:0 26px 54px -28px rgba(139,58,71,0.45);
}
.hero-caption{
  position:relative; z-index:1; margin-top:16px; text-align:center;
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}

.brand-band{display:flex; justify-content:center; padding:52px 24px 42px;}
.brand-band img{width:320px; max-width:82%; height:auto;}

/* ---------- GALLERY ---------- */
.gallery{background:#fff; scroll-margin-top:84px;}
.gallery-grid{
  display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-auto-rows:245px;
  gap:16px;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:20px; background:var(--blush);
  box-shadow:0 18px 40px -30px rgba(91,42,51,.55);
}
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 48%, rgba(58,29,35,.72) 100%);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease;}
.gallery-item span{
  position:absolute; left:18px; bottom:16px; z-index:1; color:#fff8f3;
  font-family:'Fraunces',serif; font-size:1.02rem; letter-spacing:.01em;
}
.gallery-item:hover img{transform:scale(1.035);}
.gallery-item:focus-visible{outline:3px solid var(--rose-mid); outline-offset:4px;}
.gallery-feature{grid-row:span 2;}
.gallery-tall{grid-row:span 2;}
.gallery-wide{grid-column:span 2;}

/* ---------- PAGE HEADS ---------- */
section{padding:76px 0;}
.section-head{max-width:600px; margin:0 auto 48px; text-align:center;}
.section-head .eyebrow{display:block; text-align:center;}
.section-head h2{font-size:2.15rem; margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:1rem;}

.page-head{padding:66px 0 8px;}
.page-head .inner{max-width:660px;}
.page-head h1{font-size:2.85rem; line-height:1.1; margin-bottom:18px;}
.page-head h1 em{font-style:italic; color:var(--rose-deep);}
.page-head p{color:var(--ink-soft); font-size:1.04rem;}
.crumb{padding:26px 0 0; font-size:0.85rem; color:var(--ink-soft);}
.crumb a:hover{color:var(--rose-deep);}

/* ---------- RENTALS / CARDS ---------- */
.rentals{background:#fff;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.cards-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--cream); border:1px solid var(--line); border-radius:22px;
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
  transition:.25s;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 38px -20px rgba(139,58,71,0.35);}
.card-tag{
  position:absolute; top:24px; right:24px; font-size:0.7rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--line); padding:5px 10px; border-radius:999px;
}
.card-icon{width:44px; height:44px; margin-bottom:18px;}
.photo-placeholder{
  width:100%; aspect-ratio:4/3; border-radius:16px;
  border:1.5px dashed var(--rose-light); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--ink-soft); font-size:0.78rem; text-align:center;
  margin-bottom:20px; padding:14px;
}
.photo-placeholder svg{width:26px; height:26px; opacity:0.55;}
.rental-photo{
  width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:#ead9cd; display:block; margin-bottom:20px; cursor:zoom-in;
}
.rental-photo img{width:100%; height:100%; object-fit:contain; display:block;}
.custom-card .photo-placeholder{aspect-ratio:16/10; margin-bottom:16px;}
.custom-card .swipe{margin-bottom:16px;}
.card h3{font-size:1.32rem; margin-bottom:10px; padding-right:70px;}
.card p.desc{color:var(--ink-soft); font-size:0.93rem; margin-bottom:22px; flex-grow:1;}
.card .price{
  font-family:'Fraunces', serif; font-size:1.7rem; font-weight:600; color:var(--rose-deep);
  margin-bottom:18px;
}
.card .price-contact{
  font-size:1.28rem; line-height:1.25; text-decoration:underline;
  text-decoration-color:var(--rose-light); text-underline-offset:5px;
}
.card .price-contact:hover{color:var(--rose-mid); text-decoration-color:var(--rose-mid);}
.card .price-note{font-size:0.8rem; color:var(--ink-soft); margin-bottom:18px;}
.card-fine{font-size:0.78rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px; margin-top:auto;}

.mileage-banner{
  margin-top:34px; text-align:center; font-size:0.9rem; color:var(--ink-soft);
  background:var(--cream); border:1px dashed var(--rose-light); border-radius:14px; padding:16px 22px;
}
.mileage-banner strong{color:var(--ink);}

/* ---------- CUSTOM ---------- */
.custom{background:linear-gradient(180deg, #fff 0%, #F6E6E2 100%);}
.custom-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:36px;}
.custom-card{
  background:#fff; border-radius:20px; padding:28px 26px; text-align:left;
  border:1px solid var(--line);
}
.custom-card h4{font-size:1.1rem; margin-bottom:8px; font-family:'Fraunces',serif; font-weight:600;}
.custom-card p{font-size:0.88rem; color:var(--ink-soft); margin-bottom:16px;}
.custom-card .quote{font-size:0.82rem; font-weight:600; color:var(--rose-deep);}
a.quote{
  display:inline-block; border-bottom:1px solid var(--rose-light); padding-bottom:2px; transition:.2s;
}
a.quote:hover{color:var(--rose-mid); border-color:var(--rose-mid);}
.quote-note{
  font-size:0.75rem; color:var(--ink-soft); margin-top:8px; margin-bottom:0; line-height:1.5;
}
.choice-pills{display:flex; gap:8px; margin-top:2px; flex-wrap:wrap;}
.choice-pills span{
  font-size:0.75rem; border:1px solid var(--rose-light); color:var(--ink);
  padding:4px 11px; border-radius:999px;
}
.custom-cta{text-align:center;}
.cta-note{
  max-width:520px; margin:16px auto 0; font-size:0.82rem; color:var(--ink-soft); line-height:1.6;
}
.cta-note strong{color:var(--rose-deep); font-weight:600;}

/* ---------- PHOTO DETAIL ---------- */
body.detail-open{overflow:hidden;}
.gallery-detail{
  width:min(920px, calc(100% - 28px)); max-width:none; max-height:92dvh;
  padding:0; border:0; border-radius:24px; overflow:hidden;
  background:var(--cream); color:var(--ink);
  box-shadow:0 28px 80px rgba(60,31,35,0.38);
}
.gallery-detail::backdrop{background:rgba(54,34,37,0.78); backdrop-filter:blur(5px);}
.gallery-detail-card{max-height:92dvh; overflow:auto; overscroll-behavior:contain;}
.gallery-detail-image{
  width:100%; max-height:68dvh; min-height:280px; display:block;
  object-fit:contain; background:#ead9cd;
}
.gallery-detail-copy{padding:26px 32px 30px; border-top:1px solid var(--line);}
.gallery-detail-copy h2{font-size:1.65rem; margin-bottom:9px;}
.gallery-detail-copy p{max-width:720px; color:var(--ink-soft); font-size:0.96rem; line-height:1.7;}
.gallery-detail-close{
  position:absolute; top:14px; right:14px; width:42px; height:42px;
  display:grid; place-items:center; padding:0; border:1px solid rgba(139,58,71,0.16);
  border-radius:50%; background:rgba(255,255,255,0.94); color:var(--rose-deep);
  font:400 1.75rem/1 'Poppins',sans-serif; cursor:pointer;
  box-shadow:0 8px 24px rgba(60,31,35,0.18); transition:transform .2s, background .2s;
}
.gallery-detail-close:hover{background:#fff; transform:scale(1.06);}
.gallery-detail-close:focus-visible{outline:3px solid var(--rose-mid); outline-offset:3px;}

@media (max-width:600px){
  .gallery-detail{width:calc(100% - 16px); border-radius:18px;}
  .gallery-detail-image{max-height:64dvh; min-height:220px;}
  .gallery-detail-copy{padding:22px 20px 25px;}
  .gallery-detail-copy h2{font-size:1.4rem;}
  .gallery-detail-close{top:10px; right:10px; width:40px; height:40px;}
}

/* ---------- HOMEPAGE SIGNPOSTS ---------- */
.signposts{background:#fff;}
.signpost-grid{display:grid; grid-template-columns:minmax(0,720px); justify-content:center; gap:24px;}
.signpost{
  display:flex; flex-direction:column; background:var(--cream);
  border:1px solid var(--line); border-radius:24px; padding:34px 32px; transition:.25s;
}
.signpost:hover{transform:translateY(-4px); box-shadow:0 20px 42px -24px rgba(139,58,71,0.4);}
.signpost .eyebrow{margin-bottom:12px;}
.signpost h3{font-size:1.5rem; margin-bottom:10px;}
.signpost p{color:var(--ink-soft); font-size:0.94rem; margin-bottom:20px; flex-grow:1;}
.signpost .go{font-size:0.86rem; font-weight:600; color:var(--rose-deep);}
.signpost:hover .go{color:var(--rose-mid);}

/* ---------- PROCESS STRIP ---------- */
.process{background:var(--rose-deep); color:var(--cream);}
.process .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.process h2{color:var(--cream); text-align:center; grid-column:1/-1; font-size:1.8rem; margin-bottom:6px;}
.process .sub{grid-column:1/-1; text-align:center; color:var(--blush); margin-bottom:20px; font-size:0.95rem;}
.step{text-align:center; padding:0 10px;}
.step .label{
  font-family:'Fraunces', serif; font-size:1rem; font-weight:600; margin-bottom:8px; color:var(--blush);
}
.step p{font-size:0.88rem; color:#F0D9D2;}

/* ---------- CONTACT / FOOTER ---------- */
footer{padding:70px 0 40px;}
.contact-box{
  background:#fff; border-radius:28px; padding:52px; text-align:center;
  border:1px solid var(--line); max-width:680px; margin:0 auto 50px;
}
.contact-box h2{font-size:1.9rem; margin-bottom:12px;}
.contact-box p{color:var(--ink-soft); margin-bottom:26px;}
.contact-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.contact-box .cta-note{margin-bottom:0;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:0.82rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:26px;
}
.footer-bottom a{border-bottom:1px solid var(--rose-light); transition:.2s;}
.footer-bottom a:hover{color:var(--rose-deep); border-color:var(--rose-deep);}

@media (max-width:860px){
  .hero-grid{text-align:center; gap:42px;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .hero-ctas{justify-content:center;}
  .occasion-pills{justify-content:center;}
  .cards, .cards-2, .custom-grid, .process .wrap, .signpost-grid{grid-template-columns:1fr;}
  .process h2, .process .sub{grid-column:auto;}
  .hero h1{font-size:2.3rem;}
  .page-head{padding:46px 0 4px;}
  .page-head h1{font-size:2.1rem;}
  .brand-band{padding:40px 20px 32px;}
  .contact-box{padding:34px 24px;}
  .gallery-grid{grid-template-columns:1fr 1fr; grid-auto-rows:230px;}
  .gallery-feature, .gallery-tall{grid-row:span 2;}
  .gallery-wide{grid-column:span 2;}
}

@media (max-width:560px){
  .hero{padding-top:24px;}
  .hero-grid{gap:38px;}
  .hero-art figure::before{inset:16px -10px -16px 10px;}
  .gallery-grid{grid-template-columns:1fr; grid-auto-rows:300px;}
  .gallery-feature, .gallery-tall{grid-row:span 1;}
  .gallery-wide{grid-column:span 1;}
}