/* =====================================================================
   SERVICE PAGE — hero film, capabilities, bento (the case panel is in case-panel.css)
   ===================================================================== */

/* ---------- hero ---------- */
.svc-hero{position:relative;min-height:max(660px,100svh);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(56px,7vw,112px)}
.svc-hero-media{position:absolute;inset:0;z-index:-2;background:var(--ink-3) url("../video/hex-poster.jpg") center/cover no-repeat}
.svc-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.svc-hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,24,28,.55) 0%,rgba(0,24,28,0) 22%),
    linear-gradient(0deg,rgba(0,24,28,.96) 0%,rgba(0,24,28,.82) 26%,rgba(0,24,28,.35) 52%,rgba(0,24,28,0) 72%)}
/* three things only: the HEX chip, the title, and one line of copy beside it */
.svc-hero-in{position:relative}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:28px 64px;align-items:end}
.svc-abbr{display:flex;margin-bottom:22px}
.svc-hero h1{font-size:clamp(36px,4.9vw,76px);max-width:17ch}
.svc-hero-lede{color:rgba(242,250,250,.86);font-size:18px;padding-bottom:.5em}
.hero-toggle{position:absolute;z-index:2;top:calc(var(--nav-h) + 20px);right:var(--gut);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color 200ms var(--ease),transform 160ms var(--ease-out)}
.hero-toggle svg{width:18px;height:18px}
.hero-toggle .i-play{display:none}
.hero-toggle[aria-pressed="true"] .i-play{display:block}
.hero-toggle[aria-pressed="true"] .i-pause{display:none}
.hero-toggle:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hero-toggle:hover{background:rgba(255,255,255,.22)}}
@media (max-width:980px){.svc-hero-grid{grid-template-columns:1fr}.svc-hero h1{max-width:none}.svc-hero-lede{max-width:46ch;padding-bottom:0}}
@media (max-width:760px){
  /* portrait: show the whole film as a frame, copy below it */
  .svc-hero{display:block;min-height:0;padding-top:var(--nav-h);padding-bottom:48px}
  .svc-hero-media{position:relative;inset:auto;aspect-ratio:16/10;margin-bottom:28px}
  .svc-hero-scrim{background:linear-gradient(180deg,rgba(0,24,28,.5) 0%,rgba(0,24,28,0) 18%)}
  .svc-hero-scrim{bottom:auto;height:calc(var(--nav-h) + 62.5vw)}
  .hero-toggle{top:calc(var(--nav-h) + 12px);right:12px;width:42px;height:42px}
}

/* ---------- capabilities ---------- */
.caps-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.caps-head{position:sticky;top:calc(var(--nav-h) + 32px);display:grid;gap:22px}
.caps-photo{margin-top:12px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.caps-photo img{width:100%;height:100%;object-fit:cover}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.caps-grid:not(.is-wide) .caps > .cap:last-child:nth-child(odd){grid-column:1 / -1}   /* an odd count (5, 7) closes on a full-width card */
/* wide layout (nine capabilities): heading and photo side by side on top, the cards in a 3 × 3 grid below */
.caps-grid.is-wide{grid-template-columns:1fr;gap:clamp(36px,4vw,56px)}
.caps-grid.is-wide .caps-head{position:static;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,6vw,96px);align-items:center}
.caps-grid.is-wide .caps-head > :not(.caps-photo){grid-column:1}
.caps-grid.is-wide .caps-photo{grid-column:2;grid-row:1 / span 3;margin:0;aspect-ratio:16/9}
.caps-grid.is-wide .caps{grid-template-columns:repeat(3,minmax(0,1fr))}
.cap{position:relative;display:grid;gap:10px;align-content:start;padding:26px 24px 28px;border-radius:var(--r-lg);background:#fff;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow 300ms var(--ease-out),transform 300ms var(--ease-out)}
.cap-ill{width:84px;height:84px;margin-bottom:10px;perspective:700px}
.cap-ill img{width:100%;height:100%;object-fit:contain;transition:transform 1.35s cubic-bezier(.65,0,.35,1)}
.cap-t{font-size:19px;line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
.cap-d{font-size:15px;line-height:1.5;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .cap:hover{box-shadow:0 0 0 1.5px var(--coral),0 24px 50px -30px rgba(241,88,34,.55);transform:translateY(-3px)}
  .cap:hover .cap-ill img{transform:rotateY(360deg)}
}
@media (max-width:980px){.caps-grid{grid-template-columns:1fr}.caps-head{position:static}.caps-photo{display:none}
  .caps-grid.is-wide .caps-head{grid-template-columns:1fr}
  .caps-grid.is-wide .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps-grid.is-wide .caps > .cap:last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:600px){.caps,.caps-grid.is-wide .caps{grid-template-columns:1fr}}

/* ---------- work bar: filters + count, sticky while browsing ---------- */
.svc-work{padding-top:clamp(72px,9vw,130px)}
/* the work follows the capabilities directly on the same ground, so the gap between them is one section's worth */
.svc-caps + .svc-work{padding-top:clamp(8px,2vw,32px)}
.work-bar{position:sticky;top:calc(var(--nav-h) + 10px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:22px;padding:8px;border-radius:999px;background:rgba(247,252,252,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 0 0 1px var(--line),0 18px 40px -28px rgba(0,37,43,.45);transition:top 400ms var(--ease-out)}

/* ---------- bento ----------
   Every tile's size, shape, place and colour come from its artwork (_source/bento.py):
   --a3 / --a2 are its grid-area in the 3- and 2-column grids (packed with no holes),
   --ar is the artwork's aspect ratio (sizes the tile on phones), --t1..--glow its colours.
   The art box below must match ART_INSET in bento.py. */
/* half-height rows (a compact tile is 4 rows, a tall one 8), so every picture finds a close fit */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(54px,calc(5.3vw - 8px),68px);grid-auto-flow:row dense;gap:16px;container-type:inline-size}
.bc{position:relative;display:block;grid-area:var(--a3,auto);border-radius:var(--r-lg);overflow:hidden;color:#fff;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;transition:transform 260ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.bc.is-out{display:none}
/* the tile is its artwork's key colour, as a radial gradient in the style of the home page
   highlights (--bg; a home highlight keeps its card's colour); a deeper run of the same
   colour (--shade, at --shade-a) rises behind the title so white text reads on every colour */
.bc-bg{position:absolute;inset:0;z-index:-1;background:var(--bg,linear-gradient(150deg,var(--t1) 0%,var(--t2) 50%,var(--t3) 100%))}
.bc-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--shade,0,37,43),var(--shade-a,.62)) 0,rgba(var(--shade,0,37,43),0) 170px)}
.bc-bg::after{content:"";position:absolute;inset:-25%;background:radial-gradient(closest-side at 50% 38%,var(--glow),transparent 72%);
  transition:transform 900ms var(--ease-out)}
/* a yellow highlight tile carries ink copy, as its home page card does */
.bc.is-light{color:var(--ink)}
.bc.is-light .bc-client{background:rgba(0,48,56,.1)}
.bc-top{position:absolute;top:16px;inset-inline:16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:opacity 320ms var(--ease)}
.bc-client{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78%}
.bc-n{position:relative;width:40px;height:40px;display:grid;place-items:center}
.bc-go{position:absolute;inset:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;opacity:0;transform:scale(.5) rotate(-45deg);
  transition:opacity 220ms var(--ease),transform 420ms var(--ease-out)}
.bc-go svg{width:20px;height:20px}
.bc-art{position:absolute;inset:60px 24px 92px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.bc-img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.3));will-change:transform;
  transition:opacity 200ms var(--ease)}
.bc-img.is-frame{border-radius:8px}
.bc-img.is-phone{border-radius:16px}
.bc-img.is-missing{opacity:0}
.bc-foot{position:absolute;inset-inline:18px;bottom:16px;z-index:2;display:grid;gap:5px;transition:opacity 320ms var(--ease)}
/* one title size on every tile, whatever its shape */
.bc-title{font-size:18px;font-weight:800;line-height:1.16;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.bc:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .bc:hover{box-shadow:0 0 0 1.5px rgba(255,255,255,.28) inset,0 30px 60px -34px rgba(0,37,43,.7)}
  .bc:hover .bc-bg::after{transform:translate(6%,8%) scale(1.1)}
  .bc:hover .bc-go{opacity:1;transform:none}
}
.bc:focus-visible .bc-go{opacity:1;transform:none}
/* while the case panel grows out of (or folds back into) a card: the artwork is carried by the flying ghost,
   so the card's own copy is hidden instantly (visibility, never a fade, so there is no double image or blink)
   and its label and title ease back in once the panel has gone */
.bc.is-source .bc-img{visibility:hidden}
.bc.is-source .bc-top,.bc.is-source .bc-foot{opacity:0;transition:none}

@media (max-width:1040px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(57px,calc(9.5vw - 8px),77px)}
  .bc{grid-area:var(--a2,auto)}
}
/* phones: one column, in the filter's reading order, each tile as tall as its artwork needs */
@media (max-width:640px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .bc{grid-area:auto;order:var(--o,0);height:clamp(260px,calc((100cqw - 48px) / var(--ar,1.4) + 152px),620px)}
}
.bento-empty{grid-column:1/-1;padding:48px;text-align:center;color:var(--muted);font-weight:700}

/* ---------- keep exploring ---------- */
.svc-more{margin-top:clamp(72px,9vw,130px)}

@media (prefers-reduced-motion:reduce){
  .cap-ill img,.bc-img,.bc-bg::after{transition:none}
}