/* "Our work" gallery, pass 2 (FAS media showcase seat, 2026-11-11), after the owner's word:
   "a bit hard to navigate the multi filters ... Review it for AI slop and make it more designed and navigatable".
   One shelf per service, built from the catalog's tags; one sticky row of service tabs that jumps to a shelf;
   a focused player with previous and next. Uses funnel.css tokens. Lime stays for "book" only.
   Headings use the site's own heavy condensed capitals (the DRAINAGE / FOUNDATION card headings). */

/* intro */
.ow-intro{background:var(--ink);color:#fff;padding:112px 0 34px}
.ow-intro h1{font:800 clamp(64px,9vw,128px)/.84 var(--label);font-stretch:76%;letter-spacing:-.02em;text-transform:uppercase}
.ow-intro .lead{font-size:clamp(17px,1.5vw,20px);max-width:36ch;margin-top:18px;color:#dfe4dc}
.ow-intro .cta-row{margin-top:24px}
.ow-intro .call{color:#fff}

/* service tabs: plain text tabs, sticky under the header */
.ow-tabs{position:sticky;top:64px;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.ow-tabs .wrap{display:flex;gap:4px 30px;overflow-x:auto;scrollbar-width:none}
.ow-tabs .wrap::-webkit-scrollbar{display:none}
.ow-tabs a{flex:none;display:inline-flex;align-items:baseline;gap:7px;padding:17px 0 14px;border-bottom:3px solid transparent;
  font:700 16px/1 var(--label);color:var(--muted);text-decoration:none;white-space:nowrap}
.ow-tabs a span{font-weight:600;font-size:13px}
.ow-tabs a:hover{color:var(--ink)}
.ow-tabs a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* shelves */
.ow-shelf{padding:clamp(40px,5vw,64px) 0 0;scroll-margin-top:118px}
.ow-shelf:last-of-type{padding-bottom:clamp(56px,7vw,88px)}
.ow-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 28px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.ow-head h2{font:800 clamp(40px,4.6vw,64px)/.86 var(--label);font-stretch:76%;letter-spacing:-.015em;text-transform:uppercase}
.ow-head h2 span{font-weight:600;font-size:.42em;letter-spacing:0;color:var(--muted);margin-left:10px;vertical-align:.2em}
.ow-head p{grid-column:1;font-size:17px;color:var(--muted);max-width:58ch}
.ow-head .ow-more{grid-column:2;grid-row:1/span 2;align-self:end;font:700 15px/1.2 var(--label);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.ow-rowwrap{position:relative;margin-top:20px}
.ow-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 18px) / 4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.ow-row::-webkit-scrollbar{display:none}
.ow-nav{position:absolute;top:calc(50% - 44px);width:44px;height:44px;border-radius:50%;border:1px solid #10181633;background:#fff;color:var(--ink);
  font:400 22px/1 var(--body);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -10px #0006}
.ow-nav[hidden]{display:none}
.ow-nav--prev{left:-22px} .ow-nav--next{right:-22px}

/* cards */
.ow-card{margin:0;min-width:0;scroll-snap-align:start}
.ow-thumb{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--ink-2);color:#fff;text-decoration:none}
.ow-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ow-thumb:hover img{transform:scale(1.03)}
.ow-thumb::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(8,17,13,.7))}
.ow-dur{position:absolute;left:12px;bottom:11px;z-index:1;display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--label)}
.ow-dur::before{content:"";width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.ow-card--photo .ow-dur::before{display:none}
.ow-card figcaption{padding:11px 1px 0}
.ow-card figcaption p{font:500 15px/1.38 var(--body)}
.ow-card figcaption .ow-meta{margin-top:5px;font:500 13px/1.3 var(--body);color:var(--muted)}

/* closing band */
.ow-close{background:var(--ink);color:#fff;padding:clamp(56px,8vw,96px) 0}
.ow-close h2{font:800 clamp(40px,4.6vw,64px)/.9 var(--label);font-stretch:76%;text-transform:uppercase;letter-spacing:-.015em}
.ow-close .sub{color:#c9d1ca}
.ow-close .cta-row{margin-top:28px}
.ow-close .call{color:#fff}
.ow-close .alt{margin-top:18px;font-size:16px;color:#c9d1ca}
.ow-close .alt a{color:#fff}

/* player */
.ow-player{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
.ow-player::backdrop{background:#060a09}
.ow-player[open]{display:grid;place-items:center}
.ow-stage{display:grid;grid-template-columns:auto minmax(260px,340px);gap:28px;align-items:end;max-width:min(1100px,calc(100vw - 140px))}
.ow-stage video,.ow-stage img{display:block;max-height:calc(100svh - 64px);max-width:min(560px,calc(100vw - 32px));border-radius:8px;background:#000}
.ow-side{color:#fff;padding-bottom:6px}
.ow-side .ow-pos{font:700 13px/1 var(--label);color:#aab4ad}
.ow-side p.cap{font:500 21px/1.35 var(--body);margin-top:10px}
.ow-side .ow-meta{color:#aab4ad;font-size:14px;margin:8px 0 22px}
.ow-side .cta{width:100%;justify-content:center}
.ow-side .call{display:inline-block;margin-top:16px;color:#fff}
.ow-x,.ow-step{position:fixed;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff55;background:rgba(8,17,13,.6);color:#fff;font:400 26px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.ow-x{top:14px;right:14px}
.ow-step{top:calc(50% - 24px)} .ow-step--prev{left:18px} .ow-step--next{right:18px}
.ow-step[disabled]{opacity:.25;cursor:default}

@media (min-width:1061px){
  .ow-intro .wrap{display:grid;grid-template-columns:1fr minmax(0,460px);column-gap:56px;align-items:end}
  .ow-intro .lead{margin-top:0}
  .ow-intro .side{padding-bottom:6px}
}
@media (max-width:1060px){.ow-row{grid-auto-columns:calc((100% - 2 * 18px) / 3)}}
@media (max-width:760px){
  .ow-intro{padding:92px 0 26px}
  .ow-intro .cta-row .cta{width:100%;justify-content:center;font-size:16px;padding:0 16px;gap:10px;white-space:nowrap}
  .ow-tabs .wrap{gap:4px 22px;width:auto;margin:0;padding:0 clamp(20px,4vw,56px)}
  .ow-tabs a{font-size:15px;padding:15px 0 12px}
  .ow-shelf{scroll-margin-top:110px}
  .ow-head{grid-template-columns:1fr}
  .ow-head .ow-more{grid-column:1;grid-row:auto;justify-self:start}
  .ow-rowwrap{margin-left:calc(-1 * clamp(20px,4vw,56px));margin-right:calc(-1 * clamp(20px,4vw,56px))}
  .ow-row{grid-auto-columns:64%;gap:12px;padding:0 clamp(20px,4vw,56px) 4px;scroll-padding:0 clamp(20px,4vw,56px)}
  .ow-nav{display:none}
  .ow-card figcaption p{font-size:14px}
  .ow-stage{grid-template-columns:1fr;gap:14px;justify-items:center;align-items:start;max-width:calc(100vw - 24px)}
  .ow-stage video,.ow-stage img{max-height:calc(100svh - 250px)}
  .ow-side{width:100%;max-width:420px;padding:0 4px}
  .ow-side p.cap{font-size:17px}
  .ow-side .ow-meta{margin:6px 0 12px}
  .ow-step{top:14px} .ow-step--prev{left:14px} .ow-step--next{left:70px;right:auto}
  .ow-player[open]{padding-top:72px;place-items:start center}
}
@media (max-width:400px){.ow-intro .cta .arr,.ow-close .cta .arr{display:none}}
@media (prefers-reduced-motion:reduce){.ow-thumb img{transition:none}.ow-row{scroll-behavior:auto}}