/* ==========================================================================
   dns-commerce.css
   The commercial layer for dubainotaryservices.ae. Business rendering.

   WHAT THIS FILE IS FOR
   dns-skin.css styles the content vocabulary the pages are written in:
   gutter, roll, docket, ruling, matrix, parallel, openqa and the leaf card.
   This file carries the commercial furniture: the header, a hero on a
   photograph, a trust strip, a numbered process, the accepting authorities,
   a conversion band, feature pillars, the drop zone, the photo band, the
   split, the figure band, the footer and the fixed action bar on a phone.

   REWRITTEN 4 SEPTEMBER 2026 against _design-spec-business.md. The header
   and footer sections are the chrome developer's and were left as they were;
   every module between them was restyled as a card based corporate layout.

   CONVENTIONS, unchanged from the rest of the theme
   1. Region defaults go in :where() at (0,0,0) so a component can override
      them without a specificity fight.
   2. A component states its colour on EVERY state. A hover that only sets a
      background inherits the wrong text colour the moment the region changes.
   3. A modifier always carries its block class, so .dns-btn--solid is written
      .dns-btn--solid.dns-btn and cannot be outranked by a bare .dns-btn rule.
      The photo band is emitted as .dns-photoband.dns-hero--photo without the
      .dns-hero block, so it is styled on .dns-photoband alone.
   4. No !important anywhere in author CSS.
   5. Every hex code lives in dns-tokens.css. There are none below. rgba()
      is tolerated for overlays and shadows only.
   6. Logical properties only. The one thing they cannot flip, a gradient
      angle, is restated for [dir="rtl"] where it matters.

   THE [hidden] TRAP
   An author display rule beats the user agent's [hidden] rule regardless of
   specificity, so anything given display by a component and hidden by the
   hidden property needs the (0,2,0) guard. dns-skin.css carries a theme wide
   [hidden][hidden] rule; nothing here may set display on a [hidden] element
   without going through it.
   ========================================================================== */


/* ==========================================================================
   1. Skip link and screen reader text
   ========================================================================== */

.dns-skip {
  position: absolute;
  inset-inline-start: var(--dns-s4);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--dns-s3) var(--dns-s5);
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-bold);
  text-decoration: none;
}

.dns-skip:focus {
  inset-block-start: var(--dns-s4);
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. Icons
   ========================================================================== */

.dns-icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}


/* ==========================================================================
   3. Buttons

   One radius, stated once. On a light ground the outline button uses the
   strong border and ink text, because it is a control and SC 1.4.11 wants a
   3:1 boundary; the hairline never reaches it.
   ========================================================================== */

.dns-actions { display: flex; flex-wrap: wrap; gap: var(--dns-s3); }

.dns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dns-s2);
  min-block-size: var(--dns-target-min);
  padding: var(--dns-s3) var(--dns-s5);
  border: var(--dns-border-width) solid transparent;
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  font-weight: var(--dns-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dns-transition),
              border-color var(--dns-transition),
              color var(--dns-transition);
}

/* The companion. Stated here as well as in the theme wide guard so a
   reader of this file sees it beside the component. */
.dns-btn[hidden] { display: none; }

.dns-btn:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

/* Solid: the one thing on a screen we want pressed. */
.dns-btn--solid.dns-btn {
  background: var(--dns-action);
  border-color: var(--dns-action);
  color: var(--dns-surface);
}
.dns-btn--solid.dns-btn:hover,
.dns-btn--solid.dns-btn:focus-visible {
  background: var(--dns-action-hover);
  border-color: var(--dns-action-hover);
  color: var(--dns-surface);
}
.dns-btn--solid.dns-btn:active {
  background: var(--dns-action-hover);
  border-color: var(--dns-action-hover);
  color: var(--dns-surface);
}

/* Outline: the second, lower commitment action. */
.dns-btn--line.dns-btn {
  background: transparent;
  border-color: var(--dns-border-strong);
  color: var(--dns-ink);
}
.dns-btn--line.dns-btn:hover,
.dns-btn--line.dns-btn:focus-visible {
  background: var(--dns-action-soft);
  border-color: var(--dns-action);
  color: var(--dns-action-hover);
}
.dns-btn--line.dns-btn:active {
  background: var(--dns-action-soft);
  border-color: var(--dns-action-hover);
  color: var(--dns-action-hover);
}

/* WhatsApp. The green is the platform's and not ours to adjust, so the label
   is dark: white on it measures 2.36:1 and would be illegal. */
.dns-btn--wa.dns-btn {
  background: var(--dns-wa);
  border-color: var(--dns-wa);
  color: var(--dns-wa-ink);
}
.dns-btn--wa.dns-btn:hover,
.dns-btn--wa.dns-btn:focus-visible,
.dns-btn--wa.dns-btn:active {
  background: var(--dns-wa);
  border-color: var(--dns-wa-ink);
  color: var(--dns-wa-ink);
}

/* On a dark ground the outline button has to flip its own colours, because
   the region it sits in changed and inheritance will not do it. The bright
   green is legal here and only here. */
:where(.dns-hero, .dns-photoband, .dns-ctaband, .dns-index) .dns-btn--line.dns-btn {
  background: transparent;
  border-color: var(--dns-text-invert-muted);
  color: var(--dns-text-invert);
}
:where(.dns-hero, .dns-photoband, .dns-ctaband, .dns-index) .dns-btn--line.dns-btn:hover,
:where(.dns-hero, .dns-photoband, .dns-ctaband, .dns-index) .dns-btn--line.dns-btn:focus-visible {
  background: transparent;
  border-color: var(--dns-action-bright);
  color: var(--dns-action-bright);
}
:where(.dns-hero, .dns-photoband, .dns-ctaband, .dns-index) .dns-btn--line.dns-btn:active {
  background: var(--dns-surface-invert-2);
  border-color: var(--dns-action-bright);
  color: var(--dns-action-bright);
}
:where(.dns-hero, .dns-photoband, .dns-ctaband) .dns-btn:focus-visible {
  outline-color: var(--dns-action-bright);
}


/* ==========================================================================
   4. Header
   ========================================================================== */

.dns-index {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  border-block-end: var(--dns-border-width) solid transparent;
  transition: box-shadow var(--dns-transition);
}

.dns-index--stuck.dns-index {
  box-shadow: var(--dns-lift-2);
}

.dns-index__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "utility utility utility"
    "brand   nav     actions";
  align-items: center;
  column-gap: var(--dns-s5);
  row-gap: 0;
  padding-block: 0 var(--dns-s3);
}

/* the utility row: phone, WhatsApp, language. Quiet, right aligned, and
   gone once the header is stuck to the top of a scrolled page */
.dns-index__utility {
  grid-area: utility;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--dns-s5);
  padding-block: var(--dns-s2);
  margin-block-end: var(--dns-s2);
  border-block-end: var(--dns-border-width) solid var(--dns-surface-invert-2);
}
.dns-index--stuck.dns-index .dns-index__utility { display: none; }

.dns-index__utility .dns-index__phonetext {
  display: flex;
  align-items: baseline;
  gap: var(--dns-s2);
}
.dns-index__utility .dns-btn {
  min-block-size: 0;
  padding: var(--dns-s1) var(--dns-s3);
  font-size: var(--dns-text-sm);
}

.dns-index__brand {
  grid-area: brand;
  display: inline-flex;
  text-decoration: none;
  color: var(--dns-text-invert);
  flex: none;
}
.dns-index__brand:hover,
.dns-index__brand:focus-visible {
  color: var(--dns-text-invert);
}
.dns-index__brand:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: var(--dns-focus-offset);
}

.dns-index__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--dns-s3);
}

.dns-index__mark {
  display: inline-flex;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--dns-text-invert);
}
.dns-index__mark svg {
  inline-size: 100%;
  block-size: 100%;
}

.dns-index__text {
  display: grid;
  gap: 2px;
}

.dns-index__name {
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-md);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--dns-text-invert);
}

.dns-index__strapline {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-invert-muted);
}

/* --- primary nav --- */

.dns-nav { display: none; }

@media (min-width: 62rem) {
  .dns-nav {
    grid-area: nav;
    justify-self: end;
    display: block;
    margin-inline-start: 0;
  }
}

.dns-nav__list {
  display: flex;
  align-items: center;
  gap: var(--dns-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dns-nav__link {
  display: inline-block;
  padding-block: var(--dns-s2);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  color: var(--dns-text-invert);
  border-block-end: 2px solid transparent;
}
.dns-nav__link:hover,
.dns-nav__link:focus-visible {
  color: var(--dns-action-bright);
  border-block-end-color: var(--dns-action-bright);
}
.dns-nav__link:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: var(--dns-focus-offset);
}

.dns-nav__list .current-menu-item > .dns-nav__link {
  color: var(--dns-action-bright);
  border-block-end-color: var(--dns-action-bright);
}

/* --- primary nav: dropdown --- */

.dns-nav .menu-item-has-children { position: relative; }

.dns-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-inline-start: 0.4em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}

.dns-nav .sub-menu {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(-1 * var(--dns-s3));
  z-index: 40;
  min-inline-size: 18rem;
  margin: 0;
  padding: var(--dns-s2);
  list-style: none;
  background: var(--dns-surface-invert-2);
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-radius: var(--dns-radius);
}
.dns-nav .menu-item-has-children:hover > .sub-menu,
.dns-nav .menu-item-has-children:focus-within > .sub-menu {
  display: grid;
  gap: var(--dns-s1);
}

.dns-nav .sub-menu a {
  display: block;
  padding: var(--dns-s2) var(--dns-s3);
  border-radius: var(--dns-radius);
  border-block-end: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  color: var(--dns-text-invert);
}
.dns-nav .sub-menu a:hover,
.dns-nav .sub-menu a:focus-visible,
.dns-nav .sub-menu .current-menu-item > a {
  background: var(--dns-surface-invert);
  color: var(--dns-action-bright);
}
.dns-nav .sub-menu a:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: calc(-1 * var(--dns-focus-width));
}

/* --- header actions --- */

.dns-index__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--dns-s3);
  margin-inline-start: 0;
}

.dns-index__phone {
  display: none;
  align-items: center;
  gap: var(--dns-s2);
  text-decoration: none;
  color: var(--dns-text-invert);
}

@media (min-width: 48rem) {
  .dns-index__phone { display: inline-flex; }
}

.dns-index__phone:hover,
.dns-index__phone:focus-visible { color: var(--dns-action-bright); }
.dns-index__phone:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: var(--dns-focus-offset);
}

.dns-index__phoneicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--dns-radius-pill);
  background: var(--dns-surface-invert-2);
  color: var(--dns-action-bright);
}

.dns-index__phonetext { display: grid; }

.dns-index__phonelabel {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  color: var(--dns-text-invert-muted);
  line-height: 1.2;
}

.dns-index__phonenum {
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-bold);
  color: var(--dns-text-invert);
  line-height: 1.2;
}

.dns-index__cta { display: none; }
@media (min-width: 48rem) { .dns-index__cta { display: inline-flex; } }

.dns-index .dns-btn--wa.dns-btn { display: none; }
@media (min-width: 75rem) { .dns-index .dns-btn--wa.dns-btn { display: inline-flex; } }

.dns-index__notice {
  margin: 0;
  font-size: var(--dns-text-xs);
  color: var(--dns-text-invert-muted);
}

/* --- language switcher --- */

.dns-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--dns-s2);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-invert-muted);
}

.dns-lang b {
  font-weight: var(--dns-weight-bold);
  color: var(--dns-text-invert);
}

.dns-lang__link {
  color: var(--dns-text-invert-muted);
  text-decoration: none;
  border-block-end: 1px solid var(--dns-text-invert-muted);
}
.dns-lang__link:hover,
.dns-lang__link:focus-visible {
  color: var(--dns-action-bright);
  border-block-end-color: var(--dns-action-bright);
}

/* --- mobile toggle and drawer --- */

.dns-index__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--dns-target-min);
  block-size: var(--dns-target-min);
  padding: 0;
  background: transparent;
  border: var(--dns-border-width) solid var(--dns-text-invert-muted);
  border-radius: var(--dns-radius);
  color: var(--dns-text-invert);
  cursor: pointer;
}
.dns-index__toggle:hover,
.dns-index__toggle:focus-visible {
  border-color: var(--dns-action-bright);
  color: var(--dns-action-bright);
}
.dns-index__toggle:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: var(--dns-focus-offset);
}

@media (min-width: 62rem) {
  .dns-index__toggle { display: none; }
}

/* Show the close glyph only while open. Both glyphs are in the DOM so the
   button never reflows when it changes state. */
.dns-index__toggleicon { display: inline-flex; }
.dns-index__toggle .dns-icon--close.dns-icon { display: none; }
.dns-index__toggle[aria-expanded="true"] .dns-icon--menu.dns-icon { display: none; }
.dns-index__toggle[aria-expanded="true"] .dns-icon--close.dns-icon { display: inline-flex; }

.dns-drawer {
  background: var(--dns-surface-invert-2);
  border-block-start: var(--dns-border-width) solid var(--dns-surface-invert);
}

.dns-drawer__inner {
  padding-block: var(--dns-s5);
  display: grid;
  gap: var(--dns-s4);
}

.dns-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--dns-s1);
}

.dns-drawer__link {
  display: block;
  padding: var(--dns-s3) var(--dns-s3);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  color: var(--dns-text-invert);
}
.dns-drawer__link:hover,
.dns-drawer__link:focus-visible {
  background: var(--dns-surface-invert);
  color: var(--dns-action-bright);
}

.dns-drawer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--dns-s2);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  text-decoration: none;
  color: var(--dns-action-bright);
}
.dns-drawer__phone:hover,
.dns-drawer__phone:focus-visible { color: var(--dns-action-bright); }

/* --- drawer: nested list --- */

.dns-drawer__list .sub-menu {
  margin: 0;
  padding: 0 0 var(--dns-s2) var(--dns-s4);
  list-style: none;
  display: grid;
  gap: var(--dns-s1);
}
.dns-drawer__list .sub-menu a {
  display: block;
  padding: var(--dns-s2) var(--dns-s3);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-normal);
  text-decoration: none;
  color: var(--dns-text-invert-muted);
}
.dns-drawer__list .sub-menu a:hover,
.dns-drawer__list .sub-menu a:focus-visible,
.dns-drawer__list .sub-menu .current-menu-item > a {
  background: var(--dns-surface-invert);
  color: var(--dns-action-bright);
}

/* Stop the page scrolling behind an open drawer. */
.dns-locked { overflow: hidden; }


/* ==========================================================================
   5. Hero

   Dark ground, one eyebrow pill, a heavy title, a lede and the actions. On
   pages with a photograph the section gains .dns-hero--photo and the
   photograph, the overlay and the two column grid are in section 16.
   ========================================================================== */

.dns-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
}

/* A masked hairline texture so the panel never renders as a flat coloured
   div. Two repeating gradients, no image request. Any opaque colour works
   as the mask's visible stop; the ink token is used so no hex appears. */
.dns-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3.5rem),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3.5rem);
  mask-image: radial-gradient(120% 90% at 82% 18%, var(--dns-ink) 0%, transparent 68%);
  pointer-events: none;
}

.dns-hero > * { position: relative; }

.dns-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding-inline: var(--dns-s3);
  margin-block: 0 var(--dns-s4);
  border-radius: var(--dns-radius-pill);
  background: var(--dns-surface-invert-2);
  color: var(--dns-action-bright);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  line-height: 1;
}

:where([dir="rtl"], [lang="ar"]) .dns-hero__eyebrow {
  letter-spacing: normal;
  text-transform: none;
}

.dns-hero__title {
  margin-block: 0 var(--dns-s5);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-4xl);
  font-weight: var(--dns-weight-heavy);
  line-height: var(--dns-leading-tight);
  letter-spacing: -0.03em;
  color: var(--dns-text-invert);
  text-wrap: balance;
}

.dns-hero__lede {
  margin-block: 0 var(--dns-s5);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dns-s3);
  margin-block: var(--dns-s6) 0;
}

.dns-hero__btnwrap { margin: 0; }

.dns-hero__note {
  margin-block: var(--dns-s5) 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-invert-muted);
}


/* ==========================================================================
   6. Proof, the trust strip

   Directly under the hero: white cards on the sunken band, the figure in
   display bold and the label small and muted. Figures are never invented;
   a page without verified numbers does not use this section.
   ========================================================================== */

.dns-proof {
  padding-block: var(--dns-section-y-act);
  background: var(--dns-surface-sunken);
  color: var(--dns-text);
}

.dns-proof__item {
  min-inline-size: 0;
  padding: var(--dns-s5);
  background: var(--dns-surface-raised);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius-lg);
  box-shadow: var(--dns-lift-1);
  text-align: center;
}

.dns-proof__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin: 0 auto var(--dns-s3);
  border-radius: var(--dns-radius-pill);
  background: var(--dns-action-soft);
  color: var(--dns-action);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-heavy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dns-proof__figure {
  margin-block: 0 var(--dns-s1);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--dns-leading-snug);
  color: var(--dns-ink);
}

.dns-proof__label {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-medium);
  color: var(--dns-text-muted);
}


/* ==========================================================================
   7. Steps, the named process

   Four numbered cards. At 62rem a connector runs behind them at the height
   of the number discs, so it shows in the gaps between cards and reads as
   the line the steps sit on. The number is a 48px action disc.
   ========================================================================== */

.dns-steps {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface);
  color: var(--dns-text);
}

.dns-steps__lead {
  grid-column: 1;
  margin-block: 0 var(--dns-s6);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  color: var(--dns-text);
}

.dns-steps__grid {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: var(--dns-s4);
  grid-template-columns: minmax(0, 1fr);
}

.dns-step {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
  padding: var(--dns-s6) var(--dns-s5) var(--dns-s5);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius-xl);
  box-shadow: var(--dns-lift-1);
}

.dns-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block: 0 var(--dns-s4);
  border-radius: var(--dns-radius-pill);
  background: var(--dns-action);
  color: var(--dns-text-invert);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-md);
  font-weight: var(--dns-weight-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.dns-step__title {
  margin-block: 0 var(--dns-s2);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-snug);
  letter-spacing: -0.01em;
  color: var(--dns-ink);
}

.dns-step__body {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}

@media (min-width: 48rem) {
  .dns-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .dns-steps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The connector. Card border, then the card's block padding, then the
     disc's radius, puts the disc centre 57px down; a 2px line at 56px. */
  .dns-steps__grid::before {
    content: "";
    position: absolute;
    inset-inline: 3rem;
    inset-block-start: calc(var(--dns-border-width) + var(--dns-s6) + 1.5rem - 1px);
    block-size: 2px;
    background: var(--dns-tint-lt);
  }
}


/* ==========================================================================
   8. Logos, the accepting authorities

   Names set in the site's own type rather than twenty mismatched emblem
   files. We hold no licence to reproduce government marks, and a wall of
   wordmarks is both safer and more consistent.
   ========================================================================== */

.dns-logos {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-sunken);
  color: var(--dns-text);
}

.dns-logos__lead {
  grid-column: 1;
  margin-block: 0 var(--dns-s6);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  color: var(--dns-text);
}

.dns-logos__grid {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--dns-s4);
  grid-template-columns: minmax(0, 1fr);
}

.dns-logos__item {
  margin: 0;
  min-inline-size: 0;
  padding: var(--dns-s4) var(--dns-s3);
  background: var(--dns-surface-raised);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius-lg);
  box-shadow: var(--dns-lift-1);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-bold);
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--dns-ink);
}

@media (min-width: 40rem) { .dns-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .dns-logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .dns-logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* ==========================================================================
   9. CTA band

   Centred on a 58ch track, dark ground with the hairline texture, buttons
   centred under the lede.
   ========================================================================== */

.dns-ctaband {
  position: relative;
  overflow: hidden;
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
}

.dns-ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3.5rem),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3.5rem);
  mask-image: radial-gradient(120% 90% at 50% 0%, var(--dns-ink) 0%, transparent 70%);
  pointer-events: none;
}

.dns-ctaband > * { position: relative; }

.dns-ctaband .dns-wrap > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 58ch);
  justify-content: center;
  row-gap: var(--dns-s4);
  text-align: center;
}

.dns-ctaband__title {
  margin: 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-2xl);
  font-weight: var(--dns-weight-heavy);
  line-height: var(--dns-leading-tight);
  letter-spacing: -0.025em;
  color: var(--dns-text-invert);
  text-wrap: balance;
}

.dns-ctaband__lede {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dns-s3);
  margin-block-start: var(--dns-s2);
}

.dns-ctaband__btnwrap { margin: 0; }


/* ==========================================================================
   10. Pillars, why choose us

   Three feature cards on the sunken band, each with a top accent bar in the
   action colour. The builder may put an icon chip above the title.
   ========================================================================== */

.dns-pillars {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-sunken);
  color: var(--dns-text);
}

.dns-pillar {
  min-inline-size: 0;
  padding: var(--dns-s6);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  border: var(--dns-border-width) solid var(--dns-border);
  border-block-start: 4px solid var(--dns-action);
  border-radius: var(--dns-radius-xl);
  box-shadow: var(--dns-lift-1);
}

.dns-pillar__title {
  margin-block: 0 var(--dns-s2);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-snug);
  letter-spacing: -0.01em;
  color: var(--dns-ink);
}

.dns-pillar__body {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}


/* ==========================================================================
   11. The leaf card

   Every leaf rule, including the icon chip, the image and the action, now
   lives in dns-skin.css beside the card it belongs to, so a reader finds the
   whole component in one place.
   ========================================================================== */


/* ==========================================================================
   12. Footer
   ========================================================================== */

.dns-colophon {
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert-muted);
  padding-block: var(--dns-s10) var(--dns-s6);
}

.dns-colophon__inner {
  display: grid;
  gap: var(--dns-s8);
}

@media (min-width: 48rem) {
  .dns-colophon__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .dns-colophon__inner { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}

.dns-colophon .dns-index__name { color: var(--dns-text-invert); }
.dns-colophon .dns-index__strapline { color: var(--dns-text-invert-muted); }

.dns-colophon__blurb {
  margin-block: var(--dns-s4) var(--dns-s5);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-colophon__contact {
  display: grid;
  gap: var(--dns-s3);
}

.dns-colophon__link {
  display: inline-flex;
  align-items: center;
  gap: var(--dns-s2);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  color: var(--dns-text-invert);
}
.dns-colophon__link:hover,
.dns-colophon__link:focus-visible {
  color: var(--dns-action-bright);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.dns-colophon__address,
.dns-colophon__hours {
  display: flex;
  align-items: start;
  gap: var(--dns-s2);
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-style: normal;
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-colophon__title {
  margin: 0 0 var(--dns-s4);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-invert);
}

.dns-colophon__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--dns-s3);
}

.dns-colophon__navlink {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  text-decoration: none;
  color: var(--dns-text-invert-muted);
}
.dns-colophon__navlink:hover,
.dns-colophon__navlink:focus-visible {
  color: var(--dns-action-bright);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.dns-colophon__base {
  display: grid;
  gap: var(--dns-s3);
  margin-block-start: var(--dns-s8);
  padding-block-start: var(--dns-s5);
  border-block-start: var(--dns-border-width) solid var(--dns-surface-invert-2);
}

.dns-colophon__note,
.dns-colophon__reviewed,
.dns-colophon__capacity {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-colophon__capacity {
  padding: var(--dns-s4);
  background: var(--dns-surface-invert-2);
  border-radius: var(--dns-radius);
}


/* ==========================================================================
   13. Fixed action bar, below the mobile breakpoint

   The reader is a company PRO in a car park with one thumb. Two actions that
   start a conversation, and one that sends the draft.
   ========================================================================== */

.dns-actionbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--dns-surface);
  border-block-start: var(--dns-border-width) solid var(--dns-border);
  box-shadow: var(--dns-lift-3);
  padding-block-end: env(safe-area-inset-bottom, 0);
}

/* Desktop has a phone number and a CTA in the header already, so the bar is
   duplicate furniture above the breakpoint. The survey found a competitor
   whose fixed bar had no media query and covered desktop content. */
@media (min-width: 48rem) {
  .dns-actionbar { display: none; }
}

.dns-actionbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dns-s1);
  min-block-size: 3.75rem;
  padding: var(--dns-s2);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  text-decoration: none;
  color: var(--dns-ink);
}
.dns-actionbar__item + .dns-actionbar__item {
  border-inline-start: var(--dns-border-width) solid var(--dns-border);
}
.dns-actionbar__item:hover,
.dns-actionbar__item:focus-visible {
  background: var(--dns-action-soft);
  color: var(--dns-action-hover);
}
.dns-actionbar__item:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: calc(var(--dns-focus-offset) * -1);
}

.dns-actionbar__item--wa {
  background: var(--dns-wa);
  color: var(--dns-wa-ink);
}
.dns-actionbar__item--wa:hover,
.dns-actionbar__item--wa:focus-visible {
  background: var(--dns-wa);
  color: var(--dns-wa-ink);
}

.dns-actionbar__item--cta {
  background: var(--dns-action);
  color: var(--dns-surface);
}
.dns-actionbar__item--cta:hover,
.dns-actionbar__item--cta:focus-visible {
  background: var(--dns-action-hover);
  color: var(--dns-surface);
}

/* The bar covers the last of the page, so the document needs room under it. */
@media (max-width: 47.999rem) {
  body { padding-block-end: 3.75rem; }
}


/* ==========================================================================
   14. Grids and structure

   core/group never renders its children as direct descendants: it wraps
   them in an inner container. So a grid applied to a group class has one
   child, not many. On top of that, the full bleed bands insert their own
   .dns-wrap for measure, which adds two more levels:

       .dns-proof > inner > .dns-wrap > inner > .dns-proof__item

   So the grid goes on the innermost container and everything above it is
   dissolved. Getting this wrong stacked the four proof figures vertically.

   Explicit column counts with breakpoints rather than auto-fit, because
   auto-fit ignores the class name and a Gutenberg editor cannot predict it.
   ========================================================================== */

.dns-proof > .wp-block-group__inner-container,
.dns-pillars > .wp-block-group__inner-container,
.dns-steps > .wp-block-group__inner-container,
.dns-logos > .wp-block-group__inner-container,
.dns-ctaband > .wp-block-group__inner-container,
.dns-steps__grid > .wp-block-group__inner-container,
.dns-logos__grid > .wp-block-group__inner-container,
.dns-hero__actions > .wp-block-group__inner-container,
.dns-ctaband__actions > .wp-block-group__inner-container {
  display: contents;
}

/* The proof strip and the pillars: a card grid straight inside the wrap. */
.dns-proof .dns-wrap > .wp-block-group__inner-container,
.dns-pillars .dns-wrap > .wp-block-group__inner-container {
  display: grid;
  gap: var(--dns-s4);
  grid-template-columns: minmax(0, 1fr);
}
.dns-pillars .dns-wrap > .wp-block-group__inner-container { gap: var(--dns-s5); }

@media (min-width: 40rem) {
  .dns-proof .dns-wrap > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .dns-pillars .dns-wrap > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .dns-proof .dns-wrap > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The steps and the logos: a lead paragraph on a 62ch track, then the grid
   spanning both tracks. The measure is set by the track, never by a cap on
   the paragraph. */
.dns-steps .dns-wrap > .wp-block-group__inner-container,
.dns-logos .dns-wrap > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
  column-gap: var(--dns-s6);
}

/* ==========================================================================
   15. Templates: blog index, single post, search, 404

   The child theme shipped with no template files, so all of these fell
   through to GeneratePress and rendered in the parent theme type on a site
   whose visual system is defined here. A visitor landing on a post saw a
   different website. These are the styles for the markup that inc/blog.php
   and inc/search.php hang off the parent hooks.
   ========================================================================== */

.dns-lede {
  background: var(--dns-surface-sunken);
  border-block-end: var(--dns-border-width) solid var(--dns-border);
  padding-block: var(--dns-section-y-act);
}

.dns-lede__inner {
  display: grid;
  gap: var(--dns-s3);
  grid-template-columns: minmax(0, 62ch);
}

.dns-lede__eyebrow {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-action);
}

.dns-lede__title {
  margin: 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-3xl);
  font-weight: var(--dns-weight-heavy);
  line-height: var(--dns-leading-tight);
  letter-spacing: -0.03em;
  color: var(--dns-ink);
  text-wrap: balance;
}

.dns-lede__lead {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-muted);
}

.dns-lede__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dns-s2);
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-muted);
}


/* --- the post body ------------------------------------------------------ */

.dns-t-post .entry-content {
  display: grid;
  gap: var(--dns-s5);
  grid-template-columns: minmax(0, 68ch);
  justify-content: center;
}

.dns-t-post .entry-content > * { grid-column: 1; }

.dns-t-post .entry-content h2 {
  margin-block: var(--dns-s6) 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-xl);
  font-weight: var(--dns-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--dns-leading-snug);
  color: var(--dns-ink);
}

.dns-t-post .entry-content h3 {
  margin-block: var(--dns-s5) 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-md);
  font-weight: var(--dns-weight-bold);
  color: var(--dns-ink);
}

.dns-t-post .entry-content p,
.dns-t-post .entry-content li {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}

.dns-t-post .entry-content a {
  color: var(--dns-action);
  text-underline-offset: 0.2em;
}
.dns-t-post .entry-content a:hover,
.dns-t-post .entry-content a:focus-visible {
  color: var(--dns-action-hover);
}

.dns-t-post .entry-content blockquote {
  margin-inline: 0;
  padding-inline-start: var(--dns-s5);
  border-inline-start: 3px solid var(--dns-action);
  font-family: var(--dns-font-text);
  color: var(--dns-text-muted);
}


/* --- after a post ------------------------------------------------------- */

.dns-afterpost {
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  padding-block: var(--dns-section-y-act);
  margin-block-start: var(--dns-s10);
}

.dns-afterpost__inner {
  display: grid;
  gap: var(--dns-s3);
  grid-template-columns: minmax(0, 58ch);
  justify-content: start;
}

.dns-afterpost__title {
  margin: 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-xl);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: -0.025em;
  color: var(--dns-text-invert);
}

.dns-afterpost__body {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-afterpost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dns-s3);
  margin: var(--dns-s3) 0 0;
}


/* --- 404 and empty search ----------------------------------------------- */

.dns-404,
.dns-empty {
  padding-block: var(--dns-section-y);
  display: grid;
  gap: var(--dns-s4);
  grid-template-columns: minmax(0, 62ch);
  justify-content: start;
}

.dns-empty__title {
  margin: 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-xl);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: -0.025em;
  color: var(--dns-ink);
}

.dns-empty__body {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-md);
  color: var(--dns-text-muted);
}

.dns-404__list {
  display: grid;
  gap: var(--dns-s2);
  margin: var(--dns-s3) 0 0;
  padding: 0;
  list-style: none;
}

.dns-404__link {
  display: block;
  padding: var(--dns-s3) var(--dns-s4);
  background: var(--dns-surface-raised);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  color: var(--dns-ink);
}
.dns-404__link:hover,
.dns-404__link:focus-visible {
  border-color: var(--dns-action);
  background: var(--dns-action-soft);
  color: var(--dns-action-hover);
}


/* --- search form -------------------------------------------------------- */

.dns-search { display: grid; gap: var(--dns-s2); }

.dns-search__label {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-muted);
}

.dns-search__row { display: flex; gap: var(--dns-s2); }

.dns-search__input {
  flex: 1;
  min-block-size: var(--dns-target-min);
  padding: var(--dns-s3) var(--dns-s4);
  background: var(--dns-surface);
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  color: var(--dns-ink);
}
.dns-search__input:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}


/* --- the drop zone ------------------------------------------------------
   The form that asks for a document. On a light ground it is a white card
   with the deepest lift; on the photo hero it stays the blurred dark card,
   and every colour inside it is restated for that ground because a control
   inherits nothing from its region.
   ------------------------------------------------------------------------ */

.dns-drop {
  margin-block: var(--dns-s6) 0;
  padding: var(--dns-s7) var(--dns-s6);
  text-align: center;
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius-xl);
  box-shadow: var(--dns-lift-3);
  transition: background-color var(--dns-transition),
              border-color var(--dns-transition);
}

.dns-drop:focus-within,
.dns-drop[data-dns-over="true"] {
  background: var(--dns-action-soft);
  color: var(--dns-text);
  border-color: var(--dns-action);
}

.dns-drop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-inline: auto;
  margin-block-end: var(--dns-s4);
  border-radius: var(--dns-radius-lg);
  background: var(--dns-action-soft);
  color: var(--dns-action);
}

.dns-drop__title {
  margin-block: 0 var(--dns-s2);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: -0.02em;
  color: var(--dns-ink);
}

.dns-drop__hint {
  margin-block: 0 var(--dns-s5);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-muted);
}

.dns-drop__note {
  margin-block: var(--dns-s4) 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  color: var(--dns-text-muted);
}

.dns-drop__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dns-s2);
  margin-block: 0 var(--dns-s4);
  text-align: start;
}

.dns-drop__label {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-muted);
}

:where([dir="rtl"], [lang="ar"]) .dns-drop__label {
  letter-spacing: normal;
  text-transform: none;
}

.dns-drop__input,
.dns-drop__file {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--dns-target-min);
  padding: var(--dns-s3) var(--dns-s4);
  background: var(--dns-surface);
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  color: var(--dns-ink);
  transition: border-color var(--dns-transition);
}
.dns-drop__input:hover,
.dns-drop__file:hover {
  background: var(--dns-surface);
  color: var(--dns-ink);
  border-color: var(--dns-action);
}
.dns-drop__input:focus-visible,
.dns-drop__file:focus-visible {
  background: var(--dns-surface);
  color: var(--dns-ink);
  border-color: var(--dns-action);
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-drop__chosen {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-action);
}

.dns-drop__submit { inline-size: 100%; }

/* The honeypot has to be hidden from people and reachable by a bot. Using the
   hidden property would need the (0,2,0) guard the theme carries for exactly
   this reason; moving it offscreen avoids the question entirely and is the
   safer idiom for a field that must stay focusable to a script. */
.dns-drop__honey {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* On the photo hero: the blurred dark card. White text throughout, because
   the muted invert grey measures under 4:1 against the overlay in the worst
   case, a white pixel in the photograph behind the blur. */
.dns-hero--photo.dns-hero .dns-drop {
  background: var(--dns-overlay-ink);
  color: var(--dns-text-invert);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--dns-border-width) solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--dns-lift-3);
}
.dns-hero--photo.dns-hero .dns-drop:focus-within,
.dns-hero--photo.dns-hero .dns-drop[data-dns-over="true"] {
  background: rgba(16, 22, 25, 0.9);
  color: var(--dns-text-invert);
  border-color: var(--dns-action-bright);
}
.dns-hero--photo.dns-hero .dns-drop__icon {
  background: var(--dns-action-bright);
  color: var(--dns-surface-invert);
}
.dns-hero--photo.dns-hero .dns-drop__title,
.dns-hero--photo.dns-hero .dns-drop__hint,
.dns-hero--photo.dns-hero .dns-drop__note,
.dns-hero--photo.dns-hero .dns-drop__label,
.dns-hero--photo.dns-hero .dns-drop__chosen {
  color: var(--dns-text-invert);
}
.dns-hero--photo.dns-hero .dns-drop__input:focus-visible,
.dns-hero--photo.dns-hero .dns-drop__file:focus-visible {
  outline-color: var(--dns-action-bright);
}


/* ==========================================================================
   16. Photography: the hero, the photo band, figures, the split

   THE OVERLAY IS MEASURED, NOT ESTIMATED
   White text over a photograph is legal only where the ink overlay is under
   it: --dns-overlay-ink composited over a pure white pixel, the worst case
   any photograph can contain, gives better than 7:1 for --dns-text-invert.
   The action overlay alone does not; at 0.55 over white it is nearer 2:1.
   So the ink layer is always under the text, and the green is only ever
   where the text is not, or on top of the ink, where it can only darken.
   ========================================================================== */

/* --- the hero on a photograph ------------------------------------------- */

.dns-hero--photo.dns-hero {
  position: relative;
  display: grid;
  /* one explicit track, floored at zero, so a card's intrinsic width can
     never push the wrap past the viewport on a phone */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-block: var(--dns-section-y);
  /* its own stacking context, so the layers below never compete with the
     sticky header or anything else on the page */
  isolation: isolate;
}

@media (min-width: 62rem) {
  .dns-hero--photo.dns-hero { min-block-size: 34rem; }
}

/* core/group wraps the photograph and the wrap in an inner container. Left
   as a box it becomes the photograph's containing block, so the photograph
   stops at the section's padding and, being positioned, paints over the
   unpositioned wrap: dark bars top and bottom and no copy. Dissolved, the
   section is the containing block and the wrap can sit above. Measured. */
.dns-hero--photo.dns-hero > .wp-block-group__inner-container { display: contents; }

.dns-hero--photo.dns-hero .dns-hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.dns-hero--photo.dns-hero .dns-hero__bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Below 62rem the copy runs the full width, so the ink covers everything
   and the green is a wash along the block end, under nothing. */
.dns-hero--photo.dns-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, var(--dns-overlay-action) 100%),
    linear-gradient(var(--dns-overlay-ink), var(--dns-overlay-ink));
}

/* At 62rem the copy sits in the first of two columns, which ends near the
   middle of the viewport. The ink holds to 56% and fades to the end side
   while the green rises from 50%, so the text column is over solid ink and
   the photograph shows through a green tint beside it. A gradient angle is
   physical, so the Arabic route restates it mirrored. */
@media (min-width: 62rem) {
  .dns-hero--photo.dns-hero::after {
    background:
      linear-gradient(90deg, transparent 50%, var(--dns-overlay-action) 100%),
      linear-gradient(90deg, var(--dns-overlay-ink) 0%, var(--dns-overlay-ink) 56%, transparent 100%);
  }
  :where([dir="rtl"]) .dns-hero--photo.dns-hero::after {
    background:
      linear-gradient(270deg, transparent 50%, var(--dns-overlay-action) 100%),
      linear-gradient(270deg, var(--dns-overlay-ink) 0%, var(--dns-overlay-ink) 56%, transparent 100%);
  }
}

/* The hairline texture stays on top of the overlay, faintly. */
.dns-hero--photo.dns-hero::before { z-index: 2; }

.dns-hero--photo.dns-hero .dns-wrap {
  position: relative;
  z-index: 3;
}

/* Muted grey over the overlay measures under 4:1 in the worst case, so the
   lede and the note step up to white on a photograph. */
.dns-hero--photo.dns-hero .dns-hero__lede,
.dns-hero--photo.dns-hero .dns-hero__note { color: var(--dns-text-invert); }

/* Two columns at desktop: the copy in column one, a form card in column two
   when the page puts one in the hero. With no second column the copy still
   sits in column one, over the ink. */
@media (min-width: 62rem) {
  .dns-hero--photo.dns-hero .dns-wrap > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    /* column gap only: a row gap here inserted 64px between every line of
       the copy and made the hero 250px taller than its content */
    column-gap: var(--dns-s10);
    row-gap: 0;
    align-items: center;
  }
  .dns-hero--photo.dns-hero .dns-hero__eyebrow,
  .dns-hero--photo.dns-hero .dns-hero__title,
  .dns-hero--photo.dns-hero .dns-hero__lede,
  .dns-hero--photo.dns-hero .dns-hero__actions,
  .dns-hero--photo.dns-hero .dns-hero__note {
    grid-column: 1;
  }
  .dns-hero--photo.dns-hero .dns-hero__eyebrow { justify-self: start; }
  .dns-hero--photo.dns-hero .dns-drop,
  .dns-hero--photo.dns-hero .dns-form,
  .dns-hero--photo.dns-hero .wp-block-shortcode {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin-block: 0;
  }
}


/* --- the photo band -------------------------------------------------------
   Emitted as .dns-photoband.dns-hero--photo with the hero's children, an H2
   in .dns-hero__title, and no .dns-hero block, so it is styled here on its
   own class. Content centred on a 58ch track, 24rem minimum. The ink layer
   covers everything; the green washes in from both inline edges, away from
   the centred text.
   ------------------------------------------------------------------------ */

.dns-photoband {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-block-size: 24rem;
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  isolation: isolate;
}

.dns-photoband > .wp-block-group__inner-container { display: contents; }

.dns-photoband figure.dns-hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.dns-photoband figure.dns-hero__bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.dns-photoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--dns-overlay-action) 0%, transparent 35%, transparent 65%, var(--dns-overlay-action) 100%),
    linear-gradient(var(--dns-overlay-ink), var(--dns-overlay-ink));
}

.dns-photoband .dns-wrap {
  position: relative;
  z-index: 2;
}

.dns-photoband .dns-wrap > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 58ch);
  justify-content: center;
  text-align: center;
}

.dns-photoband .dns-hero__eyebrow { justify-self: center; }

.dns-photoband .dns-hero__title {
  margin-block: 0 var(--dns-s4);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-2xl);
  font-weight: var(--dns-weight-heavy);
  line-height: var(--dns-leading-tight);
  letter-spacing: -0.025em;
  color: var(--dns-text-invert);
  text-wrap: balance;
}
@media (min-width: 62rem) {
  .dns-photoband .dns-hero__title { font-size: var(--dns-text-3xl); }
}

.dns-photoband .dns-hero__lede,
.dns-photoband .dns-hero__note { color: var(--dns-text-invert); }

.dns-photoband .dns-hero__actions { justify-content: center; }


/* --- figures -------------------------------------------------------------
   The block library's theme stylesheet puts margin on figure.wp-block-image
   at (0,2,1) and a colour on .wp-block-image figcaption at (0,1,1), so the
   rules here carry the element to tie or beat them.
   ------------------------------------------------------------------------ */

/* The figure band: a full width photograph at a fixed height between two
   sections, with the caption as a small bar under it. */
.dns-figureband { padding: 0; margin: 0; }

.dns-figureband figure.dns-figure,
figure.dns-figure--band.dns-figure {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.dns-figure--band.dns-figure img {
  display: block;
  inline-size: 100%;
  block-size: clamp(15rem, 38vw, 32rem);
  object-fit: cover;
  object-position: center;
}

figcaption.dns-figure__cap {
  margin: 0;
  padding: var(--dns-s3) var(--dns-wrap-pad);
  background: var(--dns-surface-sunken);
  border-block-end: var(--dns-border-width) solid var(--dns-border);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-muted);
  text-align: center;
}

/* A photograph placed in the flow of a section: rounded, lifted, with the
   caption as a bar inside the rounded box. */
.dns-section figure.dns-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--dns-radius-xl);
  box-shadow: var(--dns-lift-1);
}
.dns-section figure.dns-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.dns-section figcaption.dns-figure__cap {
  padding-inline: var(--dns-s5);
  border-block-end: 0;
  text-align: start;
}


/* --- the split: a photograph beside copy ----------------------------------
   Two equal columns at 48rem, the image rounded and lifted, the copy on a
   52ch track with its lists as check items (drawn in dns-skin.css). The
   flip modifier puts the image second. A form card may take the image's
   place, which is how the home page carries the drop zone now.
   ------------------------------------------------------------------------ */

.dns-split {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface);
  color: var(--dns-text);
}

/* The split is measured as a unit: build_dns_pages.py's measured() wraps
   the whole <section class="dns-split"> in .dns-wrap from the OUTSIDE, so
   the photograph (or drop form) and .dns-split__copy sit directly inside
   this section's own inner container, not inside a nested .dns-wrap. That
   container is the grid. A rule written for .dns-split .dns-wrap, a
   descendant that this structure never produces, matched nothing and every
   split rendered as one stacked column. */
.dns-split > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dns-s8);
  align-items: center;
}

@media (min-width: 48rem) {
  .dns-split > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dns-split--flip.dns-split > .wp-block-group__inner-container > figure.dns-figure,
  .dns-split--flip.dns-split > .wp-block-group__inner-container > .dns-wrap,
  .dns-split--flip.dns-split > .wp-block-group__inner-container > .dns-drop,
  .dns-split--flip.dns-split > .wp-block-group__inner-container > .dns-form {
    order: 2;
  }
}

.dns-split figure.dns-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--dns-radius-xl);
  box-shadow: var(--dns-lift-2);
}

.dns-split figure.dns-figure img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.dns-split figcaption.dns-figure__cap {
  padding-inline: var(--dns-s5);
  border-block-end: 0;
  text-align: start;
}

.dns-split .dns-drop { margin-block: 0; }

.dns-split__copy {
  display: grid;
  grid-template-columns: minmax(0, 52ch);
  align-content: center;
  min-inline-size: 0;
}
.dns-split__copy > .wp-block-group__inner-container { display: contents; }
:where(.dns-split__copy) > :where(.wp-block-group__inner-container) > * {
  grid-column: 1;
  min-inline-size: 0;
}

:where(.dns-split__copy) h2 {
  margin-block: 0 var(--dns-s4);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-2xl);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: -0.025em;
  line-height: var(--dns-leading-tight);
  color: var(--dns-ink);
}

:where(.dns-split__copy) p {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-base);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}

:where(.dns-split__copy) h2 + p { font-size: var(--dns-text-md); }


/* ==========================================================================
   16b. Chips, callout and office, added 4 September 2026

   Three modules the v2 rebuild needs and the build did not have. Site 1
   proved the first of them: any set above roughly ten short items becomes
   pills, because as cards it is a wall and as a list it is a column of two
   word rows.

   The clay accent appears here for the first time. It is the second voice,
   never a second call to action.
   ========================================================================== */

/* --- chips ---------------------------------------------------------------- */

.dns-chips {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface);
  color: var(--dns-text);
}

.dns-chips__title {
  margin-block: 0 var(--dns-s6);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-2xl);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-tight);
  color: var(--dns-ink);
}

.dns-chips__set > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dns-s2);
}

.dns-chips__chip {
  margin: 0;
  padding-block: var(--dns-s2);
  padding-inline: var(--dns-s4);
  border: var(--dns-border-width) solid var(--dns-border);
  /* not a pill: the 8px cap applies here too, and site 1's chips are full
     pills, so this is one more thing the two sites do not share */
  border-start-start-radius: var(--dns-radius-lg);
  border-start-end-radius: var(--dns-radius-lg);
  border-end-start-radius: var(--dns-radius-lg);
  border-end-end-radius: var(--dns-radius-lg);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  line-height: var(--dns-leading-snug);
}

/* The clay hairline is what stops a field of pills reading as grey noise.
   It is a border colour only, so nothing depends on it for contrast. */
.dns-chips__chip:nth-child(odd) { border-color: var(--dns-action); }

/* On a sunken band a pill has to change ground or it disappears. Both colour
   and background are stated, because a component that inherits one of them
   from the region around it is exactly how this stylesheet lost text before. */
:where(.dns-band, .dns-proof) .dns-chips__chip {
  background: var(--dns-surface-raised);
  color: var(--dns-text);
}

/* --- callout -------------------------------------------------------------- */

.dns-callout {
  /* A short highlighted note, not a section break: the full section-y
     clamp left 192px of empty padding around 156px of content and read
     as a band floating disconnected from its neighbours. */
  padding-block: var(--dns-s8);
  background: var(--dns-surface);
  color: var(--dns-text);
}

.dns-callout > .wp-block-group__inner-container {
  padding: var(--dns-s6);
  border-inline-start: 3px solid var(--dns-action);
  border-start-start-radius: var(--dns-radius);
  border-start-end-radius: var(--dns-radius-lg);
  border-end-start-radius: var(--dns-radius);
  border-end-end-radius: var(--dns-radius-lg);
  background: var(--dns-action-soft);
  color: var(--dns-text);
}

.dns-callout__title {
  margin-block: 0 var(--dns-s3);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-snug);
  color: var(--dns-ink);
}

.dns-callout__body {
  margin-block: 0 var(--dns-s3);
  color: var(--dns-text);
}

.dns-callout__body:last-child { margin-block-end: 0; }

.dns-callout__list {
  margin-block: 0;
  padding-inline-start: var(--dns-s5);
  color: var(--dns-text);
}

/* --- office --------------------------------------------------------------- */

.dns-office {
  padding-block: var(--dns-section-y);
  background: var(--dns-surface-sunken);
  color: var(--dns-text);
}

.dns-office__title {
  margin-block: 0 var(--dns-s6);
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-2xl);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-tight);
  color: var(--dns-ink);
}

.dns-office__grid > .wp-block-group__inner-container {
  display: grid;
  /* auto-fit with a floored minimum, so no breakpoint is needed and a long
     address can never push the grid past the viewport */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--dns-s4);
}

.dns-office__row > .wp-block-group__inner-container {
  block-size: 100%;
  padding: var(--dns-s5);
  border: var(--dns-border-width) solid var(--dns-border);
  border-start-start-radius: var(--dns-radius-lg);
  border-start-end-radius: var(--dns-radius-lg);
  border-end-start-radius: var(--dns-radius-lg);
  border-end-end-radius: var(--dns-radius-lg);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  box-shadow: var(--dns-lift-1);
}

.dns-office__label {
  margin-block: 0 var(--dns-s2);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-action);
}

.dns-office__value {
  margin: 0;
  color: var(--dns-text);
  overflow-wrap: anywhere;
}

.dns-office__mapwrap { margin-block-start: var(--dns-s6); }

/* A link, not an embedded map. An iframe here would cost a third party
   request on every page, and these pages are audited for having none. */
.dns-office__map.dns-office__map {
  display: inline-block;
  padding-block: var(--dns-s3);
  padding-inline: var(--dns-s5);
  border: var(--dns-border-width) solid var(--dns-action);
  border-start-start-radius: var(--dns-radius);
  border-start-end-radius: var(--dns-radius);
  border-end-start-radius: var(--dns-radius);
  border-end-end-radius: var(--dns-radius);
  background: var(--dns-surface-raised);
  color: var(--dns-action);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
}

.dns-office__map.dns-office__map:hover,
.dns-office__map.dns-office__map:focus-visible {
  background: var(--dns-action);
  color: var(--dns-text-invert);
}

.dns-office__map.dns-office__map:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-office__map.dns-office__map:active {
  background: var(--dns-action-hover);
  color: var(--dns-text-invert);
}

/* --- the compact card ------------------------------------------------------
   A title and one line. The modifier carries the block class so source order
   cannot decide it. */

.dns-leafgrid--compact.dns-leafgrid > .wp-block-group__inner-container {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.dns-leafgrid--compact.dns-leafgrid .dns-leaf > .wp-block-group__inner-container {
  padding: var(--dns-s4);
}

.dns-leafgrid--compact.dns-leafgrid .dns-leaf__title {
  font-size: var(--dns-text-md);
}



/* ==========================================================================
   16c. The logo marquee and the review rail, added 4 September 2026

   Both replace a Swiper carousel on notaryservicesdubai.com with markup that
   works before any script runs. The marquee is a CSS animation over a track
   duplicated once. The review rail is a real scroll container with snap
   points, so a trackpad, a touch screen and the keyboard all drive it, and
   dns-ui.js only adds the two buttons on top.
   ========================================================================== */

/* The logos section makes its inner container a two column grid, lead beside
   list. Measured: the marquee landed in the second column at 481px of a
   1905px screen, so six of fourteen logos were reachable. It spans the whole
   grid instead. */
.dns-logos .dns-logobar { grid-column: 1 / -1; }

.dns-logobar {
  position: relative;
  inline-size: 100%;
  overflow: hidden;
  padding-block: var(--dns-s5);
  /* the fade at both ends is what makes a marquee read as continuous rather
     than as a row that gets cut off */
  mask-image: linear-gradient(90deg, transparent, var(--dns-ink) 6rem,
              var(--dns-ink) calc(100% - 6rem), transparent);
}

.dns-logobar__track {
  display: flex;
  inline-size: max-content;
  animation: dns-logobar-run 42s linear infinite;
}

.dns-logobar:hover .dns-logobar__track,
.dns-logobar:focus-within .dns-logobar__track { animation-play-state: paused; }

.dns-logobar__run { display: flex; align-items: center; }

/* Every logo gets the same slot, so a wide wordmark and a tall crest carry
   the same visual weight instead of the widest one dominating the row. */
.dns-logobar__item {
  display: grid;
  place-items: center;
  inline-size: 12rem;
  padding-inline: var(--dns-s6);
  padding-block: var(--dns-s2);
}

.dns-logobar__img {
  block-size: 3.5rem;
  inline-size: 100%;
  object-fit: contain;
  /* Measured on the live page before changing this: greyscale at 0.72 made
     the three government crests almost invisible, because their artwork is
     already light. They keep their own colour and full opacity instead. */
  opacity: 1;
  transition: transform var(--dns-transition);
}

.dns-logobar__item:hover .dns-logobar__img { transform: scale(1.04); }

@keyframes dns-logobar-run {
  from { transform: translateX(0); }
  /* the track holds the set twice, so one set is exactly half of it */
  to   { transform: translateX(-50%); }
}

:where([dir="rtl"]) .dns-logobar__track { animation-name: dns-logobar-run-rtl; }

@keyframes dns-logobar-run-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* Motion off: the marquee becomes a wrapping row, which is what the markup
   is anyway. */
@media (prefers-reduced-motion: reduce) {
  .dns-logobar { mask-image: none; }
  .dns-logobar__track { animation: none; inline-size: 100%; flex-wrap: wrap; justify-content: center; }
  .dns-logobar__run:last-child { display: none; }
  .dns-logobar__run { flex-wrap: wrap; justify-content: center; }
}

/* --- the review rail ------------------------------------------------------ */

.dns-quotes { position: relative; }

.dns-quotes__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 19rem), 22rem);
  gap: var(--dns-s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--dns-s3);
  /* room for the focus ring, which a scroll container otherwise clips */
  padding-inline: 2px;
  scrollbar-width: thin;
}

.dns-quotes__rail:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-quote {
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dns-s4);
  padding: var(--dns-s6);
  border: var(--dns-border-width) solid var(--dns-border);
  border-start-start-radius: var(--dns-radius-lg);
  border-start-end-radius: var(--dns-radius-lg);
  border-end-start-radius: var(--dns-radius-lg);
  border-end-end-radius: var(--dns-radius-lg);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  box-shadow: var(--dns-lift-1);
}

/* The opening mark is drawn, not typed, so it cannot be read out or copied
   into a quotation. */
.dns-quote::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--dns-action);
}

.dns-quote__text {
  margin: 0;
  font-size: var(--dns-text-base);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}

.dns-quote__by {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block-start: var(--dns-s4);
  border-block-start: var(--dns-border-width) solid var(--dns-border);
}

.dns-quote__name {
  font-family: var(--dns-font-display);
  font-weight: var(--dns-weight-bold);
  color: var(--dns-ink);
}

.dns-quote__src {
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-action);
}

.dns-quotes__note {
  margin-block-start: var(--dns-s4);
  font-size: var(--dns-text-sm);
  color: var(--dns-text-muted);
}

.dns-rail__nav {
  display: flex;
  gap: var(--dns-s2);
  justify-content: flex-end;
  margin-block-end: var(--dns-s4);
}

.dns-rail__btn.dns-rail__btn {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-start-start-radius: var(--dns-radius);
  border-start-end-radius: var(--dns-radius);
  border-end-start-radius: var(--dns-radius);
  border-end-end-radius: var(--dns-radius);
  background: var(--dns-surface-raised);
  color: var(--dns-ink);
  cursor: pointer;
}

/* The arrow is a rotated border, so there is no icon font and no SVG to
   load for two buttons. */
.dns-rail__btn.dns-rail__btn::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-inline-start: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
}

.dns-rail__btn--prev::before { transform: rotate(-45deg); margin-inline-start: 0.2rem; }
.dns-rail__btn--next::before { transform: rotate(135deg); margin-inline-end: 0.2rem; }

.dns-rail__btn.dns-rail__btn:hover,
.dns-rail__btn.dns-rail__btn:focus-visible {
  background: var(--dns-action);
  color: var(--dns-text-invert);
  border-color: var(--dns-action);
}

.dns-rail__btn.dns-rail__btn:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-rail__btn.dns-rail__btn[disabled] {
  background: var(--dns-surface-sunken);
  color: var(--dns-text-muted);
  border-color: var(--dns-border);
  cursor: not-allowed;
}

/* --- three across, not six ------------------------------------------------
   The client asked for six cards as two rows of three rather than one row of
   six. auto-fit would put six on a wide screen, so the compact grid states
   three explicitly above 62rem. */
@media (min-width: 62rem) {
  .dns-leafgrid--compact.dns-leafgrid > .wp-block-group__inner-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* A checklist over a photograph. Both colour and background are stated on
   the marker, because a list inside a dark band that inherits either from
   the region around it is how this stylesheet used to lose text. */
.dns-hero__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--dns-s3);
  color: var(--dns-text-invert);
}

@media (min-width: 48rem) {
  .dns-photoband .dns-hero__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dns-hero__list li {
  display: flex;
  gap: var(--dns-s3);
  align-items: flex-start;
  text-align: start;
  color: var(--dns-text-invert);
}

.dns-hero__list li::before {
  content: "";
  flex: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.35rem;
  border-start-start-radius: var(--dns-radius);
  border-start-end-radius: var(--dns-radius);
  border-end-start-radius: var(--dns-radius);
  border-end-end-radius: var(--dns-radius);
  background: var(--dns-action-bright);
  box-shadow: inset 0 0 0 2px var(--dns-surface-invert);
}

/* The photo band carries content centred, so a left aligned list inside it
   needs its own alignment or the grid centres the text and the markers
   drift apart from it. */
.dns-photoband .dns-hero__list { text-align: start; }

/* ==========================================================================
   16d. The enquiry wizard, styled to the approved concept

   The markup and the stepping script already existed. What was missing was
   the skin: the radios rendered as a bare list with a second label above
   them, so the hero showed "What are you having notarised?" followed by
   "The instrument" and seven naked radio buttons. This makes each option a
   card you press, which is what the concept showed.
   ========================================================================== */

/* The card is the whole form, so the Continue button and the small print sit
   inside it. Measured first with the card on .dns-wizard: the button and the
   note fell outside the white panel, onto the photograph. */
.dns-form__form--wizard.dns-form__form {
  display: grid;
  gap: var(--dns-s5);
  padding: var(--dns-s7);
  border: var(--dns-border-width) solid var(--dns-border);
  border-start-start-radius: var(--dns-radius-xl);
  border-start-end-radius: var(--dns-radius-xl);
  border-end-start-radius: var(--dns-radius-xl);
  border-end-end-radius: var(--dns-radius-xl);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  box-shadow: var(--dns-lift-3);
}

.dns-form__form--wizard .dns-form__foot {
  display: grid;
  gap: var(--dns-s4);
}

.dns-form__form--wizard .dns-form__note {
  margin: 0;
  font-size: var(--dns-text-sm);
  color: var(--dns-text-muted);
}

.dns-wizard { gap: var(--dns-s5); }

/* One option per row. The two column grid inherited from the plain form put
   "A share transfer" beside "A memorandum of association or an amendment"
   and the cards came out at wildly different heights. */
.dns-wizard__step .dns-choices { grid-template-columns: minmax(0, 1fr); }

/* The script moves focus to the question when a step opens. That is correct
   for a screen reader and wrong to draw: a permanent ring sat around the
   heading. The ring stays for keyboard focus only. */
.dns-wizard__q:focus:not(:focus-visible) { outline: none; }

.dns-wizard__progress {
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-muted);
}

.dns-wizard__q {
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-xl);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-tight);
  color: var(--dns-ink);
  padding: 0;
}

/* The question is already the legend of the step. The choice fieldset's own
   legend repeats it in weaker words, so it is kept for assistive technology
   and taken out of the visual flow. */
.dns-wizard__step .dns-field--choices.dns-field > .dns-field__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dns-wizard__step .dns-choices {
  display: grid;
  gap: var(--dns-s2);
}

/* One option, one card. The input stays in the DOM and keeps doing the work,
   so this is a real radio group for the keyboard and for a screen reader. */
.dns-wizard__step .dns-choice {
  display: flex;
  align-items: center;
  gap: var(--dns-s3);
  padding-block: var(--dns-s3);
  padding-inline: var(--dns-s4);
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-start-start-radius: var(--dns-radius-lg);
  border-start-end-radius: var(--dns-radius-lg);
  border-end-start-radius: var(--dns-radius-lg);
  border-end-end-radius: var(--dns-radius-lg);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
  font-size: var(--dns-text-base);
  cursor: pointer;
}

.dns-wizard__step .dns-choice:hover {
  border-color: var(--dns-action);
  background: var(--dns-action-soft);
  color: var(--dns-ink);
}

/* :has is what lets the card react to its own input without a script. Where
   it is not supported the card simply stays in its resting state, which is
   legible, and the radio dot still shows which one is chosen. */
.dns-wizard__step .dns-choice:has(input:checked) {
  border-color: var(--dns-action);
  background: var(--dns-action-soft);
  color: var(--dns-ink);
  font-weight: var(--dns-weight-medium);
}

.dns-wizard__step .dns-choice:has(input:focus-visible) {
  outline: var(--dns-focus-width) solid var(--dns-focus);
  outline-offset: var(--dns-focus-offset);
}

.dns-wizard__step .dns-choice input {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  accent-color: var(--dns-action);
  margin: 0;
}

.dns-wizard__nav { margin-block-start: var(--dns-s2); }
.dns-wizard__nav .dns-btn { flex: 1 1 auto; justify-content: center; }
.dns-wizard__nav .dns-wizard__back { flex: 0 0 auto; }

/* Inside the hero the card sits on a photograph, so it states its own ground
   rather than inheriting the band's. */
.dns-hero--photo.dns-hero .dns-wizard {
  background: var(--dns-surface-raised);
  color: var(--dns-text);
}

.dns-hero--photo.dns-hero .dns-wizard .dns-wizard__q { color: var(--dns-ink); }
.dns-hero--photo.dns-hero .dns-wizard .dns-wizard__progress { color: var(--dns-text-muted); }

/* The outline button is white on ink everywhere else, which is invisible on
   a white card. Inside the wizard it takes the light ground treatment. */
.dns-wizard__nav .dns-btn--line.dns-btn {
  border-color: var(--dns-border-strong);
  background: var(--dns-surface-raised);
  color: var(--dns-text);
}

.dns-wizard__nav .dns-btn--line.dns-btn:hover,
.dns-wizard__nav .dns-btn--line.dns-btn:focus-visible {
  background: var(--dns-surface-sunken);
  color: var(--dns-ink);
}


/* --- the CTA band on a photograph ----------------------------------------
   Same overlay arithmetic as the hero: the ink layer carries the contrast and
   the green only ever sits on top of it, where it can only darken. Measured
   over a pure white pixel, the worst case a photograph can hold. */

.dns-ctaband--photo.dns-ctaband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.dns-ctaband--photo.dns-ctaband > .wp-block-group__inner-container { display: contents; }

.dns-ctaband--photo.dns-ctaband .dns-ctaband__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.dns-ctaband--photo.dns-ctaband .dns-ctaband__bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.dns-ctaband--photo.dns-ctaband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, var(--dns-overlay-action) 100%),
    linear-gradient(var(--dns-overlay-ink), var(--dns-overlay-ink));
}

.dns-ctaband--photo.dns-ctaband .dns-wrap {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   17. Section rhythm

   Every module carries --dns-section-y on both sides, so two neighbours on
   the same ground would put two of them between their content. The second
   of such a pair drops its block start padding. A ground change keeps both,
   because the colour boundary is the separator there.

   White ground: section, split, steps. Sunken: band, logos, pillars, proof.
   These rules sit after every module's own padding rule, which is what lets
   a (0,1,0) sibling rule win on source order.
   ========================================================================== */

:where(.dns-section, .dns-split, .dns-steps) + .dns-section,
:where(.dns-section, .dns-split, .dns-steps) + .dns-split,
:where(.dns-section, .dns-split, .dns-steps) + .dns-steps { padding-block-start: 0; }

/* A bare content wrap (leafgrid, leafgrid--compact, parallel, docket, a
   plain prose paragraph or table) carries no padding of its own, unlike a
   band. Each one gets its own named gap below rather than one shared rule,
   so a single section can be turned up or down without moving the others.
   Excludes the wrap built around .dns-split, which already manages its own
   spacing and would otherwise be double padded. */
.entry-content > .dns-wrap:where(:has(.dns-leafgrid--compact.dns-leafgrid)) {
  margin-block: var(--dns-gap-leafgrid-compact);
}
.entry-content > .dns-wrap:where(:has(.dns-leafgrid):not(:has(.dns-leafgrid--compact.dns-leafgrid))) {
  margin-block: var(--dns-gap-leafgrid);
}
.entry-content > .dns-wrap:where(:has(.dns-parallel)) {
  margin-block: var(--dns-gap-parallel);
}
.entry-content > .dns-wrap:where(:has(.dns-docket)) {
  margin-block: var(--dns-gap-docket);
}
.entry-content > .dns-wrap:where(:not(:has(.dns-split)):not(:has(.dns-leafgrid)):not(:has(.dns-parallel)):not(:has(.dns-docket))) {
  margin-block: var(--dns-gap-prose);
}

/* Zeroed on whichever side already touches a neighbour that carries real
   padding of its own: proof, steps, logos, chips, callout, office, or the
   wrap built around .dns-split, which has its own padding-block nested one
   level in. Without this, a gap that already existed from the neighbour's
   own padding got a second one stacked on top of it -- measured on "the
   notary's act" comparison at 160px, 64 of it unwanted, steps' own real
   96px already being enough. Needs the same .entry-content > prefix as the
   rules above for equal (0,2,0) specificity -- missing it the first time
   is exactly why this never won and steps stayed at 64px extra.

   The margin-block-end half needs :has(+ X), not a trailing + X: "A + B"
   styles B, the element the whole selector actually matches, never A. A
   plain "+" here would have zeroed the padded neighbour's own margin,
   which was never the one carrying it, and left the wrap's end untouched
   -- measured on "will covering" into the corporate-signings photograph,
   still 64px after the first version of this rule.

   The .dns-split branch has to reach it as "+ .dns-wrap .dns-split", a
   plain descendant chain, not "+ .dns-wrap:has(.dns-split)". A :has()
   cannot contain another :has(), :where() around the inner one or not:
   the browser drops the whole rule as invalid and every selector in the
   same comma list goes with it. Measured: .matches() threw on the nested
   form, so this half was never applying, and leafgrid into "the drafting
   is the service" split stayed at 160px, the same class of bug this rule
   exists to fix. */
.entry-content > :where(.dns-proof, .dns-steps, .dns-logos, .dns-chips, .dns-callout, .dns-office) + .dns-wrap:where(:not(:has(.dns-split))),
.entry-content > .dns-wrap:where(:has(.dns-split)) + .dns-wrap:where(:not(:has(.dns-split))) {
  margin-block-start: 0;
}
.entry-content > .dns-wrap:not(:has(.dns-split)):has(+ :where(.dns-proof, .dns-steps, .dns-logos, .dns-chips, .dns-callout, .dns-office)),
.entry-content > .dns-wrap:not(:has(.dns-split)):has(+ .dns-wrap .dns-split) {
  margin-block-end: 0;
}

/* Two bare content wraps back to back (leafgrid, leafgrid--compact, parallel,
   docket) each carry their own named margin-block per type -- meeting
   directly doubles the gap, the same bug class as split+steps and
   chips+chips below, just on margin-based wraps instead of padded sections.
   The later sibling drops its start, matching the "later element gives way"
   pattern used throughout this section. Listed pair by pair, at (0,3,0)
   specificity, so any one --dns-gap-* token can still be tuned on its own
   without moving the others. Found live on /contact/ (leafgrid straight into
   leafgrid--compact, and two parallel modules back to back). */
.entry-content > .dns-wrap:where(:has(.dns-leafgrid)) + .dns-wrap:where(:has(.dns-leafgrid)),
.entry-content > .dns-wrap:where(:has(.dns-leafgrid)) + .dns-wrap:where(:has(.dns-parallel)),
.entry-content > .dns-wrap:where(:has(.dns-parallel)) + .dns-wrap:where(:has(.dns-leafgrid)),
.entry-content > .dns-wrap:where(:has(.dns-parallel)) + .dns-wrap:where(:has(.dns-parallel)),
.entry-content > .dns-wrap:where(:has(.dns-docket)) + .dns-wrap:where(:has(.dns-docket)) {
  margin-block-start: 0;
}

/* Two measured effects of the wrap-from-outside split fix: a .dns-split's
   own bottom padding and .dns-steps's own top padding used to be zeroed by
   the adjacency rule above when they met directly, back when nothing sat
   between them. Now .dns-split is always wrapped in its own .dns-wrap, so
   that rule never matches and the two paddings simply add: measured at
   192px before this fix. Two chips sections in a row have the same
   problem, each carrying a full band's worth of padding on both sides. So
   do steps next to chips either way round, and two callouts back to back
   (found live on /fees/: steps -> chips -> steps, and two callouts
   adjacent) -- each of these pairs is a named pair, not a blanket rule, so
   any one of them can be un-paired later without touching the others. */
.dns-wrap:has(.dns-split) + .dns-steps,
.dns-chips + .dns-chips,
.dns-steps + .dns-chips,
.dns-chips + .dns-steps,
.dns-callout + .dns-callout {
  padding-block-start: 0;
}


:where(.dns-band, .dns-logos, .dns-pillars, .dns-proof) + .dns-logos,
:where(.dns-band, .dns-logos, .dns-pillars, .dns-proof) + .dns-pillars { padding-block-start: 0; }

:where(.dns-band, .dns-logos, .dns-pillars, .dns-proof) + .dns-band .dns-section { padding-block-start: 0; }


/* --- the list templates: cards ------------------------------------------ */

.dns-postgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dns-s5);
  padding-block: var(--dns-section-y-act);
}
@media (min-width: 40rem) {
  .dns-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .dns-postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dns-postgrid > article {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--dns-surface);
  border: var(--dns-border-width) solid var(--dns-border);
  border-radius: var(--dns-radius);
  overflow: hidden;
}
.dns-postgrid > article > .inside-article {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--dns-s3);
  padding: var(--dns-s5);
}

.dns-postgrid .post-image {
  order: -1;
  margin: calc(-1 * var(--dns-s5)) calc(-1 * var(--dns-s5)) var(--dns-s2);
}
.dns-postgrid .post-image a { display: block; }
.dns-postgrid .post-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dns-postgrid .entry-header {
  display: grid;
  gap: var(--dns-s2);
  margin: 0;
}
.dns-postgrid .entry-title {
  margin: 0;
  font-family: var(--dns-font-display);
  font-size: var(--dns-text-lg);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.dns-postgrid .entry-title a {
  color: var(--dns-ink);
  text-decoration: none;
}
.dns-postgrid .entry-title a:hover,
.dns-postgrid .entry-title a:focus-visible {
  color: var(--dns-action);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.dns-postgrid .entry-title a:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action);
  outline-offset: var(--dns-focus-offset);
}

.dns-postgrid .entry-meta {
  order: -1;
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-heavy);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  color: var(--dns-text-muted);
}

/* the parent prints the modified date after the published one and hides
   it in its own stylesheet, which the child does not load */
.dns-postgrid .updated:not(.published) { display: none; }

.dns-postgrid .entry-summary { margin: 0; }
:where(.dns-postgrid .entry-summary) p {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text);
}

/* the parent's navigation, a full row of the same grid */
.dns-postgrid > nav,
.dns-postgrid > .paging-navigation { grid-column: 1 / -1; }

.dns-t-list .paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dns-s2);
}
.dns-t-list .page-numbers,
.dns-t-list .nav-previous a,
.dns-t-list .nav-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  padding: var(--dns-s2) var(--dns-s3);
  border: var(--dns-border-width) solid var(--dns-border-strong);
  border-radius: var(--dns-radius);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  font-weight: var(--dns-weight-medium);
  text-decoration: none;
  color: var(--dns-ink);
  background: var(--dns-surface);
}
.dns-t-list .page-numbers.current,
.dns-t-list a.page-numbers:hover,
.dns-t-list a.page-numbers:focus-visible,
.dns-t-list .nav-previous a:hover,
.dns-t-list .nav-previous a:focus-visible,
.dns-t-list .nav-next a:hover,
.dns-t-list .nav-next a:focus-visible {
  color: var(--dns-text-invert);
  background: var(--dns-action);
  border-color: var(--dns-action);
}

/* --- the single post: featured image under the lede --------------------- */

.dns-t-post .featured-image {
  margin-block: 0 var(--dns-s6);
}
.dns-t-post .featured-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--dns-radius);
}