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

/* 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:38%;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}@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}}@media(max-width:900px){
  .cardgrid.svc-strip{grid-template-columns:repeat(2,1fr)}
  .cardgrid.svc-strip .mini.svc:nth-child(3n+1) .svc-body,
  .cardgrid.svc-strip .mini.svc:nth-child(3n) .svc-body{padding-inline:clamp(20px,2.6vw,34px)}
  .cardgrid.svc-strip .mini.svc:nth-child(2n+1) .svc-body{padding-left:var(--gut)}
  .cardgrid.svc-strip .mini.svc:nth-child(2n) .svc-body{padding-right:var(--gut)}}@media(max-width:560px){
  .cardgrid.svc-strip .mini.svc .svc-body{padding-block:16px 22px}
  .cardgrid.svc-strip .mini.svc h3{font-size:16px}
  .cardgrid.svc-strip .mini.svc p{font-size:15.5px}}

/* CRAFT */
/* One continuous 3-image strip across the full viewport: the box loses its side
   borders and radius, the columns lose their padding (moved to .cc-body), so the
   images abut at 0px. .craft-cols already has gap:0. */
.craft-box{border:1px solid var(--hair);border-inline:0;border-radius:0;overflow:hidden;background:var(--white);width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
.craft-grid{display:block}
.craft-copy{padding:clamp(30px,4vw,54px)}
.craft-copy .lead{font-size:20px;color:var(--ink);line-height:1.5;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px}
.craft-copy .cblock{margin-top:32px;padding-top:28px;border-top:1px solid var(--hair);cursor:default}
.craft-copy .cicon{width:40px;height:40px;border-radius:10px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px;transition:.25s}
.craft-copy .cblock:hover .cicon{background:var(--wash-lt)}
.craft-copy .cicon svg{width:21px;height:21px}
.craft-copy h3{font-size:20px;font-weight:700;margin-top:0;letter-spacing:-0.02em;margin-bottom:9px}
.craft-copy p{color:var(--body);line-height:1.66;font-size:16px}
.craft-media-legacy{background:var(--grey)}
/* craft — 3 columns, each with its own image */
.craft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.craft-col{padding:0;border-right:0}
/* Equal-width text under the strip: uniform padding on every column, so the outer
   two are not squeezed by an --edge inset while the middle stays wide. The vertical
   rules are gone — they ran on past the copy into the spec row below. */
.craft-col .cc-body{padding:clamp(30px,3.4vw,44px) clamp(24px,2.8vw,40px);height:100%;max-width:var(--measure);margin-inline:auto;width:100%}
/* Third column's block is right-oriented, but its icon and heading stay left-aligned
   like the other two so the row still reads as one system. */
.craft-col:last-child .cc-body{margin-left:auto;margin-right:0}
.craft-col .cc-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;margin-bottom:0;display:block}
.craft-col .cicon{width:40px;height:40px;border-radius:10px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:15px;transition:.25s}
.craft-col:hover .cicon{background:var(--wash-lt)}
.craft-col .cicon svg{width:21px;height:21px}
.craft-col h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:9px}