/* Services page: the reel. Eleven full-screen shots (intro, nine services, FAQ) snapped on the
   root scroller, a glass shot list, one glass slate per service and a scrubber on the right edge.
   Snapping rules: DESIGN.md "Scroll snapping". services.js adds html.snap, plus .snap-loose if a
   section ever outgrows the screen. */

/* ---------- snapping: mandatory only where every shot fits the screen, proximity everywhere else */
html.snap{scroll-snap-type:y proximity}
@media (min-width:1024px) and (min-height:650px){html.snap:not(.snap-loose){scroll-snap-type:y mandatory}}
.snap-section{position:relative;display:grid;align-content:center;min-height:100vh;min-height:100svh;
  padding-block:calc(var(--header-h) + var(--s5)) var(--s6);scroll-snap-align:start}
.snap-section:focus{outline:none}                        /* scrubber jump target, never a control */
/* last stop: tapes + footer, bottom of the page. The margin keeps the footer's first line clear of the
   fixed header when a short screen snaps to the top of a footer taller than itself. */
.page-services .site-footer{scroll-snap-align:end;scroll-margin-top:var(--header-h)}

.page-services h2{font-size:clamp(28px,2.1vw + 15px,50px)}   /* fits a half column at 1024px */

/* ---------- intro: title, intro copy and the glass shot list */
.intro-grid{display:grid;gap:var(--s6);align-items:center}
.intro-copy{display:grid;gap:var(--s5);justify-items:start}
.intro h1{font-size:clamp(40px,4.2vw + 22px,92px)}
.shot-list{padding:clamp(18px,2vw,28px) clamp(18px,2.2vw,32px);--tick:16px}
.shot-list-head{display:flex;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);
  font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;line-height:1.35;text-transform:uppercase;color:var(--gold-dim)}
.shot-list ol{border-top:1px solid var(--line)}
.shot-list li+li{border-top:1px solid var(--line)}
.shot-list a{display:flex;align-items:center;gap:var(--s4);min-height:44px;padding-block:var(--s1);color:var(--text);text-decoration:none;transition:color var(--t-fast)}
.shot-list a:hover{color:var(--gold-hi)}
.sl-num{flex:none;width:2.4ch;font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;color:var(--gold-dim);font-variant-numeric:tabular-nums}
.sl-name{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:15px;line-height:1.3}
.sl-flag{padding:4px 7px 3px;border-radius:var(--radius);background:var(--gold);color:var(--ink);font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.shot-list .icon{width:16px;height:16px;color:var(--gold);rotate:90deg;transition:translate var(--t) var(--ease)}   /* points down the page */
.shot-list a:hover .icon{translate:0 3px}
@media (min-width:1024px){.intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,112px)}}

/* ---------- service shots: number, icon, title, tag and copy on the left; glass slate of bullets on the right */
.svc-grid{display:grid;gap:var(--s6);align-items:center}
.svc-head{display:grid;gap:var(--s4);justify-items:start}
.svc-mark{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s2)}
.svc-num{font-size:clamp(76px,6vw + 40px,164px)}
.svc-icon{width:40px;height:40px;color:var(--gold)}
.svc-tag{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid var(--line-2);border-radius:var(--radius);
  font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:var(--gold)}
.svc-desc{max-width:46ch;font-size:var(--fs-lede);line-height:1.55;color:var(--muted)}
.svc-slate{display:grid;gap:var(--s4);padding:clamp(20px,2.4vw,36px);--tick:18px}
.svc-slate .meta-row{justify-content:space-between;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.svc-list{display:grid;gap:var(--s3)}
.svc-list li{position:relative;padding-left:26px;line-height:1.5}
.svc-list li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--gold)}
@media (min-width:1024px){.svc-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,96px)}}

/* AI & machine learning, our specialty: hatched number, gold tag, taped slate, and (two-column layout
   only, where the markers have empty space to sit in) a matchmove overlay of tracking markers that
   drifts like a camera move as the shot scrolls through */
@media (min-width:1024px){.svc--ai::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none' stroke='%23d9b36a'><defs><path id='t' d='M-9-9h18v18h-18zM-4 0h8M0-4v8'/><path id='s' d='M-27-27h54v54h-54z' stroke-dasharray='2 6'/></defs><g stroke-opacity='.55'><use href='%23t' x='96' y='212'/><use href='%23t' x='420' y='116'/><use href='%23t' x='704' y='300'/><use href='%23t' x='1010' y='126'/><use href='%23t' x='1378' y='150'/><use href='%23t' x='84' y='780'/><use href='%23t' x='330' y='808'/><use href='%23t' x='930' y='806'/><use href='%23t' x='1290' y='790'/><use href='%23t' x='1522' y='858'/></g><g stroke-opacity='.3'><use href='%23s' x='96' y='212'/><use href='%23s' x='1010' y='126'/><use href='%23s' x='930' y='806'/><path d='M420 116l-28 8-24 3-22 7M1010 126l26-6 24-1 22-5M84 780l18 18 14 20M930 806l-30 4-26 9M1290 790l22-12 18-6'/></g></svg>") center/cover no-repeat}}
.svc--ai .svc-num{-webkit-text-stroke:1px var(--gold);background:repeating-linear-gradient(-45deg,var(--gold) 0 2px,transparent 2px 7px);-webkit-background-clip:text;background-clip:text}
.svc--ai .svc-tag{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.svc--ai .svc-slate{--tick:30px;border-color:rgba(217,179,106,.42);
  background:repeating-linear-gradient(-45deg,var(--gold) 0 5px,transparent 5px 10px) top/100% 5px no-repeat,
    linear-gradient(180deg,rgba(255,238,205,.09),rgba(255,238,205,.012) 42%,transparent),var(--glass-bg)}
.svc--ai .svc-slate::before{--c:var(--gold-hi)}
@keyframes track-pan{from{transform:translateY(64px)}to{transform:translateY(-64px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .svc--ai::before{animation:track-pan linear both;animation-timeline:--ai-shot}
    .svc--ai{view-timeline:--ai-shot block}
  }
}

/* ---------- FAQ: top-aligned so opening an answer never moves the questions above it */
.faq-section{align-content:start}
.faq-section .faq summary{min-height:50px;padding-block:12px}   /* seven rows plus the longest answer fit a 650px screen */
.faq-grid{display:grid;gap:var(--s5)}
.faq-head{display:grid;gap:var(--s4);justify-items:start}
@media (min-width:1024px){
  .faq-section{padding-top:calc(var(--header-h) + clamp(24px,24svh - 100px,180px))}   /* sits lower, so the end frame shows the last questions */
  .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,96px);align-items:start}
}

/* ---------- scrubber: one tick per shot on the right edge, desktop only */
.scrubber{display:none}
@media (min-width:1024px) and (min-height:560px){
  .scrubber{display:block;position:fixed;z-index:10;top:50%;right:max(8px,env(safe-area-inset-right));translate:0 -50%}
}
.scrubber ol{position:relative;display:grid}
.scrubber ol::before{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--line-2)}
.scrubber a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:32px;height:26px;text-decoration:none}
.scrubber a::after{content:"";width:10px;height:1px;background:var(--gold-dim);transition:width var(--t) var(--ease),background-color var(--t-fast)}
.scrubber a:hover::after{width:18px;background:var(--gold-hi)}
.scrubber a[aria-current]::after{width:26px;height:2px;background:var(--gold)}
.scrub-label{position:absolute;top:50%;right:calc(100% + 8px);translate:6px -50%;opacity:0;pointer-events:none;white-space:nowrap;
  padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(10,9,8,.94);
  font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--cream);
  transition:opacity var(--t-fast),translate var(--t) var(--ease)}
.scrub-label b{margin-right:6px;color:var(--gold);font-weight:600}
.scrubber a:hover .scrub-label,.scrubber a:focus-visible .scrub-label{opacity:1;translate:0 -50%}