/* ==========================================================================
   ddadvertising.com - one stylesheet for the rebuilt site.

   Replaces publicstyle.css, responsive.css, mbcsmbmcp.css (the nav widget),
   layerslider.css + its skin, Window.Metro.css, feature.presenter.css,
   instalink.css and the lightbox skin: ~90 KB of CSS the CMS shipped on every
   page for a layout that had no viewport meta tag at all.

   House rules kept here, each of them a bug that has been shipped before:

   * a @media block does NOT raise specificity, so at equal specificity source
     order decides.  Every media query in this file sits BELOW the rule it
     overrides, and fp_css_order.py fails the build if one drifts above.
   * box-sizing: border-box on everything that gets width:100% AND padding.
   * every colour is defined at :root.  This is a single committed light
     design - a brand site with a fixed palette - so there is no dark variant,
     but the body background is painted explicitly rather than inherited.
   * one custom property drives both the column gap and the row gap of a grid,
     so the two cannot drift and leave rows running flush together.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* The CMS's own three Montserrat files, subset to Latin and re-containered:
   779 KB of TTF -> 63 KB of WOFF.  They were declared as three separate
   FAMILIES ("Montserrat Light" / "Montserrat" / "Montserrat Black"), which is
   why every heavy heading on the live site names one in an inline style and a
   <strong> inside it gets a synthetic bold of an already-black face. */
@font-face {
  font-family: Montserrat;
  src: url(/assets/fonts/montserrat-300.woff) format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url(/assets/fonts/montserrat-400.woff) format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url(/assets/fonts/montserrat-900.woff) format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --blue:        #1f4294;   /* the CMS's own brand blue */
  --blue-dark:   #16306c;
  --blue-tint:   #eef2fa;
  --red:         #d2232a;   /* the CMS's own brand red */
  /* #d2232a on white is 4.98:1 - fine for body text and large type, but it is
     used as a BACKGROUND for white text (3.87:1), which fails AA at body size.
     The band that does that sets its type at 25px+, where 3:1 is the bar. */
  --red-dark:    #a91b21;   /* AA at any size on white: 6.6:1 */
  --ink:         #16181d;
  --ink-soft:    #4a4f5a;
  --line:        #d8dce4;
  --line-strong: #6b7280;   /* 3:1 on white - the bar for a control boundary */
  --paper:       #ffffff;
  --paper-alt:   #f5f7fb;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --gap: 28px;
  --radius: 4px;
  --head-h: 132px;          /* JS keeps this in step with the real masthead */

  --shadow: 0 2px 8px rgba(22, 24, 29, .09);
  --shadow-lg: 0 10px 30px rgba(22, 24, 29, .14);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* An e-mail address is one unbreakable token, and a rect walk cannot see it
     run out of a narrow column - the paragraph's own box stays put. */
  overflow-wrap: break-word;
}

img, picture, svg, iframe { max-width: 100%; }
/* <picture> is display:inline by default, so it does not fill a grid or flex
   track and it carries a baseline gap under every image. */
picture { display: block; }
img { height: auto; border: 0; vertical-align: middle; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 900; }
h1 { font-size: clamp(30px, 4.6vw, 45px); }
h2 { font-size: clamp(25px, 3.4vw, 35px); color: var(--blue); }
h3 { font-size: clamp(20px, 2.4vw, 25px); font-weight: 400; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }

a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--blue-dark); }

:focus-visible {
  outline: 3px solid var(--red-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.dd-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Visually hidden, but still read out and still focusable. */
.dd-vh {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.dd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 18px;
  text-decoration: none; font-weight: 700;
}
.dd-skip:focus { left: 8px; top: 8px; color: #fff; }

/* ====================================================================== */
/* MASTHEAD                                                                */
/* ====================================================================== */
.dd-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.dd-util {
  background: var(--blue);
  color: #fff;
  font-size: 15px;
}
.dd-util .dd-wrap {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 18px; min-height: 34px;
}
.dd-util a { color: #fff; font-weight: 700; text-decoration: none; }
.dd-util a:hover, .dd-util a:focus-visible { color: #fff; text-decoration: underline; }

.dd-bar {
  display: flex; align-items: center; gap: 20px;
  min-height: 92px; padding-top: 8px; padding-bottom: 8px;
}

.dd-seal { flex: 0 0 auto; width: 74px; }
.dd-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.dd-brand a { display: block; line-height: 0; }
.dd-brand img { width: min(340px, 100%); }

.dd-bbb { flex: 0 0 auto; text-align: center; font-size: 12px; color: var(--ink-soft); }
.dd-bbb img { width: 112px; }
.dd-bbb a { display: block; line-height: 0; margin-bottom: 4px; }

/* ------------------------------------------------------------------- nav */
.dd-navbar { border-top: 1px solid var(--line); background: var(--paper); }
.dd-nav ul { list-style: none; margin: 0; padding: 0; }

.dd-nav > ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px;
}
.dd-nav > ul > li { position: relative; }

.dd-nav > ul > li > a,
.dd-nav .dd-top {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px;
  font: inherit; font-weight: 700; font-size: 16px;
  color: var(--ink); background: none; border: 0;
  text-decoration: none; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.dd-nav > ul > li > a:hover,
.dd-nav .dd-top:hover,
.dd-nav > ul > li > a:focus-visible,
.dd-nav .dd-top:focus-visible { color: var(--blue); border-bottom-color: var(--blue); }
.dd-nav > ul > li > a[aria-current="page"],
.dd-nav .dd-top[data-current] { color: var(--blue); border-bottom-color: var(--red); }

.dd-caret svg { width: 14px; height: 14px; display: block; transition: transform .18s; }
.dd-top[aria-expanded="true"] .dd-caret svg { transform: rotate(180deg); }

.dd-sub {
  position: absolute; left: 0; top: 100%; z-index: 70;
  min-width: 264px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
}
.dd-sub a {
  display: block; padding: 11px 18px;
  color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500;
}
.dd-sub a:hover, .dd-sub a:focus-visible { background: var(--blue-tint); color: var(--blue); }
.dd-sub a[aria-current="page"] { color: var(--blue); font-weight: 700; }

/* Everything the drawer owns needs a base-level display:none, or it leaks
   under the desktop footer before the media query that owns it is reached. */
.dd-burger, .dd-scrim, .dd-drawer { display: none; }

/* The panel is closed unless the button that controls it says otherwise, so
   the markup is correct with scripting off (where the :focus-within and
   :hover rules below take over). */
.dd-nav .dd-top[aria-expanded="false"] + .dd-sub { display: none; }

/* ====================================================================== */
/* HERO                                                                    */
/* ====================================================================== */
.dd-hero { position: relative; background: #1a1a24; color: #fff; }
.dd-hero picture, .dd-hero img { display: block; width: 100%; }
.dd-hero img {
  /* An aspect ratio on a full-bleed band grows without limit: at 2195px the
     un-capped version was 724px tall and filled the whole fold. */
  aspect-ratio: 2560 / 550;
  max-height: 460px;
  object-fit: cover; object-position: 50% 42%;
}
/* A DOM contrast sweep walks text nodes and cannot see white type over a
   photograph, so the scrim is not optional and not decorative: it is what
   makes the heading legible over the brightest part of the picture. */
.dd-hero-in::before {
  content: ""; position: absolute; inset: 0;
  /* Not decoration. fp_heroink.py measures the actual pixels the letters land
     on, composited through this gradient: .18 -> .52 left a confetti fleck at
     3.42:1 (a pass for large text, and still a hard read); .32 -> .60 puts the
     WORST pixel in the whole heading band at 4.56:1, which is AA at any size.
     Re-run fp_heroink.py if either number here changes. */
  background: linear-gradient(180deg, rgba(12,14,24,.32), rgba(12,14,24,.60));
}
.dd-hero-in {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--gutter);
}
.dd-hero h1 {
  position: relative; margin: 0; color: #fff;
  font-size: clamp(30px, 5.4vw, 60px); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* ====================================================================== */
/* PAGE SHELL                                                              */
/* ====================================================================== */
.dd-main { display: block; }
.dd-sec { padding: clamp(38px, 6vw, 68px) 0; }
.dd-sec--tint { background: var(--paper-alt); }
.dd-lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 62ch; }
.dd-note { font-size: 15.5px; color: var(--ink-soft); }

.dd-pagehead { padding: clamp(30px, 5vw, 54px) 0 0; }
.dd-pagehead h1 { max-width: 22ch; }

.dd-prose { max-width: 74ch; }
/* An <h2> has no top margin at base level, which is right for a heading that
   opens a section and wrong for one that follows a list. In a prose column the
   heading needs the space, and the first child never does. */
.dd-prose > h2, .dd-prose > h3 { margin-top: 1.9em; }
.dd-prose > :first-child { margin-top: 0; }
.dd-steps, .dd-defs { margin-bottom: 1.2em; }
.dd-center { text-align: center; }
.dd-center h2 { color: var(--ink); }
.dd-center p { max-width: 68ch; margin-left: auto; margin-right: auto; }
.dd-prose--wide { max-width: none; }

/* Two columns where there is room, one where there is not.  A definite width
   on the narrow track, never minmax(0,Npx) beside a 1fr - that collapses the
   track to zero and the picture vanishes at desktop while being perfect on a
   phone. */
.dd-split {
  display: grid;
  /* minmax(0, 1fr), never a bare 1fr. A bare `1fr` is `minmax(auto, 1fr)`, so
     the track cannot shrink below its content's MIN-CONTENT width - and one of
     the Elfsight galleries lays itself out at a fixed 540px, which dragged a
     320px phone's whole column out to 620px and put a horizontal scrollbar on
     the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* ------------------------------------------------------------- step list */
.dd-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.dd-steps > li {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 26px;
}
.dd-steps > li:last-child { padding-bottom: 0; }
/* The number is real text in the markup, not a CSS counter: a counter is
   decoration, so it is invisible to a text-parity run and to a reader with
   stylesheets off. */
.dd-step-n {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; line-height: 1;
}
.dd-steps p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ definitions */
.dd-defs { margin: 0; }
.dd-defs dt {
  font-weight: 900; color: var(--blue);
  font-size: 18px; margin-top: 1.35em;
}
.dd-defs dt:first-child { margin-top: 0; }
.dd-defs dd { margin: .25em 0 0; }

/* ----------------------------------------------------------------- cards */
.dd-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* The count is KNOWN, so it is written down.  repeat(auto-fit, minmax(...))
     picks the wrong count when you already know it, and minmax(300px, 1fr)
     inside auto-fit overflows a phone outright. */
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.dd-card { text-align: center; }
.dd-card picture { max-width: 200px; margin: 0 auto 14px; }
.dd-card h2, .dd-card h3 { font-size: 20px; font-weight: 900; color: var(--ink); }
.dd-card p:last-child { margin-bottom: 0; }

.dd-card--action {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.dd-card--action picture { max-width: 132px; }
.dd-card--action .dd-btn { margin-top: auto; }

/* ------------------------------------------------------------ home tiles */
.dd-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.dd-tile { display: flex; }
.dd-tile > a {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; text-decoration: none; color: inherit;
  transition: transform .28s ease;
}
.dd-tile > a:hover, .dd-tile > a:focus-visible { transform: translateY(-10px); }
.dd-tile picture { max-width: 300px; width: 100%; }
.dd-tile img { display: block; }
.dd-tile span {
  display: flex; align-items: center; justify-content: center;
  width: min(248px, 84%); min-height: 92px;
  margin-top: -22px; padding: 18px 16px;
  background: var(--blue); color: #fff;
  font-weight: 900; font-size: 19px; line-height: 1.2; text-align: center;
}

/* --------------------------------------------------------------- buttons */
.dd-btn {
  display: inline-block; padding: 14px 26px;
  font-weight: 900; font-size: 17px; text-decoration: none;
  border: 3px solid var(--blue); background: var(--blue); color: #fff;
  border-radius: var(--radius);
  transition: background .2s, color .2s;
  cursor: pointer;
}
.dd-btn:hover, .dd-btn:focus-visible { background: #fff; color: var(--blue); }
.dd-btn--hollow { background: none; color: var(--blue); }
.dd-btn--hollow:hover, .dd-btn--hollow:focus-visible { background: var(--blue); color: #fff; }
.dd-btn--onred { border-color: #fff; background: none; color: #fff; }
.dd-btn--onred:hover, .dd-btn--onred:focus-visible { background: #fff; color: var(--red-dark); }

.dd-btnrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.dd-btnrow picture { max-width: 150px; }

/* ---------------------------------------------------------- media blocks */
.dd-figure { margin: 0 0 1.5rem; }
.dd-figure picture { border-radius: var(--radius); overflow: hidden; }
.dd-badge { max-width: 220px; }

/* An Elfsight widget draws itself into this box.  It is the client's own
   content, edited in their Elfsight account, and it keeps working untouched -
   but it arrives from a third party, so the box is given a min-height to stop
   the page reflowing under the reader when it lands. */
/* The min-height only shows while the widget is empty, so it is a
   placeholder against layout shift, not a reservation of the final size -
   these render anywhere between 170px and 612px tall depending on the
   client's own content. */
.dd-widget { margin: 0 0 1.5rem; min-height: 140px; max-width: 100%; }
.dd-widget--tall { min-height: 200px; }

/* ====================================================================== */
/* BANDS                                                                   */
/* ====================================================================== */
.dd-cta {
  background: var(--red); color: #fff;
  padding: clamp(26px, 4vw, 40px) 0;
}
.dd-cta .dd-wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px;
}
.dd-cta h2 { color: #fff; font-size: clamp(30px, 4.4vw, 50px); margin: 0; }
.dd-cta p { margin: 6px 0 0; font-size: clamp(16px, 1.8vw, 25px); line-height: 1.2; }

.dd-reach { background: var(--paper); padding: clamp(34px, 5vw, 60px) 0; }
.dd-reach .dd-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: center;
}
.dd-reach h2 { color: var(--ink); }
.dd-reach p { font-size: clamp(16px, 1.8vw, 20px); margin: 0; }

/* ====================================================================== */
/* FOOTER                                                                  */
/* ====================================================================== */
.dd-foot { background: var(--blue); color: #fff; }
.dd-foot a { color: #fff; }
.dd-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.dd-foot-col { padding: 34px var(--gutter); text-align: center; }
.dd-foot-col h2 { color: #fff; font-size: 19px; letter-spacing: .04em; }
.dd-foot-col p { margin: 0 0 .6em; }
.dd-foot-col p:last-child { margin-bottom: 0; }
.dd-foot-col--red { background: var(--red); }
.dd-foot-col--map { padding: 0; min-height: 252px; }
.dd-foot-col--map iframe { display: block; width: 100%; height: 100%; min-height: 252px; border: 0; }

.dd-copy {
  background: var(--blue-dark); color: #fff;
  text-align: center; font-size: 14.5px; padding: 14px var(--gutter);
}
.dd-copy p { margin: 0; }

/* ====================================================================== */
/* FORM                                                                    */
/* ====================================================================== */
.dd-form { display: grid; gap: 18px; max-width: 560px; }
.dd-field { display: grid; gap: 6px; }
.dd-field > label { font-weight: 700; font-size: 15.5px; }
.dd-req { color: var(--red-dark); }

/* A DOM contrast sweep only walks TEXT, so it says nothing about a control's
   boundary - and WCAG 1.4.11 wants 3:1 on one.  --line-strong is 4.8:1. */
.dd-form input[type=text], .dd-form input[type=email], .dd-form input[type=tel],
.dd-form input[type=file], .dd-form textarea {
  width: 100%; padding: 11px 12px;
  font: inherit; font-size: 16px;   /* 16px or iOS zooms the page on focus */
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.dd-form textarea { min-height: 150px; resize: vertical; }
.dd-form input:focus-visible, .dd-form textarea:focus-visible {
  border-color: var(--blue); outline: 3px solid var(--blue-tint); outline-offset: 0;
}
.dd-hint { font-size: 14.5px; color: var(--ink-soft); }

/* The honeypot.  Parked off-screen on purpose, like the skip link - the
   responsive probe excludes both by class, because a rect walk reads them as a
   -9999px overflow on every width it tries. */
.dd-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.dd-alert {
  border-left: 5px solid var(--red-dark); background: #fdf2f2;
  padding: 14px 18px; margin: 0 0 20px; border-radius: var(--radius);
}
.dd-alert ul { margin: .4em 0 0; }
.dd-ok {
  border-left: 5px solid #1a7f37; background: #eef8f0;
  padding: 18px 22px; border-radius: var(--radius);
}
.dd-ok h2 { color: #14622a; }

/* ====================================================================== */
/* MEDIA QUERIES                                                           */
/*                                                                         */
/* Everything below overrides something above it.  A @media block does not  */
/* raise specificity, so a query written ABOVE its own rule is silently     */
/* ignored - fp_css_order.py is the check, and it runs in the build.        */
/* ====================================================================== */

/* --- two-up and three-up layouts, once there is room for them ---------- */
@media (min-width: 700px) {
  .dd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
  .dd-split--wide-first { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .dd-reach .dd-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dd-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dd-foot-col--map { grid-column: 1 / -1; }
}

@media (min-width: 980px) {
  .dd-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-foot-col--map { grid-column: auto; }

  /* On the two long product pages the right-hand column holds ONE gallery
     against several screens of copy, so it scrolls out of sight in the first
     fold and leaves a tall empty column behind. Let it follow the reader down
     instead - offset by the real masthead height, which the script keeps in
     step with the masthead as it reflows. */
  .dd-split--wide-first > :last-child {
    position: sticky; top: calc(var(--head-h) + 24px);
  }
}

/* --- the drawer -------------------------------------------------------- */
/* 1000px is where the six top-level labels plus the masthead stop fitting on
   one row; it was measured, not picked.  Everything the drawer owns is
   display:none at base level, so this query is the only place it appears. */
@media (max-width: 999.98px) {
  .dd-bar { min-height: 76px; gap: 14px; }
  .dd-seal { width: 56px; }
  .dd-brand img { width: min(260px, 100%); }
  .dd-bbb { display: none; }         /* it reappears in the footer, not here */

  .dd-navbar { display: none; }

  .dd-burger {
    display: block; position: relative;
    flex: 0 0 auto; width: 48px; height: 48px; padding: 0;
    background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
    color: var(--blue); cursor: pointer;
  }
  /* The bars are positioned ABSOLUTELY, so the visually-hidden label inside
     the button cannot become a fourth layout row and push them off centre -
     and 16/23/30 gives 7px gaps by construction, which is exactly what the
     open state's +-7px translate assumes. */
  .dd-burger span {
    position: absolute; left: 11px; width: 24px; height: 3px;
    background: currentColor; border-radius: 2px;
    transition: transform .22s ease, opacity .16s ease;
  }
  .dd-burger span:nth-child(1) { top: 16px; }
  .dd-burger span:nth-child(2) { top: 23px; }
  .dd-burger span:nth-child(3) { top: 30px; }
  .dd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .dd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .dd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The drawer starts BELOW the masthead and the scrim starts below it too,
     or a sticky header traps its own drawer under its own backdrop. */
  .dd-scrim {
    display: block; position: fixed;
    top: var(--head-h); left: 0; right: 0; bottom: 0;
    z-index: 55; background: rgba(10, 12, 20, .5);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .dd-scrim[data-open] { opacity: 1; pointer-events: auto; }

  .dd-drawer {
    display: block; position: fixed;
    top: var(--head-h); right: 0; bottom: 0;
    z-index: 58; width: min(360px, 88vw);
    background: var(--paper); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .24s ease;
  }
  .dd-drawer[data-open] { transform: none; }

  .dd-drawer .dd-nav > ul { display: block; }
  .dd-drawer .dd-nav > ul > li { border-bottom: 1px solid var(--line); }
  .dd-drawer .dd-nav > ul > li > a,
  .dd-drawer .dd-nav .dd-top {
    width: 100%; justify-content: space-between;
    padding: 16px 20px; font-size: 17px;
    border-bottom: 0; border-left: 4px solid transparent;
  }
  .dd-drawer .dd-nav > ul > li > a[aria-current="page"],
  .dd-drawer .dd-nav .dd-top[data-current] { border-left-color: var(--red); }
  .dd-drawer .dd-sub {
    position: static; min-width: 0;
    border: 0; border-top: 1px solid var(--line);
    box-shadow: none; background: var(--blue-tint); padding: 4px 0;
  }
  .dd-drawer .dd-sub a { padding: 13px 20px 13px 34px; }
  .dd-drawer-foot { padding: 22px 20px; border-top: 1px solid var(--line); }
  .dd-drawer-foot .dd-btn { display: block; text-align: center; }

  /* The drawer is open, so the page behind it must not scroll. */
  html[data-locked], html[data-locked] body { overflow: hidden; }

  /* ...and `overflow: hidden` on the root DESTROYS the sticky header.
     A sticky box sticks to its nearest scrollport; making the root a
     non-scrolling box removes that scrollport, so the header reverts to its
     STATIC position - which, on a page scrolled to 900px, is 900px above the
     viewport. The drawer is `position: fixed` and stays put, so the masthead
     simply vanishes and the photograph behind it shows through. It only
     happens once the reader has scrolled, which is why every measurement taken
     at the top of a page said the header was fine.

     Pin it for the duration instead. `fixed` has no flow box where `sticky`
     had one, so the body gets exactly that height back as padding - the two
     cancel and nothing behind the scrim moves by a pixel. --head-h is the real
     measured masthead height, kept in step by the script. */
  html[data-locked] .dd-head {
    position: fixed; top: 0; left: 0; right: 0;
  }
  html[data-locked] body { padding-top: var(--head-h); }
}

/* --- a dropdown that opens on hover, but only where hovering is real ---- */
/* A touch device fires a synthetic hover on the first tap, so the panel opens
   and the same tap immediately closes it.  Gate it on a fine pointer; the
   button and its aria-expanded work everywhere. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .dd-nav > ul > li:hover > .dd-sub,
  .dd-nav > ul > li:focus-within > .dd-sub { display: block; }
}

/* --- stacking, in order of how much room is left ----------------------- */
@media (max-width: 860px) {
  .dd-cards { --cols: 2; }
  .dd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A tile stranded alone on the last row of a 2-up grid reads as a mistake:
     let the third one run the full width and centre its own contents. */
  .dd-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 340px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .dd-util { font-size: 14px; }
  .dd-util .dd-wrap { justify-content: center; }
  .dd-cards { --cols: 1; }
  .dd-card--action { padding: 24px 18px; }
  .dd-tiles { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .dd-tile { max-width: 340px; width: 100%; margin: 0 auto; }
  .dd-tile:last-child:nth-child(odd) { grid-column: auto; max-width: 340px; }
  .dd-steps > li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .dd-step-n { width: 42px; height: 42px; font-size: 20px; }
  .dd-cta .dd-wrap { justify-content: center; text-align: center; }
  .dd-cta .dd-btn { width: 100%; text-align: center; }
  .dd-hero img { aspect-ratio: 16 / 10; max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .dd-util, .dd-navbar, .dd-burger, .dd-drawer, .dd-scrim, .dd-cta, .dd-foot-col--map { display: none !important; }
  .dd-head { position: static; }
  body { font-size: 12pt; }
}