/* VIP Auto Customs · Work (work.html). Page rules on top of css/home.css, which is linked first.
   The home page's journal row (.e-journal / .e-tile, after olympic.no's "News & Insight") stretched into a full page, in
   this site's world (DESIGN.md): a short hero on the ground with the service filters, the gallery of the shop's own
   photographs on the page's one light band (7:8 tiles, three / two / one across, the home's tile parallax and hover),
   a native-dialog lightbox, the calm close.
   Red: --red (#E3202A) for the hero's italic word and the active filter's line (the pattern of the home's chapter
   tabs); small red type uses --red-text (#EE2C35), the same red lifted a touch so 10–11px labels hold 4.5:1 on the
   ground. The close is the shared .e-close block from home.css, so its italic word is that screen's one red. */

:root{--red-text:#EE2C35;--ink:#0B0B0B;--paper:#F4F3EF}

.w-kicker{font:500 13px/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-text)}

/* ---------------------------------------------------------------- (1) hero on the ground: no picture, the headline
   is the only large thing; the filters sit under it like the home's chapter tabs (mono 10px, a hairline under each,
   the active one red) */
.w-hero{background:var(--ground);padding:calc(var(--nav-h) + clamp(80px,13.5vh,152px)) var(--gutter) clamp(58px,8vh,94px)}
.w-hero__inner{max-width:1440px;margin:0 auto}
.w-hero__title{margin-top:22px;font:300 clamp(52px,min(5vw,8.4vh),92px)/1.02 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text)}
.w-hero__title em{font-style:italic;color:var(--red)}
.w-hero__line{max-width:52ch;margin-top:28px;font:300 17px/1.6 var(--sans);color:var(--dim)}
.w-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(52px,8vh,88px)}
.w-tab{position:relative;display:block;width:100%;padding:10px 0 12px;border:0;border-radius:0;background:none;cursor:pointer;text-align:left;
  font:400 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--dim);transition:color .5s var(--ease)}
.w-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair)}
.w-tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease)}
.w-tab:hover,.w-tab[aria-pressed="true"]{color:var(--text)}
.w-tab[aria-pressed="true"]::before{transform:scaleX(1)}

/* ---------------------------------------------------------------- (2) the gallery on the light band */
.w-gallery{padding:clamp(66px,10vh,110px) var(--gutter) clamp(110px,16vh,180px);background:var(--paper);color:var(--ink);
  --label:rgba(11,11,11,.5);--box:rgba(11,11,11,.42);--hair:rgba(11,11,11,.12)}
.w-gallery__head{max-width:1440px;margin:0 auto 40px}
.w-gallery__count{font:400 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:rgba(11,11,11,.62)}
.w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,2.2vw,36px);max-width:1440px;margin:0 auto;
  transition:opacity .28s var(--ease)}
.w-grid.is-fading{opacity:0}
.w-tile[hidden]{display:none}
.w-tile .e-tile__tag{color:rgba(11,11,11,.62)}
.w-tile .e-tile__link{cursor:zoom-in}
/* a touch shorter than the shared 4:5 tile so a whole tile sits on a laptop screen with room to spare */
.w-tile .e-tile__media{aspect-ratio:7/8}
.w-tile .e-tile__body{padding-top:20px}
.w-tile .e-tile__tag{margin-bottom:12px}
.w-tile .e-tile__title{font-size:clamp(20px,1.4vw,24px)}
.w-tile .e-tile__link:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.w-gallery__more{max-width:1440px;margin:clamp(64px,9vh,100px) auto 0;padding-top:28px;border-top:1px solid var(--hair);
  font:300 15px/1.6 var(--sans);color:rgba(11,11,11,.62)}

/* ---------------------------------------------------------------- (3) the calm close, on the ground */

/* ---------------------------------------------------------------- the lightbox: full screen on the ground; a bar
   (counter, a hairline close box like the burger), the photo full-height and contained, a foot (chip and caption,
   previous / next, Get a quote) */
.w-box{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--text);overflow:hidden}
.w-box[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.w-box[open] > :not(.w-fly){animation:w-in .6s var(--ease) both}
.w-box::backdrop{background:var(--ground)}
.w-box[open]::backdrop{animation:w-in .5s var(--ease) both}
/* 2026-11-08: on open, a copy of the tapped tile's photo (.w-fly, built by js/work.js) travels from the tile to where the
   full image will sit, then cross-fades into it. The grid children fade in around it. */
.w-fly{position:fixed;z-index:5;background-size:cover;background-position:center;pointer-events:none;
  transition:left .74s var(--ease),top .74s var(--ease),width .74s var(--ease),height .74s var(--ease),opacity .45s var(--ease)}
.w-fly.is-out{opacity:0}
.w-box.is-flying .w-box__img{opacity:0;transition:none}
@keyframes w-in{from{opacity:0}to{opacity:1}}
.w-box__bar{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 var(--gutter)}
.w-box__count{font:400 13px/1 var(--sans);letter-spacing:.02em;color:var(--label)}
.w-box__close{padding:0;border:0;background:none;cursor:pointer}
.w-box__x{position:relative;display:block;width:36px;height:36px;border:1px solid rgba(242,241,237,.28);background:rgba(242,241,237,.06);
  transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.w-box__x i{position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--text);transform:rotate(45deg);transition:background-color .4s var(--ease)}
.w-box__x i+i{transform:rotate(-45deg)}
.w-box__close:hover .w-box__x{background:var(--text);border-color:var(--text)}
.w-box__close:hover .w-box__x i{background:var(--ground)}
.w-box__frame{min-height:0;padding:0 var(--gutter)}
.w-box__img{width:100%;height:100%;object-fit:contain;transition:opacity .4s var(--ease)}
.w-box__img.is-loading{opacity:0}
.w-box__foot{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;padding:22px var(--gutter) 26px}
.w-box__text{display:flex;align-items:center;gap:20px;min-width:0}
.w-box__chip{flex:none;padding:9px 12px 8px;border:1px solid rgba(242,241,237,.55);font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--text)}
.w-box__cap{font:300 clamp(17px,1.3vw,21px)/1.4 var(--serif);font-variation-settings:'opsz' 28;color:var(--text)}
.w-box__actions{flex:none;display:flex;align-items:center;gap:10px}
.w-box__arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--box);border-radius:0;
  background:transparent;color:var(--text);cursor:pointer;font:400 15px/1 var(--sans);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.w-box__arrow:hover{background:var(--text);color:var(--ground);border-color:var(--text)}
.w-box__btn{margin-left:14px}
html.w-box-open{overflow:hidden}

/* ---------------------------------------------------------------- tablet, phone */
@media (max-width:1023px){
  .w-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
}
@media (max-width:767px){
  .w-hero{padding:calc(var(--nav-h) + 72px) 20px 56px}
  .w-hero__title{font-size:clamp(44px,12.4vw,56px)}
  .w-hero__line{margin-top:22px;font-size:16px}
  /* five filters: two per line, the hairline under each */
  .w-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;margin-top:44px}
  .w-tab{padding:14px 0}
  .w-gallery{padding:56px 20px 96px}
  .w-gallery__head{margin-bottom:28px}
  .w-grid{grid-template-columns:1fr;gap:44px}
  .w-gallery__more{margin-top:64px}
  .w-box__bar{height:var(--nav-h);padding:0 20px}
  .w-box__frame{padding:0}
  .w-box__foot{flex-direction:column;align-items:stretch;gap:18px;padding:18px 20px 22px}
  .w-box__text{flex-direction:column;align-items:flex-start;gap:12px}
  .w-box__actions{gap:8px}
  .w-box__btn{flex:1;margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .w-tab,.w-tab::before,.w-grid,.w-box__img,.w-box__x,.w-box__x i,.w-box__arrow{transition:none}
  .w-box[open]{animation:none}
}