/* Sky Peak industry pages: what differs from the homepage (site.css carries the shared look) */

/* hero: the same story, length and layout as the homepage (site.css); only the photo and the words change */
.ind-page .hero-story:not(.is-story) .hero{min-height:88vh;min-height:88svh}

/* services: four per industry, two by two */
.ind-page .services.ind-services{grid-template-columns:repeat(2,1fr)}
.ind-services .ico{color:var(--ic)}
@media (hover:hover) and (pointer:fine){ .ind-services .svc:hover .ico{color:var(--on-ic);background:var(--ic)} }

/* work: tabs for videos / photos & designs / grids */
.m-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-4)}
.m-tab{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--secondary-fg);font:600 15px var(--font-body);cursor:pointer;transition:background-color var(--dur),color var(--dur),border-color var(--dur)}
.m-tab b{min-width:26px;padding:2px 8px;border-radius:999px;background:var(--card-2);color:var(--muted);font:700 12px var(--font-num)}
.m-tab[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.m-tab[aria-selected=true] b{background:rgba(255,255,255,.2);color:#fff}
@media (hover:hover) and (pointer:fine){ .m-tab[aria-selected=false]:hover{color:#fff;border-color:#3A3A3A} }
.m-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.m-empty{max-width:560px;margin:0 auto;padding:28px 24px;border:1px dashed #333;border-radius:14px;text-align:center;color:var(--muted)}
.g-play{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(20,20,20,.7);color:#fff}
.g-play svg{width:22px;height:22px;fill:currentColor}
.g-open{position:relative}

/* work: Instagram-style feed + a masonry of real pieces */
#work > .wrap,#clients > .wrap,#more > .wrap{padding-bottom:var(--space-6)}
.ig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,5vw,72px);align-items:center;margin-bottom:var(--space-5)}
.ig-copy h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:10px}
.ig-copy p{color:var(--muted);max-width:44ch}
.ig-phone{padding:14px 10px;border-radius:28px;background:#0E0E0E;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ig-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:14px;overflow:hidden}
.ig-feed .g-open{aspect-ratio:4/5}
.gallery{columns:4 220px;column-gap:14px}
.g-item{break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--border)}
.g-open{display:block;width:100%;padding:0;border:0;background:#0E0E0E;cursor:zoom-in;overflow:hidden}
.g-open img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.g-reel .g-open{aspect-ratio:9/16}
.g-post .g-open{aspect-ratio:4/5}
.g-wide .g-open{aspect-ratio:16/9}
.g-sheet .g-open img{object-fit:contain;height:auto}
.g-item figcaption{display:grid;gap:2px;padding:10px 12px 12px}
.g-tag{font:600 12px var(--font-body);color:var(--accent)}
.g-title{font-size:14px;line-height:1.45;color:#E6E6E6}
@media (hover:hover) and (pointer:fine){ .g-open:hover img{transform:scale(1.04)} }
.g-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* work viewer */
.lightbox{max-width:min(92vw,1100px);max-height:92vh;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.lightbox::backdrop{background:rgba(8,8,8,.88)}
.lightbox img,.lightbox video{display:block;max-width:min(92vw,1100px);max-height:80vh;margin:0 auto;border-radius:12px;object-fit:contain;background:#000}
.lightbox [hidden]{display:none}
.lightbox p{margin-top:12px;text-align:center;color:#D4D4D4;font-size:15px}
.lightbox .o-btn{position:fixed;top:50%;translate:0 -50%;background:rgba(20,20,20,.7)}
.lb-prev{inset-inline-start:16px}.lb-next{inset-inline-end:16px}
.lightbox .lb-close{top:20px;translate:none;inset-inline-end:16px}
html[dir=rtl] .lightbox .o-btn.lb-prev svg,html[dir=rtl] .lightbox .o-btn.lb-next svg{transform:scaleX(-1)}

/* clients of the industry */
.logo-grid{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.logo-grid img{display:block;width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 1px var(--border)}

/* closing call to action */
.ind-cta{display:grid;justify-items:center;text-align:center;gap:14px;max-width:760px;margin:0 auto;padding-block:var(--space-6)}
.ind-cta .c-mark{margin-bottom:6px}
.ind-goal{display:grid;gap:6px;padding:16px 22px;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.ind-goal span{color:var(--accent);font-weight:600;font-size:14px}
.ind-goal b{font:700 clamp(19px,1.9vw,24px)/1.5 var(--font-ar-head);color:#fff}
html[lang=en] .ind-goal b{font-family:var(--font-body)}
.ind-cta h2{font-size:clamp(30px,4vw,48px)}
.ind-cta > p:not(.ind-goal){color:var(--muted);max-width:52ch}
.ind-cta .hero-ctas{justify-content:center;margin-top:6px}
#contact > .wrap{padding-block:0}

/* other industries */
.more-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.more-grid a{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:#E6E6E6;text-decoration:none;font-weight:600;transition:border-color var(--dur),color var(--dur)}
.more-grid .dot{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:var(--c);color:var(--on)}
.more-grid .dot svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){ .more-grid a:hover{border-color:var(--c);color:#fff} }

@media (max-width:820px){
  .ind-page .services.ind-services{grid-template-columns:1fr}
  .ig{grid-template-columns:1fr}
  .ig-phone{max-width:360px;margin-inline:auto}
  .gallery{columns:2 150px;column-gap:10px}
  .g-item{margin-bottom:10px}
  .logo-grid img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){ .g-open img{transition:none} }