/* Desktop review. All visual overrides leave the approved mobile range intact. */
.contact-brand-signature { display: none; }
.contact-form .company-label small { font-size: .75em; font-weight: 400; }
@media (min-width: 701px) {
  #opening { scroll-margin-top: 0; }
  .opening {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: max(700px, 100svh);
    padding: clamp(155px, 14vh, 210px) max(5vw, calc((100vw - var(--max)) / 2 + 48px)) 100px;
    color: var(--paper);
    background: #252524;
  }
  .opening .opening-art {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .opening .opening-scene-source {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .opening .opening-room { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  .opening .opening-copy { position: relative; max-width: 1350px; }
  .opening h2 {
    font-size: clamp(64px, 8.8vw, 152px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.052em;
    color: var(--paper);
    text-shadow: 0 2px 3px rgba(0,0,0,.6), 0 10px 35px rgba(0,0,0,.58);
  }
  .opening h2 .q-word { display: inline-block; color: inherit; }
  .opening h2 .question-last { display: contents; color: inherit; }
  .opening h2 .question-emphasis { color: var(--orange); }
  .opening .opening-copy > .button-primary { display: none; }
  .opening :focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }


  /* Keep the replacement mug complete at the left edge of the desk photo. */
  .founder-manifesto .founder-workspace img { object-position: left bottom; }

  .integration {
    display: grid;
    grid-template-columns: minmax(0, .37fr) minmax(0, .63fr);
    grid-template-areas: 'heading heading' 'photo diagram' 'caption diagram' 'benefit benefit' 'collaboration collaboration' 'initiative initiative' 'retail retail' 'services services';
    /* Keep the image row at its natural height; the orbit spans image and caption. */
    grid-template-rows: auto max-content minmax(min-content, 1fr) auto auto auto auto auto;
    column-gap: clamp(28px, 3vw, 48px);
    row-gap: 0;
  }
  .integration > * { min-width: 0; }
  .integration > .section-heading { grid-area: heading; align-items: center; margin-bottom: 0; padding-bottom: 54px; }
  .integration > .section-heading > h2 { text-align: center; }
  .integration > .section-heading > .eyebrow { display: none; }
  .integration-title-desktop { display: inline; }
  .integration-title-mobile { display: none; }
  .integration > .integration-illustration {
    grid-area: photo;
    display: block;
    position: relative;
    z-index: 0;
    width: 195%;
    align-self: start;
    margin: 0;
  }
  .integration-illustration picture { display: block; }
  .integration-illustration img { display: block; width: 100%; height: auto; }
  .integration > .integration-intro {
    grid-area: caption;
    align-self: start;
    margin: 12px 0 0;
    width: 125%;
    max-width: 640px;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.5;
  }
  .integration > .integration-diagram {
    grid-area: diagram;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: clamp(610px, 46vw, 690px);
    margin: 0;
    transform: none;
  }
  .integration > .integration-diagram::before,
  .integration > .integration-diagram::after {
    left: 50%;
    top: 50%;
    display: block;
    width: 63%;
    height: 74%;
    transform: translate(-50%, -50%);
    animation: none;
    pointer-events: none;
  }
  .integration > .integration-diagram::after { width: 75%; height: 85%; }
  .integration > .integration-diagram .diagram-connectors { display: none; }
  .integration > .integration-diagram .diagram-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(160px, 14vw, 205px);
    height: clamp(160px, 14vw, 205px);
    margin: 0;
    transform: translate(-50%, -50%);
    animation: none;
    translate: none;
  }
  .integration-diagram .diagram-center strong { font-size: 22px; }
  .integration-diagram .diagram-center .integration-mark { width: 100px; }
  .integration > .integration-diagram .diagram-node {
    position: absolute;
    left: var(--node-left, 50%);
    top: var(--node-top, 50%);
    right: auto;
    bottom: auto;
    width: clamp(175px, 13.2vw, 185px);
    min-height: 132px;
    padding: 16px 17px;
    transform: translate(-50%, -50%);
    translate: none;
    animation: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    background: var(--paper);
  }
  .integration > .integration-diagram .node-one { --node-left: 50%; --node-top: 12%; }
  .integration > .integration-diagram .node-two { --node-left: 82%; --node-top: 38%; }
  .integration > .integration-diagram .node-three { --node-left: 70%; --node-top: 81%; }
  .integration > .integration-diagram .node-four { --node-left: 30%; --node-top: 81%; }
  .integration > .integration-diagram .node-five { --node-left: 18%; --node-top: 38%; }
  .integration > .integration-diagram .diagram-node > span { margin-bottom: 9px; font-size: 14px; }
  .integration > .integration-diagram .diagram-node strong { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }
  .integration > .integration-diagram .diagram-node small { margin-top: 7px; font-size: 16px; line-height: 1.4; }
  .integration > .integration-diagram .diagram-node:hover,
  .integration > .integration-diagram .diagram-node:focus-visible {
    border-color: var(--orange);
    box-shadow: 0 12px 30px rgba(53,53,53,.1);
    translate: none;
  }
  .integration > .integration-diagram .diagram-node:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
  .integration > .integration-team { display: none; }
  .integration > .integration-benefit { grid-area: benefit; margin: 36px auto 24px; }
  .integration > .collaboration-models { grid-area: collaboration; }
  .integration > .initiative-invitation { grid-area: initiative; }
  .integration > .retail-block { grid-area: retail; }
  .integration > .services { grid-area: services; }

  .collaboration-models .collaboration-eyebrow { color: var(--warm-white); }
  .collaboration-models .collaboration-grid { gap: clamp(18px, 2.2vw, 32px); }
  .collaboration-models .partnership-model-card { padding: 44px 20px 24px; text-align: center; }
  .collaboration-models .partnership-model-card h3 {
    font-size: clamp(20px, 2.1vw, 28px);
    white-space: nowrap;
    text-align: center;
  }
  .collaboration-models .partnership-model-card h3 br { display: none; }
  .collaboration-models .partnership-model-card p { margin-top: 12px; font-size: 18px; text-align: center; }

  .food-service .food-services .services-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    align-content: start;
  }
  .food-service .food-service-photo {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-height: 460px;
    isolation: isolate;
    overflow: hidden;
  }
  .food-service .food-service-photo-source { position: absolute; inset: 0; display: block; }
  .food-service-photo-source img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .food-service .food-service-photo::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.84), rgba(0,0,0,.30) 48%, transparent 78%), linear-gradient(to bottom, rgba(0,0,0,.4), transparent 28%);
  }
  .food-service .food-service-eyebrow {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 30px;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0,0,0,.4);
  }
  .food-service .food-services .services-intro h2 {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0;
    padding: 0 30px 34px;
    font-size: clamp(48px, 4.5vw, 72px);
    line-height: 1.03;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }
  .food-service .services-intro > p.food-service-intro { grid-column: 1; grid-row: 2; }

  /* Readable first; only prepared reading groups take an entrance. */
  .reveal,
  .collaboration-models .partnership-model-entry.reveal { opacity: 1; transform: none; transition: none; }
  .desktop-trial .desktop-item.desktop-pending { opacity: 0; transform: translate3d(0,24px,0); }
  .desktop-trial .desktop-item.desktop-seen {
    opacity: 1;
    transform: none;
    transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1);
    transition-delay: 0s !important;
  }
  .desktop-trial .desktop-item:focus-within { opacity: 1; transform: none; transition: none; }
  .desktop-trial .partnership-model-entry .collaboration-arrow,
  .desktop-trial .partnership-model-entry .collaboration-arrow svg { animation: none; }
}

@media (min-width: 981px) {
  .contact-panel { padding: clamp(56px, 5vw, 72px); gap: clamp(40px, 5vw, 72px); }
  .contact-panel > .contact-apostrophe { display: none; }
  .contact-panel .contact-content {
    display: grid;
    grid-template-columns: max-content clamp(124px, 10.5vw, 166px) minmax(0, 1fr);
    grid-template-areas: 'copy copy copy' 'whatsapp mark .' 'direct mark .';
    column-gap: clamp(20px, 2.5vw, 36px);
  }
  .contact-panel .contact-copy { grid-area: copy; margin-bottom: clamp(72px, 6.5vw, 96px); }
  .contact-panel .whatsapp-button { grid-area: whatsapp; margin-top: 0; align-self: start; }
  .contact-panel .direct-contact { grid-area: direct; margin-top: 12px; min-width: 0; }
  .contact-panel .contact-form { padding: 28px; gap: 16px; }
  .contact-panel .contact-brand-signature {
    grid-area: mark;
    display: block;
    position: relative;
    align-self: start;
    width: 100%;
    aspect-ratio: 771 / 980;
    margin-top: -14px;
    overflow: hidden;
    pointer-events: none;
  }
  .contact-brand-signature img {
    position: absolute;
    width: 165.499351%;
    max-width: none;
    height: auto;
    left: -32.684825%;
    top: -18.979592%;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .contact-panel .contact-content { grid-template-columns: max-content 110px minmax(0, 1fr); column-gap: 20px; }
  .contact-panel .direct-contact a { font-size: 1.25rem; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .integration {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: 'heading' 'photo' 'caption' 'diagram' 'benefit' 'collaboration' 'initiative' 'retail' 'services';
  }
  .integration > .integration-illustration { width: min(100%, 640px); justify-self: center; }
  .integration > .integration-intro { width: min(100%, 640px); max-width: none; justify-self: center; }
  .integration > .integration-diagram { width: min(100%, 740px); height: 680px; margin-top: 36px; justify-self: center; }
  .integration > .integration-diagram .diagram-node { width: clamp(175px, 20vw, 185px); }
  .integration > .integration-diagram .diagram-center { width: 190px; height: 190px; }
  .collaboration-models .partnership-model-card h3 { font-size: clamp(18px, 2.2vw, 24px); }
}

@media (min-width: 701px) and (max-width: 800px) {
  .collaboration-models .partnership-model-card h3 { font-size: 28px; }
}

@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .opening.desktop-opening-entering .q-word {
    animation: desktop-word-turn 900ms cubic-bezier(.2,.7,.25,1) var(--word-delay) backwards;
    transform-origin: center bottom;
  }
  @keyframes desktop-word-turn {
    from { opacity: 0; transform: perspective(600px) rotateX(-60deg) translate3d(0,12px,0); }
    to { opacity: 1; transform: none; }
  }
  .desktop-trial .partnership-model-entry.desktop-arrow-entering .collaboration-arrow svg { animation: desktop-arrow-once 650ms ease-out; }
  @keyframes desktop-arrow-once {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(4px); }
    75% { transform: translateY(-1px); }
  }
}

@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .opening .q-word,
  .desktop-trial .reveal,
  .desktop-trial .desktop-item.desktop-pending,
  .desktop-trial .desktop-item.desktop-seen { opacity: 1; transform: none; animation: none; transition: none; }
  .integration > .integration-diagram .diagram-node,
  .integration > .integration-diagram .diagram-center { animation: none; transition: none; }
}

/* Align the contact content below the fixed navigation, as in Contactos-DB.jpg. */
@media (min-width: 981px) {
  #contacto.contact-panel { scroll-margin-top: 32px; }
}

/* A small invitation to talk: float, sway, then settle before repeating. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .contact-panel .contact-brand-signature {
    transform-origin: 50% 65%;
    animation: contact-apostrophe-dance 6.4s ease-in-out infinite;
  }
  .contact-panel:focus-within .contact-brand-signature {
    animation-play-state: paused;
  }
  @keyframes contact-apostrophe-dance {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    16% { transform: translate3d(4px, -13px, 0) rotate(6deg); }
    32% { transform: translate3d(-3px, -8px, 0) rotate(-4deg); }
    48% { transform: translate3d(3px, -16px, 0) rotate(5deg); }
    64% { transform: translate3d(-2px, -5px, 0) rotate(-3deg); }
    78% { transform: translate3d(0, 0, 0) rotate(0deg); }
    87% { transform: translate3d(0, -4px, 0) rotate(2deg); }
    94% { transform: translate3d(0, 0, 0) rotate(0deg); }
  }
}