/* components part 2 of 13 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:1040px){
  .hero-row{grid-template-columns:minmax(0,1fr);gap:0}
  .hero h1{max-width:none}
  .hero-txt{display:contents}
  /* Phone order is eyebrow, IMAGE, H1. The eyebrow doubles as the breadcrumb/
   category label, so keeping it above the image tells the visitor what page they
   are on before the visual lands — then the render does the selling and the H1
   names it. This is the common pattern on premium service pages, and it costs
   nothing in SEO: the H1 is still the first heading in the DOM. */
  /* Phone: media first, then the breadcrumb, then the H1. The image sells, the
     breadcrumb says where you are, the heading names it. */
  .hero-media{order:1;margin-bottom:14px}
  .hero-txt>.eyebrow{order:2;padding-inline:var(--gut);margin:0 0 10px;display:flex}
  .hero-txt>h1{order:3;padding-inline:var(--gut);margin:2px 0 14px}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:16/10;height:auto;min-height:0;border-radius:0}
  .hero-txt>.hero-sub{order:4;padding-inline:var(--gut);margin-bottom:14px}
  .hero-txt>.checks{order:5;padding-inline:var(--gut);margin-bottom:16px;max-width:none}
  .hero-txt>.hero-btns{order:6;padding-inline:var(--gut)}
  .hero-txt>.hero-scarce{order:7;padding-inline:var(--gut);margin:10px 0 26px}}@media(max-width:700px){
  .hero h1{font-size:34px;letter-spacing:-0.024em}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:2/1}
  .hero-txt>.eyebrow{margin:12px 0 2px}
  .hero-txt>h1{margin:2px 0 12px}
  .hero-media{margin-bottom:14px}
  .hero-txt>.hero-sub{margin-bottom:12px;font-size:16px;line-height:1.55}
  .checks{gap:8px}
  .checks li{font-size:14.5px;line-height:1.45}
  .hero-txt>.checks{margin-bottom:14px}}@media(max-width:700px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%;justify-content:center}}

/* HERO checks + check-style variants */
.checks{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.checks li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.checks li [data-proof]{display:contents}
.btn [data-proof]{display:contents}
.checks .ci{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s}
.checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci{background:transparent;border:0}
body.chk-bold .checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci svg path{stroke-width:3.4}
body.chk-fill .checks .ci{background:var(--ink);border:0}
body.chk-fill .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-fill .checks .ci svg path{stroke-width:3}
body.chk-outline .checks .ci{background:transparent;border:1.5px solid var(--faint)}
body.chk-outline .checks .ci svg{width:11px;height:11px;color:var(--ink)}
body.chk-outline .checks .ci svg path{stroke-width:2.4}
body.chk-grey .checks .ci{background:#c7c5c0;border:0}
body.chk-grey .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-grey .checks .ci svg path{stroke-width:3}

/* BEFORE/AFTER SLIDER */
.ba{position:relative;width:100%;overflow:hidden;--pos:52%;background:#e8e7e2;user-select:none;aspect-ratio:4/3}
.ba.block{aspect-ratio:16/9;max-height:78vh}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:3}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 18px rgba(0,0,0,.28);pointer-events:none;z-index:4}
.ba-knob svg{width:20px;height:20px;color:var(--accent)}
.ba-tag{position:absolute;bottom:18px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.5);backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px;z-index:3;pointer-events:none}
.ba-tag.l{left:18px}.ba-tag.r{right:18px}

/* TRUST BAND — hero-width, no edge outlines, single middle divider */
.trust{background:var(--grey)}
.trust .wrap-wide{padding-block:34px}
.tst-trust .trust-stats{justify-content:center}
.trust-top{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.trust-stats{display:flex;gap:clamp(28px,3.4vw,48px)}
.trust-stats .s .n{font-family:var(--disp);font-size:24px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em}
.trust-stats .s .l{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.trust-geo{padding-left:0}
.trust-geo.right{text-align:right}
.trust-geo p{font-size:17.5px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1.5;margin-bottom:0}
.trust-geo p.b1{font-weight:700}
.trust-geo p.b2{color:var(--muted);font-weight:500;margin-top:4px}
.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:46px;height:46px;border-radius:50%;border:2px solid var(--grey);margin-left:-12px;object-fit:cover;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.client-rating .hero-avatars .av{width:46px;height:46px;margin-left:-12px;
  --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(--accent);font-weight:700;border-bottom:1px solid rgba(178,138,87,.4)}
.client-rating .rev-link:hover{border-color:var(--accent)}