/*
Theme Name: Danel Kidukhim
Theme URI: https://cfa-drilling.co.il
Author: JIT Digital
Description: תבנית מותאמת לדנאל קידוחים בע"מ, קבלן קידוחי ביסוס וכלונסאות. RTL, ללא בילדר.
Version: 1.0.0
Text Domain: danel
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
*/

/* ==========================================================================
   Tokens.
   The turquoise was measured off the company logo, not chosen. Two turquoises
   do the work and they are not interchangeable: the bright one is legible only
   on the dark ground, the deep one is the only one that passes on white. Every
   colour pairing below follows that split.
   ========================================================================== */
:root {
  --dn-turq:        #00AEA8;  /* brand. On ink: 6.5:1. On white: 2.8:1, so never text on white */
  --dn-turq-deep:   #00726E;  /* the on-white turquoise. 5.5:1 on white */
  --dn-turq-press:  #005B58;
  --dn-sky:         #5FC9DC;  /* accent, dark grounds only */
  --dn-ink:         #0E1A1C;  /* near-black, cold */
  --dn-ink-2:       #16262A;
  --dn-ink-3:       #1E3438;
  --dn-white:       #FFFFFF;
  --dn-mint:        #F2FBFA;  /* soft ground */
  --dn-mint-2:      #E4F5F3;
  --dn-line:        #D2E7E5;
  --dn-line-strong: #B5D8D5;
  --dn-line-dark:   rgba(255,255,255,.14);
  --dn-text:        #14252A;
  --dn-muted:       #47585A;  /* body-safe muted, 7.1:1 on white */
  --dn-muted-soft:  #6B7A7C;  /* large text, icons, rules only */
  --dn-on-dark:     #E8F5F4;
  --dn-on-dark-mut: #A9C4C4;
  --dn-err:         #B3341C;

  --dn-font: 'Noto Sans Hebrew', 'Arial Hebrew', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --dn-wrap: 1180px;
  --dn-gutter: clamp(18px, 4.5vw, 40px);
  --dn-sec: clamp(56px, 8vw, 108px);
  --dn-r: 14px;
  --dn-r-sm: 10px;
  --dn-r-lg: 16px;

  --dn-shadow: 0 1px 2px rgba(14,26,28,.05), 0 6px 18px rgba(14,26,28,.06);
  --dn-shadow-up: 0 2px 4px rgba(14,26,28,.06), 0 14px 32px rgba(14,26,28,.10);

  --dn-out: cubic-bezier(.22,1,.36,1);
  --dn-out-2: cubic-bezier(.16,1,.3,1);

  --dn-top: 64px;

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-drawer: 400;
}

/* The soil section. One gradient, hard stops, no repetition: it reads as a ground
   profile because that is literally what the company drills through. Used twice on
   the page, never as wallpaper. */
.dn-strata {
  height: 10px;
  background: linear-gradient(
    to bottom,
    var(--dn-turq) 0 2px,
    var(--dn-sky) 2px 4px,
    var(--dn-turq-deep) 4px 7px,
    var(--dn-ink-3) 7px 10px
  );
}

/* ========================================================================== base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--dn-font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--dn-text);
  background: var(--dn-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--dn-turq-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dn-turq-press); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dn-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); font-weight: 700; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--dn-turq);
  outline-offset: 2px;
  border-radius: 4px;
}

.dn-wrap { width: min(100% - (var(--dn-gutter) * 2), var(--dn-wrap)); margin-inline: auto; }
.dn-skip {
  position: absolute; inset-inline-start: 0; top: 0; z-index: var(--z-drawer);
  background: var(--dn-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--dn-r-sm) 0;
  transform: translateY(-130%);
}
.dn-skip:focus { transform: translateY(0); }
.dn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ========================================================================== buttons */
.dn-btn {
  --btn-bg: var(--dn-turq-deep);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.dn-btn:hover { background: var(--dn-turq-press); color: #fff; }
.dn-btn .dn-i { flex: none; }

/* The handset faces the number it belongs to.
   The glyph is asymmetric: the receiver leans, and the side it leans towards reads as the
   side it is pointing at. Every phone icon on this site is written before its number, which
   on a right-to-left page puts the icon on the RIGHT of the digits - so the stock drawing
   ends up leaning away from the number, with its back to it. Mirroring turns it around.
   It is one axis flip and no glyph of its own, so there is no second file to keep in step.
   Guarded rather than blanket: if a left-to-right block is ever added (an English page that
   sets dir), the icon there sits to the LEFT of the number and the original drawing is the
   one that faces it. */
.dn-i-phone { transform: scaleX(-1); }
[dir="ltr"] .dn-i-phone { transform: none; }

.dn-btn-lg { padding: 15px 28px; font-size: 1.05rem; }

/* On the dark ground the bright turquoise is finally legible, so it leads there. */
.dn-btn-bright { --btn-bg: var(--dn-turq); --btn-fg: var(--dn-ink); }
.dn-btn-bright:hover { background: var(--dn-sky); color: var(--dn-ink); }

.dn-btn-ghost {
  background: transparent; color: var(--dn-turq-deep);
  box-shadow: inset 0 0 0 2px var(--dn-line-strong);
}
.dn-btn-ghost:hover { background: var(--dn-mint-2); color: var(--dn-turq-press); }

.dn-btn-ghost-light {
  background: rgba(255,255,255,.06); color: var(--dn-on-dark);
  box-shadow: inset 0 0 0 1.5px var(--dn-line-dark);
}
.dn-btn-ghost-light:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ========================================================================== header */
.dn-util {
  background: var(--dn-ink);
  color: var(--dn-on-dark-mut);
  font-size: .84rem;
}
.dn-util-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.dn-util a { color: var(--dn-on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.dn-util a:hover { color: var(--dn-sky); }
.dn-util-facts { display: flex; gap: 20px; align-items: center; }
.dn-util-facts span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 860px) { .dn-util-facts { display: none; } }

.dn-head {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--dn-line);
}
@supports (backdrop-filter: blur(8px)) {
  .dn-head { backdrop-filter: blur(10px) saturate(1.3); }
}
.dn-head.is-stuck { box-shadow: 0 6px 22px rgba(14,26,28,.08); }
/* Three tracks, with the outer two equal, so the menu sits on the PAGE centre rather than
   wherever the logo and the button happen to leave room. */
.dn-head-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: var(--dn-top); }
.dn-brand { display: flex; align-items: center; justify-self: start; text-decoration: none; }
.dn-brand img { height: 40px; width: auto; }
.dn-brand-txt { font-weight: 800; font-size: 1.15rem; color: var(--dn-ink); letter-spacing: -.01em; }

.dn-nav { justify-self: center; display: flex; align-items: center; gap: 2px; }
.dn-nav a {
  position: relative; padding: 10px 14px; border-radius: var(--dn-r-sm);
  color: var(--dn-text); text-decoration: none; font-weight: 600; font-size: .97rem;
  white-space: nowrap;
}
.dn-nav a:hover { background: var(--dn-mint); color: var(--dn-turq-deep); }
.dn-nav a.is-current { color: var(--dn-turq-deep); }
.dn-nav a.is-current::after {
  content: ''; position: absolute; inset-inline: 14px; bottom: 3px;
  height: 2px; background: var(--dn-turq-deep); border-radius: 2px;
}
.dn-head-cta { justify-self: end; }
.dn-burger { justify-self: end; }
@media (max-width: 1080px) { .dn-nav a { padding: 9px 10px; font-size: .92rem; } }
@media (max-width: 960px) { .dn-nav, .dn-head-cta { display: none; } }

.dn-burger {
  display: none; margin-inline-start: auto;
  width: 46px; height: 46px; border: 0; border-radius: var(--dn-r-sm);
  background: var(--dn-mint-2); color: var(--dn-ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.dn-burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.dn-burger span::before, .dn-burger span::after {
  content: ''; position: absolute; inset-inline: 0; height: 2px; background: currentColor;
}
.dn-burger span::before { top: -6px; }
.dn-burger span::after { top: 6px; }
.dn-burger[aria-expanded="true"] span { background: transparent; }
.dn-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.dn-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 960px) { .dn-burger { display: inline-flex; } }

.dn-drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--dn-ink); color: var(--dn-on-dark);
  padding: calc(var(--dn-top) + 24px) var(--dn-gutter) 32px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; pointer-events: none;

  overflow-y: auto;
}
.dn-drawer.is-open { opacity: 1; pointer-events: auto; }
.dn-drawer a {
  color: var(--dn-on-dark); text-decoration: none; font-size: 1.22rem; font-weight: 700;
  padding: 15px 4px; border-bottom: 1px solid var(--dn-line-dark);
}
.dn-drawer a:hover { color: var(--dn-sky); }
.dn-drawer .dn-btn { margin-top: 22px; align-self: flex-start; }
.dn-drawer-close {
  position: absolute; top: 14px; inset-inline-end: var(--dn-gutter);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.5rem; cursor: pointer;
}
body.dn-locked { overflow: hidden; }

/* ========================================================================== hero */
.dn-hero { position: relative; background: var(--dn-ink); color: var(--dn-on-dark); overflow: hidden; }
.dn-hero-media { position: absolute; inset: 0; }
.dn-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
/* Two washes: one that drops the photo behind the type, one that carries the brand hue
   across the whole frame so the ground reads as teal rather than as a grey photo. */
/* The wash was directional, running dark at the start edge and clearing toward the end edge,
   which is what start-aligned type needs. The headline is centred now, so the darkest part of
   the frame has to sit under the middle instead - otherwise the first and last words of every
   line ride on a brighter patch of photograph than the words between them. */
.dn-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 88% at 50% 42%, rgba(14,26,28,.60) 0%, rgba(14,26,28,.86) 58%, rgba(14,26,28,.95) 100%),
    linear-gradient(to top, rgba(0,114,110,.50), rgba(14,26,28,0) 58%);
}
.dn-hero-in {
  position: relative; z-index: var(--z-base);
  padding-block: clamp(72px, 11vw, 146px) clamp(52px, 7.5vw, 96px);
  max-width: 52rem; margin-inline: auto; text-align: center;
}
.dn-hero h1 { color: #fff; margin-bottom: .34em; text-wrap: balance; }
.dn-hero h1 em { font-style: normal; color: var(--dn-turq); }
.dn-hero-lede {
  font-size: clamp(1.06rem, .98rem + .5vw, 1.3rem);
  color: var(--dn-on-dark); max-width: 46ch;
  margin-inline: auto; margin-bottom: 1.7em; text-wrap: pretty;
}
.dn-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* The credentials, as a rail of four cells rather than one cramped running line.
   Fact on top, category underneath: side by side, that is the order the eye wants.
   The 1px rules are dividers between equal cells, not accent stripes on one side of a card. */
.dn-cred {
  position: relative; z-index: var(--z-base);
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dn-cred span {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: clamp(18px, 2.4vw, 28px) 12px;
  text-align: center; line-height: 1.35;
  font-size: .92rem; color: var(--dn-on-dark-mut);
  border-inline-start: 1px solid rgba(255,255,255,.11);
}
.dn-cred span:first-child { border-inline-start: 0; }
.dn-cred b {
  color: #fff; font-weight: 800;
  font-size: clamp(1.05rem, .94rem + .45vw, 1.32rem); letter-spacing: -.01em;
}
.dn-cred .dn-i { color: var(--dn-turq); }
@media (max-width: 720px) {
  .dn-cred { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-cred span:nth-child(odd) { border-inline-start: 0; }
  .dn-cred span:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.11); }
}

/* ========================================================================== sections */
.dn-sec-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.dn-sec-head h2 { margin-bottom: .35em; }
.dn-sec-head p { color: var(--dn-muted); font-size: 1.06rem; margin: 0; }
.dn-sec-head-c { margin-inline: auto; text-align: center; }

.dn-methods { padding-block: var(--dn-sec); background: var(--dn-mint); }

.dn-m-lead {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3.4vw, 48px);
  align-items: center;
  background: var(--dn-white); border-radius: var(--dn-r-lg);
  overflow: hidden; box-shadow: var(--dn-shadow);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.dn-m-lead-media { display: block; align-self: stretch; min-height: 300px; }
.dn-m-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.dn-m-lead-body { padding: clamp(24px, 3.4vw, 44px); padding-inline-start: 0; }
.dn-m-tag {
  display: inline-block; margin: 0 0 12px;
  background: var(--dn-mint-2); color: var(--dn-turq-deep);
  padding: 5px 13px; border-radius: 999px; font-size: .84rem; font-weight: 700;
}
.dn-m-lead-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); font-weight: 800; }
.dn-m-lead-body h3 a { color: inherit; text-decoration: none; }
.dn-m-lead-body h3 a:hover { color: var(--dn-turq-deep); }
.dn-m-lead-body > p { color: var(--dn-muted); margin-bottom: 1.4em; }
@media (max-width: 860px) {
  .dn-m-lead { grid-template-columns: 1fr; }
  .dn-m-lead-media { min-height: 220px; }
  .dn-m-lead-body { padding: 26px; padding-block-start: 0; }
}

.dn-m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
.dn-m-item { background: var(--dn-white); border-radius: var(--dn-r); overflow: hidden; box-shadow: var(--dn-shadow); display: flex; flex-direction: column; }
.dn-m-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.dn-m-media img { width: 100%; height: 100%; object-fit: cover; }

.dn-m-item h3 { margin: 20px 22px 8px; font-size: 1.18rem; }
.dn-m-item h3 a { color: inherit; text-decoration: none; }
.dn-m-item h3 a::after { content: ''; position: absolute; inset: 0; }
.dn-m-item { position: relative; }
.dn-m-item:hover h3 a { color: var(--dn-turq-deep); }
.dn-m-item p { margin: 0 22px 16px; color: var(--dn-muted); font-size: .96rem; line-height: 1.65; }
/* Above the card-wide overlay link, or the label would sit under it and never take a hover
   even though both go to the same page. auto on the top margin keeps the labels on one line
   across a row of cards whose paragraphs are different lengths. */
.dn-m-more { position: relative; z-index: 1; margin: auto 22px 22px; display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; font-weight: 700; font-size: .95rem; color: var(--dn-turq-deep); text-decoration: none; }
.dn-m-more:hover, .dn-m-more:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------- split feature */
/* ---------------------------------------------------------------- feature (home, section two)
   Deliberately NOT another .dn-split. Three of those already run down this page, and the one
   directly under the hero is the one that has to look like it was designed rather than filled
   in. The photography takes the larger share of the row, a second frame overlaps it, and the
   capabilities read as a board instead of a list of ticks. */
.dn-feature { padding-block: var(--dn-sec); }
.dn-feature-in {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(30px, 5vw, 78px); align-items: center;
}
.dn-feature-media { position: relative; }
.dn-feature-main { border-radius: var(--dn-r-lg); overflow: hidden; box-shadow: var(--dn-shadow-up); }
.dn-feature-main img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }

/* The overlap runs toward the text column, into the grid gap. That space is interior to the
   wrap, so the frame can never reach past the page edge and start a horizontal scrollbar -
   which is the usual way an overlapping image breaks an RTL layout. */
.dn-feature-inset {
  position: absolute; z-index: var(--z-base);
  inset-inline-end: clamp(-34px, -2.4vw, -18px);
  bottom: clamp(-26px, -2vw, -14px);
  width: clamp(140px, 33%, 232px);
  border-radius: var(--dn-r-md); overflow: hidden;
  box-shadow: 0 18px 42px rgba(14,26,28,.30);
  outline: 6px solid var(--dn-white);
}
.dn-feature-inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.dn-feature-body h2 { margin-bottom: .5em; }
.dn-feature-body > p { color: var(--dn-muted); }

/* A rule over each statement, not a check mark in front of it. The rule is a top border on a
   cell in a grid of equals, which is a typographic device, not a coloured stripe down one side
   of a card. */
.dn-facts {
  list-style: none; padding: 0;
  margin: clamp(24px, 3.2vw, 34px) 0 clamp(26px, 3.2vw, 36px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.dn-facts li { padding-top: 13px; border-top: 2px solid var(--dn-turq); }
.dn-facts b {
  display: block; color: var(--dn-ink); font-weight: 700;
  font-size: 1.04rem; margin-bottom: 4px; letter-spacing: -.005em;
}
.dn-facts span { display: block; color: var(--dn-muted); font-size: .95rem; line-height: 1.55; }

@media (max-width: 860px) {
  .dn-feature-in { grid-template-columns: 1fr; }
  /* Inside the frame on small screens. Hanging it off the corner of a full-width photo is
     what actually pushes a phone layout sideways. */
  .dn-feature-inset { inset-inline-end: 14px; bottom: 14px; width: 36%; outline-width: 5px; }
}
@media (max-width: 520px) { .dn-facts { grid-template-columns: 1fr; } }

.dn-split { padding-block: var(--dn-sec); }
.dn-split-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.dn-split-media { border-radius: var(--dn-r-lg); overflow: hidden; box-shadow: var(--dn-shadow-up); }
/* For media that is narrower than its column and carries its own frame, so the column does
   not draw a second, wider one around empty ground. */
.dn-split-media-bare { border-radius: 0; overflow: visible; box-shadow: none; }
.dn-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dn-split-body h2 { margin-bottom: .5em; }
.dn-split-body p { color: var(--dn-muted); }
.dn-list { list-style: none; margin: 1.4em 0 1.8em; padding: 0; display: grid; gap: 12px; }
.dn-list li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.6; }
.dn-list .dn-i { flex: none; margin-top: 4px; color: var(--dn-turq-deep); }
@media (max-width: 860px) { .dn-split-in { grid-template-columns: 1fr; } }

.dn-split-dark { background: var(--dn-ink); color: var(--dn-on-dark); }
.dn-split-dark h2 { color: var(--dn-white); }
.dn-split-dark p { color: var(--dn-on-dark-mut); }
.dn-split-dark .dn-list li { color: var(--dn-on-dark); }
.dn-split-dark .dn-list strong { color: var(--dn-white); }
.dn-split-dark .dn-list .dn-i { color: var(--dn-sky); }
.dn-split-dark .dn-split-media { box-shadow: 0 24px 60px rgba(0,0,0,.45); }

/* ---------------------------------------------------------------- video facade
   The clip is vertical site footage, so it is framed vertically. A 16/9 frame around it
   is not neutral: the thumbnail the host publishes is 4:3 with the vertical video pillared
   inside it in black, and widening the frame only adds more black. At 9/16 the crop lands
   exactly on the video's own pixels and no bar survives. The frame is capped in width so a
   portrait clip cannot run away with the height of the row it sits in. */
.dn-video {
  position: relative; aspect-ratio: 9 / 16; background: var(--dn-ink);
  max-width: min(360px, 100%); margin-inline: auto;
  border-radius: var(--dn-r-lg); overflow: hidden; box-shadow: var(--dn-shadow-up);
}
.dn-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.dn-video-btn {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: pointer; display: block; color: inherit; font: inherit;
}
/* The override matters: the surrounding .dn-split-media pins its images to 4/3, and the
   poster has to fill the vertical frame instead. */
.dn-video-btn img {
  width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
}
.dn-video-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,26,28,.72), rgba(14,26,28,0) 52%);
  transition: background .25s var(--dn-out);
}
.dn-video-play {
  position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(50%, -50%);
  z-index: 1; display: grid; place-items: center;
  width: clamp(58px, 7vw, 74px); aspect-ratio: 1; border-radius: 50%;
  background: var(--dn-turq); color: var(--dn-white);
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  transition: transform .25s var(--dn-out), background .25s var(--dn-out);
}
/* The glyph is a triangle pointing right, which is the play convention in every locale.
   The page is RTL, so it has to be shielded from the inherited direction or it mirrors
   into a rewind mark. */
.dn-video-play svg { margin-inline-start: 4px; transform: scaleX(1); direction: ltr; }
.dn-video-cap {
  position: absolute; z-index: 1; inset-inline: clamp(16px, 3vw, 26px); bottom: clamp(14px, 2.4vw, 20px);
  color: var(--dn-white); font-weight: 600; font-size: clamp(.9rem, 1.15vw, 1rem);
  text-align: start; text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.dn-video-btn:hover .dn-video-play { transform: translate(50%, -50%) scale(1.07); background: var(--dn-turq-deep); }
.dn-video-btn:hover::after { background: linear-gradient(to top, rgba(14,26,28,.78), rgba(14,26,28,.12) 62%); }
.dn-video-btn:focus-visible { outline: 3px solid var(--dn-sky); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .dn-video-play, .dn-video-btn::after { transition: none; }
  .dn-video-btn:hover .dn-video-play { transform: translate(50%, -50%); }
}

/* ---------------------------------------------------------------- clients */
.dn-clients { padding-block: var(--dn-sec); background: var(--dn-mint); }

/* The rules between the cells are the 1px grid gap with the plate's own line colour
   showing through, so a cell never carries a border of its own and no two cells can
   draw a double rule between them. */
.dn-logo-plate {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--dn-line);
  border: 1px solid var(--dn-line); border-radius: var(--dn-r);
  overflow: hidden; margin-bottom: clamp(34px, 5vw, 62px);
}
.dn-logo {
  display: grid; place-items: center; background: var(--dn-white);
  min-height: clamp(84px, 9vw, 112px); padding: clamp(14px, 2vw, 22px);
}
/* .62 opacity was not restraint, it was illegible: several of these marks are already
   light grey artwork and they disappeared entirely. Grayscale keeps the wall uniform,
   the opacity only softens it. */
.dn-logo img {
  max-height: clamp(30px, 4vw, 44px); max-width: 100%; width: auto;
  object-fit: contain; filter: grayscale(1); opacity: .82;
  transition: opacity .2s var(--dn-out), filter .2s var(--dn-out);
}
.dn-logo:hover img { filter: none; opacity: 1; }

.dn-roster { border-top: 1px solid var(--dn-line-strong); padding-top: clamp(26px, 3.6vw, 40px); }
.dn-client-lead {
  margin: 0 0 clamp(18px, 2.6vw, 28px); max-width: 62ch;
  text-wrap: pretty; color: var(--dn-muted); font-size: 1rem;
}
/* A roster of names is a list, and it was set as centred running prose with dots
   between the names, which reads as a stanza and left one name alone on the last
   line. Ruled rows in a grid say "these are our clients" at a glance. */
.dn-client-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
}
.dn-client-wall li {
  padding: 11px 0; border-bottom: 1px solid var(--dn-line);
  font-size: clamp(.97rem, 1.15vw, 1.04rem); font-weight: 600;
  color: var(--dn-text); line-height: 1.35;
}
/* Both logo counts below divide into eight exactly. Three columns would leave the
   eighth logo alone on its own row, which is the flaw this block replaced. */
@media (max-width: 900px) { .dn-client-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .dn-logo-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .dn-client-wall { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- gallery */
.dn-gal { padding-block: var(--dn-sec); }
.dn-gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dn-gal-grid figure { margin: 0; border-radius: var(--dn-r-sm); overflow: hidden; background: var(--dn-mint-2); }
.dn-gal-grid img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dn-gal-grid figure:nth-child(6n+1) { grid-column: span 2; }
.dn-gal-grid figure:nth-child(6n+1) img { aspect-ratio: 3 / 2; }

@media (max-width: 640px) { .dn-gal-grid figure:nth-child(6n+1) { grid-column: span 1; } .dn-gal-grid figure:nth-child(6n+1) img { aspect-ratio: 3 / 4; } }

/* The works wall.
   The set is not the free-for-all of proportions it looks like: nineteen photographs, fourteen
   of them 3:4 portrait, five 4:3 landscape, one tall 9:16. A portrait and a landscape rectangle
   at the same scale cannot tile the same row grid - set the arithmetic down and it does not
   close - and the old grid proved it, leaving a visible hole in the wall wherever a double-wide
   tile refused to fit the track count auto-fit had chosen for that width.
   Columns have no rows, so there is nothing for a hole to appear in, and each photograph keeps
   the proportions it was taken at. That last part is not neutral here: these are drilling rigs,
   a 3:4 frame squared off or cropped to landscape loses the top of the mast, and the mast is
   the subject. */
.dn-gal-wall { columns: 4; column-gap: 14px; }
.dn-gal-wall figure {
  margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
.dn-gal-item {
  display: block; border-radius: var(--dn-r-sm); overflow: hidden;
  background: var(--dn-mint-2); box-shadow: 0 0 0 1px var(--dn-line);
}
/* height:auto, so the intrinsic ratio from the width and height attributes reserves the right
   box before the file arrives. Without it a lazy column of unloaded images collapses and the
   columns balance themselves against heights that are about to change. */
.dn-gal-item img { width: 100%; height: auto; display: block; }
.dn-gal-item:hover, .dn-gal-item:focus-visible { box-shadow: 0 0 0 2px var(--dn-turq); outline: none; }
.dn-gal-notes { padding-block: clamp(26px, 3.6vw, 44px) 0; border-top: 1px solid var(--dn-line); }

@media (max-width: 1100px) { .dn-gal-wall { columns: 3; } }
@media (max-width: 760px)  { .dn-gal-wall { columns: 2; column-gap: 10px; } .dn-gal-wall figure { margin-bottom: 10px; } }
@media (max-width: 380px)  { .dn-gal-wall { columns: 1; } }

/* ---------------------------------------------------------------- photo viewer
   Opened from the wall. It is a layer rather than a page, so it is built to be left: escape,
   the backdrop and the close control all do the same thing, and the arrows move through the
   set without closing it. No transitions here either - this theme changes state instantly. */
.dn-lb {
  position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 200;
  background: rgba(14, 26, 28, .95);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overscroll-behavior: contain;
}
.dn-lb[hidden] { display: none; }
.dn-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; color: rgba(255, 255, 255, .82); font-size: .92rem; font-weight: 600; }
.dn-lb-fig { display: grid; place-items: center; min-height: 0; padding: 0 16px; }
.dn-lb-frame { display: block; max-width: 100%; max-height: 100%; min-height: 0;
  border-radius: var(--dn-r-sm); overflow: hidden; }
.dn-lb-fig img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; }
/* A framed photograph is a shape with an overflow, so the frame takes the proportions and the
   image fills it. Only then does the scale that trims the white edge have something to be
   trimmed by. */
.dn-lb.has-frame .dn-lb-frame { height: 100%; }
.dn-lb.has-frame img { width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; }
.dn-lb-nav { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.dn-lb button {
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #fff; padding: 10px 18px;
}
.dn-lb button:hover { background: var(--dn-turq); color: var(--dn-ink); }
.dn-lb-x { padding: 8px 14px; }

/* The field photographs, run under the video on the home page. These rules must sit AFTER
   the base .dn-gal-grid rules above: both selectors carry the same specificity, so source
   order is what decides, and while this block sat higher up the base nth-child(6n+1) rule
   kept widening tile seven and collapsing the lead tile on mobile.
   Sizing lives on the FIGURE, not the image. A square figure spanning two columns is exactly
   two column widths plus the gap tall, so the lead tile lines up with two rows of small ones
   instead of inventing its own row height. */
.dn-gal-strip { margin-top: clamp(30px, 4.5vw, 54px); }
.dn-gal-strip .dn-gal-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dn-gal-strip .dn-gal-grid figure,
.dn-gal-strip .dn-gal-grid figure:nth-child(6n+1) {
  grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; margin: 0;
  border-radius: var(--dn-r-sm); overflow: hidden; background: var(--dn-mint-2);
}
.dn-gal-strip .dn-gal-grid figure img,
.dn-gal-strip .dn-gal-grid figure:nth-child(6n+1) img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block;
}
/* One tile carries the wall so it reads as a composition, not a uniform mosaic. */
.dn-gal-strip .dn-gal-grid figure:first-child { grid-column: span 2; grid-row: span 2; }

@media (max-width: 860px) {
  .dn-gal-strip .dn-gal-grid { grid-template-columns: repeat(2, 1fr); }
  .dn-gal-strip .dn-gal-grid figure:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------- FAQ */
.dn-faq { padding-block: var(--dn-sec); background: var(--dn-mint); }
/* Same trap as .dn-phero-in: the cap goes on the children, so the FAQ starts on the page's
   own start line instead of being centred under sections that are flush to it. */
.dn-faq-in > * { max-width: 860px; }
.dn-faq h2 { margin-bottom: clamp(20px, 3vw, 34px); }
.dn-faq-list { display: grid; gap: 10px; }
.dn-faq-item { background: var(--dn-white); border-radius: var(--dn-r); overflow: hidden; }
.dn-faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 22px; font-weight: 700; font-size: 1.04rem; color: var(--dn-ink);
}
.dn-faq-item summary::-webkit-details-marker { display: none; }
.dn-faq-item summary .dn-i { flex: none; color: var(--dn-turq-deep); }
.dn-faq-item[open] summary .dn-i { transform: rotate(180deg); }
.dn-faq-a { padding: 0 22px 20px; color: var(--dn-muted); }
.dn-faq-a p { margin: 0; }

/* ---------------------------------------------------------------- lead band */
.dn-band { padding-block: var(--dn-sec); background: var(--dn-ink); color: var(--dn-on-dark); }
.dn-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
.dn-band h2 { color: #fff; }
.dn-band-copy > p { color: var(--dn-on-dark-mut); max-width: 46ch; }
.dn-band-facts { list-style: none; margin: 1.6em 0; padding: 0; display: grid; gap: 11px; }
.dn-band-facts li { display: flex; align-items: center; gap: 11px; color: var(--dn-on-dark); }
.dn-band-facts .dn-i { flex: none; color: var(--dn-turq); }
.dn-band-direct { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .dn-band-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- forms */
.dn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dn-field { display: flex; flex-direction: column; gap: 6px; }
.dn-field-wide, .dn-form > .dn-btn, .dn-form-lede, .dn-form-note, .dn-form-msg { grid-column: 1 / -1; }
.dn-form-lede { margin: 0 0 2px; font-size: 1.02rem; font-weight: 700; color: inherit; }
.dn-field label { font-size: .9rem; font-weight: 700; color: inherit; }
.dn-field input, .dn-field textarea {
  font: inherit; font-size: 1rem;
  padding: 13px 15px; border-radius: var(--dn-r-sm);
  border: 1.5px solid var(--dn-line-strong); background: var(--dn-white); color: var(--dn-text);

  width: 100%;
}
.dn-field textarea { resize: vertical; min-height: 92px; }
.dn-field input::placeholder, .dn-field textarea::placeholder { color: var(--dn-muted); opacity: 1; }
.dn-field input:focus, .dn-field textarea:focus {
  outline: 0; border-color: var(--dn-turq-deep);
  box-shadow: 0 0 0 3px rgba(0,174,168,.22);
}
.dn-field.has-err input, .dn-field.has-err textarea { border-color: var(--dn-err); }
.dn-form-note { margin: 0; font-size: .92rem; color: var(--dn-muted); }
.dn-form-msg { margin: 0; font-size: .95rem; font-weight: 600; min-height: 1.2em; }
.dn-form-msg.is-ok { color: var(--dn-turq-deep); }
.dn-form-msg.is-err { color: var(--dn-err); }
.dn-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 520px) { .dn-form { grid-template-columns: 1fr; } }

/* The band form sits on ink, so its own chrome inverts while the inputs stay white. */
.dn-band .dn-form { background: var(--dn-ink-2); padding: clamp(22px, 3vw, 32px); border-radius: var(--dn-r-lg); }
.dn-band .dn-field label { color: var(--dn-on-dark); }
.dn-band .dn-form-lede { color: var(--dn-on-dark); }
.dn-band .dn-form-note { color: var(--dn-on-dark-mut); }
.dn-band .dn-form-note a { color: var(--dn-sky); }
.dn-band .dn-form-msg.is-ok { color: var(--dn-sky); }
.dn-band .dn-btn { --btn-bg: var(--dn-turq); --btn-fg: var(--dn-ink); }
.dn-band .dn-btn:hover { background: var(--dn-turq-press); color: #fff; }

/* ---------------------------------------------------------------- page hero */
.dn-phero { position: relative; background: var(--dn-ink); color: var(--dn-on-dark); overflow: hidden; }
.dn-phero-media { position: absolute; inset: 0; }
.dn-phero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.dn-phero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(14,26,28,.94), rgba(14,26,28,.66));
}
/* The measure belongs on the hero's own blocks, never on the element that also carries
   .dn-wrap. A max-width there shrinks the wrap itself, and the wrap's margin-inline:auto
   then CENTRES what is left - so the H1 drifted 206px toward the middle of the screen while
   every block under it stayed flush to the start edge of the column. */
.dn-phero-in { position: relative; padding-block: clamp(44px, 6vw, 84px); }
.dn-phero-in > * { max-width: 48rem; }
.dn-phero h1 { color: #fff; margin-bottom: .3em; }
.dn-phero-lede { color: var(--dn-on-dark); font-size: 1.1rem; max-width: 46ch; margin: 0; }
.dn-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; color: var(--dn-on-dark-mut); margin-bottom: 14px; }
.dn-crumbs a { color: var(--dn-on-dark-mut); text-decoration: none; }
.dn-crumbs a:hover { color: var(--dn-sky); }
.dn-phero-plain { background: var(--dn-ink); }

/* ---------------------------------------------------------------- page body */
.dn-page-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 56px);
  padding-block: var(--dn-sec);
  align-items: start;
}
.dn-page-narrow { max-width: 780px; padding-block: var(--dn-sec); }
@media (max-width: 940px) { .dn-page-grid { grid-template-columns: 1fr; } }

.dn-prose { font-size: 1.06rem; }
/* A legal page has no sidebar to hold its column in, so it needs its own measure. Left full
   width it would run the length of a desktop screen, which is roughly twice the line length
   anyone reads comfortably, and these are the two pages on the site most likely to be read
   start to finish rather than skimmed. */
.dn-prose-solo { max-width: 74ch; margin-inline: auto; padding-block: 54px 64px; }
.dn-prose > * { max-width: 72ch; }
.dn-prose h2 { margin-top: 1.7em; font-size: clamp(1.42rem, 1.15rem + 1.1vw, 1.95rem); }
.dn-prose h3 { margin-top: 1.5em; }
.dn-prose h2:first-child, .dn-prose h3:first-child { margin-top: 0; }
.dn-prose p { color: var(--dn-text); }
.dn-prose ul, .dn-prose ol { padding-inline-start: 1.2em; margin: 0 0 1.2em; }
.dn-prose li { margin-bottom: .5em; }
.dn-prose img { border-radius: var(--dn-r); margin-block: 1.5em; max-width: 100%; }
.dn-prose figure { margin: 1.5em 0; }
.dn-prose a { font-weight: 600; }
.dn-prose blockquote {
  margin: 1.6em 0; padding: 20px 24px;
  background: var(--dn-mint); border-radius: var(--dn-r);
  color: var(--dn-ink); font-weight: 600;
}
.dn-prose iframe { border-radius: var(--dn-r); width: 100%; aspect-ratio: 16 / 9; height: auto; }
.dn-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.dn-prose th, .dn-prose td { border: 1px solid var(--dn-line); padding: 10px 12px; text-align: start; }
.dn-prose th { background: var(--dn-mint-2); }

/* ---------------------------------------------------------------- sidebar */
.dn-side { display: grid; gap: 16px; position: sticky; top: calc(var(--dn-top) + 18px); }
@media (max-width: 940px) { .dn-side { position: static; } }
.dn-side-card { background: var(--dn-ink); color: var(--dn-on-dark); border-radius: var(--dn-r-lg); padding: 24px; }
.dn-side-card h2 { color: #fff; font-size: 1.24rem; margin-bottom: .4em; }
.dn-side-card > p { color: var(--dn-on-dark-mut); font-size: .96rem; }
.dn-side-card .dn-form { grid-template-columns: 1fr; }
.dn-side-card .dn-field label { color: var(--dn-on-dark); }
.dn-side-card .dn-form-lede { color: var(--dn-on-dark); font-size: .98rem; }
.dn-side-card .dn-form-note { color: var(--dn-on-dark-mut); }
.dn-side-card .dn-form-note a { color: var(--dn-sky); }
.dn-side-card .dn-btn { --btn-bg: var(--dn-turq); --btn-fg: var(--dn-ink); width: 100%; justify-content: center; }
.dn-side-card .dn-form-msg.is-ok { color: var(--dn-sky); }

.dn-side-facts, .dn-side-nav { background: var(--dn-mint); border-radius: var(--dn-r); padding: 22px; }
.dn-side-facts h3, .dn-side-nav h3 { font-size: 1.02rem; margin-bottom: .7em; }
.dn-side-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dn-side-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.55; }
.dn-side-facts .dn-i { flex: none; margin-top: 3px; color: var(--dn-turq-deep); }
.dn-side-nav { display: grid; gap: 2px; }
.dn-side-nav a {
  padding: 9px 12px; border-radius: var(--dn-r-sm);
  color: var(--dn-text); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.dn-side-nav a:hover { background: var(--dn-white); color: var(--dn-turq-deep); }
.dn-side-nav a.is-current { background: var(--dn-turq-deep); color: #fff; }
.dn-side-phone { display: grid; gap: 7px; margin-top: 14px; }
.dn-side-phone a {
  display: flex; align-items: center; gap: 9px;
  color: var(--dn-sky); text-decoration: none; font-weight: 700;
}
/* --dn-turq-press is a dark colour. It is right for a link on white and unreadable on this
   near-black card, where the global a:hover was pulling it down to 2.2:1 against 9.2:1 at
   rest. Every link in the card hovers light instead, so the fall-through cannot come back. */
.dn-side-card a:hover { color: var(--dn-white); }

/* ---------------------------------------------------------------- contact */
.dn-contact { padding-block: var(--dn-sec); }
.dn-contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 860px) { .dn-contact-grid { grid-template-columns: 1fr; } }
.dn-contact-row {
  display: flex; gap: 14px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--dn-line);
  text-decoration: none; color: var(--dn-text);
}
.dn-contact-row:last-child { border-bottom: 0; }
.dn-contact-ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dn-mint-2); color: var(--dn-turq-deep);
  display: grid; place-items: center;
}
.dn-contact-row strong { display: block; font-size: 1.06rem; }
.dn-contact-row small { color: var(--dn-muted); font-size: .9rem; }
.dn-map { margin-top: clamp(28px, 4vw, 48px); border-radius: var(--dn-r-lg); overflow: hidden; }
.dn-map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------------------------------------------------------------- posts */
.dn-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.4vw, 28px); padding-block: var(--dn-sec); }
.dn-post-card { position: relative; background: var(--dn-white); border-radius: var(--dn-r); overflow: hidden; box-shadow: var(--dn-shadow); display: flex; flex-direction: column; }
.dn-post-card .dn-pc-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dn-mint-2); }
.dn-post-card .dn-pc-media img { width: 100%; height: 100%; object-fit: cover; }

.dn-post-card h2 { font-size: 1.2rem; margin: 20px 22px 8px; }
.dn-post-card h2 a { color: inherit; text-decoration: none; }
.dn-post-card h2 a::after { content: ''; position: absolute; inset: 0; }
.dn-post-card:hover h2 a { color: var(--dn-turq-deep); }
.dn-post-card p { margin: 0 22px 22px; color: var(--dn-muted); font-size: .96rem; }

/* ---------------------------------------------------------------- footer */
.dn-foot { background: var(--dn-ink); color: var(--dn-on-dark-mut); padding-block: clamp(40px, 5vw, 64px) 0; }
.dn-foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(26px, 4vw, 56px); }
@media (max-width: 800px) { .dn-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dn-foot-grid { grid-template-columns: 1fr; } }
.dn-foot h3 { color: #fff; font-size: 1.02rem; margin-bottom: 1em; }
.dn-foot p { font-size: .95rem; }
/* The wordmark is drawn in near-black with a turquoise flourish, which is right on the white
   header and all but invisible on the ink footer - measured, not guessed: the mark's own ink
   and the footer ground are both dark. The file is not touched, because a media filename here
   is an indexed URL; the footer copy is lifted to white in CSS, which is the ordinary
   treatment for a dark mark on a dark ground and keeps the letterforms exactly as drawn. */
.dn-foot-brand img { height: 46px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.dn-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dn-foot a { color: var(--dn-on-dark); text-decoration: none; font-size: .95rem; }
.dn-foot a:hover { color: var(--dn-sky); }
.dn-foot-row { display: flex; gap: 10px; align-items: flex-start; }
.dn-foot-row .dn-i { flex: none; margin-top: 4px; color: var(--dn-turq); }
/* The legal links sit in the middle of the footer bar and are underlined, unlike the keyword
   links beside them. They are the two links on this page someone goes looking for rather than
   stumbles into, so they read as links even at this size. */
.dn-foot-legal a { text-decoration: underline; text-underline-offset: 3px; }
.dn-foot-legal a + a { margin-inline-start: 16px; }

.dn-foot-bar {
  margin-top: clamp(32px, 4vw, 52px); padding-block: 20px;
  border-top: 1px solid var(--dn-line-dark);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .88rem;
}

/* ---------------------------------------------------------------- sticky mobile bar */
.dn-mobar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: 1px; background: var(--dn-line-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.dn-mobar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px; background: var(--dn-ink); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .96rem;
}
.dn-mobar a.is-primary { background: var(--dn-turq-deep); }
@media (max-width: 700px) {
  .dn-mobar { display: flex; }
  /* html body, not body: a plugin from the previous design sets its own body padding-bottom of
     50px to make room for a bar that is no longer shown, and its sheet loads after this one.
     At equal specificity the later rule wins, so the page reserved 50px for a 55px bar and the
     last five pixels of every page sat behind it. One extra element in the selector settles it
     without an !important. */
  html body { padding-bottom: 58px; }
  /* The three labels are measured in the site's own font, which is wider than the fallback the
     browser uses while it loads. At 375 and below they wrapped to a second line and the bar
     grew to 82px - taller than the space reserved for it above, so the bar covered content
     instead of sitting under it. The fluid size holds them on one line down to 320 rather than
     guessing a breakpoint that the next font change would move. */
  .dn-mobar a { white-space: nowrap; font-size: clamp(.8rem, 3.3vw, .96rem); gap: 6px; padding: 14px 6px; }
  /* The accessibility plugin's launcher is drawn at z-index 2147483647 and landed exactly on
     top of this bar's third button, which made the quote button unclickable on every phone.
     Its own position is set inline, so a stylesheet has to say !important to move it at all;
     top is the only property it sets there and the only one it does not animate, which is why
     the lift goes on top and not on transform. It applies only while the panel is closed -
     while it is open the button belongs to the panel and rides up with it. */
  body:not(.show-enable-toolbar) #enable-toolbar-trigger { top: -66px !important; }
}

/* A plugin from the previous design paints a yellow call bar across the bottom of every phone
   screen at z-index 10000, which is 55 pixels directly on top of the bar above and hides it
   completely - measured at 390 wide: the plugin bar sits at y 794, this one at 789.
   It offers one action this bar already offers, in a colour that belongs to another site, so
   what it actually costs is the WhatsApp and the quote button next to the call button.
   Hidden rather than switched off, because switching a plugin off is the site owner's decision
   and this is only about which of two bars is visible. */
#click_to_call_bar, .ctc_bar { display: none !important; }

/* The WhatsApp plugin slides its button in on every page load. The theme itself carries no
   motion at all, by instruction, and a single moving element is more conspicuous on a still
   page than it would be on a busy one. The button keeps its position, its colour and its
   behaviour; it simply arrives already there. Stated as fact in the accessibility statement,
   so it is enforced here rather than assumed. */
#ht-ctc-chat, #ht-ctc-chat * { animation: none !important; }

/* ---------------------------------------------------------------- print */
@media print {
  .dn-head, .dn-util, .dn-mobar, .dn-band, .dn-drawer { display: none !important; }
  body { color: #000; }
}