The ground decides the depth, so the drawing decides the page

The signature — the Log

One SVG panel carrying two coupled drawings on a fixed 0–12.0 metre depth axis. On the left, the soil profile in banded strata with a helical pile wound into it to the solved depth, drawn to true scale — a 114 mm shaft is 114 mm on the depth scale, and its 400 mm helix is 400 mm. On the right, the torque trace: installation torque across, depth down, climbing as the pile goes in, with the target torque drawn as a vertical amber line and the rig's torque-head ceiling drawn in coral. Where the trace crosses the target, that is your depth.

The axis is fixed and that is the argument. Four grounds give four different depths for the same pile — 6.5 m in Bassendean sand, 4.2 m in Spearwood over limestone, 8.8 m in the peaty flats, 9.2 m in Guildford clay. An axis that rescaled itself per ground would draw all four the same length and destroy the only comparison the page exists to make. The shallowest solve on the whole grid is 3.6 m, which is 30% of the axis, so nothing on it draws too small to dimension.

How it is drawn

• No libraries. Hand-written SVG built through createElementNS, laid out in real CSS pixels — the viewBox is recomputed per width so the units are pixels and a 10 px label is 10 px at 375 as well as at 1200. A fixed viewBox would have rendered every label at about 4 px on a phone.
• The whole drawing is assembled synchronously and the entrance choreography is driven from the animation loop, never by inserting nodes or toggling classes afterwards. Strata bands fade in on a stagger, the pile grows down through a clip rectangle, and the trace draws in on a stroke-dashoffset.
• Dual-speed redraw. The cold load runs a 1,400 ms entrance behind a firstDraw flag with a 2,400 ms settle-timer backstop; every later state change redraws in 460 ms. A resize rebuilds the geometry at the current phase and can never re-enter the entrance — taking a clipped screenshot changes device metrics and fires the resize handler, which is exactly how a page can photograph itself empty.
• Second read. The ground's torque curve keeps going past where we stop, drawn faint and dashed all the way to twelve metres, so you can see what the ground has left. The crossings of the shafts you did not pick sit on that faint curve as hollow rings with their depths. A dotted hairline runs across both panels at each layer boundary, tying the kink in the trace to the line in the section.
• Micro-interaction. Hovering or focusing a shaft chip lights that shaft's target line in the trace, so you can see how much further right the bigger number sits before you commit to it.
• Idle. A torque-head marker runs the trace on a 4.2 s loop with its opacity floored at 0.55, so the signature is visibly alive at any capture instant without phase arithmetic.
• Motion floor. prefers-reduced-motion renders the settled frame immediately — every group opaque, the trace fully drawn, the loop never started. The rAF delta is clamped at zero as well as capped, and the loop stops on document.hidden.

Palette

Argued from the rig at six in the morning: painted slate, galvanised shaft, gauge amber, and the coral that means the head has stalled. This is the only dark site in its wave and it is dark for a reason — piling starts before light and the cab's instrument is a torque gauge. Held off the near-black-plus-acid default by having no acid in it: the amber is a hydraulic gauge amber and the coral is a warning lamp, both argued from the machine. Every ratio below was measured from the shipped custom properties in the running page, not estimated — 27 pairs, 0 under 4.5:1.

Type

Oswald 500/600/700 for display — a condensed grotesque that reads as a gauge face and stacks a depth scale without crowding. Barlow 400/500/600 for body. JetBrains Mono 500 in exactly one role: torque, depth and any number with a unit on it — 10,000 N·m · 6.5 m · Kt 23. The typographic moment is the readout beside the trace: the solved depth set enormous in Oswald 700 with its target underneath in mono at wide tracking, and the pile count, the price and the billed metres stamped along the bottom.

The model

Every rate is a whole dollar by construction, depth is held in decimetres and torque in whole newton-metres, so the depth-to-torque solve is an integer search and no percentage, average or unit conversion can introduce a float. Number.isInteger() is asserted on every field the price function returns, not just on the total.

T(d)   = a two-segment integer ramp per ground, summed per decimetre
depth  = the smallest d in 1..120 dm with T(d) >= the shaft's target torque, else NEVER
piles  = ceil(load_kN / working capacity)     working = (Kt x target) / 1000 / 2.0
billed = ceil(depth_dm / 10)                  piles come in extensions; we bill the metre you use

subtotal = rig mobilisation
         + piles x (per-pile rate incl. the first 6.0 m + max(0, billed - 6) x per-metre rate)
         + $980 test pile & torque log report (every job)
         + site access [0 | 1,200 | 2,400]
total    = max(subtotal, $4,500 minimum)

That table is the whole sales argument in six columns: the 168 mm shaft reaches its torque on exactly one of the four grounds. It is disabled on the other three with the reason printed under the chip, and its target line stays drawn in the trace with a coral "NEVER" on it, so you can see how far short the ground falls rather than just being told.

The independent oracle, and where it disagreed

The concept for this site arrived with its numbers produced by a spec-time enumeration. Every one of them was re-derived here in separate code — a standalone script that reimplements the ramp, the solve, the capacities and the price from the pinned anchors only, then sweeps the full control grid. 84 assertions, 0 failures. The grid is 3 shafts × 4 grounds × 3 rigs × 19 loads × 3 site types = 2,052 cells, of which 1,197 price (21 valid shaft/ground/rig combinations × 57), 0 are non-integer, the minimum binds in 4 cells, the cheapest reachable output is $4,500 (which is also the rates card's floor), the dearest is $24,156, and the largest pile count anywhere is 23. The full partial-unwind chain, both neutrality claims and every disabled-shaft cell were enumerated too.

The honesty clause

Screw piling sells a number the customer cannot check, and the way that number is usually oversold is by quietly letting a torque reading stand in for an engineer's design. This page is not allowed to do that. The line "torque tells us what the pile is holding on the day we screw it in; what it has to hold is your engineer's number, off your geotechnical report — we install to it and we log every pile" appears wherever a capacity appears: on the rates card, in the ledger, in the plain-text mirror, in the form's confirmation and in the FAQ. The badge, which is the one surface with no room for it, carries the pinned short form — "Your engineer's number, not ours." — in every state, alongside the total.

The words certified, guaranteed and compliant never describe a computed capacity anywhere on the page; that is asserted in the harness as a regular expression over the rendered text, in both word orders. The factor of safety of 2.0 is printed beside every capacity figure — on the badge, in the ledger total's sub-line, in the mirror and on all three service cards — never buried.

This site has no refusal state, and that is a design decision

Four of the five sites in this wave refuse a job somewhere: a ground that cannot take a soakwell, water that cannot be protected galvanically, a ramp that cannot be made to fit. This one refuses nothing. Every one of the 1,197 priced cells prices, which was enumerated, not assumed — and the honest "no" here lives one level down, at the chip. The 168 mm shaft is disabled on three of the four grounds with a computed reason under it, and disabled again on Spearwood whenever the rig's head cannot deliver 30,000 N·m. Its target line stays visible in the trace with "NEVER" on it. The page says no to the upsell, not to the customer, which for this trade is the truer refusal: the job is always doable, it is the shortcut that is not.

The FAQ carries the other one — what happens if the torque is not there at twelve metres. We stop, we say so, it goes back to the engineer, you pay for the metres we drove and not for the pile we could not deliver. The drawing prints "12 m — we stop and tell your engineer" under the section at every width.

Conversion decisions

• The drawing shares the fold. At 1200 × 750 — the size of the preview image this page is captured at — the value proposition, the phone number, the primary CTA, the rest-state readout ($7,698, 6 piles, 6.5 m, 7 m billed) and the top two thirds of the signature are all above the line, including the crossing that produces the answer. Getting there cost a full restructure: the first build put the Log below a tall hero and the preview showed a headline with no instrument under it.
• The price is inside the artwork. The badge sits on the scene's own apron at the top right — over empty ground, never over the footing row, the section or the trace, which is asserted as a rectangle-intersection check at 375, 1000 and 1200. Below 641 px it docks directly beneath the drawing instead, and its second line switches to the short form.
• Two ways to the same conversation. A tel: link in the masthead and a second in the hero for the customer who has already decided; the Log for the one who has not. The sticky bar on phones carries one of each — the yard's phone and an anchor into the quote form — at 48 px tall.
• The Log hands off to the form. "Send this job to us" scrolls to the enquiry and, if the job box is empty, writes the configured scenario into it — shaft, depth, ground, rig, access, load and total. A lead that arrives already describing itself is a warmer lead.
• Form fields are the five things a piling contractor actually needs to call you back usefully: name, phone, suburb (which suggests the ground profile before any bore log), the kind of job (which sets the rig), and a free-text box that asks for the pile count, the load per pile, the access width and whether there is a geotechnical report. The sixth control is a required acknowledgement that Groundset installs to an engineer's design and does not design footings — a checkbox that exists to make the honesty clause part of the enquiry, not just part of the copy.
• The confirmation is local and says so. Hidden on load, hidden after an empty submit, shown only after a valid filled submit, and it repeats what you would have sent plus the torque declaration. No network round trip is faked.

The iteration log

Pass 1 — Craft

• The signature missed the preview entirely. The first composition had a full-width hero with the Log beneath it; at 1200 × 750 the drawing started at y = 1062 and the captured frame was a headline and a readout with nothing under them. The page was restructured into a compact pitch row over a two-column instrument row (readout beside the scene), and the scene's height was made a function of its width. The drawing now starts at y ≈ 404 and the crossing lands at y ≈ 740.
• The axis caption was clipping off the left edge — "DEPTH m" was anchored at the end against the axis and rendered as "TH m". Re-anchored to the scene's left padding.
• The shaft callout was sitting on top of the first stratum label. Both were placed just under the ground line. The callout moved to the empty ground at the foot of the section.
• The depth dimension was amber type on the strata — which the palette forbids: amber measures 4.14:1 on dense sand and 3.29:1 on limestone. It is now cased in a slate tag with an amber hairline, at 7.84:1, which also reads more like a real dimension tag.
• Three label collisions in the trace panel: the 6,000 and 10,000 target captions sat on the same row 12% apart; the rig-head caption and the twelve-metre ceiling caption overlapped at the foot. Target captions are now staggered — the selected shaft on row one, the others on row two — and the two foot captions are 28 px apart vertically.
• Text now measures itself. Stratum labels, the shaft callout and the footing captions all run through a fitter that swaps to a pinned short form and then, if it still does not fit, steps the font size down — caught at 1000 px, where the callout was reading "400 mm hel…" and the footing captions were printing through each other.
• The wordmark wrapped to two lines at 375, which is the most repeated mobile-masthead defect in this collection. The locality half of the sub-line is now hidden below 430 px, and the wordmark's right edge is asserted clear of the call button's left edge.
• Measured all 27 ink-on-ground pairs from the shipped custom properties in the running page, including every scene fill and both panel grounds. Nothing under 4.5:1; every figure reproduced the spec's.

Pass 2 — Depth

• The ground's whole curve. The trace used to stop dead at the solved depth. It now continues faint and dashed to twelve metres, so the drawing answers the next question — what has this ground got left? — without being asked. On Bassendean sand you can watch it run out at 24,400 N·m, a long way short of the 168's target line.
• The crossings you did not choose. Hollow rings with their depths now sit on that faint curve at the target torques of the other reachable shafts, so a single frame shows all three answers for the chosen ground. Labels steer away from the selected target line and fall back to the depth alone on phones.
• The two drawings are tied together. A dotted galvanised hairline runs across the trace panel at each layer boundary, at exactly the depth of the line in the section beside it — which is where the trace kinks, and why.
• Micro-interaction: hover or keyboard-focus an unselected shaft chip and its target line lights in the trace. It is a preview of the commitment, not a decoration.
• The twelve-metre stop is drawn, not just written. "12 m — we stop and tell your engineer" now prints under the section at every width, in the refusal coral.
• Motion timing: the entrance was re-phased so the strata stagger, the pile and the trace overlap rather than queue, and the crossing plus the faint curve arrive together at 82% of the sequence.

Pass 3 — Hardening, and a pass for the prose

• Reduced motion renders the settled frame with no loop started: every group opaque, every stratum opaque, the trace fully drawn, figures computed. Asserted on a page launched with prefers-reduced-motion: reduce, not simulated.
• A resize can never re-enter the entrance. Verified by resizing a settled page and asserting firstDraw === false, settled === true and every group still opaque afterwards. There is also a standing check that drives every control, waits with nothing poking the page, and then requires the whole scene opaque and the trace dash-offset at zero — a liveness probe proves a page moves; this proves it comes to rest visible.
• Rapid fire. Twelve control clicks dispatched in a single evaluation with no settle between them, twice: the animation token is bumped in the handler before the state swap, so no in-flight frame can index a scene that no longer exists. State and price agreed with the oracle afterwards, zero console errors.
• 375 px: no horizontal overflow, no offender element past the viewport, masthead clear, sticky bar targets 48 px with a tel: link and an in-page anchor to the form, badge docked beneath the artwork with its short second line, DPR 2 checked at 1200.
• Keyboard: visible focus outlines, arrow keys drive each chip set, and the phone field's pattern is proven by driving checkValidity() on a deliberately invalid value rather than by reading the attribute — Chrome compiles these as v-flag regexes and an unescaped literal makes the field silently validate nothing.
• A stale readout field. The hero readout grew a fourth stamp — billed metres — during the composition work, and it was written into the markup but never wired to the render function, so it printed a permanent "7 m" no matter what the Log said. Nothing else on the page was wrong, which is exactly why it survived: it is a number that looks computed. There is now an assert that reads all five readout fields at rest and again after a state change and compares both against the oracle.
• One ornament removed (the Chanel rule): the hero carried both a radial amber lamp and a galvanised wash down the top of the page. The wash is gone; the lamp stays.
• A pass whose only job was to re-derive every number in body copy. It found two. A review described "twenty-two piles under a suspended slab" at 6.5 m — but 22 piles at 6.5 m needs the 114 mm shaft at 2,530 kN, and the load stepper stops at 2,000, so the number was unreachable on the page's own grid; it is now eighteen, which is exactly what 2,000 kN gives. And the neutrality commentary described a "half a metre more" that is really 2.3 m more (see the disagreement above). Every remaining figure in prose — the four twelve-metre torque ceilings, all twelve depth solves, the three capacity triples, the three review pile counts and every price — is asserted against the oracle in the harness, phrase by phrase.

Final harness: 238 assertions across both pages and the three passes — the full worked-figure set, all 19 stepper values, every chip, the six-step partial-unwind chain, every disabled-shaft cell with its reason, the drawn cap, empty and filled submit, rapid fire, reduced motion, DPR 2, keyboard, three-width badge clearance and 29 measured contrast pairs, plus the guide page you are reading.

Local SEO we'd implement for the real business

The live page emits only WebPage, WebSite, CreativeWork, BreadcrumbList and ListItem. Groundset is fictional, so shipping business or review structured data would put invented facts into a real index — that is dishonest markup, and it is a line this collection does not cross. Here is the schema we would ship on the real contractor's site, with their real details, their real reviews and their real service area:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "GeneralContractor",
  "@id": "https://example.com.au/#business",
  "name": "Groundset Screw Piling",
  "description": "Helical screw piling for residential and light commercial footings across Perth's southern and eastern suburbs. Piles driven to torque and logged pile by pile to AS 2159.",
  "url": "https://example.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "email": "yard@example.com.au",
  "image": "https://example.com.au/img/rig-bibra-lake.jpg",
  "logo": "https://example.com.au/img/logo.png",
  "priceRange": "$$",
  "currenciesAccepted": "AUD",
  "paymentAccepted": "EFT, Credit Card",
  "foundingDate": "2014",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 4, XX Sudlow Road",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.0967, "longitude": 115.8189 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "06:30", "closes": "17:00"
  }],
  "areaServed": [
    { "@type": "City", "name": "Bibra Lake" },
    { "@type": "City", "name": "Hamilton Hill" },
    { "@type": "City", "name": "Canning Vale" },
    { "@type": "City", "name": "Jandakot" },
    { "@type": "City", "name": "Forrestdale" },
    { "@type": "City", "name": "Midland" },
    { "@type": "City", "name": "Bassendean" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Screw piling",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "76 mm helical pile, supplied and installed to 6 m" },
        "priceCurrency": "AUD", "price": "420" },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "114 mm helical pile, supplied and installed to 6 m" },
        "priceCurrency": "AUD", "price": "610" },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "168 mm helical pile, supplied and installed to 6 m" },
        "priceCurrency": "AUD", "price": "1180" },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Test pile and torque log report" },
        "priceCurrency": "AUD", "price": "980" }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8", "reviewCount": "37",
    "bestRating": "5", "worstRating": "1"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "REAL REVIEWER NAME" },
    "datePublished": "2026-05-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "REAL REVIEW TEXT, syndicated from the verified Google Business Profile."
  }],
  "sameAs": [
    "https://www.google.com/maps/place/...",
    "https://www.facebook.com/...",
    "https://www.instagram.com/..."
  ]
}
</script>

Ratings and reviews go in only once they are real and syndicated from a verified profile — never hand-written into the markup. On the live build this would sit alongside a Google Business Profile with the service area set to the suburbs above, a Service page per shaft size, and FAQ markup on the questions this page already answers.

What changes for the real client

• The ground rates come out of their own torque logs. The four profiles here are simplified from published Perth geology; a real contractor has years of logged installation torque against depth, suburb by suburb. That data replaces the pinned ramps, and the Log stops being a demonstration and starts being their competitive advantage — nobody else on the street can draw your block.
• Job management: the enquiry posts into Simpro or AroFlo for a mid-size piling crew, or ServiceM8 / Tradify for an owner-operator, with the Log's configuration mapped onto the quote's line items so the office is not retyping the shaft, the depth and the pile count.
• The torque log itself. Most rigs log torque and depth electronically; the deliverable clients actually value is a clean per-pile report to their engineer. A small pipeline off the rig's data logger into a branded PDF, emailed the day the run finishes, is the highest-leverage automation on this whole trade — and it is a page-one selling point, so the site links to a sample.
• Photography: every visual here is procedural and stays that way where it earns its keep — the Log, the geological map, the section. The one place a real build wants a camera is the rig on site, for the trust strip and the Google profile.
• Reviews feed live from the Google Business Profile rather than being written into the page, which is also what makes the review schema above honest.
• Calls route through a tracked number so the Log's conversion rate is measurable against the phone, not just the form.