:root {
  --bouquet-gold: #d8aa2b;
  --bouquet-gold-soft: #f1d474;
  --bouquet-ink: #090909;
  --bouquet-panel: #121211;
  --bouquet-border: rgba(216, 170, 43, .38);
  --bouquet-text: #f4f0e8;
  --bouquet-muted: #aaa69f;
}

* { box-sizing: border-box; }
html { background: var(--bouquet-ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--bouquet-ink); color: var(--bouquet-text); font-family: Montserrat, sans-serif; }
button { font: inherit; }
.eyebrow { margin: 0 0 18px; color: var(--bouquet-gold); font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }

.bouquet-hero {
  position: relative;
  min-height: min(860px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 150px clamp(28px, 8vw, 140px) 90px;
  background:
    radial-gradient(circle at 78% 25%, rgba(216,170,43,.13), transparent 29%),
    linear-gradient(115deg, #080808 0%, #11100c 55%, #080808 100%);
  border-bottom: 1px solid var(--bouquet-border);
}
.bouquet-hero::before {
  content: '';
  position: absolute;
  right: -8vw;
  top: 9%;
  width: min(54vw, 780px);
  aspect-ratio: 1;
  border: 1px solid rgba(216,170,43,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 120px rgba(216,170,43,.04);
  z-index: 1;
}
.bouquet-hero__media { position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(50vw, 900px); overflow: hidden; }
.bouquet-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #090909 0%, rgba(9,9,9,.82) 14%, rgba(9,9,9,.12) 55%, rgba(9,9,9,.08)); }
.bouquet-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 64%; filter: saturate(.86) contrast(1.03); }
.bouquet-hero__veil { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, transparent 0 70%, rgba(216,170,43,.04)); pointer-events: none; }
.bouquet-hero__content { position: relative; z-index: 2; width: min(56%, 820px); }
.bouquet-hero h1, .bouquet-intro h2, .bouquet-process h2, .bouquet-final h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: .92;
}
.bouquet-hero h1 { font-size: clamp(58px, 8vw, 124px); letter-spacing: -.035em; }
.bouquet-hero h1 em, .bouquet-intro h2 em, .bouquet-process h2 em, .bouquet-final h2 em { color: var(--bouquet-gold); font-weight: 400; }
.bouquet-hero__copy { max-width: 650px; margin: 34px 0 0; color: #c9c5bd; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.8; }
.bouquet-hero__mark { position: absolute; z-index: 1; right: 3vw; bottom: -10%; color: rgba(216,170,43,.055); font: 500 min(48vw, 700px)/1 'Cormorant Garamond', serif; }

.bouquet-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.bouquet-actions--center { justify-content: center; }
.btn { min-height: 54px; padding: 0 30px; border: 1px solid var(--bouquet-gold); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transition: .25s ease; }
.btn--gold { background: linear-gradient(110deg, #c79418, #f0d36f); color: #0a0a09; }
.btn--outline { background: transparent; color: var(--bouquet-gold-soft); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(216,170,43,.15); }

.bouquet-intro { max-width: 920px; margin: 0 auto; padding: 130px 30px 95px; text-align: center; }
.bouquet-intro h2, .bouquet-process h2, .bouquet-final h2 { font-size: clamp(46px, 6vw, 82px); }
.bouquet-intro > p:last-child { max-width: 720px; margin: 30px auto 0; color: var(--bouquet-muted); line-height: 1.85; }

.bouquet-catalog { max-width: 1540px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 46px) 130px; }
.bouquet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.1vw, 34px); }
.bouquet-tile { position: relative; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #171611; border: 1px solid rgba(216,170,43,.28); cursor: zoom-in; isolation: isolate; }
.bouquet-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.78)); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.bouquet-tile img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .75s ease, filter .4s ease; }
.bouquet-tile:hover img, .bouquet-tile:focus img { transform: scale(1.035); filter: brightness(.88); }
.bouquet-tile:hover::after, .bouquet-tile:focus::after { opacity: 1; }
.bouquet-tile:focus-visible { outline: 2px solid var(--bouquet-gold-soft); outline-offset: 4px; }
.bouquet-tile__caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 55px 24px 22px; opacity: 0; transform: translateY(10px); transition: .35s ease; }
.bouquet-tile:hover .bouquet-tile__caption, .bouquet-tile:focus .bouquet-tile__caption { opacity: 1; transform: translateY(0); }
.bouquet-tile__caption span { color: var(--bouquet-gold-soft); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }
.bouquet-tile__caption h3 { margin: 6px 0 0; color: #fff; font: 400 clamp(25px, 2.5vw, 39px)/1 'Cormorant Garamond', serif; }

.bouquet-state { min-height: 280px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--bouquet-muted); letter-spacing: .08em; }
.bouquet-grid[hidden], .bouquet-state[hidden] { display: none !important; }
.bouquet-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bouquet-gold); box-shadow: 0 0 0 7px rgba(216,170,43,.08); animation: pulse 1.2s infinite; }
.bouquet-state--empty { display: block; max-width: 900px; margin: 0 auto; padding: 70px; min-height: 0; text-align: center; border: 1px solid var(--bouquet-border); }
.bouquet-state--empty h2 { margin: 0; color: white; font: 400 clamp(38px, 5vw, 62px)/1 'Cormorant Garamond', serif; }
.bouquet-state--empty > p:not(.eyebrow) { color: var(--bouquet-muted); line-height: 1.7; }

.bouquet-viewer { position: fixed; z-index: 10000; inset: 0; display: none; align-items: center; justify-content: center; padding: 28px 90px; background: rgba(4,4,4,.97); }
.bouquet-viewer.is-open { display: flex; }
.bouquet-viewer figure { display: flex; flex-direction: column; align-items: center; max-width: calc(100vw - 180px); height: calc(100vh - 56px); margin: 0; }
.bouquet-viewer img { display: block; max-width: 100%; max-height: calc(100vh - 118px); object-fit: contain; }
.bouquet-viewer figcaption { min-height: 55px; padding-top: 12px; text-align: center; }
.bouquet-viewer figcaption strong { display: block; font: 400 24px/1.1 'Cormorant Garamond', serif; }
.bouquet-viewer figcaption span { display: block; margin-top: 5px; color: var(--bouquet-muted); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.bouquet-viewer__close, .bouquet-viewer__nav { position: absolute; width: 50px; height: 50px; border: 1px solid rgba(216,170,43,.55); background: rgba(18,18,16,.88); color: #fff; cursor: pointer; font-size: 34px; line-height: 1; }
.bouquet-viewer__close { top: 22px; right: 22px; }
.bouquet-viewer__nav { top: 50%; transform: translateY(-50%); }
.bouquet-viewer__prev { left: 24px; }.bouquet-viewer__next { right: 24px; }
body.bouquet-viewer-open { overflow: hidden; }

.bouquet-process { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 130px); padding: 120px clamp(28px, 8vw, 140px); background: #0e0e0d; border-block: 1px solid rgba(216,170,43,.18); }
.bouquet-process__steps { display: grid; gap: 0; }
.bouquet-process__steps article { display: grid; grid-template-columns: 58px 1fr; column-gap: 24px; padding: 28px 0; border-bottom: 1px solid rgba(216,170,43,.19); }
.bouquet-process__steps span { grid-row: 1 / 3; color: var(--bouquet-gold); font: 400 30px/1 'Cormorant Garamond', serif; }
.bouquet-process__steps h3 { margin: 0 0 8px; font: 400 27px/1.1 'Cormorant Garamond', serif; }
.bouquet-process__steps p { margin: 0; color: var(--bouquet-muted); font-size: 13px; line-height: 1.65; }

.bouquet-final { padding: 150px 28px; text-align: center; background: radial-gradient(circle at center, rgba(216,170,43,.09), transparent 43%); }
.bouquet-footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(24px, 6vw, 90px); border-top: 1px solid var(--bouquet-border); color: #77736c; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
@keyframes pulse { 50% { opacity: .4; transform: scale(.85); } }

@media (max-width: 900px) {
  .bouquet-hero { min-height: 760px; padding-top: 130px; }
  .bouquet-hero__media { width: 100%; opacity: .52; }
  .bouquet-hero__media::after { background: linear-gradient(90deg, rgba(9,9,9,.92) 0%, rgba(9,9,9,.58) 64%, rgba(9,9,9,.35)), linear-gradient(0deg, rgba(9,9,9,.72), transparent 65%); }
  .bouquet-hero__content { width: 100%; max-width: 700px; }
  .bouquet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bouquet-process { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .bouquet-hero { min-height: 720px; padding: 125px 22px 65px; align-items: flex-end; }
  .bouquet-hero__media { opacity: .46; }
  .bouquet-hero__media img { object-position: 57% center; }
  .bouquet-hero__media::after { background: linear-gradient(0deg, rgba(9,9,9,.95) 0%, rgba(9,9,9,.28) 72%), linear-gradient(90deg, rgba(9,9,9,.52), rgba(9,9,9,.14)); }
  .bouquet-hero h1 { font-size: 56px; }
  .bouquet-hero__copy { font-size: 15px; line-height: 1.65; }
  .bouquet-actions { flex-direction: column; }
  .btn { width: 100%; }
  .bouquet-intro { padding: 95px 22px 70px; }
  .bouquet-catalog { padding-inline: 12px; }
  .bouquet-grid { grid-template-columns: 1fr; gap: 14px; }
  .bouquet-tile { aspect-ratio: 4 / 5; }
  .bouquet-tile::after { opacity: .72; }
  .bouquet-tile__caption { opacity: 1; transform: none; padding: 48px 18px 17px; }
  .bouquet-viewer { padding: 68px 10px 18px; }
  .bouquet-viewer figure { max-width: 100%; height: calc(100vh - 86px); }
  .bouquet-viewer img { max-height: calc(100vh - 145px); }
  .bouquet-viewer__nav { top: auto; bottom: 24px; width: 44px; height: 44px; }
  .bouquet-viewer__prev { left: 12px; }.bouquet-viewer__next { right: 12px; }
  .bouquet-viewer__close { top: 14px; right: 14px; }
  .bouquet-process { padding: 90px 22px; }
  .bouquet-final { padding: 105px 22px; }
  .bouquet-footer { flex-direction: column; text-align: center; }
}