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

.trust-img .trust-stats .s .n,.trust-img .trust-geo p,.trust-img .client-rating .rl b{color:#fff}
.trust-img .trust-stats .s .l,.trust-img .trust-geo p.b2{color:rgba(255,255,255,.72)}
.trust-img .client-rating .rl{color:rgba(255,255,255,.82)}
.trust-img .rev-link{color:var(--star);border-bottom-color:rgba(245,166,35,.45)}
.trust-img .clients{border-top-color:rgba(255,255,255,.16)}
.trust-img .hero-avatars .av{--ring:rgba(255,255,255,.72)}
.clients{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,48px);flex-wrap:wrap}
.client-logos{display:flex;align-items:center;gap:clamp(24px,3.4vw,50px);flex-wrap:wrap}
.logo-cell{height:36px;display:flex;align-items:center;justify-content:center}
.logo-cell img{max-height:36px;width:auto;max-width:calc(158px * var(--logo-scale,1));object-fit:contain;filter:grayscale(1) brightness(0) opacity(.5);transition:filter .25s}
/* Review-page client marks are inline SVG (see interior-ref.html TOKVAM_LOGO etc.), not
   <img>, so they need their own copy of the same grey treatment. .client-mark (review-page
   marks only, not the 4 featured ones) drops brightness(0): the featured marks are bold
   simple shapes that survive being forced to pure black, but fine serif wordmarks like FT
   Architects' turn into an illegible grey smear at 36px after that + a 4x downscale --
   grayscale+opacity alone keeps the antialiasing that makes the letterforms read. */
.logo-cell svg{height:36px;width:auto;max-width:calc(158px * var(--logo-scale,1));filter:grayscale(1) brightness(0) opacity(.5)}
/* Uniform grey, and uniform is the whole point: grayscale() maps each mark to a grey
   derived from ITS OWN source colour, so Brookfield (a #407EC9 blue) came out pale and
   Perkins+Will (pure black) came out dark in the same row. brightness(0) flattens every
   mark to black FIRST, so the following step lands them all on the identical grey.
   invert(.6) rather than opacity(.6): opacity makes a black glyph translucent, which
   washes out the half-covered edge pixels of a thin serif wordmark (FT Architects, Oma)
   into an illegible smear. invert leaves the strokes fully opaque at #999. */
.logo-cell.client-mark img,.logo-cell.client-mark svg{filter:brightness(0) invert(.6)}
/* A wordmark 11:1 wide hits max-width long before max-height and ends up 14px
   tall next to a 108px square. Wide marks get the room to reach a readable size. */
/* 200, not 290. At 290 a 11.6:1 wordmark rendered nearly twice the visual width of every
   other mark in the row and read as the client rather than as one of four. Optical size,
   not box size, is what has to match here. */
.logo-cell.wide{height:40px}
.logo-cell.wide img{max-height:40px;max-width:200px}
.logo-cell.sm{height:34px}
.logo-cell.sm img{max-height:34px}
.logo-cell.big{height:78px}
.logo-cell.big img{height:78px;width:78px;max-height:none;max-width:none;object-fit:contain}
.logo-cell.xl{height:108px}
.logo-cell.xl img{height:108px;width:108px;max-height:none;max-width:none;object-fit:contain}
/* No hover on client logos — they are proof, not controls, and the colour flash
   read as an accidental interaction. */
/* rating cluster — now BOTTOM-right of trust band */
.client-rating{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* Repeat business, shown as a proportion. Same job the avatar cluster did — fill the
   right of the row with something dense enough to read as evidence — with the
   difference that this is countable from the client list. */
.client-proof{display:flex;align-items:center;gap:18px;flex-shrink:0}
.cp-dots{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;width:106px;flex:0 0 auto}
.cp-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--hair)}
.cp-dots i.on{background:var(--accent)}
.cp-rc{display:flex;flex-direction:column;line-height:1.15}
.cp-n{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-0.03em}
.cp-n span{color:var(--faint)}
.cp-l{font-size:13.5px;color:var(--muted);font-weight:500;margin-top:5px;max-width:22ch}@media(max-width:900px){.client-proof{width:100%}}

.client-rating .hero-avatars{display:flex}
.client-rating .hero-avatars img{width:42px;height:42px;border-radius:50%;border:2px solid var(--grey);margin-left:-15px;object-fit:cover;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.client-rating .hero-avatars .av{width:42px;height:42px;margin-left:-15px;
  --ring:var(--grey);box-shadow:0 1px 5px rgba(0,0,0,.16)}
.client-rating .hero-avatars .av:first-child{margin-left:0}
.client-rating .hero-avatars img:first-child{margin-left:0}
/* slightly different framing per avatar so the row doesn't look cloned */
.client-rating .rc{display:flex;flex-direction:column;line-height:1.15}
.client-rating .stars{font-size:26px;letter-spacing:.04em;background:linear-gradient(180deg,#FFCB3D 0%,#F79009 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#F5A623}
.client-rating .rl{font-size:14.5px;color:var(--muted);font-weight:500;letter-spacing:.005em;margin-top:4px}
.client-rating .rl b{color:var(--ink);font-weight:800;font-family:var(--disp)}
.client-rating .rev-link{color:var(--gold);font-weight:700;border-bottom:1px solid rgba(178,138,87,.4)}
.client-rating .rev-link:hover{border-color:var(--gold)}
/* SAI membership after the rating (pages/_trust.py MEMBER; London only, 14 Oct 2026). A hairline
   separates it from the rating; on a phone it drops under the rating instead of squeezing it. */
.client-rating .trust-member{display:inline-flex;align-items:center;gap:10px;margin-left:6px;padding-left:22px;
  border-left:1px solid var(--hair);color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.35;text-decoration:none}
.client-rating .trust-member img{height:34px;width:auto;flex:none}
.client-rating .trust-member span{max-width:22ch}
.client-rating .trust-member:hover,.client-rating .trust-member:focus-visible{color:var(--ink)}
.trust-img .client-rating .trust-member{border-left-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82)}
.trust-img .client-rating .trust-member img{filter:brightness(0) invert(1)}@media(max-width:700px){
  .client-rating:has(.trust-member){flex-wrap:wrap;row-gap:14px}
  .client-rating .trust-member{margin-left:0;padding-left:0;border-left:0;flex-basis:100%}}
/* "Clutch" links to the Clutch profile but stays the surrounding grey (Siim, 27 Sep): the
   visible link in this line is "See our reviews"; two styled links would compete. */
.clutch-link{color:inherit;text-decoration:none}
/* Yellow on hover like the rating block around it, not the red link hover (Siim, 27 Sep). */
.clutch-link:hover,.clutch-link:focus-visible{color:#E8950C!important;text-decoration:underline;text-underline-offset:3px}@media(max-width:900px){
  .trust-top{flex-direction:column;align-items:flex-start;gap:22px}
  .trust-geo.right{text-align:left}
  /* These scroll horizontally; at 100% width their right edge was cut off inside
     .wrap's padding. Bleed the track, put the gutter back as padding. */
  .trust-stats,.client-logos,.client-rating{width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .trust-stats{flex-wrap:nowrap;overflow-x:auto;gap:30px;-webkit-overflow-scrolling:touch}
  .trust-stats .s{flex:0 0 auto}
  .clients{flex-direction:column;align-items:flex-start;gap:22px}
  .client-logos{flex-wrap:nowrap;overflow-x:auto;gap:30px;-webkit-overflow-scrolling:touch}
  .client-logos .logo-cell{flex:0 0 auto}
  .client-rating{flex-wrap:nowrap;overflow-x:auto;gap:14px}
  .client-rating .hero-avatars,.client-rating .rc{flex:0 0 auto}
  .client-rating .rl{white-space:nowrap}}@media(max-width:480px){.client-rating .hero-avatars img{width:40px;height:40px;margin-left:-11px}
.client-rating .hero-avatars .av{width:40px;height:40px;margin-left:-11px}.trust-stats .s .n{font-size:21px}}

/* SECTION scaffolding */
/* Bare `section` is the one generic selector in here that reaches content this
   theme does not own: an Elementor popup renders <section class="elementor-section">
   INSIDE our page, so this rule was adding 128px of padding above and below every
   row of the quote popup — the "huge empty spaces" on the conversion path. */
section:not([class*="elementor"]){padding-block:clamp(62px,7.6vw,100px)}
.bg-white{background:var(--white)}
.bg-grey{background:var(--grey)}
.sec-head{max-width:740px;margin:0 auto clamp(46px,6vw,74px);text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(33px,4.3vw,53px);font-weight:650;margin-bottom:18px;letter-spacing:-0.024em;line-height:1.05}
.sec-head p{color:var(--muted);font-size:18px;line-height:1.6}

/* WHAT IS */
/* Image column runs to the viewport edge; the copy column keeps --gut.
   The bleed sits on the ROW (a direct child of .wrap) — never on the media,
   where 50% would resolve against the grid column instead of the page. */
.whatis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.5vw,80px);align-items:stretch;width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2);padding-left:var(--edge)}
.whatis-grid+.whatis-grid{margin-top:clamp(40px,5vw,66px)}
.whatis-grid.rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-left:0;padding-right:var(--edge)}
.whatis-copy{align-self:center;max-width:var(--measure);min-width:0}
.whatis-copy .lead{font-size:20px;color:var(--ink);font-weight:600;line-height:1.5;letter-spacing:-0.01em;margin-bottom:20px}
.whatis-copy p{color:var(--body);line-height:1.66;font-size:16.5px;margin-bottom:16px}
.whatis-copy h3{font-size:19px;font-weight:700;letter-spacing:-0.015em;margin:26px 0 8px}
.whatis-media{position:relative;border-radius:0;overflow:hidden;min-height:clamp(320px,32vw,480px)}
/* A/B: rounded INNER corners only. The edge that touches the viewport stays square —
   rounding that side would read as a rendering fault rather than a design choice. */
/* Justified body copy A/B. Never justify without hyphens:auto — unhyphenated
   justification stretches word spacing and opens vertical rivers, which is why the
   default here stays ragged-right. Headings are left out entirely. */
body.just .whatis-copy p,body.just .b-txt p,body.just .case-copy p,body.just .hero-sub,
body.just .craft-col p,body.just .mini.svc p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}@media(max-width:700px){body.just .whatis-copy p,body.just .b-txt p,body.just .case-copy p,
body.just .hero-sub,body.just .craft-col p,body.just .mini.svc p{text-align:left}}
body.inner-round .whatis-grid .whatis-media{border-radius:0 14px 14px 0}