/* Echo Testing public site, v1.4.0. Palette and type: DESIGN.md v2 (Trace).
   Colours are tokens only; never type a hex below this block. */
@font-face{font-family:"Chivo";src:url("fonts/chivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chivo";src:url("fonts/chivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Chivo";src:url("fonts/chivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/chivo-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/chivo-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  /* DESIGN.md v2 colours, in DESIGN.md order (the pdf-* tokens are PDF-only) */
  --near-black:#0B0F0E; --panel:#181D1F; --trace:#2BE38A; --trace-hover:#1FD37E;
  --white:#F2F5F3; --paper:#FFFFFF; --ink:#0B0F0E; --ink-2:#2F3735;
  --muted:#5A6461; --line:#D9DFDC; --line-strong:#B5BDB9;
  --on-dark-sub:#C3CBC8; --on-dark-muted:#A3ADA9;
  --line-dark:#292D2C; --line-dark-panel:#34393B;
  --data-bg:#0B0F0E; --data-grid:#1D2120; --data-line:#2BE38A; --data-line-2:#7D8784; --data-label:#A3ADA9;
  --ok:#1F7A4D; --warn:#B8560F; --bad:#B3261E; --map-green:#1A6B3F;
  --tint-info:#EEF4FA; --tint-ok:#EAF6F0; --tint-warn:#FDF4E8; --tint-bad:#FDEEED;
  --tint-blue:#E8F0FA; --tint-purple:#F0ECF9; --tint-neutral:#F2F3F5;
  --text-on-tint-ok:#125C39; --text-on-tint-warn:#7A3C07; --text-on-tint-bad:#8A1E18;
  --text-on-tint-blue:#1C4A7A; --text-on-tint-purple:#4A2C86; --text-on-tint-neutral:#5A6461;
  --text-on-tint-draft:#4A5563;
  /* Roles (DESIGN.md 12.1) and the kept legacy page-ground name */
  --action:#2BE38A; --action-hover:#1FD37E; --link:#0B0F0E;
  --sand:#F2F5F3;
  /* Film band: ghost-button edge on dark, and the legibility scrims (near-black at set opacities) */
  --edge-on-dark:rgba(255,255,255,.55);
  --scrim-0:rgba(11,15,14,0); --scrim-55:rgba(11,15,14,.55);
  --scrim-82:rgba(11,15,14,.82); --scrim-88:rgba(11,15,14,.88);
  --font-head:"Chivo", system-ui, sans-serif;
  --font-mono:"Chivo Mono", ui-monospace, monospace;
  --radius:4px;
  --shadow:0 1px 3px rgba(11,15,14,.08), 0 8px 24px rgba(11,15,14,.06);
}

/* Dark ground: links turn white, buttons take a trace edge. Cards and form cards reset to light. */
.dark,section.ink,.hero,.film-band,.cta-band,header.site,.topbar,footer.site{
  --link:var(--white); --btn-edge:var(--action); --btn-edge-hover:var(--action-hover);
}
.card,.form-card{--link:var(--ink); --btn-edge:var(--ink); --btn-edge-hover:var(--ink)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:800; line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(2.5rem,5.2vw,4.25rem); line-height:1.02; letter-spacing:-.025em; text-wrap:balance}
h2{font-size:clamp(1.75rem,3vw,2.375rem); line-height:1.1; letter-spacing:-.02em}
h3,h2.h3{font-size:1.25rem; font-weight:700; letter-spacing:-.01em; line-height:1.2}
h4{font-size:1rem; font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--link); text-decoration:underline; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Skip link: the first thing a keyboard reaches; off screen until it has focus. */
.skip{position:absolute; left:-9999px; top:8px; z-index:100; padding:12px 16px; border-radius:var(--radius);
  background:var(--white); color:var(--ink); font:700 .95rem/1.2 var(--font-head); text-decoration:none}
.skip:focus{left:16px; outline:3px solid var(--ink); outline-offset:2px}

/* Focus: ink ring on light ground, trace ring on dark. Never removed. */
:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.film-band :focus-visible,.dark :focus-visible,.hero :focus-visible,.cta-band :focus-visible,
section.ink :focus-visible,header.site :focus-visible,footer.site :focus-visible,.topbar :focus-visible{
  outline-color:var(--trace);
}
/* A light card inside a dark band keeps the ink ring (paper ground). The section.ink pair matches the
   specificity of the dark rule above, which would otherwise win there. The card's own outline sits on
   the band, so it keeps the trace ring. */
.card :focus-visible,.form-card :focus-visible,
section.ink .card :focus-visible,section.ink .form-card :focus-visible{outline-color:var(--ink)}

/* ---------- the echo trace line (shape device) ---------- */
/* Inline mark, 60 x 16. Drawn as a mask so the colour is a token: ink on light, trace on dark. */
.trace-line{
  display:inline-block; flex:0 0 auto; width:60px; height:16px; color:var(--ink); background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cpolyline points='0,8 14,8 16,2 18,14 20,5 22,10 24,8 40,8 42,1 44,15 46,4 48,11 50,8 60,8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cpolyline points='0,8 14,8 16,2 18,14 20,5 22,10 24,8 40,8 42,1 44,15 46,4 48,11 50,8 60,8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.hero .trace-line,.film-band .trace-line,.dark .trace-line,section.ink .trace-line,.cta-band .trace-line{color:var(--trace)}

/* ---------- header ---------- */
.topbar{background:var(--panel); color:var(--on-dark-sub); font-size:.82rem; padding:7px 0}
.topbar .wrap{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap}
.topbar a{color:var(--white)}
header.site{
  position:sticky; top:0; z-index:50; background:var(--near-black);
  border-bottom:1px solid var(--line-dark);
}
header.site .wrap{display:flex; align-items:center; gap:28px; height:70px}
.brand{display:flex; flex-direction:column; line-height:1.15; text-decoration:none}
.brand:hover{text-decoration:none}
.brand b{
  font-family:var(--font-head); font-size:1.125rem; font-weight:800; color:var(--white);
  letter-spacing:.14em; text-transform:uppercase;
}
.brand span{font:500 .68rem/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-muted)}
nav.main{margin-left:auto; display:flex; gap:26px; align-items:center}
nav.main a:not(.btn){
  color:var(--white); font-family:var(--font-head); font-size:.94rem; font-weight:600; text-decoration:none;
}
nav.main a:not(.btn):hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.menu-btn{
  display:none; background:none; color:var(--white); border:1px solid var(--line-dark-panel);
  border-radius:var(--radius); padding:7px 12px; font:600 .9rem/1 var(--font-head); cursor:pointer;
}
.menu-btn span{font-size:1.1rem}
/* Below 900px the nav folds into the menu, and "Book a test" sits beside the menu button instead. (header.site
   outranks .btn.sm's display, which would otherwise show it on wide screens too.) */
header.site .head-book{display:none}

/* ---------- buttons ---------- */
/* Primary: trace fill, near-black text. Edge is ink on light ground and trace on dark (see the dark-ground block). */
.btn{
  display:inline-block; background:var(--action); color:var(--ink);
  font-family:var(--font-head); font-weight:700; font-size:.95rem; line-height:1; letter-spacing:.02em;
  padding:17px 28px; border-radius:var(--radius); border:1.5px solid var(--btn-edge, var(--ink));
  cursor:pointer; text-align:center; text-decoration:none;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--action-hover); border-color:var(--btn-edge-hover, var(--ink)); color:var(--ink); text-decoration:none}
/* Ghost on light: paper fill, ink text, ink-2 edge. */
.btn.ghost{background:var(--paper); color:var(--ink); border-color:var(--ink-2)}
.btn.ghost:hover{background:var(--ink); color:var(--white); border-color:var(--ink)}
/* Ghost on dark: transparent, white text, soft white edge. */
.btn.on-dark,.btn.ghost.on-dark{background:transparent; color:var(--white); border-color:var(--edge-on-dark)}
.btn.on-dark:hover,.btn.ghost.on-dark:hover{background:var(--white); color:var(--ink); border-color:var(--white)}
.btn.sm{padding:14px 16px; font-size:.85rem; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.btn.wide{width:100%}
/* Contact page: the phone call leads, so its button is the biggest on the page (a 56px tap row). */
.btn.call{font-size:1.15rem; padding:20px 32px; min-height:56px; display:inline-flex; align-items:center; justify-content:center}

/* ---------- hero (inner pages) ---------- */
.hero{background:var(--near-black); color:var(--white); padding:84px 0 76px; position:relative; overflow:hidden}
.eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;
  font:600 .8rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.hero .eyebrow,.film-band .eyebrow,.dark .eyebrow,section.ink .eyebrow{color:var(--trace)}
.hero h1{max-width:16ch; color:var(--white)}
.lede{font-size:1.25rem; line-height:1.5}
.hero .lede,.film-band .lede{max-width:28em; color:var(--on-dark-sub); margin-bottom:28px}
.film-band .lede{max-width:24em}
.film-band .hero-note{color:var(--on-dark-sub)}
.hero-cta,.btn-row{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.hero-note{font-size:.85rem; color:var(--on-dark-muted); margin-top:20px}

/* ---------- sections ---------- */
section,.section{padding:68px 0}
section.tight{padding:46px 0}
section.sand{background:var(--sand)}
section.ink,.section.dark{background:var(--panel); color:var(--on-dark-sub)}
section.ink h2,.dark h2,.dark h3,.dark h2.h3{color:var(--white)}
.section-head{max-width:660px; margin-bottom:38px}
.section-head p{color:var(--muted); font-size:1.05rem; margin:0}
section.ink .section-head p,.dark .section-head p{color:var(--on-dark-muted)}
.kicker{
  font:600 .8rem/1.3 var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:9px;
}
.dark .kicker,section.ink .kicker{color:var(--on-dark-muted)}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.card{
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px;
}
.card h3,.card h2.h3,.dark .card h3{margin-bottom:.4em; color:var(--ink)}
.card p{color:var(--muted); font-size:.95rem; margin-bottom:0}
.card .price{font:800 1.42rem/1.2 var(--font-head); color:var(--ink); margin-top:14px; display:block}
.card .price small{font:600 .72rem/1.3 var(--font-mono); color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; display:block; margin-top:2px}
.card.link{text-decoration:none}
.card.link:hover{border-color:var(--ink); box-shadow:var(--shadow); transform:translateY(-2px); transition:.15s}

.step{display:flex; gap:16px; align-items:flex-start}
.step .num{
  flex:0 0 38px; height:38px; border-radius:50%; background:var(--near-black); color:var(--trace);
  display:grid; place-items:center; font:800 1.02rem/1 var(--font-head);
}
.step h3{margin-bottom:.25em; font-size:1.03rem}
.step p{font-size:.92rem; color:var(--muted); margin:0}

.stat{text-align:center; padding:18px 10px}
.stat b{display:block; font:800 2.25rem/1.05 var(--font-head); letter-spacing:-.01em; color:var(--ink);
  font-variant-numeric:tabular-nums}
.stat span{font-size:.83rem; color:var(--muted)}
.dark .stat b,section.ink .stat b{color:var(--trace)}
.dark .stat span,section.ink .stat span{color:var(--on-dark-muted)}

ul.checks{list-style:none; padding:0; margin:0}
ul.checks li{position:relative; padding:0 0 11px 27px; font-size:.96rem}
ul.checks li::before{
  content:""; position:absolute; left:2px; top:.52em; width:11px; height:6px;
  border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  transform:rotate(-45deg);
}
section.ink ul.checks li::before,.dark ul.checks li::before{border-color:var(--white)}

/* ---------- region strip ---------- */
.region-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}
.region-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--ink-2);
  border-radius:var(--radius); padding:18px 20px; text-decoration:none; transition:.15s;
}
.region-card:hover{box-shadow:var(--shadow); text-decoration:none; border-left-color:var(--ink)}
.region-card b{display:block; color:var(--ink); font-size:1.02rem}
.region-card span{color:var(--muted); font-size:.83rem}

/* ---------- forms ---------- */
.form-card{background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow)}
fieldset{border:0; padding:0; margin:0 0 30px}
legend{
  font:600 .72rem/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); padding:0 0 10px; width:100%; border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.field{margin-bottom:17px}
.field label{display:block; font-size:.83rem; font-weight:700; color:var(--ink-2); margin-bottom:5px}
.field .hint{font-size:.78rem; color:var(--muted); font-weight:400; margin-top:4px; display:block}
.req{color:var(--ink-2); font-weight:700}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],
input[type=number],input[type=password],select,textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line-strong); border-radius:var(--radius);
  font:inherit; font-size:.95rem; background:var(--paper); color:var(--ink); transition:.12s;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
textarea{resize:vertical; min-height:86px}
.form-lead{font-weight:600; color:var(--ink-2); margin:0 0 22px}
.row{display:grid; gap:16px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:repeat(3,1fr)}
.checkline{display:flex; align-items:flex-start; gap:10px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; cursor:pointer;
  transition:.12s; background:var(--paper)}
.checkline:hover{border-color:var(--ink); background:var(--white)}
.checkline input{margin-top:3px; flex:0 0 auto; accent-color:var(--ink)}
.checkline .lbl{font-weight:600; font-size:.94rem}
.checkline .amt{margin-left:auto; font-weight:700; color:var(--ink); white-space:nowrap; font-size:.92rem}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Notices: paper with a 3px left rule and text in the matching on-tint colour. Every one carries words. */
.notice{padding:13px 16px; border-radius:var(--radius); font-size:.9rem; margin-bottom:16px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid}
.notice.info{border-left-color:var(--text-on-tint-blue); color:var(--text-on-tint-blue)}
.notice.warn{border-left-color:var(--warn); color:var(--text-on-tint-warn)}
.notice.error{border-left-color:var(--bad); color:var(--text-on-tint-bad)}
.notice.ok{border-left-color:var(--ok); color:var(--text-on-tint-ok)}

/* ---------- footer ---------- */
footer.site{background:var(--near-black); color:var(--on-dark-muted); padding:52px 0 26px; font-size:.9rem}
footer.site .foot-h{
  color:var(--white); font:600 .72rem/1.3 var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:14px;
}
footer.site a:not(.btn){color:var(--on-dark-muted); display:block; margin-bottom:7px; font-size:.88rem; text-decoration:none}
footer.site a:not(.btn):hover{color:var(--white); text-decoration:underline}
.foot-note{color:var(--on-dark-muted); font-size:.88rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:34px}
.foot-bot{border-top:1px solid var(--line-dark); padding-top:20px; font-size:.8rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
footer.site .foot-bot a:not(.btn){display:inline; margin:0}
.foot-phone{font-size:.88rem}

/* Echo trace band (DESIGN.md 4): repeat-x tile 240 x 16, polyline stroke 1.6, trace on panel, directly above the CTA band.
   The tile is an inline SVG data URI used as a mask over a trace-coloured layer, so the colour stays a token
   and no hex is typed outside :root. */
.trace-band{position:relative; height:16px; background:var(--panel)}
.trace-band::before{
  content:""; position:absolute; inset:0; background:var(--trace);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpolyline points='0,8 150,8 153,2 156,14 159,4 162,11 165,8 240,8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/240px 16px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpolyline points='0,8 150,8 153,2 156,14 159,4 162,11 165,8 240,8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/240px 16px repeat-x;
}
.cta-band{background:var(--panel); color:var(--white); padding:46px 0; text-align:center}
.cta-band h2{color:var(--white); margin-bottom:.3em}
.cta-band p{color:var(--on-dark-sub); max-width:52ch; margin:0 auto 22px}

/* ---------- home film band ---------- */
/* Layers, bottom to top: poster, 3D canvas, left shade (::before) and caption scrim (::after), copy and controls.
   The shades are DESIGN.md's scene-scrim values, so the copy and the captions read over a moving film. */
.film-band{
  position:relative; padding:0; min-height:clamp(560px,78vh,860px);
  background:var(--near-black); color:var(--white); overflow:hidden;
}
.film-band::before,.film-band::after{content:""; position:absolute; z-index:1; pointer-events:none}
.film-band::before{inset:0; background:linear-gradient(90deg,var(--scrim-88) 0%,var(--scrim-55) 45%,var(--scrim-55) 62%,var(--scrim-0) 82%)}
.film-band::after{left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg,var(--scrim-0) 0%,var(--scrim-82) 100%)}
.scene-poster,.scene3d{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* The desktop poster is the film's wide hold (t=30.5): pump jack, wellhead and tanks to the right of centre, the truck
   at the right edge. On a narrower band cover crops the sides, so lean the crop right (78%) to keep the pump jack, the
   wellhead and the truck's cab in view. Vertically it is only cropped on wide bands, where the subject sits in the
   middle, so 50% stays. Below 820px the portrait phone poster takes over (the 819px block). */
.scene-poster{object-position:78% 50%}
.scene3d canvas{display:block; width:100%; height:100%}   /* the canvas buffer is CSS size x devicePixelRatio; this keeps it the band's size on hi-DPI screens */
.film-band picture{display:contents}   /* the poster <picture> adds no box; .scene-poster still fills the band */
/* The start is a dip to black, not a crossfade (the poster's parked truck would jump to the film's arriving
   one): the poster fades to the band's near-black in 0.4 s, then the film fades up from black in 0.6 s. */
.film-band .scene-poster{transition:opacity .4s}
.scene3d{opacity:0; transition:opacity .6s .4s}
/* Film on only at 820px+: a tablet that rotates below 820 after the film starts falls back to the poster. */
@media (min-width:820px){
  .has-3d .scene-poster{opacity:0}
  .has-3d .scene3d{opacity:1}
}
/* The copy block is a .wrap, which centres itself; the margin pins it to the container's left edge.
   The bottom padding keeps the band taller than the copy plus the caption (bottom 72px, one 22px line),
   so on a short laptop screen, where the band sits at its 560px minimum, the caption can't touch the note. */
.film-copy{
  position:relative; z-index:2; max-width:640px;
  padding-top:clamp(64px,10vh,120px); padding-bottom:112px;
  margin-left:max(0px,calc((100% - 1180px) / 2)); margin-right:0;
}
.film-copy h1{font-size:clamp(2.5rem,4.6vw,3.75rem)}
.film-captions{
  display:none; position:absolute; left:max(24px,calc((100% - 1180px) / 2 + 24px)); bottom:72px; z-index:2;
  max-width:calc(100% - 440px);
  list-style:none; margin:0; padding:0; font:600 1rem/1.4 var(--font-mono); color:var(--white);
}
.is-film .film-captions{display:block}
.film-cap{display:none}
.film-cap.on:not(:empty){display:block}
/* Wide screens: the step dots sit on the controls' row, just left of Pause/Replay, both inside the 1180px container,
   so the caption row above has the full width (the longest caption is one line at 1440). */
.film-dots{position:absolute; right:calc(max(24px,calc((100% - 1180px) / 2 + 24px)) + 196px); bottom:16px; z-index:3; display:flex}
.film-dots button{position:relative; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer}
.film-dots button::before{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border:1.5px solid var(--white); border-radius:50%;
}
.film-dots button:hover::before{background:var(--white)}
.film-dots button[aria-current]::before{background:var(--trace); border-color:var(--trace)}
.film-ctrl{position:absolute; right:max(24px,calc((100% - 1180px) / 2 + 24px)); bottom:16px; z-index:3; display:flex; gap:8px}
.film-btn{
  min-width:44px; min-height:44px; padding:0 16px; cursor:pointer; background:var(--near-black); color:var(--white);
  border:1.5px solid var(--edge-on-dark); border-radius:var(--radius);
  font:600 .8rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
}
.film-btn:hover{background:var(--white); color:var(--ink); border-color:var(--white)}
.film-dots[hidden],.film-ctrl[hidden]{display:none}
/* ?poster=1 (web3d/poster.py): only the picture. The copy, captions, dots, buttons and both shades are
   hidden so the still saved as static/img/hero-poster.* has no text or controls baked into it. */
html.poster-shot .film-copy,html.poster-shot .film-captions,
html.poster-shot .film-dots,html.poster-shot .film-ctrl{display:none}
html.poster-shot .film-band::before,html.poster-shot .film-band::after{display:none}
html.poster-shot .film-band .scene3d{display:block !important}   /* the phone poster is rendered in a phone-shaped window */

/* ---------- home sections ---------- */
section.paper{background:var(--paper)}
.rate-list{margin-top:38px}
.rate-list h3{font-size:1.25rem}
.rate-note{color:var(--muted); font-size:.95rem; margin:22px 0 0}
.report-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:56px; align-items:center}
.claim{font:700 clamp(1.3rem,2.3vw,1.75rem)/1.35 var(--font-head); color:var(--white); max-width:26em; margin-bottom:.9em}
.claim-note{color:var(--on-dark-sub); font-size:1.05rem; margin:0}
/* The customer well page, drawn with tokens: paper page, white head strip, near-black data panel (DESIGN.md 4). */
.well-mock{display:block; width:100%; max-width:440px; height:auto}
.well-mock .wm-page{fill:var(--paper); stroke:var(--line)}
.well-mock .wm-head{fill:var(--white)}
.well-mock .wm-rule{stroke:var(--line); stroke-width:1}
.well-mock .wm-title{font:800 22px var(--font-head); fill:var(--ink)}
.well-mock .wm-tag{fill:var(--near-black)}
.well-mock .wm-tag-text{font:700 16px var(--font-head); fill:var(--white)}
.well-mock .wm-big{font:800 20px var(--font-head); fill:var(--ink)}
.well-mock .wm-panel{fill:var(--data-bg)}
.well-mock .wm-grid{stroke:var(--data-grid); stroke-width:1}
.well-mock .wm-axis{font:500 16px var(--font-mono); fill:var(--data-label)}
.well-mock .wm-line{fill:none; stroke:var(--data-line); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.well-mock .wm-prior{fill:var(--data-line-2)}
.well-mock .wm-last{fill:var(--data-bg); stroke:var(--data-line); stroke-width:2.5}
.well-mock .wm-value{font:600 16px var(--font-mono); fill:var(--white)}
.well-mock .wm-btn{fill:var(--paper); stroke:var(--ink-2); stroke-width:1.5}
.well-mock .wm-btn-text{font:700 17px var(--font-head); fill:var(--ink)}
.safe-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:6px 48px; max-width:940px}
.safe-list li{font-size:1.05rem; padding-bottom:14px}
.stat-strip{background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat-strip .grid{max-width:720px; margin:0 auto}

/* ---------- services and the other inner pages (v1.4.0) ---------- */
.muted{color:var(--muted)}
.lede-sm{font-size:1.08rem; color:var(--muted)}
.fine{font-size:.93rem; color:var(--muted)}
.label-cap{font:600 .72rem/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
b.lbl{color:var(--ink-2)}
.hero-note b{color:var(--white)}
.chip{
  display:inline-block; white-space:nowrap; background:var(--sand); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); padding:5px 11px;
  font:600 .78rem/1.3 var(--font-mono); letter-spacing:.04em;
}
/* A full class says so in words ("0 of 6 left"); the tint is only a second cue. */
.chip.full{background:var(--tint-warn); color:var(--text-on-tint-warn); border-color:var(--text-on-tint-warn)}
.card .card-foot{font-size:.86rem; border-top:1px solid var(--line); padding-top:14px; margin-top:16px}
hr{margin:32px 0; border:0; border-top:1px solid var(--line)}
.legal hr{margin:40px 0}
.form-note{font-size:.83rem; color:var(--muted); text-align:center; margin:14px 0 0}
@media (max-width:599px){ .form-note{text-align:left} }
.done-mark{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%; background:var(--ok); color:var(--paper);
  display:grid; place-items:center; font-size:1.9rem; line-height:1;
}
/* Booking form: one boxed row per well. The Remove button is a plain 44px ghost button (.btn.sm). */
.wellrow{
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px;
  background:var(--white);
}
.wellrow-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.wellrow-head b{font:600 .72rem/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
/* Region picker in the dark rates hero. An opaque panel ground keeps the open list readable. */
.zone-pick label{color:var(--on-dark-sub); margin-right:8px}
.zone-pick select{
  width:auto; min-height:44px; padding:10px 14px; border-radius:var(--radius);
  border:1px solid var(--edge-on-dark); background:var(--panel); color:var(--white);
}
.zone-pick option{background:var(--panel); color:var(--white)}
/* Customer login: its own page, no header. */
.login-page{display:grid; place-items:center; min-height:100vh; padding:24px 0; background:var(--near-black)}
.login-card{width:min(400px,92vw); padding:30px 26px}
.login-brand{font:800 1.125rem/1.2 var(--font-head); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:6px}
.login-title{font-size:1.5rem; letter-spacing:-.01em; margin:0 0 8px}
.login-foot{text-align:center; margin:16px 0 0; line-height:2}
.login-back{display:inline-block; margin-top:4px}
/* Services page */
.hero.hero-wide h1{max-width:24ch}
.svc-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px 56px; align-items:start}
.svc-list h3{margin-bottom:.6em}
.svc-note{margin:26px 0 0; max-width:60ch; font-weight:600}
.section-head p + p{margin-top:.9em}
ul.checks + p{margin-top:.8em}

@media(max-width:860px){
  .row.c2,.row.c3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  section,.section{padding:52px 0}
}
@media print{
  header.site,footer.site,.topbar,.trace-band,.cta-band,.btn{display:none !important}
}

/* Legal copy -- terms, right of entry. Narrow measure and generous leading,
   because these are the pages people actually have to read. */
.legal h3 { font-size: 1.02rem; margin: 26px 0 8px; color: var(--ink); }
.legal p { margin: 0 0 12px; line-height: 1.65; color: var(--ink-2); }
.legal ul { margin: 0 0 14px 20px; }
.legal li { margin-bottom: 6px; line-height: 1.6; color: var(--ink-2); }
.legal b { color: var(--ink); }
/* Privacy page: section titles are h2 (no h3), so size them for a reading page. */
.legal.privacy h2 { font-size: 1.5rem; margin: 36px 0 10px; text-wrap: balance; }
/* Reading measure about 66 characters; paragraph spacing about 16px. */
.legal.privacy p, .legal.privacy li { max-width: 66ch; }
.legal.privacy p { margin-bottom: 16px; }
/* A long address or link wraps instead of pushing the page sideways. */
.legal a { overflow-wrap: anywhere; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important}
}
.reveal-on .rv{opacity:0;translate:0 14px;transition:opacity .6s,translate .6s}
.reveal-on .rv.in{opacity:1;translate:none}
@media print{.reveal-on .rv{opacity:1;translate:none}}

/* ---------- widths (ui-ux-designer check 2026-10-04) ---------- */
/* Below 1280 the copy stacks over the bottom half of the band. A full-width shade sits behind it, and the
   caption scrim moves to the top where the captions sit above the copy (ui-ux finding 11).
   The shade is clear to 22% of the band height and at its full 0.82 (DESIGN.md scene-scrim-bottom) from 44%, so the
   eyebrow, headline and lede sit on the full value. Measured on the real poster at 360x740 to 414x896 against the
   brightest background pixel behind each: lede >= 7.6:1, eyebrow (12.5px, needs 4.5:1) >= 4.8:1, headline >= 7.0:1. */
@media (max-width:1279px){
  .film-band{display:flex; flex-direction:column; justify-content:flex-end}
  .film-band::before{
    background:linear-gradient(180deg,var(--scrim-0) 0%,var(--scrim-0) 22%,var(--scrim-82) 44%,var(--scrim-82) 100%);
  }
  .film-band::after{
    top:0; bottom:auto; height:30%;
    background:linear-gradient(0deg,var(--scrim-0) 0%,var(--scrim-82) 100%);
  }
  .film-copy{
    width:100%; max-width:1180px; margin:0 auto;
    --copy-pad:clamp(240px,34vw,360px); padding-top:var(--copy-pad); padding-bottom:76px;
  }
  .film-captions{top:20px; bottom:auto; max-width:calc(100% - 48px)}
}
/* 820-1279: the film plays, the copy stacks low in the band, so Pause/Replay sit at the top beside the caption
   (inside the first screen at 1024x768) with the step dots under them. */
@media (min-width:820px) and (max-width:1279px){
  .film-ctrl{top:16px; bottom:auto; right:24px}
  .film-dots{top:64px; bottom:auto; right:16px}
  .film-captions{max-width:calc(100% - 48px - 220px)}
}
@media (max-width:1049px){
  .charts,.lower{grid-template-columns:1fr}
}
@media (max-width:899px){
  nav.main{display:none}
  nav.main.open{display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;
    align-items:stretch;background:var(--near-black);padding:12px 24px 18px;gap:6px;
    border-bottom:1px solid var(--line-dark)}
  nav.main.open a:not(.btn){padding:12px 0;min-height:44px;border-bottom:1px solid var(--line-dark)}
  nav.main.open .btn{margin-top:6px}
  header.site .wrap{gap:12px}
  header.site .head-book{display:inline-flex; min-height:44px; margin-left:auto}
  .menu-btn{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:6px}
  nav.main.open .nav-book{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .report-split{grid-template-columns:1fr; gap:36px}
}
@media (max-width:819px){
  .film-band .scene3d,.film-ctrl,.film-dots,.film-captions{display:none !important}
  .film-copy{padding-bottom:40px}
  /* the portrait phone poster (hero-poster-phone.*): its subject sits at the top, in the band's clear zone */
  .scene-poster{object-position:50% 0%}
  /* No film here, so no caption scrim, and the copy carries its own shade instead of the band: clear above
     the copy (the poster's pump jack and truck), a 56px ramp just above the eyebrow, and the full 0.82
     (scene-scrim-bottom) behind every line of copy, whatever the phone's height. */
  .film-band::before,.film-band::after{display:none}
  .film-copy::before{
    content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; top:calc(var(--copy-pad) - 64px);
    background:linear-gradient(180deg,var(--scrim-0) 0,var(--scrim-82) 56px,var(--scrim-82) 100%);
  }
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  /* The phone's first screen holds the hero's two buttons (375x667 and up): no tagline, a 44px phone row,
     a shorter run-in above the copy. */
  .topbar{padding:0}
  .topbar .tagline{display:none}
  .topbar a[href^="tel:"]{display:inline-flex; align-items:center; min-height:44px; font-weight:700}
  .film-copy{--copy-pad:clamp(96px,22vw,200px); padding-top:clamp(96px,22vw,200px)}
  /* header: wordmark, "Book a test" and "Menu" on one row; the buttons never wrap, the wordmark may stack */
  header.site .wrap{gap:10px}
  .brand b{font-size:.92rem; letter-spacing:.1em}
  .head-book{padding:0 12px; font-size:.82rem; white-space:nowrap}
  .menu-btn{padding:0 10px; white-space:nowrap}
  /* footer links are 44px tap rows */
  footer.site a:not(.btn){display:flex; align-items:center; min-height:44px; margin-bottom:0}
  footer.site .foot-bot a:not(.btn){display:flex}
  .foot-bot .foot-legal{display:flex; flex-direction:column}
  .foot-bot .sep{display:none}
  .hero-cta .btn,.btn-row .btn{width:100%}
  .kicker,legend,.eyebrow,.label-cap,.wellrow-head b{font-size:.78rem;letter-spacing:.08em}
  /* 16px fields: iOS zooms the page when a smaller field takes focus */
  input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],
  input[type=number],input[type=password],select,textarea{font-size:1rem}
}