.cookie-banner a:focus-visible,.cookie-banner button:focus-visible,
.jch-panel a:focus-visible,.site-footer a:focus-visible,
.nav:not(.scrolled) a:focus-visible,.nav:not(.scrolled) button:focus-visible{outline-color:#fff;}

.jch-panel h1 em{color:inherit;}
/* the old hero dimmed h1 spans to 65%, which made only the italic look full-strength */
.jch-panel h1 em{font-style:italic;white-space:nowrap;}
/* ── HERO: live job cost report over the frame shot ───────────────────── */
.jch{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--c-bg);}
.jch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;z-index:0;}
.jch-bg,.jch-fg{}
/* darkens the upper sky just enough for white figures to read */
.jch-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.52) 26%,rgba(255,255,255,.34) 46%,rgba(255,255,255,.12) 64%,rgba(255,255,255,0) 78%);}
.jch-report{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s ease;
  padding:clamp(46px,7.5vh,88px) clamp(12px,2.4vw,34px) 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.22) 98%,rgba(0,0,0,0) 100%),
                     linear-gradient(90deg,#000 0%,#000 92%,rgba(0,0,0,.5) 98%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.62) 94%,rgba(0,0,0,.22) 98%,rgba(0,0,0,0) 100%),
                     linear-gradient(90deg,#000 0%,#000 92%,rgba(0,0,0,.5) 98%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.jch-report.jch-ready{opacity:1;}
.jch-title{font-family:'Arial Black','Arial Bold',Arial,sans-serif;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
  font-size:clamp(8px,.78vw,10px);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(168,31,31,.85);margin-bottom:7px;}
.jch-grid{display:grid;grid-template-columns:64px minmax(112px,1.5fr) repeat(12,minmax(52px,1fr));
  column-gap:clamp(6px,.72vw,14px);font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  /* hero.js writes the rows, so the grid is empty on first paint. Reserving
     the finished height here is what keeps CLS at zero: the row count is
     fixed, so the space it needs is known before the script runs. Tied to
     SRC.length in build/hero.js, and to the row metrics just below. */
  --jch-rows:29;--jch-rh:17.7px;--jch-chrome:46px;
  min-height:calc(var(--jch-rows) * var(--jch-rh) + var(--jch-chrome));}
.jch-grid > span{padding:3px 0;}
.jch-grid .hd{font-family:'Arial Black','Arial Bold',Arial,sans-serif;letter-spacing:.02em;white-space:normal;font-size:clamp(6.6px,.6vw,8.2px);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(168,31,31,.78);text-align:right;line-height:1.25;
  border-bottom:1.5px solid #C13A3A;padding-bottom:6px !important;margin-bottom:3px;}
.jch-grid .hd.l{text-align:left;}
.jch-grid .c{font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:.02em;font-size:clamp(8px,.72vw,10.2px);font-weight:700;letter-spacing:.07em;color:#A81F1F;text-align:left;}
.jch-grid .d{font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:.02em;font-size:clamp(7.6px,.68vw,9.6px);font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(168,31,31,.82);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jch-grid .n{font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:.02em;font-size:clamp(8px,.72vw,10.2px);font-weight:400;color:#A81F1F;text-align:right;}
.jch-grid .n.k{font-weight:700;color:#8B1D1D;}
.jch-grid .n.dim{color:rgba(168,31,31,.7);}
.jch-grid .totrow{border-top:1.5px solid #C13A3A;margin-top:4px;padding-top:7px !important;
  font-weight:700;color:#8B1D1D;font-size:clamp(8px,.74vw,10.4px);}
/* the cut-out photo, so the report falls behind everything solid */
.jch-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;z-index:3;pointer-events:none;}
.jch-panel{position:absolute;z-index:5;right:clamp(16px,9vw,190px);top:51%;transform:translateY(-50%);
  width:min(468px,41vw);padding:clamp(28px,3.2vw,46px);
  background:rgba(var(--paper),0.58);
  -webkit-backdrop-filter:blur(30px) saturate(1.2);backdrop-filter:blur(30px) saturate(1.2);
  border:1px solid rgba(var(--ink),0.10);border-radius:0;box-shadow:0 30px 80px rgba(0,0,0,.18);}
.jch-panel h1{font-family:'Arial Black','Arial Bold',Arial,sans-serif;font-weight:900;letter-spacing:-.035em;color:var(--c-black);margin:0;
  font-size:clamp(30px,3.35vw,49px);line-height:1.04;letter-spacing:-.012em;text-wrap:pretty;}
.jch-panel p{margin:17px 0 0;color:var(--c-black);font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:300;
  font-size:clamp(17px,1.2vw,19px);line-height:1.5;}
.jch-cta{display:inline-block;margin-top:26px;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--c-white);background:var(--c-black);text-decoration:none;padding:15px 26px;white-space:nowrap;transition:background 0.2s;}
@media(max-width:1500px){ .jch-grid .col-rp{display:none} .jch-grid{grid-template-columns:60px minmax(104px,1.5fr) repeat(11,minmax(50px,1fr))} }
@media(max-width:1280px){ .jch-grid .col-rb{display:none} .jch-grid{grid-template-columns:56px minmax(96px,1.5fr) repeat(10,minmax(48px,1fr))} }
@media(max-width:1100px){ .jch-grid .col-paid{display:none} .jch-grid{grid-template-columns:54px minmax(92px,1.5fr) repeat(9,minmax(46px,1fr))} }
@media(max-width:980px){ .jch-grid .col-cco,.jch-grid .col-billed{display:none} .jch-grid{grid-template-columns:52px minmax(88px,1.4fr) repeat(7,minmax(44px,1fr))} }
@media(max-width:820px){
  .jch{height:auto;min-height:100svh;}
  .jch-tint{background:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.44) 32%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 70%);}
  /* The report stays a background layer on a phone, exactly as it is on the
     desktop. Letting it push the panel down instead put the headline 1200px
     below the top of the page, which is no headline at all. It carries all 29
     divisions either way; the section simply crops what runs past the fold,
     the way a sheet of paper does when it goes under something. */
  .jch-report{position:absolute;padding:clamp(58px,9vh,86px) 14px 0;
    -webkit-mask-composite:source-over;mask-composite:add;}
  .jch-grid .col-aco,.jch-grid .col-ctd,.jch-grid .col-desc,.jch-grid .col-bud,.jch-grid .col-cmt{display:none}
  .jch-grid{grid-template-columns:52px repeat(3,minmax(0,1fr));column-gap:10px}
  /* A phone gets every cost code the desktop sheet has, so the rows tighten
     rather than the list shortening. */
  .jch-grid > span{padding:1.5px 0;}
  .jch-grid{--jch-rh:12.7px;--jch-chrome:40px;}
  .jch-panel{position:relative;right:auto;top:auto;transform:none;width:auto;
    margin:52vh clamp(12px,4vw,20px) clamp(16px,4vh,24px);}
  .jch-fg{position:absolute;}
  /* give the photograph room below the panel so the fade has distance to work */
  .jch{padding-bottom:26vh;}
  .jch-bg,.jch-fg{object-position:26% 56%;}
}
@media(prefers-reduced-motion:reduce){.jch-grid .tickf{animation:none}}
/* Scenery, not content: the report must never half-highlight on a drag. */
.jch-report,.jch-grid,.jch-title{-webkit-user-select:none;user-select:none;}

/* The report eyebrow: three fields, spaced rather than punctuated. Middots
   between them read as a list; space and a hairline read as a title block,
   which is what the line actually is. */
.jch-title span:first-child{display:flex;align-items:baseline;gap:0;}
.jch-title b{font-weight:inherit;padding-right:22px;margin-right:22px;
  border-right:1px solid rgba(168,31,31,.34);}
.jch-title b:last-child{padding-right:0;margin-right:0;border-right:0;}
@media(max-width:820px){ .jch-title b{padding-right:12px;margin-right:12px;} }