/* Flowers To Say, brand system. Warm editorial; the dark cards are the product shots. */
:root{
  --bone:#f7f2ec; --bone-2:#efe6dc; --ink:#33272b; --ink-soft:#6a565d;
  --rose:#9e2f3c; --rose-soft:#b85d63; --line:rgba(51,39,43,.12);
  --shadow:0 18px 50px rgba(51,39,43,.14);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);line-height:1.6;font-weight:300;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:720px;margin:0 auto;padding:0 22px}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;max-width:1120px;margin:0 auto}
.brand{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.2px;color:var(--rose)}
.brand .t{font-style:normal}
.nav a.link{font-size:14px;color:var(--ink-soft);margin-left:22px}
.nav a.link:hover{color:var(--rose)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:400;font-size:15px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.2s;letter-spacing:.2px}
.btn-primary{background:var(--rose);color:#fff5f2;box-shadow:0 10px 26px rgba(158,47,60,.26)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(158,47,60,.32)}
.btn-ghost{background:transparent;color:var(--rose);border-color:rgba(158,47,60,.35)}
.btn-ghost:hover{background:rgba(158,47,60,.06)}

/* hero */
.hero{text-align:center;padding:60px 0 30px}
.eyebrow{font-family:var(--serif);font-style:italic;color:var(--rose-soft);font-size:18px;margin-bottom:14px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,7vw,68px);line-height:1.05;letter-spacing:-.5px}
.lead{font-size:clamp(17px,2.4vw,21px);color:var(--ink-soft);max-width:560px;margin:22px auto 30px;font-weight:300}

/* sections */
.section{padding:54px 0}
.section h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,38px);text-align:center;margin-bottom:8px}
.section .sub{text-align:center;color:var(--ink-soft);max-width:560px;margin:0 auto 36px}

/* bouquet grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.bq{background:#161015;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);position:relative;aspect-ratio:3/4;display:block;transition:.25s}
.bq:hover{transform:translateY(-4px)}
.bq img{width:100%;height:100%;object-fit:cover}
.bq .label{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(13,9,11,.82),transparent);color:#f3e9e0}
.bq .label .n{font-family:var(--serif);font-size:18px}
.bq .label .m{font-size:12.5px;color:#cbb;opacity:.9}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:10px}
.step{text-align:center;padding:10px}
.step .num{font-family:var(--serif);font-size:34px;color:var(--rose);font-style:italic}
.step h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:6px 0}
.step p{font-size:14.5px;color:var(--ink-soft)}

/* prose (SEO content pages) */
.prose{font-size:17px;color:var(--ink)}
.prose h2{font-family:var(--serif);font-weight:500;font-size:28px;margin:34px 0 12px;text-align:left}
.prose h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:24px 0 8px}
.prose p{margin:0 0 16px;color:var(--ink-soft)}
.prose ul{margin:0 0 16px 20px;color:var(--ink-soft)}
.prose li{margin:6px 0}
.prose strong{color:var(--ink);font-weight:400}

/* callout / cta band */
.band{background:var(--bone-2);border-radius:24px;padding:40px 28px;text-align:center;margin:40px 0}
.band h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4vw,34px);margin-bottom:10px}
.band p{color:var(--ink-soft);max-width:480px;margin:0 auto 22px}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:var(--serif);font-size:18px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rose)}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:10px;color:var(--ink-soft);font-size:15px}

/* footer */
.footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0;text-align:center;color:var(--ink-soft);font-size:13.5px}
.footer a{color:var(--rose-soft)}
.footer .links{margin-bottom:12px}
.footer .links a{margin:0 10px}

.center{text-align:center}
.mt{margin-top:26px}