/* Gifting: a real piece under the note in the hero; two photo tiles; the concierge's numbered steps.
   Mood photographs are licensed Pexels stock (credits in functions/gifting.js). */
.g-hero-art { position: relative; display: grid; justify-items: center; }
.g-piece { display: block; width: min(78%, 400px); background: var(--blush-t); padding: clamp(14px, 2vw, 22px); transform: rotate(-3deg); box-shadow: 0 30px 60px -34px rgba(58, 45, 42, .5); }
.g-piece img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.g-hero-art .notecard { position: relative; margin-top: -26%; margin-left: 22%; max-width: 330px; padding: clamp(20px, 3vw, 32px); }
.g-hero-art .notecard .hand { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
@media (max-width: 860px) { .g-hero-art { margin-top: 24px; } .g-hero-art .notecard { margin-left: 10%; } }

.q-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: var(--s-1); color: var(--ink); }
.q-h span { font-family: var(--script); font-size: 1.9rem; line-height: 1; color: var(--rose-deep); min-width: .8em; }

.g-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 28px; }
.g-big article { display: grid; grid-template-rows: auto 1fr; background: var(--paper); }
.g-big img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.g-big article > div { padding: clamp(18px, 2.4vw, 28px); }
.g-big h3 { margin: 0 0 6px; }
.g-big p { margin: 0; color: var(--ink-soft); }
.g-big + .g-features { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 700px) { .g-big, .g-big + .g-features { grid-template-columns: 1fr; } }

.g-when { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.g-when figure { margin: 0; }
.g-when img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.g-when .facts { grid-template-columns: 1fr; }
@media (max-width: 860px) { .g-when { grid-template-columns: 1fr; } .g-when img { aspect-ratio: 16 / 10; } }

.g-me { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.g-me figure { margin: 0; }
.g-me img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.g-me .btn { margin-top: 20px; display: inline-block; }
@media (max-width: 860px) { .g-me { grid-template-columns: 1fr; } .g-me figure { order: -1; } .g-me img { aspect-ratio: 16 / 10; } }