/* Closing scene: neutral field, with the prism reserved for meaningful signals. */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b0d10 !important;
}

.contact::before { display: none !important; }
.contact-intro,
.contact-intro::before { display: none !important; }
.contact-choice::before { display: none !important; }

.contact::before {
  content: '' !important;
  position: absolute;
  z-index: -1;
  right: clamp(34px, 7vw, 128px);
  top: 52%;
  width: min(30vw, 470px);
  height: 2px;
  display: block !important;
  background: var(--prism-gradient);
  opacity: 0;
  transform: translate3d(16%, 0, 0) rotate(-28deg) scaleX(.5);
  transform-origin: right center;
  box-shadow: 0 0 32px rgba(201, 50, 60, .38);
  will-change: transform, opacity;
}

.contact:has(.contact-title.is-visible)::before { animation: contact-beam-in .88s cubic-bezier(.16,1,.3,1) .16s both; }

@keyframes contact-beam-in {
  from { opacity: 0; transform: translate3d(16%, 0, 0) rotate(-28deg) scaleX(.5); }
  to { opacity: .9; transform: translate3d(0, 0, 0) rotate(-28deg) scaleX(1); }
}

/* Closing composition: one decisive conversation, not a dashboard of cards. */
@media (min-width: 901px) {
  .contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0;
    align-content: center;
    padding-block: 84px;
  }
  .contact-kicker {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin: 0 0 28px;
  }
  .contact .contact-title {
    grid-column: 1;
    grid-row: 2;
    width: min(1200px, 100%);
    max-width: none !important;
    justify-self: center;
    padding: 0 !important;
    font-size: clamp(64px, 6.7vw, 116px) !important;
    line-height: .86 !important;
    text-align: center;
  }
  .contact-title > span,
  .contact-title > span:nth-child(2),
  .contact-title > span:nth-child(3) {
    margin-left: 0 !important;
    white-space: nowrap;
  }
  .contact-title > span:nth-child(3) { margin-top: .06em !important; }
  .contact-intro {
    grid-column: 1;
    grid-row: 3;
    width: min(530px, 100%);
    justify-self: center;
    margin: 28px auto 0 !important;
    text-align: center;
  }
  .contact-choices {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(28px, 4vw, 74px);
    width: 100%;
    margin-top: 34px;
  }
}

.contact-kicker {
  background: var(--prism-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.contact-title em {
  background: var(--prism-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

.contact-intro { color: rgba(255,255,255,.74) !important; }

.contact-choice,
.contact-choice.meeting,
.contact-choice.meeting:hover,
.contact-choice.meeting:focus-visible {
  position: relative;
  overflow: visible;
  min-height: 0 !important;
  padding: 0 0 13px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform-origin: 50% 100%;
}

.contact-choice::before {
  content: '' !important;
  position: absolute;
  left: 0;
  right: auto;
  bottom: -1px;
  top: auto;
  width: 100%;
  height: 2px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--prism-gradient);
  opacity: 0;
  transform: scaleX(.12);
  transform-origin: left;
  transition: opacity .35s ease, transform .5s var(--ease);
}

.contact-choice.meeting::before { opacity: 1; transform: scaleX(1); }
.contact-choice:hover::before,
.contact-choice:focus-visible::before { opacity: 1; transform: scaleX(1); }
.contact-choice:hover {
  background: transparent !important;
  transform: translate3d(0,-5px,0);
  box-shadow: none !important;
}

.contact-choice small,
.contact-choice span,
.contact-choice.meeting small,
.contact-choice.meeting span { color: rgba(255,255,255,.63) !important; }

.contact-choice strong,
.contact-choice.meeting strong {
  background: none !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 8px 0 0 !important;
  font-size: clamp(25px, 2.65vw, 47px) !important;
  line-height: .9 !important;
  letter-spacing: -.075em !important;
}

.contact-choice.meeting strong {
  background: var(--prism-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.contact-choice.meeting strong b { color: #fff; -webkit-text-fill-color: #fff; }
.contact-choice .feature-icon { display: none !important; }
.contact-choice span { display: none; }
.contact-choice small { font-size: 9px !important; letter-spacing: .12em; }

.contact-choice.whatsapp { order: 2; }
.contact-choice.meeting { order: 1; }

/* The two choices materialise as a response to the title, rather than sitting there. */
.contact:has(.contact-title.is-visible) .contact-choice {
  animation: contact-choice-in .72s cubic-bezier(.16,1,.3,1) both;
}
.contact:has(.contact-title.is-visible) .contact-choice.meeting { animation-delay: .28s; }
.contact:has(.contact-title.is-visible) .contact-choice.whatsapp { animation-delay: .39s; }
@keyframes contact-choice-in {
  from { opacity: 0; filter: blur(8px); transform: translate3d(0,30px,0) scale(.985); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}

/* A calm, precise cursor for the two contact actions — no oversized telephone badge. */
@media (pointer: fine) and (min-width: 901px) {
  html.cursor-active .contact-choice { cursor: none; }
  .cursor.is-phone {
    width: 48px;
    height: 48px;
    background: #0b0d10;
    color: #fff;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    mix-blend-mode: normal;
    transform: translate3d(-50%,-50%,0) scale(1);
  }
  .cursor.is-phone.is-visible { transform: translate3d(-50%,-50%,0) scale(1); }
  .cursor.is-phone::after {
    content: '↗';
    width: 100%;
    height: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    font: 400 22px/1 var(--sans);
    background: none;
    transform: translate(-1px,1px);
  }
}

@media (max-width: 900px) {
  .contact::before { right: -18vw; top: 15%; width: 54vw; }
  .contact-choices { gap: 30px; }
  .contact-choice strong,
  .contact-choice.meeting strong { font-size: clamp(29px, 9vw, 48px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .contact::before { opacity: .78; transform: rotate(-28deg); }
  .contact:has(.contact-title.is-visible)::before,
  .contact:has(.contact-title.is-visible) .contact-choice { animation: none; }
}

/* QA structural correction: restore a clear two-column reading order on desktop.
   Copy explains the choice; actions remain visually primary without becoming cards. */
@media (min-width: 901px) {
  .contact {
    grid-template-columns: minmax(380px, .9fr) minmax(450px, 1.1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(70px, 9vw, 170px);
    row-gap: 22px;
    align-content: center;
  }
  .contact::before {
    right: auto;
    left: calc(50% - 1px);
    top: 17%;
    width: 2px;
    height: 66%;
    background: var(--prism-gradient);
    opacity: .85;
    transform: none;
    box-shadow: 0 0 24px rgba(201,50,60,.22);
  }
  .contact:has(.contact-title.is-visible)::before { animation: contact-spine-in .7s cubic-bezier(.16,1,.3,1) .16s both; }
  @keyframes contact-spine-in {
    from { opacity: 0; transform: scaleY(.18); }
    to { opacity: .85; transform: scaleY(1); }
  }
  .contact-kicker {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin: 0 0 18px;
  }
  .contact .contact-title {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-self: start;
    align-self: start;
    font-size: clamp(63px, 5.75vw, 102px) !important;
    line-height: .89 !important;
    text-align: left;
  }
  .contact-title > span,
  .contact-title > span:nth-child(2),
  .contact-title > span:nth-child(3) {
    white-space: normal;
    margin-left: 0 !important;
  }
  .contact-title > span:nth-child(3) { margin-top: .08em !important; }
  .contact-intro {
    grid-column: 2;
    grid-row: 1;
    width: min(490px, 100%);
    justify-self: start;
    align-self: end;
    margin: 0 0 14px !important;
    text-align: left;
  }
  .contact-choices {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    align-content: start;
    gap: 27px;
    width: min(620px, 100%);
    margin: 0;
  }
  .contact-choice {
    width: 100%;
    padding: 0 0 20px !important;
  }
  .contact-choice strong,
  .contact-choice.meeting strong {
    margin-top: 11px !important;
    font-size: clamp(36px, 3.35vw, 60px) !important;
  }
}

/* Two substantial conversion objects: dark glass surfaces, prism only in the edge/refraction. */
@media (min-width: 901px) {
  .contact-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(700px, 100%);
  }
  .contact-choice,
  .contact-choice.meeting,
  .contact-choice.meeting:hover,
  .contact-choice.meeting:focus-visible {
    min-height: 292px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px 28px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 30px 14px 30px 14px;
    background: #181b22 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 54px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.045) !important;
  }
  .contact-choice::before {
    left: auto;
    right: -17%;
    bottom: -26%;
    width: 78%;
    height: 58%;
    border-radius: 48% 52% 48% 52%;
    background: var(--prism-gradient);
    filter: blur(30px);
    opacity: .33;
    transform: translate3d(0,0,0) rotate(-20deg) scale(.82);
    transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .45s ease;
  }
  .contact-choice::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(130deg, rgba(91,124,233,.9), rgba(202,57,78,.68) 47%, rgba(238,120,35,.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .9;
    pointer-events: none;
  }
  .contact-choice > * { position: relative; z-index: 1; }
  .contact-choice:hover {
    background: #1d2028 !important;
    transform: translate3d(0,-9px,0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 70px rgba(0,0,0,.38) !important;
  }
  .contact-choice:hover::before { opacity: .65; transform: translate3d(-16%, -14%, 0) rotate(-20deg) scale(1.3); }
  .contact-choice .feature-icon {
    display: grid !important;
    width: 48px;
    height: 48px;
    margin: 0 0 26px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 16px 7px 16px 7px;
  }
  .contact-choice small { display: block; font-size: 8px !important; }
  .contact-choice span {
    display: block;
    margin-top: auto;
    max-width: 23ch;
    font-size: 13px;
    line-height: 1.45;
  }
  .contact-choice strong,
  .contact-choice.meeting strong {
    margin: 0 !important;
    font-size: clamp(28px, 2.45vw, 43px) !important;
    line-height: .92 !important;
  }
  .contact-choice.meeting strong { margin-top: 2px !important; }
  .contact-choice strong b { display: none; }
  .contact-choice.meeting,
  .contact-choice.meeting:hover,
  .contact-choice.meeting:focus-visible {
    background:
      radial-gradient(120% 92% at 12% 0%, rgba(255,255,255,.19) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(132deg, rgba(86,113,198,.3) 0%, rgba(20,23,31,.84) 40%, rgba(194,56,76,.26) 70%, rgba(232,117,43,.18) 100%) !important;
    border-color: transparent !important;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(255,255,255,.08),
      0 24px 62px rgba(23,33,82,.2),
      0 0 48px rgba(194,56,76,.11) !important;
  }
  .contact-choice.meeting::before {
    opacity: .52;
    filter: blur(24px) saturate(145%);
  }
  .contact-choice.meeting:hover::before {
    opacity: .78;
    transform: translate3d(-22%, -18%, 0) rotate(-20deg) scale(1.42);
  }
  .contact-choice.meeting::after { opacity: 1; }
  .contact-choice.whatsapp,
  .contact-choice.whatsapp:hover,
  .contact-choice.whatsapp:focus-visible {
    background: #111319 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.29) !important;
  }
  .contact-choice.whatsapp::after { opacity: .42; }
  .contact-choice.whatsapp::before { opacity: .14; filter: blur(36px) saturate(70%); }
  .contact:has(.contact-title.is-visible) .contact-choice::before {
    animation: contact-card-refract .95s cubic-bezier(.16,1,.3,1) both;
  }
  .contact:has(.contact-title.is-visible) .contact-choice.whatsapp::before { animation-delay: .16s; }
  @keyframes contact-card-refract {
    from { opacity: 0; transform: translate3d(38%,30%,0) rotate(-20deg) scale(.56); }
    to { opacity: .33; transform: translate3d(0,0,0) rotate(-20deg) scale(.82); }
  }
  .contact:has(.contact-title.is-visible) .contact-choice {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (max-width: 900px) {
  .contact-choice,
  .contact-choice.meeting {
    min-height: 184px !important;
    padding: 24px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 24px 10px 24px 10px;
    background: rgba(255,255,255,.045) !important;
  }
  .contact-choice .feature-icon,
  .contact-choice span { display: block !important; }
  .contact-choice .feature-icon { width: 34px; height: 34px; margin-bottom: 18px; }
  .contact-choice span { margin-top: 13px; font-size: 13px; }
  .contact-choice strong,
  .contact-choice.meeting strong { margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .contact:has(.contact-title.is-visible) .contact-choice::before { animation: none; opacity: .28; }
}

/* No central divider in the contact scene. */
.contact::before,
.contact:has(.contact-title.is-visible)::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Temporarily disabled at the client's request. Remove this class from .works to restore it. */
.works.is-temporarily-disabled { display: none !important; }