/* compd.css (2026-11-02, comp D "truck plus plan grid"): home page only, linked after forensic.css, body class "forensic compd".
   Two ideas. 1) The van photo returns full width, and the name, the line and the phone sit as type on the black ground directly under it.
   2) The 3 over 2 image grid keeps its frames and gets a plan-sheet layer: thin grid, corner crosses, margin ticks, square markers with leader lines
   and mono labels, an A-0x title block under each frame. Black, white, the logo's red only. No motion on the overlays, so a callout never leaves its target. */

body.compd {
  --d-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --d-arch: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* One red button per viewport: on phones the call bar is the red one, so the call link inside the open menu is outlined. */
@media (max-width: 760px) {
  .compd .main-nav a.nav-call { background: transparent; border: 1px solid #fff; color: #fff; }
}

/* ---------- Hero: the van, whole ---------- */
.compd .d-hero { background: #000; padding: 0; }
.compd .d-photo { margin: 0; }
/* Saray 11-03: the van photo is gone. The Rey photo is 900 px wide, so it is framed at its own width (never drawn past 1x), centred on black, whole, no crop on desktop. */
.compd .d-photo picture, .compd .d-photo img { display: block; width: 100%; }
.compd .d-photo { padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter) 0; }
.compd .d-photo img { max-width: 900px; height: auto; aspect-ratio: 9 / 4; object-fit: cover; margin: 0 auto; }
@media (max-width: 600px) {
  .compd .d-photo { padding: 0; }
  .compd .d-photo img { max-width: none; }
}

/* Heading: type and structure on the black ground under the photo. A hairline with end ticks carries the eye from the name to the phone. */
.compd .d-wrap { position: relative; z-index: 2; padding-top: clamp(1.1rem, 2vw, 1.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.compd .d-head { display: grid; gap: 1.5rem 3rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid #fff; position: relative; }
.compd .d-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 13px; pointer-events: none; background: linear-gradient(#fff, #fff) 0 0 / 1px 13px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 1px 13px no-repeat; }
.compd .d-title { margin: 0; max-width: none; display: grid; gap: 0.15rem; color: #fff; font-family: var(--d-arch); font-stretch: 100%; letter-spacing: -0.01em; line-height: 1.04; }
body.compd main .d-title, body.compd main .d-title span { font-family: var(--d-arch) !important; font-stretch: 100% !important; }
body.compd main .d-title .d-l1 { font-weight: 300; color: #fff; }
body.compd main .d-title .d-l2 { font-weight: 800; letter-spacing: -0.02em; }
/* Ruler: quiet minor ticks under the hairline, every 12px, so the rule reads as a drawn dimension line and not a border. */
.compd .d-head::before { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 4px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 12px); }
.compd .d-kick { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.55rem; font-family: var(--d-mono); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.compd .d-kick::before { content: ""; width: 2.5rem; height: 1px; background: #fff; }
.compd .d-l1 { font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.compd .d-l2 { font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.compd .d-k, .compd .d-facts dt { font-family: var(--d-mono); font-weight: 400; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.compd .d-tel { display: flex; flex-direction: column; gap: 0.3rem; min-height: 44px; font-family: var(--d-arch); font-stretch: 100%; color: #fff; text-decoration: none; }
.compd .d-n { font-family: var(--d-arch); font-stretch: 100%; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.compd .d-tel:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.compd .d-tel:hover .d-n { text-decoration-thickness: 4px; }
.compd .d-facts { display: flex; flex-wrap: wrap; gap: 0.9rem 3rem; margin: 0; padding-top: 1rem; }
.compd .d-facts > div { display: flex; flex-direction: column; gap: 0.2rem; }
.compd .d-facts dt { margin: 0; }
.compd .d-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.35; color: #fff; }
@media (min-width: 901px) { .compd .d-head { grid-template-columns: minmax(0, 1fr) auto; } .compd .d-tel { align-items: flex-end; text-align: right; } }
/* Phones: ownership and license sit side by side, so both read above the fold and the sheet stays short. */
@media (max-width: 600px) {
  .compd .d-head { gap: 1.1rem; padding-bottom: 1.25rem; }
  .compd .d-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.5rem; padding-top: 1.1rem; }
}

/* ---------- The grid: the approved 3 over 2 blocks, untouched by default. body.plan adds the plan-sheet layer (comp A) ---------- */
.compd .i-tiles { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.compd .d-frame { position: relative; display: block; overflow: hidden; container-type: size; aspect-ratio: 3 / 2; }
.compd .f-tiles-2 .d-frame { aspect-ratio: 16 / 9; }
@media (min-width: 600px) and (max-width: 899px) { .compd .f-tiles-3 .f-tile:last-child .d-frame { aspect-ratio: 16 / 9; } }
.compd .d-frame img, .compd .f-tiles-2 .d-frame img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
.compd .f-tile img { transition: none; transform: none; }
.compd .f-tile:hover img, .compd .f-tile:focus-visible img { transform: none; }
.compd .d-ov, .compd .d-pno, .compd .d-go { display: none; }
.compd .d-pn { display: block; }

/* Plan layer. Callout points are fractions of the PHOTO. --W and --H are the size the photo is drawn at inside the frame
   (object-fit: cover, centred), so a marker stays on its pipe at any frame shape. */
.compd .d-psheet .d-ov { display: block; }
.compd .d-ov {
  --W: max(100cqw, calc(100cqh * var(--A)));
  --H: max(100cqh, calc(100cqw / var(--A)));
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.compd .d-ov::before {   /* margin ticks, left */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 14px);
}
.compd .d-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% calc(100% / 5);
}
.compd .d-grid::before {   /* margin ticks, right */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 7px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 14px);
}
.compd .d-grid::after {   /* corner crosses */
  content: ""; position: absolute; inset: 0; opacity: 0.85;
  background:
    linear-gradient(#fff, #fff) 12px 10px / 14px 1px no-repeat, linear-gradient(#fff, #fff) 18.5px 3.5px / 1px 14px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 12px) 10px / 14px 1px no-repeat, linear-gradient(#fff, #fff) calc(100% - 18.5px) 3.5px / 1px 14px no-repeat,
    linear-gradient(#fff, #fff) 12px calc(100% - 10px) / 14px 1px no-repeat, linear-gradient(#fff, #fff) 18.5px calc(100% - 16.5px) / 1px 14px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 12px) calc(100% - 10px) / 14px 1px no-repeat, linear-gradient(#fff, #fff) calc(100% - 18.5px) calc(100% - 16.5px) / 1px 14px no-repeat;
}

/* Callouts: square marker, 45 degree leader, mono label on a short rule */
.compd .d-co {
  --sx: 1; --fy: 1;
  position: absolute; width: 0; height: 0; margin: 0;
  left: calc((100cqw - var(--W)) * 0.5 + var(--W) * var(--x));
  top: calc((100cqh - var(--H)) * 0.5 + var(--H) * var(--y));
}
.compd .d-l { --sx: -1; }
.compd .d-d { --fy: -1; }
.compd .d-ring { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 2px solid #fff; background: transparent; outline: 1px solid rgba(0, 0, 0, 0.55); }
.compd .d-ring::after { content: ""; position: absolute; left: 3px; top: 3px; width: 2px; height: 2px; background: #fff; }
.compd .d-dia { position: absolute; left: 0; top: 0; width: 1.6rem; height: 0; transform-origin: 0 0; transform: scale(var(--sx), var(--fy)) rotate(-45deg); }
.compd .d-dia i, .compd .d-ln { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #fff; outline: 1px solid rgba(0, 0, 0, 0.5); transform-origin: 0 50%; }
.compd .d-hor { position: absolute; top: calc(var(--fy) * -1.13rem); transform: translateY(-100%); width: max-content; }
.compd .d-r .d-hor { left: 1.13rem; }
.compd .d-l .d-hor { right: 1.13rem; }
.compd .d-ln { top: auto; bottom: -2px; }
.compd .d-l .d-ln { transform-origin: 100% 50%; }
.compd .d-t {
  display: block; padding: 0.22rem 0.55rem; background: #000; border: 1px solid rgba(255, 255, 255, 0.55); border-bottom: 0;
  font-family: var(--d-mono); font-weight: 400; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
@media (max-width: 700px) {
  .compd .d-t { font-size: 0.68rem; padding: 0.2rem 0.4rem; letter-spacing: 0.08em; }
  .compd .d-dia { width: 1.2rem; }
  .compd .d-hor { top: calc(var(--fy) * -0.85rem); }
  .compd .d-r .d-hor { left: 0.85rem; }
  .compd .d-l .d-hor { right: 0.85rem; }
}

/* Title block under each frame (plan only): sheet mark, name and one line, arrow. Hover inverts it (the photo never moves). */
.compd .d-psheet .d-tile { background: #000; border-color: #fff; }
.compd .d-psheet .d-plate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; padding: 0; border-top: 1px solid #fff; background: #000; }
.compd .d-psheet .d-plate > * { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0.8rem 1rem; }
.compd .d-psheet .d-plate .d-pno { display: flex; font-family: var(--d-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.55); white-space: nowrap; }
.compd .d-psheet .d-plate .d-go { display: flex; font-style: normal; font-family: var(--d-arch); font-size: 1.1rem; color: #fff; border-left: 1px solid rgba(255, 255, 255, 0.55); justify-content: center; }
.compd .d-psheet .d-plate .f-tile-name { margin: 0 0 0.2rem; font-family: var(--d-arch); font-weight: 800; font-stretch: 108%; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.15; color: #fff; }
.compd .d-psheet .d-plate .f-tile-line { font-size: 0.9375rem; line-height: 1.4; color: #ececec; }
.compd .d-psheet .d-tile:hover .d-plate, .compd .d-psheet .d-tile:focus-visible .d-plate { background: #fff; }
.compd .d-psheet .d-tile:hover .d-plate *, .compd .d-psheet .d-tile:focus-visible .d-plate * { color: #000; border-color: rgba(0, 0, 0, 0.4); }
.compd .d-psheet .d-tile:hover .f-tile-name, .compd .d-psheet .d-tile:focus-visible .f-tile-name { text-decoration: none; }


/* Full-width plan sheets (copied from comp A): big frame, thin grid, crosses, ticks, square markers, mono labels, title block, one unlabelled dimension line.
   Same markup as a grid tile, wider and taller. */
.compd .d-psheet { padding: clamp(1.25rem, 3vw, 2.5rem) 0; }
.compd .d-psheet .d-tile { display: block; }
.compd .d-psheet .d-frame { aspect-ratio: 20 / 9; }
@media (max-width: 700px) { .compd .d-psheet .d-frame { aspect-ratio: 4 / 3; } }
.compd .d-psheet .d-plate { grid-template-columns: auto minmax(0, 1fr) auto; }
.compd .d-dim { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 0; }
.compd .d-dim::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #fff; outline: 1px solid rgba(0, 0, 0, 0.5); }
.compd .d-dim::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
@media (max-width: 700px) { .compd .d-mh { display: none; } }

/* Accessibility pass (review-a11y, 2026-11-02) */
/* The footer sits on white; the shared rule left its two column headings white on white. */
.compd .site-footer .footer-grid .footer-heading { color: #000; }
/* 44px touch targets for the desktop nav links and the Google rating link. */
@media (min-width: 761px) { .compd .main-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; } }
.compd .review-score { min-height: 44px; align-items: center; }
/* Anchor jumps (skip link, Request service) do not glide for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Below the grid (2026-11-03): repair picture row, one text link, no paragraphs ---------- */
.compd .d-rep { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 0; }
.compd .d-reps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.compd .d-reps li { margin: 0; }
.compd .d-reps .f-tile img { aspect-ratio: 4 / 3; }
.compd .d-reps .f-tile-body { padding: 0.7rem 0.8rem 0.8rem; }
.compd .d-reps .f-tile-name { margin: 0; font-size: 1rem; line-height: 1.25; }
@media (min-width: 900px) { .compd .d-reps { gap: 1.5rem; } .compd .d-reps .f-tile img { aspect-ratio: 3 / 2; } .compd .d-reps .f-tile-name { font-size: 1.125rem; } }
@media (max-width: 599px) { .compd .d-reps { gap: 0.5rem; } .compd .d-reps .f-tile img { aspect-ratio: 1 / 1; } .compd .d-reps .f-tile-body { padding: 0.55rem 0.5rem 0.65rem; } .compd .d-reps .f-tile-name { font-size: 0.875rem; } }
.compd .i-area-text { padding-top: 0.25rem; padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.compd .d-reps .f-tile { height: 100%; }

/* Saray 11-03: the lone Slow drains cell (i-w5 after the small cells were cut) spans the row on phones. */
@media (max-width: 899px) { .forensic .i-cell.i-w5 { grid-column: 1 / -1; } }