/* Shared output gallery. Home and Why Glossi retain the same staggered
   desktop composition, natural media ratios, flat bottom and wide wings. */
:is(.studio-page,.approach-page) .home-model-outcomes,
:is(.studio-page,.approach-page) .home-capture-gallery,
:is(.studio-page,.approach-page) .home-gallery-flank {display:none}

/* Shared link and media anatomy. Home remains hidden below901px. */
:is(.studio-page,.approach-page) .home-capture-column {display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
:is(.studio-page,.approach-page) .home-capture-item {min-width:0;margin:0;flex-shrink:0}
:is(.studio-page,.approach-page) .home-capture-item a {position:relative;display:block;color:#fff;text-decoration:none;border-radius:var(--radius-card)}
:is(.studio-page,.approach-page) .home-capture-media {position:relative;overflow:hidden;border-radius:var(--radius-card);background:#151515;aspect-ratio:1}
:is(.studio-page,.approach-page) .home-capture-item img {display:block;width:100%;height:100%;object-fit:cover}
:is(.studio-page,.approach-page) .home-capture-item--photography .home-capture-media {aspect-ratio:4/3}
:is(.studio-page,.approach-page) .home-capture-item--exploded .home-capture-media {aspect-ratio:8/5}
:is(.studio-page,.approach-page) .home-capture-item--exploded img {object-position:center top}
:is(.studio-page,.approach-page) .home-capture-item--animation .home-capture-media {aspect-ratio:16/9}
:is(.studio-page,.approach-page) .home-capture-item--stretch {flex-grow:1}
:is(.studio-page,.approach-page) .home-capture-item--stretch a,
:is(.studio-page,.approach-page) .home-capture-item--stretch .home-capture-media {width:100%;height:100%}
:is(.studio-page,.approach-page) .home-capture-item--stretch .home-capture-media {aspect-ratio:auto}
:is(.studio-page,.approach-page) .home-capture-media::after {content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.64));pointer-events:none}
:is(.studio-page,.approach-page) :is(.home-capture-item--photography,.home-capture-item--animation) .home-capture-media::after {background:linear-gradient(transparent,rgba(0,0,0,.60) 55%,rgba(0,0,0,.72))}
:is(.studio-page,.approach-page) .home-capture-label {position:absolute;z-index:1;left:24px;right:24px;bottom:24px;margin:0;font-size:14px;line-height:20px;font-weight:400;color:rgba(255,255,255,.84);text-wrap:balance}
:is(.studio-page,.approach-page) .home-capture-item a:focus-visible {outline:2px solid var(--text-primary);outline-offset:5px}
:is(.studio-page,.approach-page) .home-capture-item--colors .home-capture-media {background:#e2e7e2}
:is(.studio-page,.approach-page) .home-capture-item--colors img {object-fit:contain}
:is(.studio-page,.approach-page) .home-capture-item--colors .home-capture-media--finishes {display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;background:#3b3c38}
:is(.studio-page,.approach-page) .home-capture-item--colors .home-capture-media--finishes img {min-height:0;object-fit:cover;object-position:center top}

@media(min-width:901px) {
  :is(.studio-page,.approach-page) .home-model-outcomes {display:block;padding:48px var(--launch-gutter) 0}
  :is(.studio-page,.approach-page) .home-model-outcomes .home-section-title {max-width:26ch;margin:0 auto 32px;font-size:36px;line-height:42px;letter-spacing:-.02em;text-align:center;text-wrap:balance}
  :is(.studio-page,.approach-page) .home-capture-gallery {display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:var(--space-4);align-items:stretch}
  :is(.studio-page,.approach-page) .home-capture-column--left {padding-top:40px}
  :is(.studio-page,.approach-page) .home-capture-column--right {padding-top:72px}
}

/* Supplemental wings leave the central three-column composition unchanged. */
@media(min-width:1500px) {
  :is(.studio-page,.approach-page) .home-gallery-spread {position:relative;left:50%;display:grid;grid-template-columns:minmax(0,1fr) var(--layout-page-width) minmax(0,1fr);gap:var(--space-4);align-items:stretch;width:min(1680px,calc(100vw - 2 * var(--home-frame-gutter)));transform:translateX(-50%)}
  :is(.studio-page,.approach-page) .home-gallery-flank {display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
  :is(.studio-page,.approach-page) .home-gallery-flank--left {padding-top:168px}
  :is(.studio-page,.approach-page) .home-gallery-flank--right {padding-top:232px}
  :is(.studio-page,.approach-page) .home-gallery-extra {margin:0;overflow:hidden;border-radius:var(--radius-card);background:#f1f1ef;flex-shrink:0}
  :is(.studio-page,.approach-page) .home-gallery-extra:last-child {flex-grow:1}
  :is(.studio-page,.approach-page) .home-gallery-extra img {display:block;width:100%;height:100%;object-fit:cover}
  :is(.studio-page,.approach-page) .home-gallery-extra--bags {aspect-ratio:664/442}
  :is(.studio-page,.approach-page) .home-gallery-extra--watch {aspect-ratio:1}
  :is(.studio-page,.approach-page) .home-gallery-extra--watch img {object-position:42% 50%}
  :is(.studio-page,.approach-page) .home-gallery-extra--care {aspect-ratio:743/985}
  :is(.studio-page,.approach-page) .home-gallery-extra--audio {aspect-ratio:16/9}
}

/* Why Glossi supplies the same central rail and viewport inset as Home. */
.approach-page .home-model-outcomes {--home-frame-gutter:var(--closing-panel-inset)}
.approach-page .home-model-outcomes > .stack-inner {max-width:var(--layout-page-width);margin-inline:auto}

@media(min-width:901px) {
  .approach-page {--approach-gallery-gap:0px;--gallery-image-seam:color-mix(in srgb,var(--color-text-supporting) 18%,transparent)}
  .approach-page :is(.home-capture-gallery,.home-capture-column,.home-gallery-spread,.home-gallery-flank) {gap:var(--approach-gallery-gap)}
  .approach-page :is(.home-capture-column,.home-capture-item:first-child) {position:relative}
  .approach-page .home-capture-column + .home-capture-column::before {
    content:"";position:absolute;inset-block:0;left:0;z-index:2;
    width:1px;background:var(--gallery-image-seam);pointer-events:none;
  }
  .approach-page .home-capture-column:nth-child(2)::before {top:40px}
  .approach-page .home-capture-column:nth-child(3)::before {top:72px}
  .approach-page .home-capture-item:first-child::after {
    content:"";position:absolute;inset-inline:0;top:calc(100% - 1px);z-index:2;
    border-top:1px solid var(--gallery-image-seam);pointer-events:none;
  }
  .approach-page .home-model-outcomes + .home-closing-cta {padding-top:0;border-top:0}
  .approach-page .home-model-outcomes + .home-closing-cta .closer-inner {
    border:0;
  }

}

/* Why Glossi keeps all six links available below the desktop composition.
   The mobile modifier changes no desktop dimensions or media framing. */
@media(max-width:900px) {
  :is(.studio-page,.approach-page) .home-model-outcomes--mobile-scroll {display:block;padding:var(--space-8) var(--layout-page-gutter)}
  .home-model-outcomes--mobile-scroll .home-capture-gallery {
    display:grid;box-sizing:content-box;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,320px);gap:var(--space-4);
    height:400px;margin:-8px -8px 0;padding:8px 8px 16px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:8px;
    scrollbar-width:thin;scrollbar-color:var(--color-border-default) transparent;
  }
  .home-model-outcomes--mobile-scroll .home-capture-column {display:grid;grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;scroll-snap-align:start}
  .home-model-outcomes--mobile-scroll .home-capture-item {min-height:0}
  .home-model-outcomes--mobile-scroll .home-capture-item a,
  .home-model-outcomes--mobile-scroll .home-capture-item .home-capture-media {width:100%;height:100%;aspect-ratio:auto}
  .home-model-outcomes--mobile-scroll .home-capture-label {left:16px;right:16px;bottom:16px;font-size:14px;line-height:20px}
  .home-model-outcomes--mobile-scroll .home-capture-item--campaign img {object-position:50% 20%}
  .home-model-outcomes--mobile-scroll .home-capture-gallery::-webkit-scrollbar {height:3px}
  .home-model-outcomes--mobile-scroll .home-capture-gallery::-webkit-scrollbar-thumb {background:var(--color-border-default);border-radius:var(--radius-pill)}
  .approach-page .home-model-outcomes--mobile-scroll :is(.home-capture-gallery,.home-capture-column) {gap:var(--space-3)}
}


/* Square media and closing edges let the hairline seams meet without notches. */
.approach-page :is(.home-capture-item a,.home-capture-media,.home-gallery-extra) {border-radius:0}
.approach-page .home-model-outcomes + .home-closing-cta .closer-inner {border-radius:0}
/* Keep keyboard focus inside tightly joined images, clear on light and dark pixels. */
.approach-page .home-capture-item a:focus-visible {outline:none}
.approach-page .home-capture-item a:focus-visible::after {
  content:"";position:absolute;z-index:2;inset:3px;
  border:2px solid #fff;box-shadow:0 0 0 1px #18181b,inset 0 0 0 1px #18181b;
  pointer-events:none;
}

/* Desktop imagery leads; interaction reveals its destination. Touch keeps labels. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  .approach-page .home-capture-label,
  .approach-page .home-capture-media::after {
    opacity:0;
    transition:opacity 160ms ease;
  }
  .approach-page .home-capture-item a:is(:hover,:focus-visible) .home-capture-label,
  .approach-page .home-capture-item a:is(:hover,:focus-visible) .home-capture-media::after {opacity:1}
}
@media (prefers-reduced-motion:reduce) {
  .approach-page .home-capture-label,
  .approach-page .home-capture-media::after {transition:none}
}


/* Sparse registration details tie the image wall into the page's column rails. */
.home-gallery-frame {display:none}
@media (min-width:901px) {
  .approach-page .home-model-outcomes {position:relative}
  .approach-page .home-gallery-frame {
    display:block;position:absolute;z-index:2;
    inset:0 max(var(--layout-page-gutter),calc((100% - var(--layout-page-width)) / 2));
    border-top:1px solid var(--color-structure);
    pointer-events:none;
  }
  .home-gallery-frame > i {
    position:absolute;width:7px;height:7px;box-sizing:border-box;
    border:1px solid var(--color-border-default);background:var(--color-bg-page);
  }
  .home-gallery-frame > i:nth-child(1) {top:-4px;left:-4px}
  .home-gallery-frame > i:nth-child(2) {top:-4px;right:-4px}
  .approach-page .home-capture-gallery {position:relative}
  /* Page rails frame the spread; no dark outline over pale image edges. */
  .approach-page .home-gallery-extra:first-child {position:relative}
  .approach-page .home-gallery-extra:first-child::after {
    content:"";position:absolute;bottom:0;inset-inline:0;height:1px;
    background:var(--gallery-image-seam);pointer-events:none;
  }
  .approach-page .home-model-outcomes + .home-closing-cta .closer-main {border-top:1px solid var(--color-structure-inverse)}
}