/* VIP Auto Customs · Services (services.html). Page rules on top of css/home.css, which is linked first.
   The service-page pattern (DESIGN.md, after olympic.no/what-we-do-services, itself an overview page): the home
   page's hero film re-laid with the headline bottom-left, the "What we do" band, four alternating text-media rows (the
   third the dark variant), the Styling card slider on the page's one light band, the calm close.
   Row, band and close patterns are copied from css/tint.css (prefix s- here), not shared, so tint's files stay as they are.
   Red: --red (#E3202A) for the italic word and the tab lines; small red type uses --red-text (#EE2C35, 4.5:1 on the
   ground and the panel) and --red-ink (#CC1B25) on the warm white. Pinned behaviour lives under html.e-pin. */

:root{--red-text:#EE2C35;--red-ink:#CC1B25;--row-media:min(560px,40vw)}

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

/* ---------------------------------------------------------------- (1) hero: #e-hero from css/home.css, pinned
   600vh of travel here (home: 320vh): the four service films, about a screen and a half of scroll each. Desktop re-lays the head
   bottom-left above the tabs, the scroll cue bottom-right; the phone keeps the home page's stacked still. */
html.e-pin .s-hero{height:calc(var(--screen) * 7)}
.s-hero__scroll{font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label);text-decoration:none;transition:color .4s var(--ease)}
.s-hero__scroll:hover{color:var(--text)}
@media (min-width:768px){
  .s-hero .e-hero__shade{background:
    linear-gradient(180deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,0) 17%,rgba(5,5,5,0) 52%,rgba(5,5,5,.66) 78%,rgba(5,5,5,.94) 100%),
    linear-gradient(90deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,0) 46%)}
  .s-hero .e-hero__head{top:auto;left:var(--gutter);right:var(--gutter);bottom:calc(clamp(20px,3.4vh,40px) + clamp(96px,12vh,136px));
    padding:0;text-align:left;max-width:1100px}
  .s-hero .e-hero__title{margin-top:20px}
  .s-hero .e-hero__line.s-hero__scroll{position:absolute;right:0;bottom:calc(100% + clamp(28px,4vh,48px));margin:0;padding:8px 0;text-align:right;
    font:500 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--label)}
}

/* ---------------------------------------------------------------- (2) what we do */
.s-what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px clamp(32px,6vw,120px);max-width:1440px;margin:0 auto;
  padding:clamp(108px,16vh,180px) var(--gutter) clamp(100px,14.5vh,164px)}
.s-what__label{padding-top:12px}
.s-what__text{max-width:60ch;font:300 clamp(21px,1.6vw,28px)/1.45 var(--serif);font-variation-settings:'opsz' 24;letter-spacing:-.005em;color:var(--text)}

/* ---------------------------------------------------------------- (3) text-media rows (as css/tint.css): kicker and
   title at the top of the text column, the body pinned to its bottom; a 4:5 photo with the home page's tile parallax
   (.e-tile__media, driven by js/home.js); sides swap row by row. About 850px tall at 1440+. */
/* the four services as big photo cards, 2×2 (Olympic's dual cards): photo + wash, kicker, title, one line, EXPLORE */
.s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1440px;margin:clamp(72px,10vh,120px) auto 0;padding:0 var(--gutter)}
.s-grid__link{position:relative;display:block;min-height:clamp(440px,40vw,600px);color:var(--text);text-decoration:none;overflow:hidden;background:var(--panel);isolation:isolate}
.s-grid__media{position:absolute;inset:0;margin:0;aspect-ratio:auto;z-index:0}
.s-grid__media img{transition:transform 1.6s var(--ease)}
.s-grid__link::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,5,5,.4) 0%,rgba(5,5,5,.14) 38%,rgba(5,5,5,.8) 100%);transition:opacity .8s var(--ease)}
.s-grid__text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(28px,2.75vw,44px)}
.s-grid__kicker{margin-bottom:18px;color:rgba(242,241,237,.78)}
.s-grid__title{font:300 clamp(34px,2.75vw,48px)/1.04 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text)}
.s-grid__line{max-width:40ch;margin-top:14px;font:300 15px/1.6 var(--sans);color:rgba(242,241,237,.82)}
.s-grid__btn{margin-top:26px}
.s-grid__link:hover .s-grid__media img,.s-grid__link:focus-visible .s-grid__media img{--pz:1.05}
.s-grid__link:hover .s-grid__btn,.s-grid__link:focus-visible .s-grid__btn{background:var(--text);color:var(--ground);border-color:var(--text)}
.s-grid__link:focus-visible{outline:1px solid var(--text);outline-offset:4px}

/* ---------------------------------------------------------------- (4) Styling options: card slider on the light band.
   A native horizontal scroller (scroll-snap, touch and trackpad work as is); js/services.js adds the arrows, the
   progress thumb and the 01 / 03 count. 16:9 cards, a mono chip top-left, one line at the bottom over a dark wash. */
.s-opts{margin-top:clamp(88px,12.5vh,144px);padding:clamp(96px,13.5vh,152px) 0 clamp(88px,12.5vh,136px);background:#F4F3EF;color:#0B0B0B;
  --label:rgba(11,11,11,.55);--box:rgba(11,11,11,.42);--hair:rgba(11,11,11,.14)}
.s-opts__head{max-width:760px;margin:0 auto clamp(44px,6.4vh,66px);padding:0 var(--gutter);text-align:center}
.s-opts__label{font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-ink);margin-bottom:24px}
.s-opts__title{font:300 clamp(44px,4.05vw,66px)/1.02 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em}
.s-opts__track{position:relative;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0 max(var(--gutter),calc((100vw - 1440px) / 2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc((100vw - 1440px) / 2 + var(--gutter)));
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s-opts__track::-webkit-scrollbar{display:none}
.s-opts__track:focus-visible{outline:1px solid #0B0B0B;outline-offset:6px}
.s-card{position:relative;flex:0 0 clamp(300px,39vw,700px);aspect-ratio:16/9;overflow:hidden;scroll-snap-align:start;background:#E6E4DE;color:#F2F1ED}
.s-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.s-card:hover img{transform:scale(1.03)}
.s-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.28) 0%,rgba(5,5,5,0) 30%,rgba(5,5,5,0) 48%,rgba(5,5,5,.78) 100%)}
.s-card__tag{position:absolute;left:20px;top:20px;z-index:1;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:#F2F1ED;background:rgba(5,5,5,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.s-card__line{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;max-width:30ch;
  font:300 clamp(18px,1.35vw,22px)/1.3 var(--serif);font-variation-settings:'opsz' 28;letter-spacing:-.005em;color:#F2F1ED}
.s-opts__foot{display:flex;align-items:center;gap:clamp(20px,3vw,40px);max-width:1440px;margin:clamp(30px,4.5vh,44px) auto 0;padding:0 var(--gutter)}
.s-opts__count{flex:none;font:400 13px/1 var(--sans);letter-spacing:.02em;color:rgba(11,11,11,.55)}
.s-opts__n{color:#0B0B0B}
.s-opts__progress{position:relative;flex:1;height:1px;background:rgba(11,11,11,.14);overflow:hidden}
.s-opts__progress i{position:absolute;top:0;bottom:0;left:0;width:var(--w,34%);background:#0B0B0B;transform:translateX(var(--x,0%));transition:transform .5s var(--ease)}
.s-opts__arrows{flex:none;display:flex;gap:8px}
.s-opts__arrow{width:52px;height:52px;padding:0;border:1px solid rgba(11,11,11,.42);border-radius:0;background:transparent;color:#0B0B0B;cursor:pointer;
  font:400 18px/1 var(--sans);transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .4s var(--ease)}
.s-opts__arrow:hover:not(:disabled){background:#0B0B0B;color:#F4F3EF;border-color:#0B0B0B}
.s-opts__arrow:disabled{opacity:.3;cursor:default}
.s-opts__arrow:focus-visible{outline:1px solid #0B0B0B;outline-offset:3px}

/* ---------------------------------------------------------------- (5) the calm close, on the ground (red: the label only) */

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width:1023px) and (min-width:768px){
  :root{--row-media:44vw}
}
@media (max-width:767px){
  .s-hero .e-hero__head{text-align:left;padding:0 20px}
  .s-hero .s-hero__scroll{display:none}
  .s-what{grid-template-columns:1fr;gap:28px;padding:96px 20px 72px}
  .s-what__label{padding-top:0}
  .s-what__text{font-size:23px}
  .s-opts{margin-top:0;padding:88px 0 96px}
  .s-opts__head{text-align:left;margin-bottom:40px;padding:0 20px}
  .s-opts__title{font-size:44px}
  .s-opts__track{gap:12px;padding:0 20px;scroll-padding-inline:20px}
  .s-card{flex-basis:84vw}
  .s-card__tag{left:14px;top:14px}
  .s-card__line{left:16px;right:16px;bottom:14px;font-size:18px}
  .s-opts__foot{padding:0 20px;gap:16px}
  .s-opts__arrow{width:44px;height:44px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .s-hero__scroll,.s-opts__arrow,.s-card img,.s-opts__progress i{transition:none}
  .s-opts__track{scroll-behavior:auto}
  .s-card:hover img{transform:none}
}

@media (max-width:767px){.s-grid{grid-template-columns:1fr;gap:12px;padding:0 20px;margin-top:56px}.s-grid__link{min-height:420px}.s-grid__title{font-size:36px}}

/* 2026-11-08: the track fades at both edges, as wide as its own padding, so the next card reads as "more" */
.s-opts__track{--edge:max(var(--gutter),calc((100vw - 1440px) / 2 + var(--gutter)));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent)}
@media (max-width:767px){.s-opts__track{--edge:20px}}