/* Yard Sharks Gallery V5.1 — desktop proportion + mobile refinement patch */
:root{--cyan:#54d3e2;--bg:#03080b;--panel:#081217;--text:#f4fafb;--muted:#a8b8bd}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.port{overflow:hidden;width:100%}
.port .w{width:min(1480px,calc(100% - 64px));margin-left:auto;margin-right:auto}
.portHero{position:relative;height:62vh;min-height:500px;max-height:690px;display:flex;align-items:flex-end;overflow:hidden;width:100%}
.portHero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(.82)}
.portHero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,11,.88),rgba(3,8,11,.08) 70%),linear-gradient(0deg,#03080b 0%,transparent 45%)}
.heroCopy{position:relative;z-index:2;padding-bottom:54px;max-width:760px}
.eyebrow{color:var(--cyan);font-weight:900;letter-spacing:.18em;font-size:10px;text-transform:uppercase}
.heroCopy h1{font-size:clamp(48px,5.2vw,78px);line-height:.92;letter-spacing:-.04em;margin:12px 0 18px;text-transform:uppercase}
.heroCopy p{font-size:16px;line-height:1.6;color:#d6e2e5;max-width:580px;margin:0}
.tabs{position:sticky;top:0;z-index:50;background:rgba(3,8,11,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(84,211,226,.16);width:100%}
.tabsIn{display:flex;gap:6px;overflow:auto;padding:12px 0}
.tab{border:1px solid transparent;background:transparent;color:#a9babf;padding:10px 13px;font-size:11px;font-weight:900;white-space:nowrap;cursor:pointer}
.tab.active,.tab:hover{background:var(--cyan);color:#001013}
.gallery{padding:38px 0 80px;width:100%}
.galleryIntro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,500px);gap:50px;align-items:end;margin-bottom:28px}
.galleryIntro h2{font-size:clamp(32px,3.2vw,48px);line-height:1;letter-spacing:-.035em;margin:8px 0 0}
.galleryIntro p{color:var(--muted);line-height:1.6;margin:0;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:105px;gap:12px;width:100%}
.card{position:relative;overflow:hidden;background:var(--panel);cursor:zoom-in;min-width:0}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .4s;filter:saturate(.86)}
.card:hover img{transform:scale(1.035);filter:saturate(1)}
.card:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:.42}
.meta{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.meta span{font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--cyan)}.meta b{display:block;font-size:13px;margin-top:4px}.num{font-size:9px!important;color:#dce7e9!important}
.card:nth-child(10n+1){grid-column:span 7;grid-row:span 4}.card:nth-child(10n+2){grid-column:span 5;grid-row:span 2}.card:nth-child(10n+3){grid-column:span 5;grid-row:span 2}.card:nth-child(10n+4){grid-column:span 4;grid-row:span 3}.card:nth-child(10n+5){grid-column:span 4;grid-row:span 3}.card:nth-child(10n+6){grid-column:span 4;grid-row:span 3}.card:nth-child(10n+7){grid-column:span 5;grid-row:span 3}.card:nth-child(10n+8){grid-column:span 7;grid-row:span 3}.card:nth-child(10n+9){grid-column:span 6;grid-row:span 3}.card:nth-child(10n+10){grid-column:span 6;grid-row:span 3}
.feature{margin-top:64px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.55fr);background:#071116;min-height:430px;width:100%;overflow:hidden}
.featurePhoto{min-height:430px}.featurePhoto img{width:100%;height:100%;object-fit:cover;display:block}
.featureCopy{padding:42px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.featureCopy h2{font-size:clamp(32px,3.2vw,48px);line-height:1;letter-spacing:-.035em;margin:10px 0 17px}
.featureCopy p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 22px}
.featureCopy a,.cta a{display:inline-block;align-self:flex-start;background:var(--cyan);color:#001013;padding:15px 20px;font-size:11px;font-weight:950;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.cta{padding:0 0 72px;border-top:0;background:var(--bg);width:100%}
.cta .w{width:min(1480px,calc(100% - 64px));max-width:none}
.ctaIn{min-height:245px;padding:46px 52px;display:flex;align-items:center;justify-content:space-between;gap:40px;background:linear-gradient(120deg,#071319,#03080b);border:1px solid rgba(84,211,226,.58);width:100%}
.cta h2{font-size:clamp(34px,3.5vw,52px);line-height:1.02;margin:8px 0 0;letter-spacing:-.035em;max-width:700px}
.light{position:fixed;inset:0;z-index:9999;background:rgba(0,3,5,.97);display:none;align-items:center;justify-content:center}.light.on{display:flex}.light img{max-width:92vw;max-height:88vh;object-fit:contain}.x,.prev,.next{position:absolute;width:50px;height:50px;border:1px solid rgba(255,255,255,.22);background:rgba(5,13,17,.78);color:#fff;font-size:25px;cursor:pointer}.x{right:20px;top:20px}.prev{left:20px}.next{right:20px}
@media(max-width:900px){.port .w,.cta .w{width:calc(100% - 30px)}.portHero{height:58vh;min-height:470px}.heroCopy{padding-bottom:38px}.heroCopy h1{font-size:clamp(40px,9vw,54px)}.galleryIntro{grid-template-columns:1fr;gap:14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:9px}.card,.card:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3}.card:nth-child(5n+1){grid-column:1/-1;aspect-ratio:16/9}.feature{grid-template-columns:1fr;margin-top:48px}.featurePhoto{min-height:340px}.featureCopy{padding:30px 25px}.cta{padding-bottom:30px}.ctaIn{min-height:0;padding:34px 28px;align-items:flex-start;flex-direction:column}.cta h2{font-size:36px}}
@media(max-width:520px){.port .w,.cta .w{width:calc(100% - 20px)}.portHero{height:54vh;min-height:430px}.heroCopy h1{font-size:40px}.heroCopy p{font-size:14px}.tabsIn{padding:8px 0}.tab{font-size:9px;padding:9px}.gallery{padding-top:25px}.galleryIntro h2{font-size:31px}.grid{grid-template-columns:1fr}.card,.card:nth-child(n){grid-column:1;aspect-ratio:4/3}.card:nth-child(4n+1){aspect-ratio:16/10}.featurePhoto{min-height:270px}.featureCopy h2{font-size:32px}.ctaIn{padding:30px 22px}.cta h2{font-size:32px}.prev{left:5px}.next{right:5px}}