/* ---------- HERO: axonometric section "sheet piling protects the neighbouring house" ---------- */
.hero.hd{display:grid;grid-template-columns:minmax(min(540px,46vw),.7fr) minmax(0,1.3fr);align-items:center;min-height:max(680px,96svh);padding-top:64px;overflow:hidden}
.hero.hd::after{display:none}
.hd .hero-copy{padding:48px 0 120px var(--gutter);max-width:none;position:relative;z-index:2}
.hd h1{font-size:clamp(42px,5.4vw,80px)}
.hd-scene{position:relative;align-self:stretch;min-width:0;margin-right:calc(var(--gutter) * -1)}
.hd-scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* scene vocabulary: drawing lines in the site's palette */
.hd-scene .ln{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.hd-scene .ln-dim{fill:none;stroke:var(--line-dim);stroke-width:1;vector-effect:non-scaling-stroke}
.hd-scene .edge{fill:none;stroke:var(--line);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hd-scene .shade{fill:#000;fill-opacity:.42}
.hd-scene .top{fill:#2a2622}
.hd-scene .steel-a{fill:#7d868c}
.hd-scene .steel-b{fill:#5b6268}
.hd-scene .steel-edge{fill:none;stroke:#d9d4c7;stroke-opacity:.65;stroke-width:1;vector-effect:non-scaling-stroke}
.hd-scene .floor{fill:#3d3128}
.hd-scene .wedge{fill:var(--signal);fill-opacity:.18}
.hd-scene .wedge-ln{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:9 6;vector-effect:non-scaling-stroke}
.hd-scene .gwl{fill:none;stroke:#8cc4ff;stroke-width:1.5;stroke-dasharray:10 5;vector-effect:non-scaling-stroke}
.hd-scene .house-f{fill:#24272a}
.hd-scene .house-s{fill:#1a1c1e}
.hd-scene .house-r{fill:#2f3337}
.hd-scene .win{fill:#3a4046}
.hd-scene .win.lit{fill:#ffcf8a;fill-opacity:.78}
.hd-scene .found{fill:url(#hd-conc)}
.hd-scene .pipe{stroke-linecap:butt;vector-effect:non-scaling-stroke}
.hd-scene .hammer{fill:var(--signal)}
.hd-scene .hammer-d{fill:#c2410c}
.hd-scene .cable{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}

.hd-scene text{font-family:var(--mark);font-stretch:85%;fill:var(--line);font-size:15px;letter-spacing:.04em}
.hd-scene text.t-b{fill:#fff;font-weight:600}
.hd-scene text.big{font-size:17px}
.hd-scene text.t-dim{fill:var(--text-dim)}
.hd-scene text.t-sig{fill:var(--signal-hi)}
.hd-scene text.t-w{fill:#a9d2ff}
.hd-scene .lbl{transition:opacity .5s var(--ease-out)}
.hd-scene .lbl.off{opacity:0}
.hd-scene .note{font-size:11px;fill:var(--text-dim);letter-spacing:.06em}

.hd .groundline{z-index:3}

/* 3D canvas + projected labels */
.hd-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s var(--ease-out)}
.hd-scene.is-3d .hd-canvas{opacity:1}
/* lens vignette: edges fall off like a photograph, not a flat render */
.hd-scene.is-3d::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 55% 50%, transparent 55%, rgba(18,20,22,.55) 100%)}
.l3d{position:absolute;left:0;top:0;z-index:2;pointer-events:none;transition:opacity .45s var(--ease-out);will-change:transform}
.l3d.off{opacity:0}
.l3d i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--line);box-shadow:0 0 0 3px rgba(18,20,22,.55)}
.l3d::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:38px;background:var(--line);opacity:.85}
.l3d .tx{position:absolute;left:8px;bottom:26px;display:grid;gap:2px;padding:6px 10px 7px;background:rgba(18,20,22,.84);border-left:1px solid var(--line);white-space:nowrap;
  font:500 12px/1.2 var(--mark);font-stretch:85%;letter-spacing:.05em;color:var(--text-dim)}
.l3d .tx b{font:600 14px/1.15 var(--mark);font-stretch:85%;letter-spacing:.02em;color:#fff}
.l3d .tx em{font-style:normal;font-variant-numeric:tabular-nums}
.hd-note{position:absolute;right:10px;bottom:8px;z-index:2;font:400 11px/1 var(--mark);font-stretch:85%;letter-spacing:.06em;color:var(--text-dim);pointer-events:none}
.hd-scene.is-svg .hd-note{display:none}
@media (max-width:760px){
  .l3d.det{display:none}
  .l3d::before{height:26px}
  .l3d .tx{bottom:16px;padding:4px 8px 5px;font-size:11px}
  .l3d .tx b{font-size:13px}
  .l3d:not(.keep) .tx em{display:none}
}
@media (prefers-reduced-motion:reduce){.hd-canvas,.l3d{transition:none}}

@media (max-width:1100px){
  .hero.hd{grid-template-columns:minmax(510px,1fr) minmax(0,1fr)}
}
@media (max-width:959px){
  .hero.hd{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start;min-height:0;padding-top:64px}
  /* explicit height: Safari ignores aspect-ratio on a stretched grid item with only absolute children */
  .hd-scene{order:-1;align-self:auto;margin:0;overflow:hidden;height:min(86vw,50vh)}
  .hd .hero-copy{padding:8px 16px 64px}
  .hd h1{font-size:clamp(36px,10.5vw,48px)}
  .hd .lede{margin-top:16px}
  .hd .hero-actions{margin-top:24px}
  .hd-scene .det{display:none}
  .hd-scene text{font-size:22px}
  .hd-scene text.big{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.hd-scene .lbl{transition:none}}

/* ---------- sheet-pile wall drawn as on the working drawings: soil face, soil ticks, heavy pile line, dash-dot axis ---------- */
:root{--wall:20px}
@media (max-width:760px){:root{--wall:9px}}
.wallcol{overflow:visible;z-index:2}
.wallcol .steel{
  border:0;border-left:1px solid var(--line);
  background:
    repeating-linear-gradient(180deg, var(--line-dim) 0 12px, transparent 12px 15px, var(--line-dim) 15px 17px, transparent 17px 20px) 15px 0 / 1px 100% no-repeat,   /* axis, dash-dot */
    linear-gradient(90deg, var(--line), var(--line)) 8px 0 / 3px 100% no-repeat}                                                                         /* the pile; soil ticks in ::before */
.wallcol .steel::before{content:"";position:absolute;inset:0 auto 0 1px;width:6px;background:repeating-linear-gradient(135deg, transparent 0 5px, rgba(217,212,199,.8) 5px 6px)}
.wallcol .steel{background-color:transparent}
@media (max-width:760px){.wallcol .steel{background:linear-gradient(90deg, var(--line), var(--line)) 4px 0 / 2px 100% no-repeat}.wallcol .steel::before{display:none}}

/* leader at the pile head: text over the shelf, note under it, slanted pointer to the head */
.pile-lead{position:absolute;left:calc(50% + 26px);bottom:calc(100% + 26px);display:grid;justify-items:start;pointer-events:none;white-space:nowrap}
.pile-lead .t{font:400 13px/1 var(--mark);font-stretch:85%;letter-spacing:.03em;color:var(--line);padding:0 6px 4px 2px;border-bottom:1px solid var(--line)}
.pile-lead .s{font:400 12px/1 var(--mark);font-stretch:85%;letter-spacing:.03em;color:var(--text-dim);padding:4px 6px 0 2px}
.pile-lead::before{content:"";position:absolute;left:0;top:17px;width:36px;height:1px;background:var(--line);transform-origin:0 0;transform:rotate(135deg)}
.pile-lead::after{content:"";position:absolute;left:-29px;top:39px;width:6px;height:6px;border-radius:50%;background:var(--line)}

/* elevation at the toe: value over the shelf, description under it, the drawing's level triangle */
.toe-tag{position:absolute;left:calc(100% + 8px);top:calc(var(--drive,0) * 100%);display:grid;justify-items:start;transform:translateY(-17px);pointer-events:none;white-space:nowrap;transition:top .15s linear;padding-left:18px}
.toe-tag::before{content:"";position:absolute;left:3px;top:6px;width:0;height:0;border:6px solid transparent;border-top:10px solid transparent;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top-color:var(--signal);border-bottom-width:0}
.toe-tag::after{content:"";position:absolute;left:-8px;top:16px;width:22px;height:1px;background:var(--signal)}
.toe-tag .v{font:500 13px/1 var(--mark);font-stretch:85%;letter-spacing:.02em;color:#fff;padding:0 6px 4px 0;border-bottom:1px solid var(--line)}
.toe-tag .n{font:400 11px/1 var(--mark);font-stretch:80%;letter-spacing:.04em;color:var(--text-dim);padding-top:4px}
@media (max-width:760px){.pile-lead{display:none}.toe-tag .n{display:none}}
@media (prefers-reduced-motion:reduce){.toe-tag{display:none}}
/* the button's drawing leader (line + dot down to the ground line) is dropped on the new hero */
.hd .hero-actions .btn::after,.hd .hero-actions .btn::before{display:none}@media (max-width:1180px) and (min-width:960px){.hd .hero-actions{gap:14px 20px}.hd .hero-actions .btn{padding:0 20px;font-size:16px}}
@media (max-width:959px) and (min-width:761px){.hd-scene{height:min(70vw,56vh)}.hd .hero-copy{padding:16px var(--gutter) 72px}}