/* Sectors: a horizontal row of tall photo cards, drag or use the arrows */
.sectors__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 5vw, 76px); }
.sectors__nav { display: flex; gap: 8px; }
.arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background-color 0.2s, opacity 0.2s; }
.arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.arrow:disabled { opacity: 0.3; cursor: default; }
.sectors__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); cursor: grab; outline: none; }
.sectors__track::-webkit-scrollbar { display: none; }
.sectors__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.scard { position: relative; flex: 0 0 clamp(272px, 28vw, 366px); aspect-ratio: 0.74; border-radius: 4px; overflow: hidden; scroll-snap-align: start; background: #1a1614; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter 0.6s; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.scard__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 7, 0.85) 0%, rgba(10, 8, 7, 0.25) 38%, rgba(10, 8, 7, 0) 60%); transition: background 0.5s; }
.scard__num { position: absolute; top: 16px; left: 19px; font-family: var(--serif); font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.scard__copy { position: absolute; left: 19px; right: 19px; bottom: 22px; }
.scard h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.scard__sub { font-size: 15px; color: rgba(255, 255, 255, 0.62); margin-top: 2px; }
.scard__more { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.4s, margin 0.6s var(--ease); }
.scard__cta { margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.4s, margin 0.6s var(--ease); }
.scard:hover img, .scard:focus-within img { transform: scale(1.07); }
.scard:hover .scard__shade, .scard:focus-within .scard__shade { background: linear-gradient(to top, rgba(10, 8, 7, 0.92) 0%, rgba(10, 8, 7, 0.5) 50%, rgba(10, 8, 7, 0.1) 80%); }
.scard:hover .scard__more, .scard:focus-within .scard__more { max-height: 120px; opacity: 1; margin-top: 12px; }
.scard:hover .scard__cta, .scard:focus-within .scard__cta { max-height: 30px; opacity: 1; margin-top: 12px; }
@media (hover: none) { .scard__more { max-height: 120px; opacity: 1; margin-top: 10px; } .scard__cta { max-height: 30px; opacity: 1; margin-top: 10px; } .scard__shade { background: linear-gradient(to top, rgba(10, 8, 7, 0.92) 0%, rgba(10, 8, 7, 0.45) 50%, rgba(10, 8, 7, 0) 75%); } }
@media (max-width: 600px) { .sectors__nav { display: none; } .scard { flex-basis: 78vw; } }