/* DetailX · home — evaluation dimensions as an expanding film strip */
.home-evaluation{padding:140px var(--gutter) 0;scroll-margin-top:10px}
.home-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
.home-section-head h2{font-size:clamp(40px,5.4vw,86px);font-weight:500;letter-spacing:-.045em;line-height:1.05;margin-top:22px}
.home-section-aside{max-width:340px;padding-bottom:10px}
.home-section-aside p{font-size:15px;line-height:1.85;color:var(--text-2);margin-bottom:18px}
.home-section-aside .text-link{font-size:14px;color:var(--text)}
.home-section-aside .text-link:hover{color:var(--lime)}

.strip-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.strip-heading h2{font-size:clamp(32px,4vw,60px);font-weight:550;letter-spacing:-.045em;line-height:1.12}
.strip-heading .text-link{color:var(--text-2)}
.strip-heading .text-link:hover{color:var(--accent)}

/* Captions sit in a reserved band, so wrapping and reveal never move the metrics below. */
.dimension-strips{display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,20px);margin-top:32px;padding-bottom:112px}
.home-evaluation+.measured{padding-top:110px}
.strip{position:relative;display:block;flex:1 1 0;min-width:0;border-radius:8px;transition:flex-grow .8s var(--ease)}
.strip.is-open{flex-grow:4.2}
.strip-frame{height:clamp(320px,32vw,480px);overflow:hidden;border-radius:8px;background:var(--surface)}
.strip-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);transition:transform .9s var(--ease)}
.strip.is-open .strip-frame img{transform:scale(1)}
.strip-caption{position:absolute;top:100%;inset-inline:0;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;align-items:baseline;gap:9px 8px;padding:16px 1px 5px}
.strip-index{color:var(--text-2);font-size:11px;font-weight:500;transition:color .4s}
.strip-caption h3{min-width:0;font-size:clamp(15px,1.2vw,19px);font-weight:550;line-height:1.35;letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:pretty;opacity:.8;transition:opacity .4s}
.strip.is-open h3{opacity:1}
.strip-description{grid-column:2/-1;margin:0;max-width:34em;color:var(--text-2);font-size:12px;font-weight:400;line-height:1.8;overflow-wrap:anywhere;text-wrap:pretty;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .35s var(--ease),visibility 0s .18s}
.strip.is-open .strip-description{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .4s .16s ease,transform .55s .16s var(--ease),visibility 0s}
.strip-go{display:inline-flex;margin-inline-start:auto;align-self:flex-start;color:var(--accent);opacity:0;visibility:hidden;transform:translate(-4px,4px);transition:opacity .18s ease,transform .35s var(--ease),visibility 0s .18s}
.strip.is-open .strip-go{opacity:1;visibility:visible;transform:translate(0,0);transition:opacity .35s .12s ease,transform .5s .12s var(--ease),visibility 0s}
.strip.is-open .strip-index{color:var(--accent)}
.strip-go svg{width:18px;height:18px}

@media(max-width:900px){
  .home-section-head{grid-template-columns:1fr;gap:24px}
  .dimension-strips{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:14px;margin:24px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 208px;scrollbar-width:none}
  .home-evaluation+.measured{padding-top:0}
  .dimension-strips::-webkit-scrollbar{display:none}
  .strip,.strip.is-open{flex:0 0 min(76vw,350px);scroll-snap-align:start}
  .strip-frame{height:auto;aspect-ratio:1}
  .strip-caption h3{font-size:18px}
  .strip-description{font-size:13px;line-height:1.75}
}
@media(max-width:560px){.home-evaluation{--gutter:18px;padding:90px var(--gutter) 0}}
@media(prefers-reduced-motion:reduce){
  .strip,.strip-frame img,.strip-index,.strip-caption h3,.strip-description,.strip-go,.strip.is-open .strip-description,.strip.is-open .strip-go{transition:none}
  .strip-frame img{transform:none}
}
