/* components part 4 of 13 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

/* BIG ICON CARD: .mini.big-ic > .bic(svg) + h3 + p [+ .svc-more]
   For a card that has no photograph to carry it (the pricing trio on /services/, the
   discipline router on /services/architectural-visualization/). Those shipped as bare
   text boxes next to sections of full-frame image cards and read as unfinished. The
   icon is the same 24px line-art the .drivers and .craft-col icons already draw, scaled
   into a tile rather than a new visual language. Markup is written by
   pages/_service.py icon_cards(); do not hand-roll a second version. */
.mini.big-ic{display:flex;flex-direction:column}
.mini.big-ic .bic{width:clamp(72px,6vw,88px);height:clamp(72px,6vw,88px);flex:0 0 auto;border-radius:16px;background:var(--wash-lt);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(20px,2.2vw,26px);transition:background .25s,color .25s}
.mini.big-ic .bic svg{width:58%;height:58%;stroke-width:1.4}
.mini.big-ic:hover .bic{background:var(--accent);color:#fff}
.mini.big-ic .svc-more{margin-top:auto}
/* before/after split on a service card image */
/* --pos, and the .ba-* internals below, so this component IS the comparison slider
   rather than a picture of one. It reuses .ba-range / .ba-knob verbatim -- those are
   bare class selectors, so they work anywhere -- and is driven by the same [data-ba]
   handler the clay-to-final slider uses. Nothing new to load. */
.svc-split{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;--pos:50%;
  user-select:none;background:#e8e7e2}
.svc-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mini.svc:hover .svc-split img{transform:scale(1.04)}
.svc-split .after{clip-path:inset(0 0 0 var(--pos))}
/* The divider and the two labels sit above the card's stretched link, so without this
   they swallow clicks on their own strip of the virtual-staging card. Nothing binds
   them; they are decoration. */
.svc-split .sdiv,.svc-split .slab{pointer-events:none}
/* Smaller than the .ba knob: this one sits in a 480px card, not a 1500px block. */
.svc-split .ba-knob{width:38px;height:38px}
.svc-split .ba-knob svg{width:16px;height:16px}
.svc-split .sdiv{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.svc-split .slab{position:absolute;bottom:12px;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.55);backdrop-filter:blur(4px);padding:5px 11px;border-radius:999px;z-index:4}
.svc-split .slab.l{left:12px}.svc-split .slab.r{right:12px}
/* The Animation card plays its own flythrough. object-fit matches the still it
   replaces so the strip keeps one rhythm, and it only ever plays while on screen —
   autoplay on a card nobody has scrolled to is a battery tax with no viewer. */
.mini.svc.svc-video .svc-vid{width:100%;object-fit:cover;display:block;background:var(--ink)}
/* The 360 card carries a live projection, not a photograph. The canvas sits on top of
   the still, which stays as the poster: it is what shows before WebGL is ready, on a
   device that has none, and behind a canvas that never gets to paint. pointer-events
   stay off so the whole card remains one link. */
/* Every card that carries a centred .svc-badge has to be the badge's containing
   block. The pano card declared it and the video card did not: the only rule giving
   it one was `.cardgrid.svc-strip .mini.svc{position:relative}` in build_home.py's
   own CSS, so the badge was correct on the home page and escaped to the GRID on
   every other page, landing at the top of the image instead of its centre. Measured
   on /services/: pano badge 237, play badge 87, both on a 623px card. */
.mini.svc.svc-pano,.mini.svc.svc-video,.mini.svc.svc-plan{position:relative}
/* Top of the card, NOT inset:0. inset:0 stretched the projection over the entire card
   including the title and the copy, which is why the 360 tile looked like a photo with
   text dumped on it. Height comes from the shared aspect rule above, so the canvas and
   the still occupy the same box by construction. */
/* aspect-ratio here, not only in the strip's shared sizing rule. The viewer reads
   cv.clientWidth/clientHeight to set its backing store, so a pano card used outside
   .cardgrid.svc-strip would size the canvas from its own attributes in a feedback
   loop. The component pins its own box. */
.mini.svc.svc-pano .svc-canvas{position:absolute;top:0;left:0;width:100%;height:auto;
  aspect-ratio:3/2;display:block;pointer-events:none;opacity:0;transition:opacity .6s;z-index:1}
.mini.svc.svc-pano .svc-canvas.on{opacity:1}
/* NO `.svc-pano .svc-body{position:relative}` here, and that absence is the fix.
   Every card in this strip is made clickable by `.svc-more::after{position:absolute;
   inset:0}` stretching over the card. `inset` resolves against the nearest POSITIONED
   ancestor, so positioning .svc-body put the hit area over the text block instead of the
   card, and the 360 tile was the only one in the strip you could not click. The canvas
   does not need .svc-body lifted above it: it is top:0/height:auto and never reaches the
   copy. */
.svc-pano .pano-chip{position:absolute;left:12px;top:12px;z-index:3;pointer-events:none;
  padding:5px 10px;border-radius:999px;background:rgba(20,19,16,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

.mini.svc.svc-plan .svc-img{object-fit:contain;background:#f4f2ee;padding:14px}

/* Card badge. Same object as the portfolio's .pbadge: a glass disc centred on the
   media, with the orbit glyph for 360 and a triangle for video. The spin is a hint,
   not information, so it is gated on prefers-reduced-motion; the label and the
   triangle still read with motion off. */
.mini.svc .svc-badge{position:absolute;left:50%;top:0;margin-top:33.333%;transform:translate(-50%,-50%);
  width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  pointer-events:none;z-index:3;background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.7);box-shadow:0 2px 14px rgba(16,15,13,.22);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1;
  transition:background .25s,transform .25s,border-color .25s}
.mini.svc .svc-badge svg{position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.1}
.mini.svc .svc-badge-play b{display:block;width:0;height:0;margin-left:4px;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff}@media(prefers-reduced-motion:no-preference){
  .mini.svc.svc-pano .svc-badge svg{animation:pspin 9s linear infinite}}@keyframes pspin{to{transform:rotate(360deg)}}
.mini.svc:hover .svc-badge{background:rgba(255,255,255,.34);border-color:#fff;
  transform:translate(-50%,-50%) scale(1.06)}@media(max-width:700px){.mini.svc .svc-badge{width:50px;height:50px;font-size:10px}}
/* The video card plays on hover, so the play mark gets out of the way once it does. */
.mini.svc.svc-video.playing .svc-badge{opacity:0}

/* why-us image cards */
.mini.why{padding:0;overflow:hidden}
.mini.why .why-img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.12);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mini.why:hover .why-img{filter:grayscale(0)}
.mini.why .why-body{padding:clamp(22px,2.4vw,30px)}
/* why-us — 4-in-a-row, full-image cards */
.cardgrid.four{grid-template-columns:repeat(4,1fr)}
.cardgrid.four .mini.why h3{font-size:18px}@media(max-width:900px){.cardgrid.four{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.cardgrid.four{grid-template-columns:1fr}}
/* industries — 2-col horizontal ICP cards (circle left, text right) */
.cardgrid.ind{grid-template-columns:repeat(2,1fr)}
.cardgrid.ind .mini.svc{display:flex;flex-direction:row;align-items:center;gap:clamp(18px,2vw,28px);padding:clamp(22px,2.4vw,30px);overflow:visible;text-align:left}
/* Bigger circles and framing lifted toward the faces. CSS can enlarge and reposition
   but cannot crop tighter inside the circle — for a true head-and-shoulders crop the
   six nb-*.png sources need re-cropping. */
.cardgrid.ind .mini.svc .svc-img{flex:0 0 auto;width:clamp(184px,15vw,240px);height:clamp(184px,15vw,240px);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0;display:block}
.cardgrid.ind .mini.svc .svc-body{padding:0;text-align:left;flex:1}
.cardgrid.ind .mini.svc .svc-more{align-self:flex-start;margin-top:12px;padding-top:0}
/* The whole persona card is the link, same stretched-link pattern as the services strip:
   the "Read more" anchor's ::after covers the card, so there is still one link per card. */
.cardgrid.ind .mini.svc{position:relative}
.cardgrid.ind .mini.svc .svc-more::after{content:"";position:absolute;inset:0;z-index:1}@media(max-width:640px){.cardgrid.ind{grid-template-columns:1fr}.cardgrid.ind .mini.svc{flex-direction:column;text-align:center}.cardgrid.ind .mini.svc .svc-body{text-align:center}.cardgrid.ind .mini.svc .svc-more{align-self:center}}@media(max-width:900px){.cardgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.cardgrid,.cardgrid.two{grid-template-columns:1fr}}