/* =====================================================================
   HOME — "What We Actually Do"
   =====================================================================
   A dark slate band: heading on the left, four cards, a handwritten note on
   the right. Built from the owner's comp, measured off it at 3x. The light
   surfaces (the paper cards and the torn edge) are white, not cream, at the
   owner's request.

   WHAT MAKES IT READ LIKE THE DESIGN — keep all of these:

   - The cards are PIECES OF PAPER AND STONE, not tiles: a real texture, an
     edge that wobbles very slightly, softly rounded corners, a drop shadow,
     and a different small tilt on each. Not a zig-zag — the comp's edges are
     nearly straight. Card 01 alone is ripped, at its top-right corner, and its
     bottom-right corner has crumbled away to plaster.
   - The tones alternate: paper, slate, paper, slate.
   - There is NO image band. The number, the title, a short orange rule, the
     text and the arrow run down the left; each card's objects sit in its
     top-right and are free to cross the card's edge — the leaf comes in over
     card 01's torn corner, card 02's sprig hangs off its foot.
   - Everything inside a card is sized in cqw (percent of the card's own
     width), so the composition holds together at any card size instead of
     the type outgrowing the art or the reverse.

   The objects are cut out on the server (inc/cutouts.php): they arrive with
   transparency, so they sit on paper and on slate alike.

   Scoped to .bld / .bcard: nothing here can reach the hero, the trust band or
   the other 56 pages.
   ===================================================================== */

.bld{
	--bld-ink:#1B1A18;
	--bld-cream:#FFFFFF;
	--bld-orange:#F2600C;
	--bld-display:'Archivo','Space Grotesk','Inter',system-ui,sans-serif;
	--bld-body:'DM Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--bld-hand:'Caveat','Segoe Script',cursive;
/* Edge masks — generated by _masks.py (fixed seed), see its docstring. */
	--m-card1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M2.20 0.55 L6.34 1.07 L10.26 0.61 L14.47 0.25 L18.50 0.74 L23.20 0.15 L26.73 0.15 L31.47 0.81 L34.37 1.13 L39.49 0.77 L43.77 0.22 L46.60 0.63 L49.55 0.26 L52.93 0.08 L56.84 0.53 L58.00 0.40 L61.00 2.60 L63.50 1.80 L66.00 5.20 L69.00 4.10 L72.00 8.30 L75.00 7.00 L78.00 11.60 L81.00 10.20 L84.00 14.80 L87.00 13.40 L90.00 18.20 L93.00 16.90 L96.00 21.50 L99.40 22.50 L99.42 22.50 L99.40 26.84 L99.35 31.23 L99.95 34.69 L99.77 39.88 L99.20 44.38 L99.17 47.73 L99.69 50.70 L99.78 54.46 L99.90 58.19 L98.85 63.02 L99.85 66.33 L99.93 70.26 L98.93 74.01 L99.71 78.32 L98.95 81.77 L99.91 85.37 L98.98 89.99 L98.96 93.38 L99.73 96.32 L99.34 99.34 L97.80 99.47 L93.93 99.06 L89.37 98.99 L85.02 98.98 L81.21 99.08 L77.77 99.92 L73.04 99.18 L68.12 99.08 L64.37 99.79 L60.03 98.96 L54.85 99.08 L51.43 99.70 L47.85 99.18 L44.87 98.95 L40.67 99.12 L36.43 99.26 L32.54 99.91 L28.58 99.48 L23.70 99.05 L20.53 99.85 L15.77 99.12 L12.51 99.66 L7.45 99.07 L2.37 99.82 L0.66 99.34 L0.51 97.80 L0.09 94.75 L0.31 89.64 L0.33 85.15 L0.71 80.37 L0.24 76.87 L0.13 72.34 L0.67 68.99 L0.73 64.15 L1.06 60.67 L0.07 57.38 L0.54 53.94 L0.24 50.99 L0.68 47.31 L0.45 44.19 L1.13 39.25 L0.81 34.88 L0.20 30.67 L0.07 27.79 L0.82 22.81 L0.07 17.69 L0.58 13.37 L0.40 8.81 L0.13 3.62 L0.66 0.66 Z' fill='black'/></svg>");
	--m-card2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M2.20 1.10 L5.34 0.08 L10.53 0.25 L13.62 0.77 L17.25 1.03 L20.61 1.11 L24.18 0.71 L29.21 0.80 L34.23 0.83 L37.15 1.02 L41.36 0.39 L44.62 0.98 L48.82 1.08 L53.47 1.11 L57.63 0.82 L61.90 0.33 L67.00 0.39 L71.67 1.10 L76.04 0.21 L80.82 0.78 L84.06 0.10 L88.14 0.09 L93.16 0.61 L97.20 0.50 L99.34 0.66 L99.86 2.20 L99.26 5.74 L99.18 9.94 L99.45 14.17 L99.59 18.01 L98.95 22.07 L99.24 27.26 L99.29 31.10 L99.90 36.13 L99.29 40.16 L99.84 43.19 L99.45 46.40 L99.21 50.04 L99.06 53.70 L99.44 56.59 L99.56 61.30 L99.61 64.58 L99.30 67.51 L99.86 72.29 L99.78 76.20 L99.43 80.20 L99.94 84.40 L99.37 88.98 L99.56 93.53 L99.71 97.18 L99.34 99.34 L97.80 99.52 L92.74 98.87 L88.74 99.55 L85.12 99.04 L80.66 99.33 L77.21 98.90 L72.09 99.24 L69.01 99.09 L65.60 99.80 L62.36 99.15 L59.33 99.37 L56.03 99.23 L51.47 99.87 L46.67 98.89 L42.96 99.78 L40.08 99.07 L36.10 99.27 L31.50 99.64 L27.59 99.12 L24.23 99.14 L21.28 99.58 L18.10 99.83 L13.75 98.91 L9.75 99.51 L6.85 99.39 L3.98 99.69 L0.66 99.34 L0.75 97.80 L0.98 92.63 L0.64 89.27 L0.43 86.14 L0.95 81.27 L0.47 78.44 L0.24 74.11 L1.03 69.38 L0.45 65.26 L0.61 60.42 L0.36 57.17 L0.97 53.99 L0.82 49.96 L1.12 45.20 L0.50 41.94 L0.89 37.05 L0.77 33.32 L0.23 30.05 L0.47 27.13 L0.62 23.76 L0.22 18.64 L1.00 14.50 L0.63 10.26 L0.07 5.62 L0.66 0.66 Z' fill='black'/></svg>");
	--m-card3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M2.20 0.68 L6.52 0.95 L9.98 0.77 L14.92 1.05 L18.17 0.77 L22.45 0.60 L27.57 0.63 L31.44 1.09 L35.76 0.38 L39.30 0.60 L42.23 0.72 L46.80 0.52 L51.63 1.07 L55.76 0.80 L58.84 0.11 L64.00 0.36 L67.31 1.04 L71.91 0.19 L75.48 0.32 L78.93 0.06 L82.99 0.38 L86.74 0.25 L89.80 0.09 L94.70 0.87 L99.34 0.66 L98.99 2.20 L98.98 5.36 L98.91 8.92 L99.07 12.38 L99.57 15.64 L99.37 19.54 L99.44 23.20 L99.19 27.88 L99.38 30.85 L99.71 34.56 L99.81 37.63 L99.45 40.46 L99.20 44.33 L99.62 49.26 L99.39 52.45 L98.89 56.72 L99.51 59.73 L99.36 64.28 L99.41 68.10 L99.81 71.52 L99.38 76.63 L99.29 79.48 L99.21 84.21 L99.05 87.26 L99.53 91.77 L99.54 95.26 L99.34 99.34 L97.80 99.91 L93.00 99.33 L88.26 99.87 L83.38 99.68 L79.17 99.41 L74.33 99.54 L69.80 99.10 L66.78 99.15 L62.58 99.48 L59.30 99.06 L54.22 98.93 L49.20 99.70 L45.02 99.95 L40.59 98.86 L35.53 99.30 L30.53 99.75 L27.40 98.89 L24.55 99.71 L19.85 99.10 L16.78 99.25 L12.06 99.66 L7.18 99.91 L2.57 99.77 L0.66 99.34 L0.06 97.80 L0.73 92.93 L0.19 89.35 L0.42 85.75 L0.54 81.76 L0.14 78.47 L0.19 75.19 L0.51 72.14 L0.93 69.03 L0.56 64.92 L0.31 60.59 L0.14 57.73 L0.45 54.13 L0.39 50.72 L0.06 45.92 L0.47 42.04 L0.85 38.56 L0.10 35.23 L1.13 32.04 L0.18 28.41 L0.76 23.28 L0.41 18.19 L0.10 13.44 L0.92 10.07 L0.92 6.03 L1.01 2.31 L0.66 0.66 Z' fill='black'/></svg>");
	--m-card4:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M2.20 0.50 L6.30 1.00 L9.52 0.30 L12.39 0.18 L15.22 0.22 L19.25 1.14 L23.71 0.47 L27.49 0.81 L31.07 0.13 L35.89 0.73 L38.96 0.13 L41.98 1.10 L45.04 0.74 L50.17 0.09 L53.90 0.58 L58.90 0.26 L62.32 0.32 L65.23 0.79 L69.99 0.53 L72.88 0.83 L77.45 0.77 L81.04 0.96 L85.36 0.70 L89.45 0.31 L93.35 0.92 L97.79 0.43 L99.34 0.66 L99.77 2.20 L99.02 5.10 L98.87 8.44 L99.56 13.05 L99.94 17.15 L99.07 20.81 L99.22 23.88 L99.52 28.69 L99.33 31.63 L99.54 34.54 L99.05 37.64 L99.77 41.98 L99.17 46.27 L99.15 50.62 L99.15 53.43 L99.54 57.88 L99.77 61.15 L99.16 65.94 L99.14 71.05 L99.41 74.00 L99.51 78.88 L99.39 82.99 L99.18 86.47 L99.45 90.24 L98.93 95.30 L99.34 99.34 L97.80 99.89 L93.42 98.93 L89.56 99.57 L84.57 98.94 L79.61 99.70 L76.14 99.44 L71.36 99.12 L66.88 99.47 L63.90 99.15 L60.11 99.00 L55.05 99.13 L51.69 99.51 L47.62 99.20 L44.04 99.40 L39.06 98.94 L34.07 99.88 L29.63 99.73 L25.91 99.91 L21.33 99.61 L17.45 99.09 L12.99 99.66 L10.18 99.19 L6.10 99.08 L2.99 99.06 L0.66 99.34 L0.18 97.80 L0.60 94.06 L0.39 89.73 L1.06 86.62 L0.80 82.30 L0.40 77.85 L0.40 73.63 L0.95 69.26 L0.93 66.42 L0.07 63.34 L0.67 60.36 L1.07 55.50 L0.52 52.32 L1.03 47.26 L0.32 42.48 L0.21 39.02 L0.50 35.59 L0.78 30.87 L0.25 27.66 L1.03 23.78 L0.92 19.85 L1.02 15.39 L0.47 11.40 L0.93 7.50 L0.26 4.03 L0.66 0.66 Z' fill='black'/></svg>");
	--m-tear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 0.0 L1000.0 0.0 L1000.0 52.1 L993.1 53.7 L993.1 46.7 L988.0 46.9 L984.9 50.0 L980.3 47.0 L980.2 49.8 L978.5 66.1 L976.3 40.2 L971.7 42.7 L970.9 42.7 L957.7 47.9 L956.5 44.0 L955.0 48.5 L953.1 53.9 L951.0 50.6 L947.7 51.0 L946.8 54.7 L944.7 56.8 L937.0 56.4 L909.8 45.7 L904.9 65.6 L900.3 51.8 L899.5 51.2 L884.2 56.3 L883.4 53.6 L875.5 59.8 L875.1 54.9 L874.5 49.7 L874.3 47.9 L871.4 42.6 L864.0 41.0 L863.3 51.7 L858.5 41.8 L852.6 41.4 L848.9 51.0 L840.4 49.5 L840.0 66.1 L828.9 43.2 L826.9 50.9 L826.5 46.7 L821.9 48.4 L819.3 50.4 L818.3 49.5 L816.1 44.8 L811.5 45.6 L806.5 46.0 L806.1 40.9 L800.8 44.5 L799.6 41.0 L797.9 42.6 L794.4 44.2 L789.1 44.1 L782.3 45.3 L780.0 43.4 L779.1 61.4 L771.9 38.2 L768.2 48.2 L764.6 41.6 L757.1 41.3 L750.1 47.5 L739.9 42.2 L729.4 61.1 L724.8 44.4 L701.5 40.6 L699.0 56.1 L696.2 39.9 L695.3 45.8 L692.5 49.3 L690.5 49.4 L680.4 72.4 L676.2 51.2 L668.7 48.6 L668.2 54.2 L664.2 53.7 L660.6 55.0 L657.3 45.8 L653.0 49.1 L650.9 48.5 L649.7 42.9 L647.1 49.3 L638.9 46.2 L634.3 44.2 L627.4 47.0 L624.1 52.6 L617.6 53.3 L614.1 68.9 L594.4 51.6 L589.1 62.5 L585.6 52.3 L581.6 48.8 L579.9 44.8 L577.1 50.4 L574.4 42.7 L573.0 46.8 L566.3 49.4 L549.4 43.2 L548.7 46.5 L547.7 53.1 L543.2 51.0 L535.9 39.7 L532.6 42.8 L528.3 42.4 L528.1 43.5 L525.2 43.7 L517.6 42.2 L515.5 48.6 L507.4 43.2 L489.0 37.8 L485.0 45.0 L483.8 40.8 L479.5 45.2 L478.0 45.7 L474.1 48.7 L466.0 47.1 L461.7 48.6 L456.2 48.1 L453.2 43.4 L449.2 51.3 L447.2 46.5 L433.6 44.5 L427.6 49.2 L424.5 47.7 L418.9 41.2 L418.1 40.8 L415.3 39.2 L401.4 47.5 L399.0 45.4 L396.7 40.6 L395.8 45.1 L392.4 52.5 L390.9 45.2 L385.8 51.3 L372.4 68.1 L369.3 52.1 L366.7 47.1 L365.7 53.5 L364.6 44.6 L364.2 49.9 L363.6 51.1 L358.8 73.0 L355.6 50.9 L350.4 42.5 L347.4 49.0 L342.6 44.6 L340.1 41.7 L332.5 39.7 L329.7 47.2 L323.8 43.7 L314.1 51.5 L313.7 46.0 L308.5 43.6 L299.8 64.8 L289.6 50.0 L287.9 52.6 L284.6 52.1 L279.4 47.7 L278.4 49.8 L264.8 48.1 L262.7 51.3 L261.1 46.1 L259.2 62.0 L252.3 52.9 L247.6 55.2 L244.1 46.2 L233.3 46.3 L232.0 48.1 L226.8 42.2 L226.7 50.0 L223.2 46.9 L223.0 54.4 L220.5 47.5 L208.8 47.9 L206.0 48.8 L204.4 71.1 L196.7 53.9 L180.7 55.0 L178.5 53.3 L176.2 49.3 L170.0 41.4 L168.0 50.4 L167.0 43.2 L162.3 53.3 L161.4 46.7 L152.0 47.6 L151.3 54.6 L151.2 50.2 L150.9 69.0 L150.8 63.6 L148.6 49.7 L146.6 57.7 L146.2 45.8 L144.3 50.2 L131.0 50.7 L129.3 54.2 L127.0 50.9 L123.8 47.2 L122.8 43.9 L118.1 47.5 L117.8 42.6 L117.1 42.0 L103.5 50.6 L102.2 49.2 L101.5 45.4 L90.7 43.8 L85.9 51.3 L84.8 49.6 L80.6 55.7 L72.4 52.7 L69.9 46.9 L67.3 48.9 L62.8 41.5 L62.2 44.7 L60.7 48.2 L59.6 39.3 L59.0 45.4 L58.0 44.3 L54.0 40.3 L52.6 42.4 L46.6 45.6 L39.2 39.6 L37.5 36.9 L29.0 44.9 L27.9 45.4 L27.0 43.2 L25.5 42.9 L23.1 46.0 L22.6 45.0 L14.2 42.5 L4.1 44.1 L0.2 54.4 L0.0 50.5 Z' fill='black'/></svg>");
	--m-fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 0.0 L1000.0 0.0 L1000.0 66.1 L993.1 67.7 L993.1 60.7 L988.0 60.9 L984.9 64.0 L980.3 61.0 L980.2 63.8 L978.5 80.1 L976.3 54.2 L971.7 56.7 L970.9 56.7 L957.7 61.9 L956.5 58.0 L955.0 62.5 L953.1 67.9 L951.0 64.6 L947.7 65.0 L946.8 68.7 L944.7 70.8 L937.0 70.4 L909.8 59.7 L904.9 79.6 L900.3 65.8 L899.5 65.2 L884.2 70.3 L883.4 67.6 L875.5 73.8 L875.1 68.9 L874.5 63.7 L874.3 61.9 L871.4 56.6 L864.0 55.0 L863.3 65.7 L858.5 55.8 L852.6 55.4 L848.9 65.0 L840.4 63.5 L840.0 80.1 L828.9 57.2 L826.9 64.9 L826.5 60.7 L821.9 62.4 L819.3 64.4 L818.3 63.5 L816.1 58.8 L811.5 59.6 L806.5 60.0 L806.1 54.9 L800.8 58.5 L799.6 55.0 L797.9 56.6 L794.4 58.2 L789.1 58.1 L782.3 59.3 L780.0 57.4 L779.1 75.4 L771.9 52.2 L768.2 62.2 L764.6 55.6 L757.1 55.3 L750.1 61.5 L739.9 56.2 L729.4 75.1 L724.8 58.4 L701.5 54.6 L699.0 70.1 L696.2 53.9 L695.3 59.8 L692.5 63.3 L690.5 63.4 L680.4 86.4 L676.2 65.2 L668.7 62.6 L668.2 68.2 L664.2 67.7 L660.6 69.0 L657.3 59.8 L653.0 63.1 L650.9 62.5 L649.7 56.9 L647.1 63.3 L638.9 60.2 L634.3 58.2 L627.4 61.0 L624.1 66.6 L617.6 67.3 L614.1 82.9 L594.4 65.6 L589.1 76.5 L585.6 66.3 L581.6 62.8 L579.9 58.8 L577.1 64.4 L574.4 56.7 L573.0 60.8 L566.3 63.4 L549.4 57.2 L548.7 60.5 L547.7 67.1 L543.2 65.0 L535.9 53.7 L532.6 56.8 L528.3 56.4 L528.1 57.5 L525.2 57.7 L517.6 56.2 L515.5 62.6 L507.4 57.2 L489.0 51.8 L485.0 59.0 L483.8 54.8 L479.5 59.2 L478.0 59.7 L474.1 62.7 L466.0 61.1 L461.7 62.6 L456.2 62.1 L453.2 57.4 L449.2 65.3 L447.2 60.5 L433.6 58.5 L427.6 63.2 L424.5 61.7 L418.9 55.2 L418.1 54.8 L415.3 53.2 L401.4 61.5 L399.0 59.4 L396.7 54.6 L395.8 59.1 L392.4 66.5 L390.9 59.2 L385.8 65.3 L372.4 82.1 L369.3 66.1 L366.7 61.1 L365.7 67.5 L364.6 58.6 L364.2 63.9 L363.6 65.1 L358.8 87.0 L355.6 64.9 L350.4 56.5 L347.4 63.0 L342.6 58.6 L340.1 55.7 L332.5 53.7 L329.7 61.2 L323.8 57.7 L314.1 65.5 L313.7 60.0 L308.5 57.6 L299.8 78.8 L289.6 64.0 L287.9 66.6 L284.6 66.1 L279.4 61.7 L278.4 63.8 L264.8 62.1 L262.7 65.3 L261.1 60.1 L259.2 76.0 L252.3 66.9 L247.6 69.2 L244.1 60.2 L233.3 60.3 L232.0 62.1 L226.8 56.2 L226.7 64.0 L223.2 60.9 L223.0 68.4 L220.5 61.5 L208.8 61.9 L206.0 62.8 L204.4 85.1 L196.7 67.9 L180.7 69.0 L178.5 67.3 L176.2 63.3 L170.0 55.4 L168.0 64.4 L167.0 57.2 L162.3 67.3 L161.4 60.7 L152.0 61.6 L151.3 68.6 L151.2 64.2 L150.9 83.0 L150.8 77.6 L148.6 63.7 L146.6 71.7 L146.2 59.8 L144.3 64.2 L131.0 64.7 L129.3 68.2 L127.0 64.9 L123.8 61.2 L122.8 57.9 L118.1 61.5 L117.8 56.6 L117.1 56.0 L103.5 64.6 L102.2 63.2 L101.5 59.4 L90.7 57.8 L85.9 65.3 L84.8 63.6 L80.6 69.7 L72.4 66.7 L69.9 60.9 L67.3 62.9 L62.8 55.5 L62.2 58.7 L60.7 62.2 L59.6 53.3 L59.0 59.4 L58.0 58.3 L54.0 54.3 L52.6 56.4 L46.6 59.6 L39.2 53.6 L37.5 50.9 L29.0 58.9 L27.9 59.4 L27.0 57.2 L25.5 56.9 L23.1 60.0 L22.6 59.0 L14.2 56.5 L4.1 58.1 L0.2 68.4 L0.0 64.5 Z' fill='black'/></svg>");

	position:relative;
	isolation:isolate;
	overflow:hidden;
	color:#F4EFE7;
	background-color:#141414;
	/* The slate photograph under a light wash. The comp's slate is visibly
	   grainy — chalk scratches show through — so the wash only takes the
	   edge off; it does not flatten it to a colour. */
	background-image:
		radial-gradient(130% 90% at 50% 40%, rgba(10,10,10,.42) 0%, rgba(6,6,6,.74) 100%),
		var(--bld-stone, none);
	background-size:cover;
	background-position:center;
	padding:clamp(40px,3vw,54px) 0 clamp(48px,3.4vw,64px);
}

/* ---- the torn top edge ----
   The band above ends on a nearly straight line with a fine, uneven wobble,
   as in the comp (not a row of big teeth). Two layers: a pale fibre rim cut
   a touch deeper, and the band's own colour over it. */
.bld__tear{
	position:absolute;
	left:0; right:0; top:-1px;
	pointer-events:none;
	z-index:3;
	height:clamp(7px,.6vw,11px);
	background:var(--bld-cream);
	-webkit-mask:var(--m-tear) no-repeat center/100% 100%;
	mask:var(--m-tear) no-repeat center/100% 100%;
}
.bld__fibre{
	position:absolute;
	left:0; right:0; top:-1px;
	z-index:2;
	height:calc(clamp(7px,.6vw,11px) + 2px);
	background:#FFFFFF;
	opacity:.4;
	pointer-events:none;
	-webkit-mask:var(--m-fibre) no-repeat center/100% 100%;
	mask:var(--m-fibre) no-repeat center/100% 100%;
}

/* ---- layout ----
   Measured off the comp at 1670px: 100px left margin, a 360px heading
   column, four cards from 481 to 1483px, the note on the right. The right
   margin is narrower than the left in the comp, because the note and the
   leaves run off that side. */
.bld__inner{
	position:relative;
	z-index:4;
	max-width:1680px;
	margin-inline:auto;
	padding-left:clamp(20px,6vw,104px);
	padding-right:clamp(20px,3.2vw,56px);
	display:grid;
	/* 100 | heading 361 | 20 | cards 481..1483 | 20 | note | 56, at 1670 */
	grid-template-columns:minmax(0,36.1fr) minmax(0,100.2fr) minmax(0,11.1fr);
	column-gap:clamp(14px,1.2vw,22px);
	align-items:center;
}

/* ---- the foreground leaves ----
   Out of focus and darkened: they are in front of the scene, not part of it,
   which is what the comp's blur says. Kept low and off to the sides, so they
   never cover the button or the note. One cut-out, used twice. */
.bld__fol{
	position:absolute;
	z-index:6;
	pointer-events:none;
	height:auto;
	max-width:none;
}
.bld__fol--bl{
	left:-5.5%;
	bottom:-30%;
	width:clamp(130px,12vw,220px);
	transform:rotate(10deg);
	filter:blur(4px) brightness(.78) saturate(1);
}
.bld__fol--br{
	right:-4.5%;
	bottom:-62%;
	width:clamp(200px,20vw,350px);
	transform:scaleX(-1) rotate(-22deg);
	filter:blur(6px) brightness(.85) saturate(1);
	opacity:.92;
}

/* ------------------------------------------------------------- HEADING */

.bld__head{position:relative;z-index:2;top:clamp(0px,.24vw,5px)}

.bld__label{
	display:flex;
	align-items:center;
	gap:clamp(12px,1.1vw,18px);
	margin:0 0 clamp(12px,1.06vw,18px);
	font-family:var(--bld-body);
	font-size:clamp(10px,.66vw,12px);
	font-weight:500;
	letter-spacing:.28em;
	text-transform:uppercase;
	color:rgba(244,239,231,.86);
}
.bld__label::before{
	content:"";
	width:clamp(20px,1.56vw,30px);
	height:2px;
	background:var(--bld-orange);
	flex:none;
}

/* Archivo 800 at normal width: measured against the comp, this is the face
   of this heading (the hero's is the heavier, narrower 900 cut). */
.bld__title{
	margin:0;
	font-family:var(--bld-display);
	font-size:clamp(36px,3.5vw,66px);   /* 58.5px at 1670: the comp's 39px cap */
	font-weight:800;
	line-height:.8;
	letter-spacing:-.02em;
	color:#FBF8F3;
}
.bld__title em{font-style:normal;color:var(--bld-orange);letter-spacing:-.043em}

.bld__sub{
	margin:clamp(10px,.7vw,14px) 0 0;
	max-width:27em;
	font-family:var(--bld-body);
	font-size:clamp(14px,.9vw,16px);
	line-height:1.42;
	color:rgba(244,239,231,.92);
}

.bld__cta{
	display:inline-flex;
	align-items:center;
	gap:clamp(16px,1.4vw,24px);
	margin-top:clamp(16px,1.02vw,22px);
	padding:clamp(10px,.63vw,12px) clamp(22px,1.6vw,28px);
	border-radius:999px;
	border:1.5px solid rgba(244,239,231,.72);
	color:#F4EFE7;
	font-family:var(--bld-body);
	font-size:clamp(13.5px,.86vw,15px);
	font-weight:500;
	text-decoration:none;
	white-space:nowrap;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.bld__cta svg{width:1.2em;height:1.2em;stroke-width:1.6;transition:transform .2s ease}
.bld__cta:hover{background:#FFFFFF;color:var(--bld-ink);border-color:#FFFFFF}
.bld__cta:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------- THE CARDS */

.bld__grid{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:clamp(14px,1.2vw,20px);
	align-items:start;
	position:relative;
	top:clamp(0px,.27vw,5px);
}

/* The cell is the container the card's cqw units resolve against (a box
   cannot be its own container for its own padding). */
.bld__cell{container-type:inline-size;min-width:0}

.bcard{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	min-height:104cqw;             /* the comp's cards are near-square (242 x 252) */
	box-sizing:border-box;         /* the min-height above includes the padding */
	padding:13.5cqw 11.3cqw 8cqw;
	text-decoration:none;
	isolation:isolate;
	filter:drop-shadow(0 1.4cqw 2.4cqw rgba(0,0,0,.5));
	transition:transform .3s cubic-bezier(.2,.7,.2,1);
}

/* Each card leans by its own amount; card 01 sits a touch higher, as in the
   comp, where it reads as a sheet laid down slightly askew. */
.bcard--1{transform:translateY(-1.5%) rotate(-1.3deg)}
.bcard--2{transform:rotate(.35deg)}
.bcard--3{transform:rotate(-.3deg)}
.bcard--4{transform:rotate(.45deg)}
.bcard:hover{transform:translateY(-6px) rotate(0deg)}
.bcard:focus-visible{outline:2px solid var(--bld-orange);outline-offset:6px}

/* ---- the paper ----
   Its own layer, so the mask that roughens the edge does not also clip the
   objects that are meant to cross it. */
.bcard__paper{
	position:absolute;
	inset:0;
	z-index:0;
	overflow:hidden;
	background-size:cover;
	-webkit-mask:var(--edge) no-repeat center/100% 100%;
	mask:var(--edge) no-repeat center/100% 100%;
}
/* white paper, with a faint trace of the texture so it is still a sheet */
.bcard--paper .bcard__paper{
	background-color:#FAFAF8;
	background-image:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),var(--bld-paper, none);
	box-shadow:inset 0 0 6cqw rgba(40,36,30,.12);
}
.bcard--slate .bcard__paper{
	background-color:#1F1E1D;
	background-image:linear-gradient(rgba(22,21,20,.5),rgba(22,21,20,.5)),var(--bld-slab, none);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 9cqw rgba(0,0,0,.55);
}
/* The same texture on two cards would show the same stains in the same
   place; each card shows a different part of it. */
.bcard--1 .bcard__paper{--edge:var(--m-card1);background-position:0 0,12% 18%}
.bcard--2 .bcard__paper{--edge:var(--m-card2);background-position:0 0,70% 30%}
.bcard--3 .bcard__paper{--edge:var(--m-card3);background-position:0 0,80% 85%}
.bcard--4 .bcard__paper{--edge:var(--m-card4);background-position:0 0,20% 75%}

/* card 01's crumbled corner, inside the paper so it is clipped to the card */
.bcard__plaster{
	position:absolute;
	right:-10%;
	bottom:-12%;
	width:66%;
	height:auto;
	max-width:none;
	transform:rotate(180deg);
	filter:brightness(.97) contrast(1.05);
}

/* ---- the words ---- */

.bcard__num,
.bcard__title,
.bcard__rule,
.bcard__desc,
.bcard__go{position:relative;z-index:3}

.bcard__num{
	font-family:var(--bld-body);
	font-size:clamp(15px,8.4cqw,24px);
	font-weight:500;
	line-height:1;
	letter-spacing:.01em;
	color:var(--bld-orange);
	font-variant-numeric:tabular-nums;
}

.bcard__title{
	margin:11cqw 0 0;
	font-family:var(--bld-display);
	font-size:clamp(24px,13.9cqw,46px);
	font-weight:800;
	line-height:1;
	letter-spacing:-.055em;
	color:inherit;                 /* the theme colours h3 for its dark pages */
}

/* the short rule under each title */
.bcard__rule{
	display:block;
	width:10.5cqw;
	height:2px;
	margin-top:5cqw;
	border-radius:2px;
	background:var(--bld-orange);
	opacity:.55;
}
.bcard--slate .bcard__rule{opacity:.45}

.bcard__desc{
	margin:5cqw 0 0;
	/* Wraps where the comp wraps at every size: in em it follows the type, in
	   cqw it follows the card, and the smaller of the two wins. Without the em
	   cap, a large card with capped type ran its lines into the objects. */
	max-width:min(74cqw,11.6em);
	font-family:var(--bld-body);
	font-size:clamp(12.5px,6.4cqw,16.5px);
	font-weight:400;
	line-height:1.3;
}

.bcard--paper{color:var(--bld-ink)}
.bcard--paper .bcard__desc{color:#1C1A17}
.bcard--slate{color:#F6F1E9}
.bcard--slate .bcard__desc{color:#F6F1E9}

.bcard--4 .bcard__desc{max-width:min(64cqw,10.3em)}

/* the round arrow at the foot */
.bcard__go{
	margin-top:auto;
	width:clamp(34px,16.5cqw,52px);
	aspect-ratio:1;
	border-radius:50%;
	border:1.6px solid currentColor;
	display:grid;
	place-content:center;
	flex:none;
	transition:background .2s ease, color .2s ease, transform .2s ease;
}
.bcard__go svg{width:clamp(16px,8.6cqw,24px);height:auto;stroke-width:2.1}
.bcard:hover .bcard__go{transform:translateX(4px)}
.bcard--paper:hover .bcard__go{background:var(--bld-ink);color:#FFFFFF}
.bcard--slate:hover .bcard__go{background:#FFFFFF;color:var(--bld-ink)}

/* ---- the objects ----
   Positioned in percent of the card, measured off the comp. They may cross
   the card's edge; the paper layer is what is clipped, not these. */
.bcard__art{
	position:absolute;
	inset:0;
	z-index:2;
	pointer-events:none;
}
.bcard__art > *{position:absolute;height:auto;max-width:none}

/* 01 — the sketched chart, its orange arrow, the leaf over the torn corner */
.art-chart1{left:54%;top:21%;width:16%}
.art-arrow1{left:57%;top:37%;width:22%;color:var(--bld-orange)}
.art-leaf{right:-5%;top:-1.5%;width:42%;transform:scaleX(-1) rotate(4deg);filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.28))}

/* 02 — the monitor (its stand cropped off; the comp shows the screen and
   chin only), the arrow, the sprig hanging off the foot */
.art-monitor{left:48%;top:4%;width:51%;aspect-ratio:334/268;overflow:hidden;filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.45))}
.art-monitor img{display:block;width:100%;height:auto}
.art-arrow2{left:78%;top:45%;width:15%;color:var(--bld-orange)}
.art-sprig{left:81%;top:58%;width:18%;transform:rotate(-8deg)}

/* 03 — the robot, head and neck only, sinking behind the title; the note */
.art-robot{left:36%;top:3%;width:31%;aspect-ratio:232/250;overflow:hidden;
	-webkit-mask:linear-gradient(#000 74%,transparent 100%);mask:linear-gradient(#000 74%,transparent 100%)}
.art-robot img{display:block;width:100%;height:auto}

/* 04 — the phone, the sketched chart, the note */
.art-phone{left:47%;top:2%;width:23%;transform:rotate(-17deg);filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.5))}
.art-chart4{left:72%;top:15%;width:21%}

/* the orange "AI" sticky notes */
.art-note{
	display:grid;
	place-content:center;
	aspect-ratio:1/.93;
	background:linear-gradient(172deg,#FFB24E 0%,#FB9A2E 46%,#F4821A 100%);
	box-shadow:0 1.2cqw 2cqw -.8cqw rgba(60,30,0,.65), inset 0 .5cqw 0 rgba(255,255,255,.22);
	font-family:var(--bld-hand);
	font-weight:700;
	line-height:1;
	color:#1E1408;
}
.art-note--3{left:72%;top:19.5%;width:16%;font-size:8.5cqw;transform:rotate(3deg)}
.art-note--4{left:76%;top:42%;width:21%;font-size:11cqw;transform:rotate(-3deg)}

/* ---- the handwritten note on the right ---- */

.bld__aside{
	position:relative;
	z-index:5;
	align-self:center;
	margin-left:clamp(-44px,-2.6vw,-22px);   /* its arrow reaches back to card 04's note */
	padding-top:clamp(36px,3.4vw,60px);
	color:#EFE9DE;
	pointer-events:none;
}
.bld__aside svg{
	position:absolute;
	left:0; top:0;
	width:clamp(80px,7.6vw,130px);
	height:auto;
	color:var(--bld-orange);
	overflow:visible;
}
.bld__aside p{
	position:relative;
	margin:0 0 0 clamp(34px,3.2vw,58px);
	font-family:var(--bld-hand);
	font-size:clamp(20px,1.85vw,32px);
	font-weight:500;
	line-height:1.08;
	transform:rotate(-15deg);
	transform-origin:0 50%;
	white-space:nowrap;
}
.bld__aside p span{display:block}
.bld__aside p span:nth-child(2){margin-left:.15em}
.bld__aside p span:nth-child(3){margin-left:.55em}
/* the double orange scribble under "Growth." */
.bld__aside p::after{
	content:"";
	position:absolute;
	left:-.2em;
	bottom:-.55em;
	width:4.2em;
	height:.5em;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M4 16 C 60 9, 120 5, 196 2' fill='none' stroke='%23F2600C' stroke-width='4.5' stroke-linecap='round'/><path d='M30 21 C 80 15, 130 11, 182 8' fill='none' stroke='%23F2600C' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}

/* ------------------------------------------------------------ RESPONSIVE */

@media (max-width:1460px){
	/* The margin note is the first thing to go: below this width the cards
	   drop to ~200px and the note crowds card 04's sticky note. */
	.bld__aside{display:none}
	.bld__inner{grid-template-columns:minmax(0,25fr) minmax(0,72fr);padding-right:clamp(20px,4vw,56px)}
	.bld__fol--br{width:clamp(160px,17vw,260px)}
}

@media (max-width:1100px){
	/* Heading above, four cards in a row below. */
	.bld__inner{grid-template-columns:1fr;row-gap:clamp(30px,4vw,44px);padding-inline:clamp(20px,4vw,48px)}
	.bld__head{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(24px,4vw,56px);align-items:end}
	.bld__label{grid-column:1/-1}
	.bld__title{grid-column:1}
	.bld__sub{grid-column:2;margin:0;max-width:34em}
	.bld__cta{grid-column:1;justify-self:start}
}

@media (max-width:860px){
	.bld__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,24px)}
	.bld__head{display:block}
	.bld__sub{margin-top:14px}
}

@media (max-width:560px){
	.bld__grid{grid-template-columns:1fr;gap:22px}
	/* One column: the cards stop leaning — four tilted cards stacked down a
	   phone reads as a rendering fault rather than as paper. */
	.bcard,.bcard--1,.bcard--2,.bcard--3,.bcard--4{transform:none}
	.bcard:hover{transform:none}
	/* The card keeps the comp's near-square shape here too. Everything in it
	   is sized from its width, so a square card is the desktop card scaled
	   up; a shorter one made the objects collide with the words. */
	.bcard{min-height:96cqw}
	.bld__fol--br{display:none}
}

@media (prefers-reduced-motion:reduce){
	.bcard,.bcard__go,.bld__cta,.bld__cta svg{transition:none}
	.bcard:hover{transform:none}
	.bcard--1{transform:translateY(-1.5%) rotate(-1.3deg)}
	.bcard--2{transform:rotate(.35deg)}
	.bcard--3{transform:rotate(-.3deg)}
	.bcard--4{transform:rotate(.45deg)}
}

/* ------------------------------------------------- RETIRING THE OLD BLOCK
   The hero template (template-parts/home-hero-v2.php) still ends with the
   previous version of this section, .do-v2. This file replaces it, so the old
   one is hidden here rather than cut out of the PHP — removing this one rule
   brings it back, with no PHP edit. This stylesheet loads after home-v2.css,
   which is what lets one plain rule win. When this section is settled, delete
   the .do-v2 block from home-hero-v2.php and this rule with it. */
.do-v2{display:none}