/* ==========================================================================
   DISPATCH
   A sitekit family for emergency plumbing.

   WHY IT LOOKS LIKE THIS. This is a site people reach at two in the morning
   with water coming through a ceiling. Everything about it is built for
   that reader: a dark ground because the phone is the only light in the
   room, the rate card standing in a rail that never leaves the screen, and
   a heading face heavy enough to read at arm's length while you are holding
   a torch in the other hand.

   IT IS THE DELIBERATE INVERSE OF CONDUIT, the drain family, because the
   two share a content engine and would otherwise read alike:

     conduit    warm paper, hairlines, a reading serif, a ruled spine, one
                earth accent. A survey document.
     dispatch   near-black ground, content on raised light plates, a
                condensed grotesque, asymmetric splits, a cold accent and a
                second hot one reserved for genuine urgency. A duty desk.

   TWO COLOURS, AND THE SECOND ONE IS RATIONED. Ice is the interface. Hot is
   used only where something is actually urgent -- the emergency row of the
   rate rail, the "ring now" panel. A site that shouts everywhere is a site
   that cannot tell you when something matters.

   Class prefix is dx-. Nothing here may collide with another family: two
   families sharing class names means a fix to one silently restyles the
   other, and the "every class is defined" gate cannot see the difference.
   ========================================================================== */

:root {
  /* the dark */
  --dx-void:    #0b0e11;
  --dx-panel:   #121a20;
  --dx-panel-2: #18222a;
  --dx-line:    #232f38;
  --dx-line-2:  #33434f;

  /* the light plates content sits on */
  --dx-plate:   #ffffff;
  --dx-plate-2: #eef2f5;
  --dx-ink:     #0b0e11;
  --dx-ink-2:   #3d4b56;

  /* type on the dark */
  --dx-text:    #c2ccd4;
  --dx-dim:     #7f8d99;

  /* the interface colour */
  --dx-ice:     #3ec3e6;
  --dx-ice-dk:  #1a93b4;
  --dx-ice-lo:  #0d2b35;

  /* rationed: genuine urgency only */
  --dx-hot:     #ff4b3a;

  --dx-f-disp: "Barlow Condensed", "Arial Narrow", sans-serif;
  --dx-f-body: "Inter", system-ui, -apple-system, sans-serif;

  --dx-gut: 26px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dx-void);
  color: var(--dx-text);
  font-family: var(--dx-f-body);
  font-size: 1.0125rem;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--dx-f-disp);
  color: #fff;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.005em;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.dx-wrap { max-width: 1220px; margin: 0 auto; padding: 0 var(--dx-gut); }

.dx-skip { position: absolute; left: -9999px; }
.dx-skip:focus {
  left: 14px; top: 10px; z-index: 80;
  background: var(--dx-ice); color: var(--dx-ink);
  padding: 10px 16px; font-family: var(--dx-f-disp); text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--dx-ice); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   masthead
   -------------------------------------------------------------------------- */
.dx-top {
  background: #050709;
  border-bottom: 1px solid var(--dx-line);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dx-dim);
}
.dx-top .dx-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 34px;
}
.dx-top-items { display: flex; gap: 24px; }
.dx-top-items span { white-space: nowrap; }
.dx-top-items span::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 8px; vertical-align: 1px;
  background: var(--dx-ice);
}
.dx-top a { color: #fff; text-decoration: none; white-space: nowrap; }

.dx-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 14, 17, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--dx-line);
}
.dx-head .dx-wrap {
  display: flex; align-items: center; gap: 22px; min-height: 72px;
}

.dx-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto;
}
.dx-brand-mark { line-height: 0; }
.dx-brand span {
  font-family: var(--dx-f-disp);
  font-size: 1.52rem; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}

.dx-nav { display: flex; align-items: center; gap: 4px; }
.dx-nav a {
  font-family: var(--dx-f-disp);
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--dx-text); text-decoration: none;
  padding: 8px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.dx-nav a:hover { color: #fff; background: var(--dx-panel); }
.dx-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--dx-ice); }

.dx-head-tel {
  font-family: var(--dx-f-disp);
  font-size: 1.32rem; font-weight: 600; letter-spacing: .01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.dx-head-tel:hover { color: var(--dx-ice); }
.dx-head-tel .dx-ic { color: var(--dx-ice); width: 18px; height: 18px; }

.dx-burger {
  display: none; width: 44px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--dx-panel); border: 1px solid var(--dx-line-2);
  color: #fff; cursor: pointer; padding: 0;
}

/* --------------------------------------------------------------------------
   THE RATE RAIL

   The standing facts, directly under the masthead. This is the component
   the family exists for: an emergency caller's first question is what it
   costs at this hour, and on most sites the answer is a form.
   -------------------------------------------------------------------------- */
/* A BAND OF ITS OWN, below the hero. It used to be emitted by the header,
   which stacked three strips above every h1. Ruled top and bottom now,
   because it no longer has a masthead above it to sit against. */
.dx-rail {
  display: block;
  background: var(--dx-panel);
  border-top: 1px solid var(--dx-line);
  border-bottom: 1px solid var(--dx-line);
}
.dx-rail .dx-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dx-rail-cell {
  padding: 15px 22px;
  border-left: 1px solid var(--dx-line);
  display: flex; flex-direction: column; gap: 3px;
}
.dx-rail-cell:first-child { border-left: none; padding-left: 0; }
.dx-rail-cell b {
  font-family: var(--dx-f-disp);
  font-size: 1.44rem; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.dx-rail-cell span {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dx-dim);
}
/* the one cell that is allowed to be hot */
.dx-rail-cell-now b { color: var(--dx-hot); }
.dx-rail-cell-now span { color: #d98a80; }

/* --------------------------------------------------------------------------
   buttons
   -------------------------------------------------------------------------- */
.dx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--dx-f-disp);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  padding: 13px 24px; border: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.dx-btn-lg { padding: 16px 30px; font-size: 1.16rem; }
.dx-btn-hot { background: var(--dx-hot); color: #fff; border-color: var(--dx-hot); }
.dx-btn-hot:hover { background: #e63a2a; border-color: #e63a2a; }
.dx-btn-ice { background: var(--dx-ice); color: var(--dx-ink); border-color: var(--dx-ice); }
.dx-btn-ice:hover { background: var(--dx-ice-dk); border-color: var(--dx-ice-dk); color: #fff; }
.dx-btn-line { background: none; color: #fff; border-color: var(--dx-line-2); }
.dx-btn-line:hover { border-color: #fff; }
.dx-btn-dark { background: var(--dx-ink); color: #fff; border-color: var(--dx-ink); }
.dx-btn-dark:hover { background: #000; border-color: #000; }
.dx-ic { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   sections
   -------------------------------------------------------------------------- */
.dx-sec { padding: 72px 0; position: relative; }
.dx-sec-tight { padding: 44px 0; }
.dx-sec-panel { background: var(--dx-panel); }
.dx-sec-panel-2 { background: var(--dx-panel-2); }

/* the light section: content on a plate, which is where prose is readable */
.dx-sec-lit { background: var(--dx-plate-2); color: var(--dx-ink-2); }
.dx-sec-lit h2, .dx-sec-lit h3 { color: var(--dx-ink); }
.dx-sec-lit .dx-kick { color: var(--dx-ice-dk); }

.dx-shead { max-width: 780px; margin-bottom: 34px; }
.dx-kick {
  display: block;
  font-family: var(--dx-f-disp);
  font-size: .86rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dx-ice); margin-bottom: 12px;
}
.dx-shead h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); }
.dx-shead p { margin-top: 14px; font-size: 1.06rem; }
.dx-shead-link {
  display: inline-block; margin-top: 15px;
  font-family: var(--dx-f-disp); font-size: .96rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dx-ice); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.dx-shead-link:hover { color: #fff; }

/* --------------------------------------------------------------------------
   THE OPENING -- asymmetric, 7/5, with the plate overlapping the fold
   -------------------------------------------------------------------------- */
.dx-open { padding: 66px 0 0; position: relative; overflow: hidden; }
.dx-open::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 8%,
              rgba(62, 195, 230, .11), transparent 62%);
  pointer-events: none;
}
.dx-open .dx-wrap {
  position: relative;
  display: grid; grid-template-columns: 7fr 5fr; gap: 50px; align-items: start;
}

.dx-crumbs {
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dx-dim); margin-bottom: 22px;
}
.dx-crumbs a { color: var(--dx-dim); text-decoration: none; }
.dx-crumbs a:hover { color: var(--dx-ice); }
.dx-crumbs i { font-style: normal; padding: 0 8px; color: var(--dx-line-2); }

.dx-flag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--dx-f-disp); font-size: .95rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--dx-hot);
  padding: 7px 14px; margin-bottom: 20px;
}

.dx-open h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: .97; letter-spacing: -.012em;
}
.dx-open h1 em { font-style: normal; color: var(--dx-ice); }
.dx-lede { margin-top: 20px; font-size: 1.14rem; max-width: 33em; }
.dx-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* A DARK PHOTOGRAPH ON A DARK GROUND DISAPPEARS, and this trade's
   photographs are basements, crawlspaces and cellars -- measured: the
   opening picture rendered as an unbroken black rectangle indistinguishable
   from the page behind it. So the slot has its own ground and edge, and the
   image is lifted enough to separate from the page without washing out. */
.dx-open-media {
  position: relative;
  background: var(--dx-panel);
  border: 1px solid var(--dx-line-2);
}
.dx-open-media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  filter: brightness(1.16) saturate(.92) contrast(1.02);
}
/* the same problem in the body of the page */
.dx-media, .dx-shots > * { background: var(--dx-panel); }
.dx-media img { filter: brightness(1.12) saturate(.92); }

/* the scope plate -- white, and it overlaps the picture's lower edge */
.dx-plate {
  background: var(--dx-plate);
  color: var(--dx-ink-2);
  padding: 24px 26px;
  margin: -46px 22px 0 -34px;
  position: relative; z-index: 2;
  border-top: 4px solid var(--dx-ice);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.dx-plate h2 {
  color: var(--dx-ink); font-size: 1.16rem; margin-bottom: 14px;
}
.dx-plate ul { list-style: none; margin: 0; padding: 0; }
.dx-plate li {
  display: flex; gap: 10px; padding: 9px 0;
  border-top: 1px solid #dfe5ea; font-size: .92rem; line-height: 1.5;
}
.dx-plate li:first-child { border-top: none; padding-top: 0; }
.dx-plate .dx-ic { color: var(--dx-ice-dk); margin-top: 3px; }
.dx-plate-foot {
  margin-top: 15px; padding-top: 13px; border-top: 2px solid var(--dx-ink);
  font-family: var(--dx-f-disp); font-size: 1.24rem; color: var(--dx-ink);
  font-variant-numeric: tabular-nums;
}

/* the standing facts strip under the opening */
.dx-trust { background: #050709; border-top: 1px solid var(--dx-line); }
.dx-trust .dx-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dx-trust-item {
  display: flex; gap: 12px; padding: 24px 24px 24px 0;
  border-left: 1px solid var(--dx-line); padding-left: 24px;
}
.dx-trust-item:first-child { border-left: none; padding-left: 0; }
.dx-trust-item .dx-ic { color: var(--dx-ice); margin-top: 2px; }
.dx-trust-item strong {
  display: block; font-family: var(--dx-f-disp); font-size: 1.08rem;
  text-transform: uppercase; color: #fff; letter-spacing: .02em;
}
.dx-trust-item span {
  display: block; margin-top: 2px; font-size: .84rem;
  color: var(--dx-dim); line-height: 1.45;
}

/* --------------------------------------------------------------------------
   the figures band
   -------------------------------------------------------------------------- */
.dx-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dx-fig { padding: 20px 26px; border-left: 2px solid var(--dx-line); }
.dx-fig:first-child { border-left: none; padding-left: 0; }
.dx-fig b {
  display: block; font-family: var(--dx-f-disp);
  font-size: 2.1rem; font-weight: 600; color: var(--dx-ice);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dx-fig span {
  display: block; margin-top: 8px; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dx-dim);
}

/* --------------------------------------------------------------------------
   LANE CARDS -- plated, two up, with the index bled into the corner
   -------------------------------------------------------------------------- */
.dx-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--dx-line); }
.dx-lane {
  position: relative; background: var(--dx-void);
  padding: 26px 26px 26px 76px; text-decoration: none; display: block;
}
.dx-lane::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .12s;
}
.dx-lane:hover { background: var(--dx-panel); }
.dx-lane:hover::before { background: var(--dx-ice); }
.dx-lane-n {
  position: absolute; left: 26px; top: 27px;
  font-family: var(--dx-f-disp); font-size: 1.28rem; color: var(--dx-line-2);
  font-variant-numeric: tabular-nums;
}
.dx-lane h3 { font-size: 1.3rem; margin-bottom: 8px; }
.dx-lane:hover h3 { color: var(--dx-ice); }
.dx-lane p { margin: 0; font-size: .95rem; color: var(--dx-dim); }
.dx-lane-flat { cursor: default; }
.dx-lane-flat:hover { background: var(--dx-void); }
.dx-lane-flat:hover h3 { color: #fff; }

/* --------------------------------------------------------------------------
   the numbered route
   -------------------------------------------------------------------------- */
.dx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px;
            background: var(--dx-line); }
.dx-step { background: var(--dx-void); padding: 26px 24px; counter-increment: dxs; }
.dx-sec-lit .dx-step { background: var(--dx-plate); }
.dx-steps { counter-reset: dxs; }
.dx-step::before {
  content: counter(dxs, decimal-leading-zero);
  display: block; font-family: var(--dx-f-disp); font-size: 1.1rem;
  color: var(--dx-ice-dk); letter-spacing: .1em; margin-bottom: 12px;
}
.dx-step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.dx-step p { margin: 0; font-size: .94rem; }

/* --------------------------------------------------------------------------
   THE RATE TABLE
   -------------------------------------------------------------------------- */
.dx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dx-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.dx-table th {
  text-align: left; padding: 0 20px 12px 0;
  border-bottom: 2px solid var(--dx-line-2);
  font-family: var(--dx-f-disp); font-size: .85rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dx-dim);
  white-space: nowrap; vertical-align: bottom;
}
.dx-table th:last-child, .dx-table td:last-child { padding-right: 0; }
.dx-table td {
  padding: 18px 20px 18px 0; border-bottom: 1px solid var(--dx-line);
  vertical-align: top;
}
.dx-table td:first-child {
  font-family: var(--dx-f-disp); font-size: 1.2rem; color: #fff;
  text-transform: uppercase; width: 34%;
}
.dx-table td:first-child a { text-decoration: none; }
.dx-table td:first-child a:hover { color: var(--dx-ice); }
.dx-num {
  display: block; font-family: var(--dx-f-disp); font-size: 1.44rem;
  color: var(--dx-ice); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dx-sub { display: block; margin-top: 4px; font-size: .86rem; color: var(--dx-dim); }
.dx-when { color: var(--dx-dim); }
.dx-table-note { margin-top: 18px; font-size: .88rem; color: var(--dx-dim); max-width: 58em; }
.dx-sec-lit .dx-table th { color: var(--dx-ink-2); border-bottom-color: var(--dx-ink); }
.dx-sec-lit .dx-table td { border-bottom-color: #dfe5ea; }
.dx-sec-lit .dx-table td:first-child { color: var(--dx-ink); }
.dx-sec-lit .dx-num { color: var(--dx-ice-dk); }
.dx-sec-lit .dx-sub, .dx-sec-lit .dx-when, .dx-sec-lit .dx-table-note { color: var(--dx-ink-2); }

/* --------------------------------------------------------------------------
   asymmetric split
   -------------------------------------------------------------------------- */
.dx-split { display: grid; grid-template-columns: 6fr 5fr; gap: 46px; align-items: start; }
.dx-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dx-media-wide img { aspect-ratio: 16 / 10; }
.dx-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* THE CAPTION. stills() and showcase() are handed (name, caption, line) and
   used to discard both, so every photograph on the site was unlabelled. On
   a dark family the caption also gives the picture an edge to finish on --
   without it a dark photograph just fades into the page. */
.dx-cap {
  margin: 0;
  padding: 13px 16px;
  background: var(--dx-panel);
  border-top: 2px solid var(--dx-ice);
  font-family: var(--dx-f-disp);
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.dx-cap span {
  display: block;
  margin-top: 5px;
  font-family: var(--dx-f-body);
  font-size: .87rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dx-dim);
  line-height: 1.5;
}
.dx-sec-lit .dx-cap { background: var(--dx-plate); color: var(--dx-ink);
                      border-top-color: var(--dx-ice-dk); }
.dx-sec-lit .dx-cap span { color: var(--dx-ink-2); }

/* ONE full-width photograph, its caption set beside it. The only component
   in the family allowed the whole width, which is what makes it land. */
.dx-wide { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
           gap: 26px; align-items: end; }
.dx-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
               filter: brightness(1.12) saturate(.92); }
.dx-wide > div:first-child { background: var(--dx-panel);
                             border: 1px solid var(--dx-line-2); }

.dx-args { margin-top: 22px; }
.dx-arg { padding: 18px 0 18px 20px; border-left: 2px solid var(--dx-line); }
.dx-arg:hover { border-left-color: var(--dx-ice); }
.dx-arg h3 { font-size: 1.16rem; margin-bottom: 6px; }
.dx-arg p { margin: 0; font-size: .95rem; }
.dx-sec-lit .dx-arg { border-left-color: #d3dbe1; }

/* --------------------------------------------------------------------------
   lists
   -------------------------------------------------------------------------- */
.dx-checks { list-style: none; margin: 0; padding: 0; }
.dx-checks li {
  display: flex; gap: 11px; padding: 10px 0;
  border-bottom: 1px solid var(--dx-line); font-size: .98rem;
}
.dx-checks .dx-ic { color: var(--dx-ice); margin-top: 4px; }
.dx-sec-lit .dx-checks li { border-bottom-color: #dfe5ea; }
.dx-sec-lit .dx-checks .dx-ic { color: var(--dx-ice-dk); }

.dx-olist { list-style: none; counter-reset: dxo; margin: 0; padding: 0;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; }
.dx-olist li {
  counter-increment: dxo; background: var(--dx-panel);
  padding: 20px 22px; font-size: .96rem;
}
.dx-olist li::before {
  content: counter(dxo, decimal-leading-zero);
  display: block; font-family: var(--dx-f-disp); font-size: 1.05rem;
  color: var(--dx-ice); letter-spacing: .1em; margin-bottom: 9px;
}
.dx-olist strong {
  display: block; font-family: var(--dx-f-disp); font-size: 1.14rem;
  text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.dx-sec-lit .dx-olist li { background: var(--dx-plate); }
.dx-sec-lit .dx-olist strong { color: var(--dx-ink); }
.dx-sec-lit .dx-olist li::before { color: var(--dx-ice-dk); }

/* --------------------------------------------------------------------------
   ring now / it can wait
   -------------------------------------------------------------------------- */
.dx-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--dx-line); }
.dx-pane { background: var(--dx-void); padding: 28px 26px; }
.dx-pane-h {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid var(--dx-line-2);
}
.dx-pane-h h3 { font-size: 1.24rem; letter-spacing: .06em; }
.dx-pane-now { background: #14090a; }
.dx-pane-now .dx-pane-h { border-bottom-color: var(--dx-hot); }
.dx-pane-now .dx-pane-h .dx-ic { color: var(--dx-hot); }
.dx-pane-wait .dx-pane-h .dx-ic { color: var(--dx-dim); }
.dx-pane ul { list-style: none; margin: 0; padding: 0; }
.dx-pane li { padding: 13px 0; border-bottom: 1px solid var(--dx-line); font-size: .96rem; }
.dx-pane li:last-child { border-bottom: none; }
.dx-pane li b { display: block; font-family: var(--dx-f-disp); font-size: 1.1rem;
                text-transform: uppercase; color: #fff; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   questions
   -------------------------------------------------------------------------- */
.dx-faq { max-width: 900px; border-top: 2px solid var(--dx-line-2); }
.dx-q { padding: 22px 0; border-bottom: 1px solid var(--dx-line); }
.dx-q h3 { font-size: 1.2rem; margin-bottom: 9px; }
.dx-q p { margin: 0; font-size: .98rem; }
.dx-sec-lit .dx-faq { border-top-color: var(--dx-ink); }
.dx-sec-lit .dx-q { border-bottom-color: #dfe5ea; }

/* --------------------------------------------------------------------------
   area tags
   -------------------------------------------------------------------------- */
.dx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-tag {
  font-family: var(--dx-f-disp); font-size: 1rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: #fff; border: 1px solid var(--dx-line-2); padding: 8px 15px;
}
.dx-tag:hover { border-color: var(--dx-ice); color: var(--dx-ice); }
.dx-sec-lit .dx-tag { color: var(--dx-ink); border-color: #cdd6dd; }
.dx-sec-lit .dx-tag:hover { border-color: var(--dx-ice-dk); color: var(--dx-ice-dk); }

/* --------------------------------------------------------------------------
   the standing note -- a hot-edged bar
   -------------------------------------------------------------------------- */
.dx-note {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px;
  align-items: center; background: var(--dx-panel);
  border-left: 5px solid var(--dx-hot); padding: 28px 30px;
}
.dx-note h2 { font-size: clamp(1.5rem, 2.9vw, 2.05rem); }
.dx-note p { margin: 10px 0 0; max-width: 46em; }

/* --------------------------------------------------------------------------
   the closing band
   -------------------------------------------------------------------------- */
.dx-end { background: var(--dx-ice-lo); border-top: 1px solid var(--dx-ice-dk); padding: 64px 0; }
.dx-end .dx-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
}
.dx-end h2 { font-size: clamp(1.9rem, 3.7vw, 2.7rem); }
.dx-end p { margin-top: 13px; max-width: 46em; }
.dx-end-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   the form
   -------------------------------------------------------------------------- */
.dx-form { display: grid; gap: 15px; max-width: 560px; margin-top: 8px; }
.dx-field { display: grid; gap: 6px; margin: 0; }
.dx-field label {
  font-family: var(--dx-f-disp); font-size: .92rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dx-dim);
}
.dx-field input, .dx-field textarea, .dx-field select {
  font-family: var(--dx-f-body); font-size: 1rem; color: #fff;
  background: var(--dx-panel); border: 1px solid var(--dx-line-2);
  padding: 12px 14px; width: 100%;
}
.dx-field textarea { min-height: 126px; resize: vertical; }
.dx-field input:focus, .dx-field textarea:focus, .dx-field select:focus {
  outline: none; border-color: var(--dx-ice);
}
.dx-sec-lit .dx-field label { color: var(--dx-ink-2); }
.dx-sec-lit .dx-field input, .dx-sec-lit .dx-field textarea,
.dx-sec-lit .dx-field select {
  color: var(--dx-ink); background: var(--dx-plate); border-color: #cdd6dd;
}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.dx-foot { background: #050709; border-top: 1px solid var(--dx-line); padding: 58px 0 0;
           font-size: .93rem; }
.dx-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 38px; }
.dx-foot h3 {
  font-size: .88rem; letter-spacing: .2em; color: var(--dx-ice);
  margin-bottom: 14px; font-weight: 600;
}
.dx-foot a { color: var(--dx-dim); text-decoration: none; }
.dx-foot a:hover { color: #fff; }
.dx-foot-grid > div > a { display: block; padding: 6px 0; }
.dx-foot .dx-brand span { color: #fff; }
.dx-foot-about p { margin: 15px 0; max-width: 32em; line-height: 1.6; }
.dx-foot-tel {
  display: inline-block; font-family: var(--dx-f-disp);
  font-size: 1.62rem; color: #fff !important; font-variant-numeric: tabular-nums;
}
.dx-foot-bottom {
  margin-top: 42px; padding: 18px 0; border-top: 1px solid var(--dx-line);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: #5f6d78;
}
.dx-foot-bottom p { margin: 0; }

.dx-callbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--dx-hot); padding: 8px 12px;
}
.dx-callbar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--dx-f-disp); font-size: 1.42rem; color: #fff;
  text-decoration: none; padding: 7px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .dx-nav a { padding: 8px 8px; font-size: .96rem; }
  .dx-open .dx-wrap { gap: 34px; }
  .dx-head-tel { font-size: 1.16rem; }
}

@media (max-width: 920px) {
  .dx-top-items span:nth-child(n + 3) { display: none; }
  .dx-burger { display: inline-flex; }
  .dx-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dx-void); border-bottom: 1px solid var(--dx-line);
    padding: 6px var(--dx-gut) 14px;
  }
  .dx-nav.dx-open-nav { display: flex; }
  .dx-nav a { padding: 13px 0; border-bottom: 1px solid var(--dx-line); }
  .dx-head .dx-wrap { position: relative; }

  .dx-open .dx-wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dx-plate { margin: -34px 16px 0 0; }
  .dx-split, .dx-lanes, .dx-contrast, .dx-shots { grid-template-columns: minmax(0, 1fr); }
  .dx-wide { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
  .dx-wide img { aspect-ratio: 16 / 9; }
  .dx-split { gap: 28px; }
  .dx-note, .dx-end .dx-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dx-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .dx-rail .dx-wrap { grid-template-columns: 1fr 1fr; }
  .dx-rail-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .dx-rail-cell:nth-child(n + 3) { border-top: 1px solid var(--dx-line); }
}

@media (max-width: 620px) {
  :root { --dx-gut: 16px; }
  .dx-sec { padding: 46px 0; }
  .dx-callbar { display: block; }
  .dx-foot { padding-bottom: 74px; }

  /* the masthead keeps the brand, the number and the burger and nothing
     else -- four things do not fit 375px, and the call bar already carries
     the conversion */
  .dx-head .dx-wrap { gap: 10px; min-height: 60px; }
  .dx-head .dx-btn { display: none; }
  .dx-brand span { font-size: 1.28rem; white-space: nowrap; }
  .dx-head-tel { font-size: 1.06rem; margin-left: auto; }
  .dx-top-items span:nth-child(n + 2) { display: none; }

  .dx-acts .dx-btn, .dx-end-acts .dx-btn { width: 100%; }
  .dx-plate { margin: -26px 0 0; padding: 20px 18px; }
  .dx-lane { padding: 22px 20px 22px 64px; }
  .dx-lane-n { left: 20px; top: 23px; }
  .dx-figs { grid-template-columns: 1fr 1fr; }
  .dx-fig { padding: 16px 0 16px 18px; }
  .dx-fig:nth-child(odd) { padding-left: 0; border-left: none; }
  .dx-trust .dx-wrap { grid-template-columns: minmax(0, 1fr); }
  .dx-trust-item { padding: 16px 0; border-left: none; border-top: 1px solid var(--dx-line); }
  .dx-trust-item:first-child { border-top: none; }
  .dx-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .dx-foot-bottom { flex-direction: column; gap: 5px; }
  .dx-note { padding: 22px 18px; border-left-width: 4px; }
  .dx-table td:first-child { width: auto; font-size: 1.06rem; }
}

/* ==========================================================================
   TWO NAMES THE SHARED BUILD WRITES INLINE

   build.py is derived and copied into every site; page_about and
   page_privacy write `.eyebrow` and `.writeup` directly rather than going
   through a shell component. Forking a derived file would drift from the
   reference the first time the reference is fixed, so the two strays are
   defined here in this family's terms instead.
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--dx-f-disp);
  font-size: .86rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dx-ice); margin-bottom: 12px;
}
.dx-sec-lit .eyebrow { color: var(--dx-ice-dk); }

.writeup { max-width: 44em; }
.writeup h2 { font-size: 1.44rem; margin: 32px 0 12px; padding-top: 20px;
              border-top: 1px solid var(--dx-line); }
.writeup h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.writeup h3 { font-size: 1.16rem; margin: 20px 0 8px; }
.writeup ul { margin: 0 0 1.05em; padding-left: 1.15em; }
.writeup li { margin-bottom: .4em; }
.writeup strong { color: #fff; }
.dx-sec-lit .writeup h2 { border-top-color: #dfe5ea; }
.dx-sec-lit .writeup strong { color: var(--dx-ink); }

/* A DRAWN MARK AND A TWO-WORD NAME DO NOT FIT THREE THINGS EITHER. With
   "Wildwood Plumbing" the masthead ran 6px past a 375px screen and pushed
   the menu button off it. Below 440px the number becomes its icon -- still
   a tap-to-call link, still read out by a screen reader -- because the call
   bar pinned to the bottom carries it in full on every phone-width page. */
@media (max-width: 440px) {
  .dx-head-tel { font-size: 0; gap: 0; padding: 10px; }
  .dx-head-tel .dx-ic { width: 22px; height: 22px; }
}
@media (max-width: 360px) {
  .dx-brand span { font-size: 1.12rem; }
}

/* PHONE-WIDTH LEGIBILITY, measured in the pre-deploy review: the top strip
   set at 11.8px with a 20px-tall phone link, and the rate-rail captions at
   10.9px. Twelve pixels is the floor; the strip link gets a real tap area. */
@media (max-width: 620px) {
  .dx-top { font-size: .8rem; }
  .dx-top a { display: inline-block; padding: 8px 0; }
  .dx-rail-cell span { font-size: .76rem; letter-spacing: .1em; }
  .dx-shead-link { padding: 8px 0 4px; }
  /* breadcrumb links were 15px tall -- give them a real tap height */
  .dx-crumbs a { display: inline-block; padding: 7px 0; }
}