/* services.css: the Services page's own placing (plan.md, "Services"). Every component and token comes from
   components.css and system.css; this file only places and sizes the page's parts. */

/* ---------- #top: full-bleed footage under the nav, ending in the handwritten curve; the ivory card straddles it ---------- */
.svc-top { position: relative; }
.svc-top__media { position: relative; height: clamp(520px, 76vh, 760px); overflow: hidden; isolation: isolate; background: var(--c-ink); }
.svc-top__slides { position: absolute; inset: 0; }
.svc-top__slide video, .svc-top__slide img.kit-first { object-fit: cover; object-position: 35% 20%; }
/* one still grade over the stage (kit.md): a soft ivory wash on the left third, behind the card */
.svc-top__media::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(248 243 234 / 0.6) 0%, rgb(248 243 234 / 0.26) 27%, rgb(248 243 234 / 0) 46%); }
.svc-top__media .svc-top__island { position: absolute; z-index: 4; top: 22px; right: calc(max(var(--gutter), (100% - var(--max-w)) / 2) + 54px); width: clamp(343px, 30vw, 400px); height: 320px; }
.svc-top__stop { top: 22px; right: max(var(--gutter), (100% - var(--max-w)) / 2); }
.svc-top__seam { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 5; }
.svc-top__in { position: relative; z-index: 6; margin-top: clamp(-300px, -28vh, -220px); }
/* the card: the copy beside the picker on the computer, one column below 1100 px */
.svc-top__card { position: relative; width: min(100%, 66rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem); align-items: start; padding: 2.2rem 2.2rem 1.15rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.svc-top__copy { display: grid; gap: var(--space-3); padding-top: 0.3rem; }
.svc-top__card h1 { font-size: clamp(2.05rem, 1.4rem + 1.6vw, 2.85rem); max-width: 17ch; }
.svc-top__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 30rem; }
/* the picker sits flat inside the card; the founder's face breaks the card's top edge above it */
.svc-top__card .picker { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.svc-top__card .picker__face { left: 0; top: calc(-2.2rem - 28px); }
@media (max-width: 1100px) {
  .svc-top__in { margin-top: clamp(-300px, -30vh, -200px); }
  .svc-top__card { grid-template-columns: 1fr; width: min(100%, 38rem); padding-top: 2.6rem; gap: var(--space-3); }
  .svc-top__card .picker { position: static; margin-top: 0.35rem; }
  .svc-top__card .picker__face { left: 2.2rem; top: -28px; }
}
@media (max-width: 760px) {
  .svc-top__media { height: 500px; }
  .svc-top__media::after { background: linear-gradient(180deg, rgb(13 27 51 / 0.12) 0%, rgb(13 27 51 / 0) 30%); }
  /* the island hangs below both faces and ends above the card's portrait */
  .svc-top__media .svc-top__island { top: 190px; left: 12px; right: 12px; width: auto; height: 260px; }
  .svc-top__stop { top: 12px; right: 12px; }
  .svc-top__in { margin-top: -34px; }
  .svc-top__card { padding: 2.5rem 1.15rem 1rem; }
  .svc-top__card .picker__face { left: 1.15rem; }
}

/* ---------- the four groups: cards that stack as the page scrolls (computer), a column of cards (phone) ---------- */
.stack-part .head { margin-bottom: var(--space-5); }
.stack { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.stack__in { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); padding: clamp(0.9rem, 0.5rem + 0.8vw, 1.25rem); }
.stack__words { display: grid; align-content: center; gap: var(--space-3); padding: clamp(0.5rem, 0.2rem + 1vw, 1.25rem); }
.stack__words h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: var(--lh-tight); }
.stack__line { font-size: var(--fs-lead); color: var(--c-ink-soft); }
.stack__rows { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; }
.stack__rows a { display: grid; gap: 0.1rem; padding: 0.68rem 0; border-top: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.stack__rows li:last-child a { border-bottom: 1px solid var(--c-line); }
.stack__rows b { font: 650 1rem/1.3 var(--font-ui); }
.stack__rows span { font-size: var(--fs-small); color: var(--c-ink-soft); }
.stack__rows a:not([data-planned]):hover b { color: var(--c-brand-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
.stack__see { justify-self: start; margin-top: var(--space-2); }
.stack__stage { min-height: 0; }
/* the clip's wrapper reaches 1 px past the frame, the clip fills it (kit.md, "Video") */
.stack__clip { position: absolute; inset: -1px; overflow: hidden; }
.stack__clip video, .stack__clip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* a scene's own CSS sets its host's position: two classes win over it */
.stack__stage .stack__scene { position: absolute; z-index: 2; }
/* each frame's scene on the side clear of faces */
.stack__stage--found .stack__clip video { object-position: 94% 50%; }
.stack__stage--found .stack__scene { top: 14px; right: 14px; bottom: 14px; left: auto; width: min(420px, 58%); }
.stack__stage--found .stack__stop { left: 14px; right: auto; }
.stack__stage--booked .stack__clip img { object-position: 70% 50%; }
.stack__stage--booked .stack__scene { left: 4%; top: 6%; bottom: 6%; width: 60%; display: grid; place-items: center; }
.stack__stage--answered .stack__clip video { object-position: 60% 50%; }
.stack__stage--answered .stack__scene { left: 5%; top: 7%; width: min(360px, 52%); }
.stack__stage--chosen .stack__clip video { object-position: 50% 20%; }
.stack__stage--chosen .stack__scene { left: 0; right: 0; top: 0; bottom: 46px; }
@media (min-width: 1200px) {
  .stack__card { position: sticky; top: calc(var(--header-h) + 1.25rem + var(--k) * 14px); }
  .stack__in { height: min(620px, calc(100vh - var(--header-h) - 3rem)); }
}
@media (max-width: 1199px) {
  .stack__in { grid-template-columns: 1fr; }
  .stack__stage { order: -1; aspect-ratio: 16 / 10; }
  .stack__words { padding-top: var(--space-2); }
}
@media (max-width: 760px) {
  .stack__stage { aspect-ratio: 4 / 3; }
  /* the delivery map needs a tall box (the scene: at least 540 px tall on a phone): the stage stands tall, the shop's
     flowers in the strip above, the map frosted over the rest of the clip, so it stays on its footage */
  .stack__stage--found { aspect-ratio: auto; height: 670px; }
  .stack__stage--found .stack__clip video { object-position: 18% 0%; }
  .stack__stage--found .stack__scene { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 560px; }
  .stack__stage--found .stack__stop { top: 12px; left: 12px; right: auto; }
  .stack__stage--booked { aspect-ratio: 3 / 4; }
  .stack__stage--booked .stack__scene { left: 3%; right: 3%; width: auto; top: auto; bottom: 4%; }
  .stack__stage--answered .stack__scene { left: 4%; top: 5%; width: min(330px, 80%); }
}

/* ---------- #mix: the signature, on the designed ground ---------- */
.mix__k { right: -10%; bottom: -18%; }
.mix .head { margin-bottom: var(--space-4); }
.mix__stage { position: relative; width: min(100%, 960px); aspect-ratio: 16 / 9; margin: 0 auto; }
.mix__stage .mix__scene { position: absolute; inset: 0; }
.mix__stop { top: 0; right: 0; }
.mix__cta { margin-top: var(--space-4); }
@media (max-width: 640px) { .mix__stage { aspect-ratio: 9 / 16; width: min(100%, 420px); } }

/* ---------- #sees: the counter photo, new customers landing on its calm right ---------- */
.sees__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.sees__head { padding-top: var(--space-4); }
.sees__stage { aspect-ratio: 16 / 10; margin-top: clamp(1rem, 4vw, 4.5rem); }
.sees__stage img { object-position: 28% 50%; }
/* wide enough for the row's words beside its longest source ("Call answered") at every width. The card (auto
   margins, rows laid absolutely) shrinks to its title in a grid or flex host: the host stays a block, centered by
   align-content, so the card fills it up to its own max-width */
.sees__stage .sees__scene { position: absolute; z-index: 2; top: 5%; bottom: 5%; right: 3%; left: auto; width: clamp(320px, 56%, 440px); display: block; align-content: center; }
@media (max-width: 900px) { .sees__grid { grid-template-columns: 1fr; } .sees__head { padding-top: 0; } .sees__stage { margin-top: 0; } }
@media (max-width: 600px) { .sees__stage { aspect-ratio: 3 / 4; } .sees__stage img { object-position: 22% 50%; } .sees__stage .sees__scene { left: 4%; right: 4%; width: auto; top: auto; bottom: 4%; } }

/* ---------- #close: the customer at her door, from a third across ---------- */
#close .close-band__media video { object-position: 75% 35%; }
@media (max-width: 760px) { #close .close-band__media video { object-position: 82% 30%; } }