/*
 * Studio Dolci V22 — image-first portfolio and conversion hierarchy.
 * ORIGEN∞: the work leads, the explanation clarifies, the action follows.
 */

.v22-home {
  --v22-yellow: #fff19c;
  --v22-paper: #f3f0e9;
  --v22-ink: #382424;
  --v22-blue: #286b97;
  --v22-cream: #fff8d8;
}

/* Experience, Identity and Image: the project title belongs to the image.
   The centered label remains secondary to the work and stays legible over
   every supplied photograph. */
.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project,
.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project:nth-child(n) {
  width: clamp(520px, 49vw, 760px);
  height: clamp(520px, 66svh, 720px);
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-button {
  position: relative;
  display: block;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-media {
  width: 100%;
  height: 100%;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-media img {
  object-fit: contain;
  transform: scale(1.01);
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(84%, 520px);
  min-height: 112px;
  padding: 22px 24px;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(255, 248, 216, .66);
  border-radius: 4px 34px 4px 34px;
  background: rgba(35, 24, 24, .78);
  box-shadow: 0 24px 70px rgba(10, 7, 7, .24);
  color: var(--v22-cream);
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(12px) saturate(.9);
  backdrop-filter: blur(12px) saturate(.9);
  transition: background 360ms ease, border-color 360ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta > i {
  color: #8fd4ff;
  font-size: 9px;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta > span {
  place-items: center;
  text-align: center;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta strong {
  max-width: 18ch;
  font-size: clamp(26px, 2.35vw, 40px);
  line-height: .98;
  text-wrap: balance;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta small {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: .13em;
  opacity: .86;
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-button:is(:hover, :focus-visible) .v7-project-meta {
  border-color: var(--v22-yellow);
  background: rgba(40, 107, 151, .91);
  transform: translate(-50%, -50%) scale(1.025);
}

.v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-button:is(:hover, :focus-visible) .v7-project-media img {
  transform: scale(1.035);
}

/* Services are product demonstrations: offer, process and representative
   outputs can be understood before the visitor opens the card. */
.v22-home .v12-service-viewport .v7-service-grid {
  gap: clamp(22px, 2.4vw, 38px);
}

.v22-home .v10-service-card,
.v22-home .v10-service-card:nth-child(n) {
  width: clamp(440px, 42vw, 600px);
  min-height: clamp(520px, 50vw, 630px);
  aspect-ratio: auto;
  border-width: 1.5px;
  border-radius: 48px 8px 48px 8px;
}

.v22-home .v10-service-card:nth-child(3n + 2) { border-radius: 110px 8px 48px 8px; }
.v22-home .v10-service-card:nth-child(4n) { border-radius: 48px 8px 110px 8px; }

.v22-home .v10-service-face {
  padding: clamp(34px, 3.25vw, 52px);
}

.v22-home .v10-service-face > i {
  font-size: 10px;
  letter-spacing: .16em;
}

.v22-home .v10-service-face b {
  max-width: 11ch;
  margin: auto 0 16px;
  font-size: clamp(38px, 3.45vw, 54px);
  line-height: .9;
  text-wrap: balance;
}

.v22-home .v10-service-face > span:not(.v10-service-points, .v11-service-glyph, .v20-service-signal, .v21-service-demo, .v21-service-back-intro) {
  max-width: 44ch;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
}

.v22-home .v11-service-glyph {
  width: clamp(76px, 7vw, 106px);
  opacity: .9;
}

.v22-home .v21-service-demo {
  margin-top: 24px;
  gap: 12px;
}

.v22-home .v21-service-demo b {
  color: var(--v22-blue);
  font-size: 9px !important;
  letter-spacing: .13em;
}

.v22-home .v20-service-signal {
  margin-top: 22px;
  border-color: color-mix(in srgb, currentColor 34%, transparent);
}

.v22-home .v20-service-signal > span {
  min-height: 78px;
  padding: 14px 12px;
  align-content: center;
  gap: 8px;
  background: color-mix(in srgb, var(--v22-cream) 38%, transparent);
  font-size: clamp(8px, .68vw, 10px);
  line-height: 1.45;
}

.v22-home .v20-service-signal i { font-size: 9px; }

.v22-home .v10-service-face > em {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  margin-top: 20px;
  padding: 9px 14px;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
}

.v22-home .v21-service-back-intro {
  margin: 12px 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

.v22-home .v10-service-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.v22-home .v10-service-points span {
  min-height: 52px;
  padding: 12px 8px;
  align-content: center;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 11px;
  line-height: 1.35;
}

/* Responsible Practice is a visible proof of method. */
.v22-home .v20-responsible-practice h2 {
  max-width: 11ch;
  font-size: clamp(46px, 5.25vw, 78px);
}

.v22-home .v20-responsible-practice header p {
  max-width: 47ch;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
}

.v22-home .v20-responsible-practice article > i { font-size: 10px; }
.v22-home .v20-responsible-practice article h3 { font-size: clamp(25px, 2vw, 34px); }
.v22-home .v20-responsible-practice article p { font-size: clamp(12px, .88vw, 14px); line-height: 1.65; }

/* Founder becomes a legible authority statement, not fine print beside the
   portrait. */
.v22-home .v7-about-copy > span { font-size: 10px; }
.v22-home .v7-about-role { font-size: clamp(24px, 2.25vw, 36px) !important; line-height: 1.24; }
.v22-home .v7-about-copy > p:not(.v7-about-role, .v12-responsible-note) {
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.78;
}

.v22-home .v12-contact-directory a { min-height: 70px; font-size: 11px; }
.v22-home .v12-contact-directory small { font-size: 11px; }
.v22-home .v12-email-cta { min-height: 92px; }

/* Booking Setup: a high-confidence project brief with an obvious progression
   and a strong final action. */
.v22-home .v21-booking {
  grid-template-columns: minmax(320px, .75fr) minmax(600px, 1.25fr);
  gap: clamp(52px, 7vw, 118px);
}

.v22-home .v21-booking-intro > span { font-size: 10px; }
.v22-home .v21-booking-intro h2 {
  max-width: 10ch;
  font-size: clamp(56px, 5.8vw, 84px);
}

.v22-home .v21-booking-intro > p {
  max-width: 45ch;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.7;
}

.v22-home .v21-booking-proof b { font-size: clamp(21px, 1.7vw, 28px); }
.v22-home .v21-booking-proof p { font-size: 12px; line-height: 1.6; }

.v22-home .v21-booking-form {
  position: relative;
  padding: clamp(30px, 3.7vw, 56px);
  border: 1px solid color-mix(in srgb, var(--v22-ink) 38%, transparent);
  border-radius: 64px 8px 64px 8px;
  background:
    linear-gradient(145deg, transparent 0 72%, color-mix(in srgb, var(--v22-blue) 9%, transparent) 72% 100%),
    color-mix(in srgb, var(--v22-paper) 94%, var(--v22-yellow));
  box-shadow: 0 30px 90px color-mix(in srgb, var(--v22-ink) 12%, transparent);
}

.v22-home .v21-form-progress i { width: 42px; font-size: 10px; }
.v22-home .v21-booking-form legend { margin-bottom: 28px; font-size: clamp(22px, 1.8vw, 29px); }
.v22-home .v21-booking-form legend i { font-size: 10px; }
.v22-home .v21-booking-form label:not(.v21-consent, .v21-hp) { font-size: 10px; }

.v22-home .v21-booking-form :is(input, select, textarea) {
  min-height: 54px;
  font-size: 16px;
}

.v22-home .v21-step-actions button {
  min-height: 50px;
  padding: 12px 22px;
  font-size: 10px;
}

.v22-home .v21-consent { font-size: 12px; }
.v22-home .v21-booking-submit button { min-height: 68px; padding-inline: 24px; font-size: 11px; }
.v22-home .v21-booking-submit p { font-size: 10px; }

html[data-color-mode="dark"] .v22-home .v21-booking-form {
  border-color: rgba(255, 243, 183, .34);
  background: #211c1c;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

html[data-color-mode="dark"] .v22-home .v20-service-signal > span {
  background: rgba(255, 243, 183, .06);
}

@media (max-width: 1180px) {
  .v22-home .v21-booking { grid-template-columns: 1fr; }
  .v22-home .v21-booking-intro h2 { max-width: 13ch; }
}

@media (max-width: 820px) {
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project,
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project:nth-child(n) {
    width: min(91vw, 620px);
    height: min(72svh, 650px);
  }

  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta {
    width: min(88%, 470px);
    min-height: 98px;
    padding: 18px;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
  }

  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta strong {
    font-size: clamp(24px, 7vw, 36px);
  }

  .v22-home .v10-service-card,
  .v22-home .v10-service-card:nth-child(n) {
    width: min(91vw, 540px);
    min-height: 570px;
  }

  .v22-home .v10-service-face b { font-size: clamp(37px, 11vw, 50px); }
  .v22-home .v20-responsible-practice article h3 { margin-top: 50px; }
  .v22-home .v21-booking { padding-inline: 18px; }
  .v22-home .v21-booking-intro h2 { font-size: clamp(48px, 14vw, 76px); }
  .v22-home .v21-booking-form { padding: 28px 20px; border-radius: 42px 6px; }
}

@media (max-width: 520px) {
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project,
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project:nth-child(n) {
    height: min(68svh, 570px);
  }

  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta {
    width: 90%;
    border-radius: 4px 24px;
  }

  .v22-home .v10-service-card,
  .v22-home .v10-service-card:nth-child(n) { min-height: 600px; }
  .v22-home .v10-service-points { grid-template-columns: 1fr; }
  .v22-home .v20-service-signal > span { padding-inline: 7px; }
  .v22-home .v21-booking-proof { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-meta,
  .v22-home :is(.v7-experience, .v7-identity, .v7-image) .v7-project-media img { transition: none !important; }
}