/* Schmidt Rebound Hammer Survey page. CSS only: the chalk test grid marks its squares as it scrolls, no script. */

/* Hero: calm and static. The test grid drawn in chalk, seen on the floor in perspective. */
.rh-hero{min-height:clamp(520px,62vh,680px);display:flex;align-items:flex-end}
.rh-hero .wrap{width:100%}
.rh-art{position:absolute;top:0;right:0;width:min(46%,680px);height:100%}
.rh-hero::after{background:linear-gradient(90deg,rgba(0,23,63,.95),rgba(0,23,63,.85) 45%,rgba(0,23,63,.1))}
.rh-art-slab{fill:rgba(255,255,255,.04)}
.rh-art-chalk path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round}
.rh-art-chalk text{fill:rgba(255,255,255,.5);font-family:var(--font);font-weight:600;text-anchor:middle}

/* Preview only: facts still to confirm */
.pv-todo{max-width:var(--wrap);margin:20px auto 0;padding:14px var(--gutter)}
.pv-todo strong{display:block;margin-bottom:6px;color:#7d5200;font-size:14px}
.pv-todo ul{display:flex;flex-wrap:wrap;gap:6px}
.pv-todo li{padding:4px 10px;border:1px dashed #c9a24a;border-radius:3px;background:#fff8e8;color:#7d5200;font-size:13.5px}

/* Survey: text beside the flat test grid */
.rh-survey{align-items:center}
.rh-facts{margin:6px 0 0}
.rh-grid{margin:0;width:100%;max-width:460px;justify-self:center}
.rh-slab{border-radius:6px;box-shadow:0 22px 44px -30px rgba(0,23,63,.7);
  background:
    radial-gradient(circle at 30% 40%,rgba(255,255,255,.07) 0 1px,transparent 1.6px) 0 0/9px 9px,
    radial-gradient(circle at 60% 70%,rgba(0,0,0,.09) 0 1px,transparent 1.6px) 3px 5px/13px 13px,
    linear-gradient(140deg,#7a7f88,#646972 60%,#5a5f68)}
.rh-slab svg{width:100%;height:auto}
.rh-chalk path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.4;stroke-linecap:round}
.rh-chalk text{fill:rgba(255,255,255,.88);font-family:var(--font);font-size:22px;font-weight:600}
.rh-hit{transform-box:fill-box;transform-origin:center}
.rh-hit .ring{fill:none;stroke:var(--orange);stroke-width:2.5}
.rh-hit .dot{fill:var(--orange)}
.rh-count{--rh-n:9;counter-reset:rhn var(--rh-n);display:flex;align-items:baseline;gap:8px;margin-top:14px;color:var(--navy);font-weight:600}
.rh-count span{margin-right:auto;color:var(--muted);font-size:14px}
.rh-count b{min-width:1ch;font-size:28px;line-height:1;font-variant-numeric:tabular-nums;text-align:right}
.rh-count b::before{content:counter(rhn)}
.rh-count i{font-style:normal;color:var(--muted)}

@property --rh-n{syntax:"<integer>";inherits:true;initial-value:9}
@keyframes rh-hit{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:none}}
@keyframes rh-count{from{--rh-n:0}to{--rh-n:9}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rh-grid{view-timeline:--rh-grid block}
    .rh-hit{animation:rh-hit linear both;animation-timeline:--rh-grid;animation-range:cover calc(26% + var(--i) * 3.4%) cover calc(29.4% + var(--i) * 3.4%)}
    .rh-count{animation:rh-count linear both;animation-timeline:--rh-grid;animation-range:cover 24.3% cover 54.9%}
  }
}

/* Free with coring */
.rh-coring{align-items:center}
.rh-note{padding:clamp(20px,2.6vw,32px);border-left:3px solid var(--orange);border-radius:0 4px 4px 0;background:rgba(255,255,255,.06)}
.rh-note p{color:#e8edf6}
.rh-note strong{color:#fff}
.rh-note .btns{margin-top:22px}

/* When a survey helps */
.rh-when-h{max-width:22em;margin-bottom:clamp(28px,3vw,44px)}
.rh-when{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin:0;padding:0;list-style:none}
.rh-when li{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:4px;transition:translate .25s var(--ease),box-shadow .25s}
.rh-when li:hover{translate:0 -4px;box-shadow:0 18px 36px -28px rgba(0,34,91,.6)}
.rh-when b{color:var(--orange);font-size:15px;letter-spacing:.04em}
.rh-when h3{font-size:clamp(19px,.5vw + 17px,22px)}
.rh-when p{color:var(--muted)}
.rh-when .more{align-self:flex-start;margin-top:auto}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.rh-when li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}}

/* Report and photo */
.rh-report{align-items:center}
.rh-photo{margin:0;max-width:600px}
.rh-photo img{width:100%;border-radius:4px;box-shadow:0 22px 44px -30px rgba(0,23,63,.7)}
.rh-nb{white-space:nowrap}
.rh-scope{color:var(--muted);font-size:14.5px}
.rh-scope a{color:var(--navy)}

@media (max-width:1180px) and (min-width:901px){
  .rh-art{width:46%}
  .rh-hero h1,.rh-hero .lead{max-width:58%}
}
@media (max-width:900px){
  .rh-art{top:0;right:-10%;width:min(94%,560px);height:auto}
  .rh-hero::after{background:linear-gradient(180deg,rgba(0,23,63,.45),rgba(0,23,63,.92) 34%,rgba(0,23,63,.97))}
  .rh-when{grid-template-columns:1fr}
  .rh-photo{max-width:none}
}
@media (max-width:640px){
  .rh-hero{min-height:0}
  .rh-facts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}