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

/* A real button closing a big-icon card (/contact/ "Send us a message", 29 Sep): pinned to
   the bottom like .svc-more. :not(.plans) leaves the pricing cards' own spacing alone. */
.cardgrid:not(.plans) .mini.big-ic .guide-form{margin-top:auto;padding-top:20px}
/* 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}
.svc-split .after{clip-path:inset(0 0 0 var(--pos))}
.svc-split video.after-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;pointer-events:none}
.svc-split video.after-v.on{opacity:1}
/* 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}}@media(min-width:1px){
  .cardgrid.svc-strip{grid-template-columns:repeat(3,1fr);gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
  .cardgrid.svc-strip .mini{border:0;border-radius:0;background:none;padding:0}
  /* No hover on the services strip: they are content, not controls. */
.cardgrid.svc-strip .mini:hover{transform:none}
.cardgrid.svc-strip .mini.svc .svc-img,.cardgrid.svc-strip .svc-split{transition:none}
.cardgrid.svc-strip .mini:hover .svc-img,.cardgrid.svc-strip .mini:hover .svc-split{transform:none;filter:none}
  /* .svc-canvas rides in this selector on purpose: the live 360 projection has to sit
   exactly on top of the still it replaces, and if the two aspect ratios are declared
   separately they drift the moment one is changed. */
.cardgrid.svc-strip .mini.svc .svc-img,.cardgrid.svc-strip .mini.svc .svc-canvas,.cardgrid.svc-strip .svc-split{aspect-ratio:3/2;border-radius:0}
  .cardgrid.svc-strip .mini.svc .svc-body{padding:clamp(26px,3vw,38px) clamp(24px,2.8vw,40px) clamp(34px,3.6vw,46px)}
  .cardgrid.svc-strip .mini.svc p{max-width:52ch}
  /* outer cells align their copy with the header line, not the raw viewport */
  /* Uniform padding on every cell — an --edge inset here is measured against the
     viewport but applied inside a 1/3-width cell, so on ultrawide it exceeded the
     cell and crushed the outer columns to one word per line. */
  .cardgrid.svc-strip .mini.svc .svc-body{max-width:var(--measure);margin-inline:auto;width:100%}
  .cardgrid.svc-strip .mini.svc p{max-width:46ch}}
/* Persona photos (site/industries/) are portraits with the face in the upper third, so a
   3:2 card crops them from near the top rather than the middle. */
.mini.svc .svc-img[src*="/site/industries/"]{object-position:50% 22%}@media(min-width:901px){.cardgrid.svc-strip .mini.svc.mob-only{display:none}}