/*
 * Studio Dolci V21 — Lisa alignment + Clevk Booking Setup.
 * ORIGEN∞ contract: perceive the work, understand the offer, move with clarity.
 */

.v21-home {
  --v21-yellow: #fff19c;
  --v21-paper: #f3f0e9;
  --v21-ink: #382424;
  --v21-blue: #286b97;
  --v21-gap: clamp(18px, 1.7vw, 30px);
}

/* The logo remains the visual anchor. Orbiting work is atmospheric until a
   visitor intentionally explores it. */
.v21-home .v13-hero-lockup { z-index: 6; }

.v21-home .v13-hero-orbit {
  z-index: 3;
  opacity: .26;
  filter: saturate(.62) contrast(.94);
  transition:
    opacity 420ms cubic-bezier(.22, 1, .36, 1),
    filter 420ms ease,
    scale 520ms cubic-bezier(.22, 1, .36, 1),
    z-index 0s linear 220ms;
}

.v21-home .v13-hero-universe:hover .v13-hero-orbit { opacity: .14; }

.v21-home .v13-hero-orbit:hover,
.v21-home .v13-hero-orbit:focus-visible,
.v21-home .v13-hero-orbit:active {
  z-index: 8;
  opacity: 1 !important;
  filter: saturate(1) contrast(1);
  scale: 1.08;
  outline: 0;
  transition-delay: 0s;
}

.v21-home .v13-orbit-label { opacity: .56; transition: opacity 280ms ease; }
.v21-home .v13-hero-orbit:is(:hover, :focus-visible, :active) .v13-orbit-label { opacity: 1; }
.v21-home .v16-hero-core { isolation: isolate; }
.v21-home .v13-hero-intro { position: relative; z-index: 2; }

/* Lisa's chapter hierarchy: title and subtitle are a centered unit. The work
   begins immediately after it, without a competing editorial paragraph. */
.v21-home .v7-section-head.v21-centered-head {
  position: relative;
  display: grid;
  width: min(100%, 1120px);
  margin: 0 auto clamp(20px, 2.6svh, 34px);
  grid-template-columns: 1fr;
  place-items: center;
  gap: 8px;
  text-align: center;
}

.v21-home .v21-centered-head > span {
  position: absolute;
  top: 8px;
  left: 0;
}

.v21-home .v21-centered-head > div { width: 100%; text-align: center; }
.v21-home .v21-centered-head div > p { margin-inline: auto; }
.v21-home .v21-centered-head h2 { margin-inline: auto; text-wrap: balance; }

.v21-home .v7-identity,
.v21-home .v7-services,
.v21-home .v21-booking,
.v21-home .v7-footer { background: var(--v21-yellow); color: var(--v21-ink); }

/* Large, close, complete rails. Cards stay readable at 100% zoom while the
   imagery remains clearly above title and controls in the hierarchy. */
.v21-home .v7-books-track,
.v21-home .v7-track,
.v21-home .v7-service-grid {
  gap: var(--v21-gap);
}

.v21-home .v12-carousel { scroll-padding-inline: var(--sd-pad); }

.v21-home .v12-rail-controls {
  margin-bottom: clamp(12px, 1.7svh, 20px);
  justify-content: center;
}

.v21-home .v7-books-viewport,
.v21-home .v7-rail,
.v21-home .v12-service-viewport { margin-left: calc(var(--sd-pad) * -1); padding-left: var(--sd-pad); }

.v21-home .v7-book-card {
  width: clamp(330px, 30vw, 455px);
  height: auto;
  min-height: 0;
}

.v21-home .v7-book-cover {
  min-height: clamp(360px, 46svh, 500px);
}

.v21-home .v7-book-cover .v19-book-visual > img {
  max-width: 94%;
  max-height: min(46svh, 480px);
}

.v21-home .v7-book-copy {
  display: grid;
  padding: 14px 8px 0;
  place-items: center;
  text-align: center;
}

.v21-home .v7-book-copy h3 {
  max-width: 21ch;
  margin: 7px auto 13px;
  font-size: clamp(21px, 1.75vw, 30px);
}

.v21-home .v7-book-copy > div { justify-content: center; }
.v21-home .v7-book-copy a { min-height: 36px; padding-inline: 15px; background: transparent; }
.v21-home .v7-book-copy a:hover,
.v21-home .v7-book-copy a:focus-visible { background: var(--v21-ink); color: var(--v21-yellow); }

.v21-home .v7-project,
.v21-home .v7-project:nth-child(n) {
  width: clamp(430px, 43vw, 660px);
  height: clamp(440px, 54svh, 600px);
}

.v21-home .v7-project-media img { width: 100%; height: 100%; object-fit: contain; }
.v21-home .v7-project-meta {
  min-height: 74px;
  padding: 12px 8px 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  text-align: center;
}

.v21-home .v7-project-meta > span { text-align: left; }
.v21-home .v7-project-meta > div { justify-self: center; }
.v21-home .v7-project-meta strong { font-size: clamp(20px, 1.65vw, 29px); }

.v21-home .v7-object-grid {
  display: grid;
  width: min(100%, 1500px);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v21-gap);
}

.v21-home .v10-object-card {
  min-height: clamp(520px, 48vw, 700px);
}

.v21-home .v10-object-meta { text-align: center; }
.v21-home .v10-object-meta > * { margin-inline: auto; }

/* Service-as-product demonstrations. Each front communicates a process; the
   reverse reveals the scope without navigating away. */
.v21-home .v12-service-viewport .v7-service-grid { gap: clamp(18px, 2vw, 30px); }

.v21-home .v10-service-card,
.v21-home .v10-service-card:nth-child(n) {
  width: clamp(360px, 35vw, 510px);
  aspect-ratio: 1.16;
}

.v21-home .v10-service-card > button {
  width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
}

.v21-home .v10-service-face { padding: clamp(25px, 2.5vw, 38px); }
.v21-home .v10-service-face b { max-width: 12ch; font-size: clamp(27px, 2.2vw, 38px); }
.v21-home .v10-service-face > span:not(.v10-service-points, .v11-service-glyph, .v20-service-signal, .v21-service-demo, .v21-service-back-intro) { font-size: 12px; }

.v21-service-demo {
  display: grid;
  min-height: 0 !important;
  margin-top: 16px;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.v21-service-demo b {
  margin: 0 !important;
  color: var(--v21-blue);
  font-family: var(--sans) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.v21-service-demo i { height: 1px; background: color-mix(in srgb, currentColor 32%, transparent); }
.v21-service-back-intro { display: block; margin: 8px 0 14px; font-size: 10px; line-height: 1.55; }
.v21-home .v20-service-signal { margin-top: 10px; }

.v21-home .v20-responsible-practice {
  padding: clamp(34px, 4vw, 58px);
  grid-template-columns: minmax(280px, .78fr) minmax(560px, 1.22fr);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 72px 8px 72px 8px;
  background:
    radial-gradient(circle at 13% 22%, color-mix(in srgb, var(--v21-blue) 19%, transparent) 0 8%, transparent 8.3%),
    linear-gradient(115deg, transparent 0 64%, color-mix(in srgb, #fff 28%, transparent) 64% 100%);
}

.v21-home .v20-responsible-practice > div { gap: 12px; }
.v21-home .v20-responsible-practice article {
  min-height: 300px;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px 999px 18px 18px;
  background: color-mix(in srgb, var(--v21-paper) 62%, transparent);
  text-align: center;
}

.v21-home .v20-responsible-practice article:last-child { border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.v21-home .v20-responsible-practice article h3 { margin-top: clamp(70px, 6vw, 96px); }

/* Booking Setup: positioned after credibility and before the final signature.
   It captures only the context Elisa needs to decide the next human step. */
.v21-booking {
  display: grid;
  width: 100%;
  padding: clamp(92px, 10vw, 164px) var(--sd-pad);
  grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.22fr);
  gap: clamp(42px, 7vw, 112px);
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.v21-booking-intro { align-self: start; }
.v21-booking-intro > span {
  color: var(--v21-blue);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.v21-booking-intro h2 {
  max-width: 11ch;
  margin: 18px 0 24px;
  font-family: var(--wide);
  font-size: clamp(44px, 4.7vw, 64px);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .84;
  text-transform: uppercase;
  text-wrap: balance;
}

.v21-booking-intro > p { max-width: 48ch; font-size: 12px; line-height: 1.75; }

.v21-booking-proof {
  display: grid;
  margin-top: clamp(34px, 4vw, 60px);
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}

.v21-booking-proof article { padding: 20px 18px 0 0; }
.v21-booking-proof article + article { padding-left: 18px; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.v21-booking-proof i { display: block; margin-bottom: 26px; color: var(--v21-blue); font-size: 8px; font-style: normal; font-weight: 800; }
.v21-booking-proof b { display: block; font-family: var(--serif); font-size: 18px; font-style: italic; font-weight: 400; }
.v21-booking-proof p { margin: 9px 0 0; font-size: 9px; line-height: 1.6; }

.v21-booking-form { display: grid; gap: 30px; }
.v21-form-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; }
.v21-form-progress i { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 50%; color: color-mix(in srgb, currentColor 52%, transparent); font-size: 8px; font-style: normal; font-weight: 800; transition: background 260ms ease, color 260ms ease; }
.v21-form-progress i.is-active { border-color: var(--v21-blue); background: var(--v21-blue); color: #fff; }
.v21-form-progress span { height: 1px; background: color-mix(in srgb, currentColor 24%, transparent); }
.v21-booking-form.is-enhanced [data-booking-step] { animation: v21-step-in 520ms cubic-bezier(.22, 1, .36, 1); }
.v21-booking-form.is-enhanced [data-booking-step]:not(.is-active) { display: none; }
.v21-booking-form.is-enhanced .v21-submit-panel { display: none; }
.v21-booking-form.is-enhanced[data-current-step="3"] .v21-submit-panel { display: grid; }
@keyframes v21-step-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.v21-booking-form fieldset { margin: 0; padding: 0 0 30px; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.v21-booking-form legend { display: flex; width: 100%; margin-bottom: 22px; align-items: center; gap: 12px; font-family: var(--serif); font-size: 18px; font-style: italic; }
.v21-booking-form legend i { color: var(--v21-blue); font-family: var(--sans); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.v21-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v21-span-2 { grid-column: 1 / -1; }
.v21-booking-form label:not(.v21-consent, .v21-hp) { display: grid; gap: 8px; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v21-booking-form input,
.v21-booking-form select,
.v21-booking-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 400 14px/1.5 var(--sans);
}
.v21-booking-form textarea { min-height: 118px; resize: vertical; }
.v21-booking-form :is(input, select, textarea):focus { border-color: var(--v21-blue); outline: 2px solid transparent; box-shadow: 0 2px 0 var(--v21-blue); }
.v21-booking-form select option { color: #151212; }
.v21-consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 10px; line-height: 1.55; }
.v21-consent input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--v21-blue); }
.v21-step-actions { display: flex; margin-top: 26px; justify-content: flex-end; gap: 10px; }
.v21-step-actions button { min-height: 42px; padding: 10px 17px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v21-step-actions button:hover,
.v21-step-actions button:focus-visible { background: var(--v21-ink); color: var(--v21-yellow); }
.v21-submit-panel { display: grid; gap: 24px; }
.v21-booking-submit { display: grid; grid-template-columns: minmax(240px, auto) 1fr; align-items: center; gap: 22px; }
.v21-booking-submit button {
  display: flex;
  min-height: 58px;
  padding: 13px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--v21-ink);
  border-radius: 999px;
  background: var(--v21-ink);
  color: var(--v21-yellow);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.v21-booking-submit button:hover,
.v21-booking-submit button:focus-visible { background: var(--v21-blue); border-color: var(--v21-blue); }
.v21-booking-submit button:disabled { opacity: .62; cursor: wait; }
.v21-booking-submit p { margin: 0; font-size: 8px; line-height: 1.6; }
.v21-form-status { min-height: 22px; margin: 0; color: var(--v21-blue); font: italic 400 15px/1.5 var(--serif); }
.v21-hp { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }

html[data-color-mode="dark"] .v21-home .v7-identity,
html[data-color-mode="dark"] .v21-home .v7-services,
html[data-color-mode="dark"] .v21-home .v21-booking,
html[data-color-mode="dark"] .v21-home .v7-footer { background: #151212; color: #fff3b7; }
html[data-color-mode="dark"] .v21-home .v20-responsible-practice article { background: #211c1c; }
html[data-color-mode="dark"] .v21-home .v21-booking-submit button { border-color: #fff3b7; background: #fff3b7; color: #151212; }
html[data-color-mode="dark"] .v21-home .v21-booking-submit button:hover,
html[data-color-mode="dark"] .v21-home .v21-booking-submit button:focus-visible { border-color: #8fd4ff; background: #8fd4ff; }

@media (min-width: 821px) {
  .v21-home .v7-word,
  .v21-home .v7-portfolio:not(.v7-object) {
    min-height: 100svh;
    height: auto;
    grid-template-rows: auto 42px auto;
  }

  .v21-home .v7-word,
  .v21-home .v7-portfolio,
  .v21-home .v7-services { padding-top: calc(var(--sd-header) + clamp(28px, 4svh, 48px)); }
}

@media (max-width: 1100px) {
  .v21-home .v7-project,
  .v21-home .v7-project:nth-child(n) { width: clamp(390px, 56vw, 560px); }
  .v21-home .v7-object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v21-home .v20-responsible-practice,
  .v21-booking { grid-template-columns: 1fr; }
  .v21-home .v20-responsible-practice > div { margin-top: 8px; }
  .v21-booking-intro h2 { max-width: 13ch; }
}

@media (max-width: 820px) {
  .v21-home .v13-hero-orbit { opacity: .38; }
  .v21-home .v21-centered-head > span { position: static; }
  .v21-home .v21-centered-head div > p { font-size: clamp(46px, 14vw, 76px); }
  .v21-home .v7-book-card { width: min(84vw, 390px); }
  .v21-home .v7-book-cover { min-height: min(56svh, 520px); }
  .v21-home .v7-project,
  .v21-home .v7-project:nth-child(n) { width: min(86vw, 520px); height: min(67svh, 580px); }
  .v21-home .v7-object-grid { display: flex; width: calc(100% + var(--sd-pad)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .v21-home .v10-object-card { width: min(84vw, 440px); min-height: 520px; flex: 0 0 auto; scroll-snap-align: start; }
  .v21-home .v10-service-card,
  .v21-home .v10-service-card:nth-child(n) { width: min(84vw, 430px); }
  .v21-home .v20-responsible-practice { padding: 30px 22px; border-radius: 42px 6px; }
  .v21-home .v20-responsible-practice > div { grid-template-columns: 1fr; }
  .v21-home .v20-responsible-practice article { min-height: 240px; border-radius: 999px 999px 16px 16px; }
  .v21-home .v20-responsible-practice article h3 { margin-top: 58px; }
  .v21-booking { padding: 88px 18px; }
  .v21-booking-intro h2 { font-size: clamp(46px, 15vw, 78px); }
  .v21-form-grid { grid-template-columns: 1fr; }
  .v21-span-2 { grid-column: auto; }
  .v21-booking-submit { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .v21-booking-proof { grid-template-columns: 1fr; }
  .v21-booking-proof article + article { padding-left: 0; border-left: 0; }
  .v21-home .v20-responsible-practice { margin-inline: 0; }
}

@media (hover: none) {
  .v21-home .v13-hero-universe:hover .v13-hero-orbit { opacity: .38; }
  .v21-home .v13-hero-orbit:active { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v21-home .v13-hero-orbit { transition-duration: .001ms !important; }
}