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


/* The why-us trio. The icon is the page's own .di line style, not a second visual
   language imported from elsewhere — same stroke, same weight, same accent as the
   discipline cards two sections down. */
/* The icon sits ON the title line rather than above it. Stacked, it cost a whole line of
   vertical space per card for no added meaning, and at 26px it read as an afterthought. */
/* The floor-plan card is the one image on the strip that must not be cropped. Every other
   frame is a photograph where a cover-crop is invisible; a plan cropped at the edges stops
   reading as a plan and blends into the photographs either side of it. object-fit:contain
   on a pale ground keeps the whole plan visible with margin around it. */
/* 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 STRIP, ON THE FOOTAGE.
   Same markup as the service pages' .clients row; only the ground changes, so type and
   logos invert rather than the component being forked. The hairline that used to sit
   above it is gone: on a photograph a 1px rule reads as a seam, and the gap already
   does the separating. */
/* The scrim used to stop at the fold and the logo row sat on raw footage, which is why
   the marks and the two lines of copy were hard to read. It continues here and reaches
   SOLID --ink by the bottom, so the strip ends on a flat colour and the section below
   starts cleanly. Padding is tight on purpose: the dark space after the logos was doing
   nothing. */
.h-strip{position:relative;z-index:2;padding:clamp(10px,1.4vh,18px) 0 clamp(14px,1.8vh,24px);
  background:linear-gradient(180deg,rgba(20,19,16,.92) 0%,var(--ink) 62%,var(--ink) 100%)}
.h-strip .clients{margin:0;padding:0;border-top:0;padding-inline:var(--edge);max-width:none;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(22px,4vw,48px);flex-wrap:wrap}
/* The marks are dark SVGs dimmed with brightness(0); on the video they must invert or
   they disappear into it. */
.h-strip .logo-cell img{filter:brightness(0) invert(1) opacity(.72)}
.h-strip .trust-geo{line-height:1.35}
.h-strip .trust-geo .b1{color:#fff;margin-bottom:2px}
.h-strip .trust-geo .b2{color:rgba(255,255,255,.72)}@media(max-width:860px){
  .h-strip{padding:20px 0 26px}
  .h-strip .clients{flex-direction:column;align-items:flex-start;gap:20px}}

/* THE PROOF BAND, RIDING THE HERO.
   The numbers and the rating used to open the page immediately below the hero, which
   meant the first thing after a full-height video was a quiet white strip. Pinned to
   the bottom of the hero they land in the same glance as the headline and the CTA, and
   the section below is left carrying only the client logos.
   It sits ON the video, so it needs its own scrim and light type; the shared .trust
   styles assume a white ground, and are overridden here rather than forked. */
/* The band sits ON the fold, so its bottom padding IS the gap between the last thing
   above the fold and the bottom of the window. At clamp(10,1.4vh,18) the stats and the
   rating were nearly touching the edge of the screen. */
.h-proof{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 clamp(22px,3.2vh,44px);
  background:linear-gradient(0deg,rgba(20,19,16,.92),rgba(20,19,16,.62) 60%,transparent);
  pointer-events:none}
/* var(--edge), not a clamp of its own. The header bar, the H1, the subtext and the CTA
   all sit on --edge; the band was using clamp(16px,2.2vw,34px), which put it 36px
   further left than everything above it at 1280. Same variable = same left edge at
   every width, including the wide screens where --edge starts tracking the 1560 column. */
.h-proof .trust-top{pointer-events:auto;padding-inline:var(--edge);
  display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(16px,3vw,48px);flex-wrap:wrap;
  border:0;padding-block:0}
.h-proof .trust-stats{gap:clamp(20px,3vw,54px)}
.h-proof .trust-stats .n{color:#fff}
.h-proof .trust-stats .l{color:rgba(255,255,255,.72)}
.h-proof .client-rating{margin:0}
.h-proof .client-rating .rl{color:rgba(255,255,255,.82)}
.h-proof .client-rating .rl b{color:#fff}
.h-proof .hero-avatars .av{--ring:rgba(255,255,255,.72)}@media(max-width:860px){
  /* margin-top:auto glues the band to the bottom of the hero. The hero is a column flex
     box with justify-content:center, so a static band was centred WITH the copy and left
     a 31px strip of bare video under it: on a phone the block floated above the fold
     instead of sitting on it the way it does on desktop. The auto margin wins over the
     centring for this one child, so it stays in flow (no chance of covering the CTA) and
     still lands exactly on the fold. */
  .h-proof{position:static;margin-top:auto;padding:20px 0 26px;
    background:linear-gradient(0deg,rgba(20,19,16,.72),rgba(20,19,16,.34))}
  .h-proof .trust-top{flex-direction:column;align-items:flex-start;gap:16px}}

/* 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. */
.mini.svc.svc-pano{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}

.mini.svc .svc-body h3{display:flex;align-items:center;gap:11px}
.mini.svc .svc-body h3 .di{width:34px;height:34px;flex:0 0 34px;color:var(--accent);margin:0}
/* Stretched link: the card is a <div> so it can hold the "Read more" anchor, but the whole
   card is still one click target. position on the card, a covering pseudo-element on the
   link — the standard pattern, and it keeps exactly one link in the accessibility tree. */
.cardgrid.svc-strip .mini.svc{position:relative}
.cardgrid.svc-strip .mini.svc .svc-more::after{content:"";position:absolute;inset:0;z-index:1}
.why3 .svc-body{padding:22px clamp(20px,2.2vw,26px) clamp(24px,2.6vw,30px)}
/* The trio carries a graphic now, not just an icon. Deliberately illustration rather than
   photography: this section sits directly under the nine-frame gallery and the six persona
   portraits, and a fourth run of photographs there would blur into the two above it. Same
   3:2 as the service cards so the two picture grids agree. */
.why3-grid .mini.why3{padding:0;overflow:hidden;display:flex;flex-direction:column}
.why3 .svc-img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--grey)}@media(max-width:700px){
  .cardgrid.three{grid-template-columns:none!important;grid-auto-flow:column;
    grid-auto-columns:78%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding-bottom:12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cardgrid.three::-webkit-scrollbar{display:none}
  .cardgrid.three > .mini{scroll-snap-align:start}}
.why3 .di{width:30px;height:30px;color:var(--accent);margin-bottom:14px;display:block}

/* ------------------------------------------------------------------ why / media */
.band-3-full .b-overlay .eyebrow{color:var(--accent)}