/* Mobile art direction: a separate composition, not a scaled desktop collage.
   Every rule stays below the established phone breakpoint. */
/* A layout-transparent wrapper preserves desktop positioning exactly. */
#home .hero-photo-frame{display:contents}
@media(max-width:767px){
  /* A full-width lead photograph, then a portrait and two stacked details.
     The grid's own content determines its height; there is no vacant center. */
  .collage-section{padding-inline:var(--gutter,16px)}
  .collage-section>.collage.photo-collage{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);gap:2px;
    width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;
    margin:0;overflow:hidden;transform:none;
  }
  .collage-section>.collage.photo-collage>figure{
    position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;
    aspect-ratio:auto;transform:none;will-change:auto;z-index:auto;
    overflow:hidden;pointer-events:none;
  }
  .collage-section>.collage.photo-collage>.photo-collage-main{
    grid-area:1/1/2/3;aspect-ratio:3/2;height:auto;
  }
  .collage-section>.collage.photo-collage>.photo-collage-left{
    grid-area:2/1/4/2;aspect-ratio:2/3;height:auto;
  }
  .collage-section>.collage.photo-collage>.photo-collage-right{grid-area:2/2/3/3}
  .collage-section>.collage.photo-collage>.photo-collage-rear{grid-area:3/2/4/3}

  /* Paired editorial photos occupy exactly the same frame. Opacity alone is
     animated, with no blur, scale, sticky section or scroll interception. */
  .photo-collage.photo-collage-pair,
  .split-photos.photo-collage.photo-collage-pair,
  .agency-page .photo-collage.photo-collage-pair{
    display:block;width:100%;max-width:none;height:auto;min-height:0;
    aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  }
  .photo-collage.photo-collage-pair>figure,
  .agency-page .photo-collage.photo-collage-pair>figure{
    position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    transform:none!important;will-change:auto;overflow:hidden;pointer-events:none;
    z-index:0;opacity:1;
  }
  .photo-collage.photo-collage-pair>figure.photo-collage-rear{
    z-index:1;opacity:0;transition:opacity 520ms cubic-bezier(.22,.61,.36,1);
  }
  .photo-collage.photo-collage-pair[data-mobile-pair="rear"]>figure.photo-collage-rear{opacity:1}
  .photo-collage>figure .photo-collage-surface,
  .photo-collage>figure.is-collage-active .photo-collage-surface{
    transform:none;box-shadow:none;transition:none;clip-path:none;
  }
  .photo-collage.photo-collage-pair>figure img,
  .collage-section>.collage.photo-collage>figure img,
  .agency-page .photo-collage.photo-collage-pair>figure img{
    filter:none!important;transform:none;transition:none;
  }

  /* The founder's two original portraits use the same phone reading rhythm. */
  .founder-section__collage{width:100%;max-width:none;aspect-ratio:4/5;overflow:hidden}
  .founder-section__collage>.founder-section__photo{
    inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;will-change:auto;
  }
  .founder-section__collage>.founder-section__photo--ceremony{z-index:1}
  .founder-section__collage>.founder-section__photo--ferrari{
    z-index:2;opacity:0;transition:opacity 520ms cubic-bezier(.22,.61,.36,1);
  }
  .founder-section__collage[data-mobile-pair="rear"]>.founder-section__photo--ferrari{opacity:1}

  /* Homepage slides use a natural-height content card, removing the reserved
     black slab while keeping the photograph's deliberate phone crop. */
  .sobati-typography #home.section-one>main{margin-top:12px}
  .sobati-typography #home.section-one .hero:not(.service-hero){
    height:auto;min-height:0;aspect-ratio:auto;overflow:hidden;
  }
  #home .photo-stack{position:relative;inset:auto;display:grid;height:auto}
  #home .slide-visual{
    position:relative;inset:auto;grid-area:1/1;display:grid;
    grid-template-rows:auto auto;height:auto;min-width:0;align-self:start;
    background:transparent;
  }
  #home .slide-visual::before{display:none}
  #home .slide-visual .hero-photo-frame{
    grid-area:1/1;display:block;position:relative;min-width:0;
    aspect-ratio:10/9;overflow:hidden;
  }
  .sobati-typography #home .slide-visual .hero-image{
    position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;
    transform:scale(var(--hero-phone-scale,1));
    transform-origin:var(--hero-phone-origin,50% 50%);
  }
  /* Keep the complete subjects central, rather than centering the landscape
     source itself. The van keeps its existing crop and scale. */
  #home .slide-visual[data-slide-variant="sobati"] .hero-photo-frame{
    --hero-phone-scale:1.1;--hero-phone-origin:45% 8%;
  }
  #home .slide-visual[data-slide-variant="id"] .hero-photo-frame{
    --hero-phone-scale:1.2;--hero-phone-origin:18% 100%;
  }
  #home .slide-visual[data-slide-variant="gift-card"] .hero-photo-frame{
    --hero-phone-scale:1.25;--hero-phone-origin:98% 36%;
  }
  .sobati-typography #home .slide-visual[data-slide-variant="gift-card"] .hero-image{
    object-position:98% 36%!important;
  }
  .sobati-typography #home .slide-visual .hero-shade{
    inset:0;grid-area:1/1;height:auto;
    background:linear-gradient(to bottom,#0003,transparent 24%,transparent 76%,#0004);
  }
  .sobati-typography #home .slide-visual .hero-copy{
    position:relative;inset:auto;grid-area:2/1;display:grid;
    grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:14px 12px;padding:20px 18px 18px;
    border-top:1px solid #ffffff12;
    /* Let the already-blurred, source-synchronized section image continue
       behind the card. A tint preserves contrast without another blur layer. */
    background:linear-gradient(180deg,rgba(8,8,10,.14),rgba(8,8,10,.42));
  }
  #home .slide-visual .hero-text{grid-column:1/-1;width:100%;max-width:none;margin:0;order:0}
  #home .slide-visual .hero-actions{grid-column:1;justify-self:start;align-self:center;order:1}
  #home .hero-copy .hero-brand-title{margin:0;line-height:1}
  #home .hero-copy .hero-wordmark{width:min(56vw,260px);max-width:100%}
  #home .hero-copy .hero-wordmark[data-wordmark-variant="van"]{width:min(76vw,355px)}
  #home .hero-copy .hero-wordmark[data-wordmark-variant="id"]{width:min(67vw,310px)}
  #home .hero-copy .hero-wordmark[data-wordmark-variant="gift-card"]{width:min(70vw,324px)}
  .sobati-typography #home .slide-visual .hero-description{
    font-size:14px!important;line-height:1.8;margin:10px 0 0;max-width:34em;
    color:#e2e0e4;font-weight:400;text-wrap:pretty;
  }
  #home .slide-visual .hero-cta{min-height:46px;min-width:142px;padding:10px 18px;font-size:13px}
  #home .slide-navigation{top:10px;right:10px;gap:4px}
  #home .slide-arrow{width:44px;height:44px}

  /* Gift collection: heading and supporting sentence have distinct scale and
     consistent line lengths; the art owns the visual emphasis. */
  .sobati-typography .gift-card-section{min-height:0;grid-template-rows:auto 215px auto auto;padding:36px 18px;gap:12px}
  .sobati-typography .gift-card-section__heading{max-width:34em}
  .sobati-typography .gift-card-section__eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:9px}
  .sobati-typography .gift-card-section__title{font-size:23px;line-height:1.35;letter-spacing:.06em;margin-bottom:8px}
  .sobati-typography .gift-card-section__copy{font-size:14px;line-height:1.9;max-width:29em;margin:12px auto 0}
  .gift-card-section__price{font-size:36px}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .photo-collage.photo-collage-pair>figure.photo-collage-rear,
  .founder-section__collage>.founder-section__photo--ferrari{transition:none}
}