/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;

  /* The one type stack for the site.
     It was previously restated 373 times — 226 in CSS and 147 inline in
     templates — in three variants that differed in whether they carried
     'Trebuchet MS' as a fallback, so text that missed Aptos and Segoe UI
     landed on different faces depending on which copy styled it. This is
     the majority form and the one with the fuller fallback chain.
     Declared here rather than in theme-overrides.css because this file
     loads first, so every stylesheet after it can reach the token. */
  --dt-ff: 'Aptos', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;

  /* The one body-copy colour for the site.
     Paragraph text used to be hardcoded per page, in three greys. Some
     of it was #8B8C8C — the brand guide's Neutral Grey, which is
     reserved for captions and metadata and measures only ~3.4:1 on
     white, under AA's 4.5:1 for normal text. The rest was #4B4C4D,
     which passed but was a second value nobody had chosen deliberately,
     so the same paragraph could read differently depending on which
     page it sat on. Both are folded into this one, which is what Home
     and the services hub already used and clears AA at ~5.3:1 on white
     and ~4.8:1 on the mist band.

     Body copy means prose the visitor reads. Captions, dates, labels,
     form placeholders and other metadata stay on --dt-grey.

     Declared alongside --dt-ff for the same reason: this file loads
     first, so every stylesheet after it can reach the token. */
  --dt-text-body: #6B6B70;

  /* Captions and metadata.

     The brand guide reserves Neutral Grey #8B8C8C for captions, dates,
     labels and other metadata, and the site used it for exactly that.
     The problem is that it measures 3.37:1 on white and 3.07:1 on the
     mist band, so it failed AA even in its designated role — including
     on the 15px figure captions under the blog diagrams, which are
     body-sized text explaining the picture above them.

     This is that role's colour now. It is deliberately the same value
     as --dt-text-body rather than a lighter shade: to clear 4.5:1 on
     #F4F4F5 a grey cannot go above roughly #6E6E73, so any "lighter
     caption grey" that still passes is within a rounding error of the
     body colour and buys nothing. Captions are distinguished by size,
     weight and letter-spacing instead. The separate name is kept so
     the two can diverge if the mist band ever goes.

     5.30:1 on white, 4.82:1 on #F4F4F5. Do not use it on the near-black
     bands — it is 3.39:1 there; those keep white at an alpha. */
  --dt-text-meta: #6B6B70;

  /* The accent sequence for numbered and boxed groups.

     Home runs plum, teal, indigo across its journey timeline, and the
     audit page follows it. Neither had a token: both restated the hexes
     inline, once per element, which is how the newer templates lost
     track of the sequence and went all-plum. The values are the ones
     already on the live pages, not new colours.

     Use 1/2/3 on white and #F4F4F5. The --on-dark pair is the lighter
     variant for near-black bands; it is brighter, and at 3.9:1 and
     4.4:1 on a light ground it fails AA at small sizes, which is what
     the darker pair is for. Plum is the same on both. */
  --dt-accent-1: #A4063E;
  --dt-accent-2: #0F766E;
  --dt-accent-3: #4F46E5;

  --dt-accent-1-on-dark: #A4063E;
  --dt-accent-2-on-dark: #0D9488;
  --dt-accent-3-on-dark: #6366F1;

  /* Teal, one step lighter, for teal text on a TINTED dark surface.

     --dt-accent-2-on-dark clears AA on a flat #161718 band at 4.79:1,
     but the MSP model cards lay rgba(255,255,255,0.04) over that
     black, which lifts the background to rgb(31,32,33) and drops the
     same teal to 4.34:1 — under AA for the 11px label sitting on it.
     This is 6.53:1 on that card and 7.21:1 on flat #161718.

     Only for text on a lightened dark surface. The flat-band teal is
     still --dt-accent-2-on-dark. */
  --dt-accent-2-on-tint: #14B8A6;

  /* Amber closes the sequence. It is deliberately NOT the amber the
     audit timeline uses for a "WIP" tag (#D97706 / #B45309, beside a
     green "DONE"): that one means a state, this one means a position.
     Two meanings, two values, kept apart on purpose. */
  --dt-accent-4: #F59E0B;
  --dt-accent-4-on-dark: #F59E0B;

  /* The faded ramp, for large display numerals. Home's journey steps have
     always been all three things at once — large, heavy and low alpha —
     and still running the ramp, so "faded" and "ramped" are one treatment
     rather than a choice between two. The hues are the brighter --on-dark
     pair: at a third opacity the darker ones go muddy.

     Amber sat at 0.40 where the other three sat at 0.34. Nothing chose
     that; all four are 0.34 now.

     The rule this encodes: a large display numeral is faded and ramped, a
     small inline one (a timeline node at 15px) stays solid, because low
     alpha at that size is not legible. */
  --dt-accent-1-faded: rgba(164, 6, 62, 0.34);
  --dt-accent-2-faded: rgba(13, 148, 136, 0.34);
  --dt-accent-3-faded: rgba(99, 102, 241, 0.34);
  --dt-accent-4-faded: rgba(245, 158, 11, 0.34);

  /* The type scale.
     Fifteen sizes were in use between 10px and 24px — 10, 10.5, 11,
     11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 17, 20, 24 — most of
     them a pixel apart and several of them accidents of the rich text
     editor rewriting a module rather than anything anybody chose. These
     seven are what is left after each of those collapsed onto its
     nearest neighbour, so nothing moves by more than a pixel. Headings
     are not in here: .dt-h1-hero / .dt-h2 / .dt-h3 already own those and
     scale with the viewport. */
  --dt-fs-micro:   11px;    /* eyebrows, badges, uppercase labels */
  --dt-fs-caption: 12.5px;  /* captions, tile sub-labels */
  --dt-fs-small:   13.5px;  /* secondary body, chips, outline buttons */
  --dt-fs-body:    15px;    /* body copy */
  --dt-fs-lead:    17px;    /* lead paragraphs under a heading */
  --dt-fs-sub:     20px;    /* sub-headings */
  --dt-fs-numeral: 24px;    /* step numerals */
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  max-width: 100% !important;
  width: 100% !important;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.6;
  overflow-wrap: break-word;
  font-family: var(--dt-ff);
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;

  /* Images never render wider than the column that holds them.

     The theme had no rule for this and was relying on HubSpot's own
     stylesheet to supply it. That held, but it meant an <img> carrying
     a width attribute larger than its column depended on a file this
     theme does not control. The About headshot is one: the module
     writes width and height attributes from its image field, and at
     320 an unconstrained one pushed the grid 60px past the viewport.

     height: auto keeps the aspect ratio when the width is capped, so
     an image with width and height attributes is scaled rather than
     squashed. Element-selector specificity, so every class that wants
     different behaviour (the hero media fill, blog card crops, the
     header logo) still wins without needing !important. */
  max-width: 100%;
  height: auto;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.2s ease;
  white-space: normal;
  font-family: var(--dt-ff);
  font-weight: 600;
  border-radius: 8px;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #8B8C8C;
  border-color: #8B8C8C;
  color: #ffffff;
  opacity: 0.7;
  cursor: not-allowed;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation

   #EF6B51 is the CMS boilerplate's error red and measures 3.05:1 on
   white, 2.77:1 on the mist band — under AA. It is the wrong place to
   save a contrast point: this is the text that tells someone which
   field they got wrong. #C62D12 is the same hue family two steps
   darker, at 5.55:1 on white and 5.05:1 on mist.

   The invalid border stays on the original: a border is a non-text
   UI element, judged at 3:1, and it is paired with the message. */

.hs-form-required {
  color: #C62D12;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #C62D12;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }


/* ============================================================
   Embedded HubSpot forms must not widen the page
   ------------------------------------------------------------
   Four pages — Contact, MSP Partners and both resource pages —
   pushed the document past the viewport at 320, 360 and, on three
   of them, 375. In every case the outermost overflowing element
   was the grid cell holding an @hubspot/form module, not anything
   the page itself authored.

   Two causes, both of which have to go.

   First: a grid or flex child defaults to `min-width: auto`, which
   refuses to shrink below the intrinsic width of its content. A
   HubSpot form carries several things with a stubborn intrinsic
   width — the reCAPTCHA widget is a fixed 304px and does not
   reflow at all — so the cell grew instead of the form shrinking,
   and took the page with it.

   Second: nothing capped the form's own parts at the width of
   their column.

   Fixed here rather than on each page, so a form dropped onto a
   new template is safe by default. :has() carries the first rule
   to any cell holding a form without needing to know that cell's
   class name; the explicit selectors after it are the same rule
   for the four cells that exist today, and cost nothing.
   ============================================================ */

:where(*):has(> .hs-form),
:where(*):has(> div > .hs-form),
:where(*):has(> .hs_cos_wrapper .hs-form),
:where(*):has(> .hs_cos_wrapper > div > .hs-form) {
  min-width: 0;
}

.dt-msp-start__left,
.dt-msp-start__right,
.dt-rg-preview,
.dt-rg-form-card,
.dt-contact-wrap > *,
.dt-contact-section > * {
  min-width: 0;
}

/* Nothing inside a form may exceed the column it sits in. The
   wildcard is scoped to the form, where there is nothing that
   should be wider than its container. */
.hs-form,
.hs-form * {
  max-width: 100%;
}

/* An iframe ignores max-width on its content, so the widget that
   cannot reflow gets a scroll container of its own rather than
   being allowed to set the page width. reCAPTCHA is the one that
   matters; the selector list covers where HubSpot puts it. */
.hs-form iframe,
.hs-form .hs-recaptcha iframe {
  max-width: 100%;
}

.hs-form .hs-recaptcha,
.hs-form .grecaptcha-badge,
.hs-form .hs-fieldtype-captcha {
  max-width: 100%;
  overflow-x: auto;
}

/* Long unbroken strings in labels, legal consent text and
   validation messages have no break opportunity, and `break-word`
   does not lower an element's min-content width — only `anywhere`
   does. Without this the cell is pushed wide again by a single
   long word or URL. */
.hs-form label,
.hs-form .hs-form-field > label,
.hs-form .hs-richtext,
.hs-form .hs-error-msg,
.hs-form legend {
  overflow-wrap: anywhere;
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* ==========================================================================
   DATATECHS NAVIGATION
   Ported directly from Nav.jsx in the original React site.
   ========================================================================== */

/* Skip link */

.dt-nav__skip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.dt-nav__skip:focus {
  left: 0;
  top: 0;
  height: auto;
  width: auto;
  overflow: visible;
  z-index: 9999;
}

/* Nav shell — fixed so it always follows scroll */

.dt-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #e8e8e9;
  transition: background 0.3s, border-color 0.3s;
}

/* Push page content below the fixed nav */

.body-container-wrapper {
  padding-top: 68px;
}

/* Home page: hero extends full-bleed behind the transparent nav */

.body-container-wrapper:has(.dt-hero) {
  padding-top: 0;
}

/* Container: max-width centred, flex row */

.dt-nav__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

/* ------------------------------------------------------------------
   LOGO
   ------------------------------------------------------------------ */

.dt-nav__logo-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 40px;
  max-height: 40px;
  overflow: hidden;
  line-height: 0;
}

/* Force the HubSpot logo module and all its wrapper divs/spans to stay small */

.dt-nav__logo-wrap * {
  height: 40px !important;
  max-height: 40px !important;
  line-height: 0 !important;
}

.dt-nav__logo-wrap img {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------------
   RIGHT-SIDE (nav + CTA)
   ------------------------------------------------------------------ */

.dt-nav__right {
  display: flex;
  align-items: stretch;
  height: 68px;
}

/* ------------------------------------------------------------------
   DESKTOP MENU
   ------------------------------------------------------------------ */

.dt-nav__menu {
  display: flex;
  align-items: stretch;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Plain link (no dropdown) */

.dt-nav a.dt-nav__link,
.dt-nav a.dt-nav__link:hover,
.dt-nav a.dt-nav__link:focus,
.dt-nav a.dt-nav__link:visited,
.dt-nav .dt-nav__item--open > a.dt-nav__link {
  font-family: var(--dt-ff) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  transform: none !important;
}

.dt-nav a.dt-nav__link {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 4px 0;
  color: #161718;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  transition: color 0.2s;
  cursor: pointer;
}

.dt-nav a.dt-nav__link:hover,
.dt-nav a.dt-nav__link:focus,
.dt-nav .dt-nav__item--open > a.dt-nav__link {
  color: #A4063E !important;
  text-decoration: none !important;
}

.dt-nav a.dt-nav__link.dt-nav__link--active {
  color: #A4063E !important;
  border-bottom-color: transparent !important;
  text-decoration: underline !important;
  text-decoration-color: #A4063E !important;
  text-underline-offset: 5px !important;
  text-decoration-thickness: 2px !important;
}

/* Dropdown parent item */

.dt-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown panel — hidden by default */

.dt-nav__dropdown {
  display: none;
  position: absolute;
  top: 68px;
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 200;
  padding: 8px 0;
}

/* Show via JS --open class only (no CSS :hover — avoids sticky overlap between items) */

.dt-nav__item--open > .dt-nav__dropdown {
  display: block;
}

/* Section divider label inside dropdown (ASSESSMENTS, GUIDES etc.) */

.dt-nav__divider-label {
  padding: 10px 20px 4px;
  font-family: var(--dt-ff);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-text-meta);
  border-bottom: 1px solid #e8e8e9;
  margin-bottom: 2px;
}

/* Dropdown links */

.dt-nav__drop-item {
  display: block;
  padding: 8px 20px;
  font-family: var(--dt-ff);
  font-size: 14px;
  font-weight: 400;
  color: #161718;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.dt-nav__drop-item:hover,
.dt-nav__drop-item:focus {
  background: #F4F4F5;
  color: #A4063E;
  text-decoration: none;
}

.dt-nav__drop-item--active {
  color: #A4063E;
  font-weight: 600;
}

/* "View all" footer row inside dropdown */

.dt-nav__drop-footer {
  border-top: 1px solid #e8e8e9;
  padding: 10px 20px;
}

.dt-nav__drop-viewall {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 600;
  color: #A4063E;
  text-decoration: none;
  transition: color 0.2s;
}

.dt-nav__drop-viewall:hover,
.dt-nav__drop-viewall:focus {
  color: #87052f;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   CTA BUTTON
   ------------------------------------------------------------------ */

.dt-nav__cta {
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: 32px;
  padding: 10px 22px;
  background: #A4063E;
  color: #ffffff !important;
  border-radius: 6px;
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.dt-nav__cta:hover,
.dt-nav__cta:focus {
  background: #A4063E !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

/* ------------------------------------------------------------------
   HAMBURGER (mobile only — hidden on desktop)
   ------------------------------------------------------------------ */

.dt-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
}

.dt-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #161718;
  border-radius: 2px;
  transition: all 0.2s;
}

/* ------------------------------------------------------------------
   MOBILE MENU (hidden on desktop)
   ------------------------------------------------------------------ */

.dt-nav__mobile {
  display: none;
}

/* ==========================================================================
   MOBILE + TABLET — max 1023px

   Was max-width: 767px, which left 768px (iPad portrait) on the desktop nav.
   Six top-level items plus the CTA do not fit there: at 768px the container
   has 688px of content width and the nav needs roughly 740px, so the "Book a
   call" button overflowed the viewport by ~20px. The overflow persisted to
   about 820px, so nudging the breakpoint a few pixels would not have covered
   the range. Handing the whole tablet range to the hamburger does, and 1024px
   upward has ample room for the full nav.
   ========================================================================== */

@media (max-width: 1023px) {

  .dt-nav__container {
    height: 60px;
    padding: 0 20px;
  }

  /* Hide desktop nav */

  .dt-nav__right {
    display: none;
  }

  /* Show hamburger */

  .dt-nav__hamburger {
    display: flex;
  }

  /* Mobile menu — full-width dropdown below header */

  .dt-nav__mobile {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-top: 1px solid #e8e8e9;
    padding: 8px 0 20px;
  }

  .dt-nav__mobile--open {
    display: flex;
  }

  .dt-nav__m-link {
    display: block;
    padding: 12px 24px;
    font-family: var(--dt-ff);
    font-size: 15px;
    font-weight: 400;
    color: #161718;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f1;
  }

  .dt-nav__m-link:hover {
    color: #A4063E;
    background: #F4F4F5;
  }

  .dt-nav__m-group {
    background: #F4F4F5;
  }

  .dt-nav__m-sub {
    display: block;
    padding: 9px 24px 9px 40px;
    font-family: var(--dt-ff);
    font-size: 13px;
    color: #5A5B5C;
    text-decoration: none;
    border-bottom: 1px solid #e8e8e9;
  }

  .dt-nav__m-sub:hover {
    color: #A4063E;
  }

  .dt-nav__m-cta {
    display: block;
    margin: 16px 24px 0;
    padding: 12px 24px;
    background: #A4063E;
    color: #ffffff !important;
    border-radius: 6px;
    font-family: var(--dt-ff);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

}

/* ==========================================================================
   HERO NAV STATE — home page at top (transparent over hero, white links)
   JS adds .dt-nav--hero on the home page when scrollY < 40px, removes it on scroll
   ========================================================================== */

.dt-nav--hero {
  background: transparent;
  border-bottom-color: transparent;
}

.dt-nav--hero a.dt-nav__link {
  color: rgba(255, 255, 255, 0.75) !important;
}

.dt-nav--hero a.dt-nav__link:hover,
.dt-nav--hero a.dt-nav__link:focus,
.dt-nav--hero .dt-nav__item--open > a.dt-nav__link {
  color: #ffffff !important;
}

.dt-nav--hero a.dt-nav__link.dt-nav__link--active {
  color: #ffffff !important;
  border-bottom-color: transparent !important;
  text-decoration-color: #ffffff !important;
}

/* Alt (white) logo — hidden by default, shown only in hero state */

.dt-nav__logo-alt-wrap {
  display: none;
  line-height: 0;
}

.dt-nav__logo-alt {
  height: 40px !important;
  width: auto !important;
  display: block;
}

/* In hero state: hide every direct child of logo-wrap EXCEPT the alt, then show alt */

.dt-nav--hero .dt-nav__logo-wrap > :not(.dt-nav__logo-alt-wrap) {
  display: none !important;
}

.dt-nav--hero .dt-nav__logo-alt-wrap {
  display: block;
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* ============================================================
   Datatechs — Page Section Styles
   All custom section CSS lives here so HubSpot can serve it
   properly (rich_text modules strip <style> tags at render time)
   ============================================================ */

/* ── Shared utilities ─────────────────────────────────────── */

.dt-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.dt-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #A4063E;
  border-radius: 2px;
  flex-shrink: 0;
}

.dt-eyebrow span {
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
}

.dt-eyebrow--dark::before {
  background: #D2839F;
}

.dt-eyebrow--dark span {
  color: #D2839F;
}

/* ── Hero ─────────────────────────────────────────────────── */

.dt-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 40px 80px;
  background: #161718;
}

.dt-hero__deco-circles {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.055;
  pointer-events: none;
}

.dt-hero__glow {
  position: absolute;
  left: -150px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164,6,62,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.dt-hero__content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.dt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.dt-hero__eyebrow-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #A4063E;
  border-radius: 2px;
}

.dt-hero__eyebrow span:last-child {
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D2839F;
}

.dt-hero__headline {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  max-width: 840px;
  margin: 0 0 28px;
}

.dt-hero__headline-accent {
  color: #D2839F;
}

.dt-hero__subtext {
  font-family: var(--dt-ff);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 0 48px;
}

.dt-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.dt-btn--hero-primary {
  background: #A4063E;
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
}

.dt-btn--hero-primary:hover {
  background: #87052f;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.dt-btn--hero-ghost {
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.22);
  cursor: pointer;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: var(--dt-ff);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s;
}

.dt-btn--hero-ghost:hover {
  border-color: rgba(255,255,255,0.55);
  color: #ffffff !important;
}

.dt-hero__trust {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: center;
}

.dt-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-hero__trust-item span {
  font-family: var(--dt-ff);
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  font-weight: 400;
}

@media (max-width: 767px) {
  .dt-hero {
    padding: 100px 20px 60px;
    min-height: auto;
  }
  .dt-hero__deco-circles { display: none; }
  .dt-hero__trust { gap: 16px; }
  .dt-hero__trust-item { width: 100%; }
}

/* ── Services strip ───────────────────────────────────────── */

.dt-services {
  padding: 96px 40px;
  background: #F4F4F5;
  font-family: var(--dt-ff);
}

.dt-services__header {
  max-width: 1200px;
  margin: 0 auto 56px;
}

.dt-services__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #161718;
  max-width: 560px;
  margin: 0;
}

.dt-services__featured {
  max-width: 1200px;
  margin: 0 auto 16px;
  background: #161718;
  border-radius: 14px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.dt-services__featured-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #A4063E;
}

.dt-services__featured-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.dt-services__featured-title {
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.25;
}

.dt-services__featured-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
  margin: 0 0 24px;
}

.dt-services__featured-checks {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.dt-services__check-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dt-services__check-item span {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
}

.dt-services__featured-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  text-align: center;
}

.dt-services__featured-cta-note {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.dt-services__cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dt-services__card {
  background: #ffffff;
  border: 1.5px solid #e8e8e9;
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: all 0.22s;
}

.dt-services__card:hover {
  background: #161718;
  border-color: #A4063E;
}

.dt-services__card-eyebrow {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A4063E;
  margin-bottom: 10px;
  transition: color 0.22s;
}

.dt-services__card:hover .dt-services__card-eyebrow { color: #D2839F; }

.dt-services__card-title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 12px;
  transition: color 0.22s;
}

.dt-services__card:hover .dt-services__card-title { color: #ffffff; }

.dt-services__card-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 20px;
  flex: 1;
  transition: color 0.22s;
}

.dt-services__card:hover .dt-services__card-body { color: rgba(255,255,255,0.5); }

.dt-services__card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dt-services__card-list li {
  font-size: 13.5px;
  color: #161718;
  padding-left: 20px;
  position: relative;
  transition: color 0.22s;
}

.dt-services__card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5l3 3 7-7' stroke='%23A4063E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.dt-services__card:hover .dt-services__card-list li { color: rgba(255,255,255,0.65); }

.dt-services__card-link {
  background: none;
  border: 1.5px solid #A4063E;
  color: #A4063E !important;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.22s;
  align-self: flex-start;
  margin-top: auto;
}

.dt-services__card-link:hover {
  background: #A4063E;
  color: #ffffff !important;
}

.dt-services__card:hover .dt-services__card-link {
  border-color: rgba(255,255,255,0.3);
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .dt-services__featured-inner { grid-template-columns: 1fr; }
  .dt-services__featured-cta { text-align: left; }
}

@media (max-width: 767px) {
  .dt-services { padding: 64px 20px; }
  .dt-services__featured { padding: 32px 24px; }
  .dt-services__cards { grid-template-columns: 1fr; }
  .dt-services__featured-checks { flex-direction: column; gap: 10px; }
}

/* ── Audit highlights ─────────────────────────────────────── */

.dt-audits {
  padding: 96px 40px;
  background: #ffffff;
  font-family: var(--dt-ff);
}

.dt-audits__header {
  max-width: 1200px;
  margin: 0 auto 56px;
}

.dt-audits__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #161718;
  margin: 0 0 12px;
}

.dt-audits__subtext {
  font-size: 16px;
  line-height: 1.7;
  color: var(--dt-text-body);
  max-width: 600px;
  margin: 0;
}

.dt-audits__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.dt-audit-card {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-top-width: 3px;
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}

.dt-audit-card--plum  { border-top-color: #A4063E; }
.dt-audit-card--teal  { border-top-color: #0d6b55; }
.dt-audit-card--purple { border-top-color: #5b3fa6; }

.dt-audit-card__eyebrow {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dt-audit-card--plum  .dt-audit-card__eyebrow { color: #A4063E; }
.dt-audit-card--teal  .dt-audit-card__eyebrow { color: #0d6b55; }
.dt-audit-card--purple .dt-audit-card__eyebrow { color: #5b3fa6; }

.dt-audit-card__title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #161718;
  margin: 0 0 14px;
}

.dt-audit-card__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 20px;
  flex: 1;
}

.dt-audit-card__link {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 0;
  transition: opacity 0.15s;
  display: inline-block;
}

.dt-audit-card--plum  .dt-audit-card__link { color: #A4063E; }
.dt-audit-card--teal  .dt-audit-card__link { color: #0d6b55; }
.dt-audit-card--purple .dt-audit-card__link { color: #5b3fa6; }

.dt-audit-card__link:hover { opacity: 0.7; }

@media (max-width: 767px) {
  .dt-audits { padding: 64px 20px; }
}

/* ── How we work ──────────────────────────────────────────── */

.dt-how {
  padding: 96px 40px;
  background: #161718;
  font-family: var(--dt-ff);
}

.dt-how__header {
  max-width: 1200px;
  margin: 0 auto 56px;
}

.dt-how__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  max-width: 480px;
  margin: 0;
}

.dt-how__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
}

.dt-how__card {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(255,255,255,0.07);
  padding: 36px 32px;
  transition: all 0.2s;
}

.dt-how__card:hover {
  background: rgba(164,6,62,0.1);
  border-left-color: #A4063E;
}

.dt-how__number {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.07);
  line-height: 1;
  margin-bottom: 20px;
  transition: color 0.2s;
}

.dt-how__card:hover .dt-how__number { color: #A4063E; }

.dt-how__card-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.dt-how__card-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.48);
  margin: 0;
}

@media (max-width: 767px) {
  .dt-how { padding: 64px 20px; }
  .dt-how__grid { grid-template-columns: 1fr; gap: 0; }
}

/* ── Contact CTA ──────────────────────────────────────────── */

.dt-contact-wrap {
  padding: 96px 48px 140px 0;
  background: transparent;
  font-family: var(--dt-ff);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.dt-contact-section {
  width: 100%;
  height: 100%;
}


.dt-contact__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #161718;
  margin: 0 0 20px;
}

.dt-contact__subtext {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 36px;
}

.dt-contact__trust {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}

.dt-contact__trust-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dt-contact__trust-title {
  font-weight: 600;
  font-size: 15px;
  color: #161718;
}

.dt-contact__trust-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dt-text-body);
  padding-left: 24px;
  margin: 0;
}

.dt-contact__email-line {
  font-size: 14px;
  color: var(--dt-text-meta);
  margin: 0;
}

.dt-contact__email-line a {
  color: #A4063E;
  font-weight: 600;
  text-decoration: none;
}

.dt-contact__email-line a:hover { color: #87052f; }


@media (max-width: 900px) {
  .dt-contact-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .dt-contact-wrap { padding: 64px 20px; }
}

/* ============================================================
   Inner page styles
   ============================================================ */

/* ── Inner page hero ──────────────────────────────────────── */

.dt-page-hero {
  background: #161718;
  padding: 88px 40px 80px;
  position: relative;
  overflow: hidden;
  font-family: var(--dt-ff);
}

.dt-page-hero--white {
  background: #ffffff;
}

.dt-page-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dt-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.dt-page-hero__eyebrow-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #D2839F;
  border-radius: 2px;
}

.dt-page-hero--white .dt-page-hero__eyebrow-line { background: #A4063E; }

.dt-page-hero__eyebrow-text {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D2839F;
}

.dt-page-hero--white .dt-page-hero__eyebrow-text { color: #A4063E; }

.dt-page-hero__headline {
  font-weight: 700;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 24px;
}

.dt-page-hero--white .dt-page-hero__headline { color: #161718; }

.dt-page-hero__subtitle {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  margin: 0;
}

.dt-page-hero--white .dt-page-hero__subtitle { color: var(--dt-text-body); }

@media (max-width: 767px) {
  .dt-page-hero { padding: 72px 20px 56px; }
}

/* ── Stat strip (follows dark hero) ──────────────────────── */

.dt-stat-strip {
  background: #161718;
  padding: 0 40px 56px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--dt-ff);
}

.dt-stat-strip__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.dt-stat-strip__item {
  padding: 40px 36px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

.dt-stat-strip__value {
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 6px;
}

.dt-stat-strip__label {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin: 0;
}

@media (max-width: 767px) {
  .dt-stat-strip { padding: 0 20px 40px; }
  .dt-stat-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Generic section wrapper ──────────────────────────────── */

.dt-section {
  padding: 96px 40px;
  font-family: var(--dt-ff);
}
.dt-section--white  { background: #ffffff; }
.dt-section--mist   { background: #F4F4F5; }
.dt-section--dark   { background: #161718; }
.dt-section--compact { padding: 72px 40px; }

.dt-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dt-section__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}
.dt-section--white  .dt-section__headline,
.dt-section--mist   .dt-section__headline { color: #161718; }
.dt-section--dark   .dt-section__headline { color: #ffffff; }

.dt-section__headline--sm {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.dt-section--white  .dt-section__headline--sm,
.dt-section--mist   .dt-section__headline--sm { color: #161718; }
.dt-section--dark   .dt-section__headline--sm { color: #ffffff; }

.dt-section__subheading {
  font-size: 16px;
  line-height: 1.65;
  max-width: 580px;
  margin: 0 0 48px;
}
.dt-section--white  .dt-section__subheading,
.dt-section--mist   .dt-section__subheading { color: var(--dt-text-body); }
.dt-section--dark   .dt-section__subheading { color: rgba(255,255,255,0.55); }

.dt-section__body {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 780px;
  margin: 0 0 24px;
}
.dt-section--white  .dt-section__body,
.dt-section--mist   .dt-section__body { color: var(--dt-text-body); }
.dt-section--dark   .dt-section__body { color: rgba(255,255,255,0.55); }

@media (max-width: 767px) {
  .dt-section { padding: 64px 20px; }
}

/* ── Layout grids ─────────────────────────────────────────── */

.dt-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.dt-two-col--center { align-items: center; }
.dt-two-col--wide-gap { gap: 80px; }

/* A grid child's default min-width is its min-content width, so one long
   unbroken word in editor-entered copy can hold a track wider than its
   share and push the page sideways. Columns are always allowed to
   shrink to their track. */
.dt-two-col > *,
.dt-three-col > * { min-width: 0; }

.dt-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dt-four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

@media (max-width: 900px) {
  .dt-two-col { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .dt-three-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dt-three-col { grid-template-columns: 1fr; }
  .dt-four-col  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Card components ──────────────────────────────────────── */

.dt-card {
  border-radius: 10px;
  padding: 28px 28px;
  font-family: var(--dt-ff);
}
.dt-card--bg-white  { background: #ffffff; }
.dt-card--bg-mist   { background: #F4F4F5; border: 1px solid #e8e8e9; }
.dt-card--bg-dark   { background: rgba(255,255,255,0.04); }
.dt-card--outline   { border: 1px solid #e8e8e9; }

.dt-card--accent-plum   { border-left: 3px solid #A4063E !important; }
.dt-card--accent-teal   { border-left: 3px solid #0d6b55 !important; }
.dt-card--accent-purple { border-left: 3px solid #5b3fa6 !important; }
.dt-card--top-plum      { border-top: 3px solid #A4063E; border-radius: 12px; }
.dt-card--top-teal      { border-top: 3px solid #0d6b55; border-radius: 12px; }
.dt-card--top-purple    { border-top: 3px solid #5b3fa6; border-radius: 12px; }
.dt-card--top-green     { border-top: 3px solid #0d6b55; border-radius: 12px; }

.dt-card__tag {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.dt-card--accent-plum   .dt-card__tag,
.dt-card--top-plum      .dt-card__tag { color: #A4063E; }
.dt-card--accent-teal   .dt-card__tag,
.dt-card--top-teal      .dt-card__tag,
.dt-card--top-green     .dt-card__tag { color: #0d6b55; }
.dt-card--accent-purple .dt-card__tag,
.dt-card--top-purple    .dt-card__tag { color: #5b3fa6; }

.dt-card__heading {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #161718;
  margin: 0 0 10px;
}
.dt-card--bg-dark .dt-card__heading { color: #ffffff; }

.dt-card__subheading {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: #161718;
  margin: 0 0 14px;
}

.dt-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--dt-text-body);
  margin: 0;
}
.dt-card--bg-dark .dt-card__body { color: rgba(255,255,255,0.5); }

.dt-card__link {
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  margin-top: 16px;
  transition: opacity 0.15s;
}
.dt-card--accent-plum   .dt-card__link { color: #A4063E; }
.dt-card--accent-teal   .dt-card__link { color: #0d6b55; }
.dt-card--accent-purple .dt-card__link { color: #5b3fa6; }
.dt-card__link:hover { opacity: 0.7; }

/* Pricing card variant */

.dt-pricing-card {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-top: 3px solid #A4063E;
  border-radius: 12px;
  padding: 40px 36px;
  font-family: var(--dt-ff);
}

.dt-pricing-card__label {
  background: #161718;
  display: inline-block;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.dt-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px;
}

.dt-pricing-card__amount {
  font-weight: 700;
  font-size: 44px;
  color: #A4063E;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dt-pricing-card__unit {
  font-size: 15px;
  color: var(--dt-text-meta);
}

.dt-pricing-card__detail {
  font-size: 14px;
  color: #161718;
  margin: 0 0 6px;
}

.dt-pricing-card__note {
  font-size: 13.5px;
  color: var(--dt-text-meta);
  line-height: 1.5;
  margin: 0;
}

/* ── Process steps ────────────────────────────────────────── */

.dt-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  font-family: var(--dt-ff);
}

.dt-process__step {
  padding-right: 48px;
  border-right: 1px solid #e8e8e9;
}
.dt-process__step:not(:first-child) { padding-left: 48px; }
.dt-process__step:last-child { border-right: none; padding-right: 0; }

.dt-section--dark .dt-process__step { border-right-color: rgba(255,255,255,0.07); }

.dt-process__num {
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.04em;
  color: #d0d0d1;
  line-height: 1;
  margin-bottom: 12px;
}
.dt-section--dark .dt-process__num { color: rgba(255,255,255,0.08); }

.dt-process__bar {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.dt-process__heading {
  font-weight: 700;
  font-size: 18px;
  color: #161718;
  margin: 0 0 12px;
  line-height: 1.25;
}
.dt-section--dark .dt-process__heading { color: #ffffff; }

.dt-process__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}
.dt-section--dark .dt-process__body { color: rgba(255,255,255,0.48); }

@media (max-width: 767px) {
  .dt-process { grid-template-columns: 1fr; gap: 32px; }
  .dt-process__step { padding: 0 0 32px 0 !important; border-right: none; border-bottom: 1px solid #e8e8e9; }
  .dt-process__step:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ── Checklist items ──────────────────────────────────────── */

.dt-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--dt-ff);
}

.dt-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e9;
}
.dt-check-item:last-child { border-bottom: none; }

.dt-check-item__icon { flex-shrink: 0; margin-top: 1px; }

.dt-check-item__text {
  font-size: 14px;
  line-height: 1.5;
  color: #161718;
}

/* ── Tick items (no border) ───────────────────────────────── */

.dt-tick-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--dt-ff);
}

.dt-tick-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dt-tick-item__icon { flex-shrink: 0; margin-top: 2px; color: #A4063E; font-weight: 700; font-size: 14px; line-height: 1.4; }
.dt-tick-item__text { font-size: 14px; line-height: 1.6; color: #161718; }

/* ── X-items (not-in-scope) ───────────────────────────────── */

.dt-x-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--dt-ff);
}

.dt-x-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dt-x-item__icon { color: #e5a00d; font-weight: 700; font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.dt-x-item__text { font-size: 14px; line-height: 1.6; color: var(--dt-text-body); }

/* ── Callout boxes ────────────────────────────────────────── */

.dt-callout {
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  font-family: var(--dt-ff);
}
.dt-callout--plum   { background: #ffffff; border: 1px solid #e8e8e9; border-left: 3px solid #A4063E; }
.dt-callout--teal   { background: #ffffff; border: 1px solid #e8e8e9; border-left: 3px solid #0d6b55; }
.dt-callout--purple { background: #ffffff; border: 1px solid #e8e8e9; border-left: 3px solid #5b3fa6; }
.dt-callout--dark   { background: #161718; border-left: 3px solid #A4063E; border-radius: 10px; }
.dt-callout--warn   { background: #ffffff; border: 1px solid #e8e8e9; border-left: 3px solid #e5a00d; }

.dt-callout__heading {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 8px;
  color: #161718;
}
.dt-callout--dark .dt-callout__heading { color: #ffffff; }

.dt-callout__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}
.dt-callout--dark .dt-callout__text { color: rgba(255,255,255,0.55); }

/* ── Stat callouts (big number + label) ──────────────────── */

.dt-stat-callouts {
  display: flex;
  gap: 56px;
  padding-top: 40px;
  border-top: 1px solid #e8e8e9;
  font-family: var(--dt-ff);
  flex-wrap: wrap;
}

.dt-stat-callout__value {
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.dt-stat-callout--teal  .dt-stat-callout__value { color: #0d6b55; }
.dt-stat-callout--plum  .dt-stat-callout__value { color: #A4063E; }

.dt-stat-callout__label {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dt-text-meta);
  max-width: 200px;
}

/* ── CTA bottom section ───────────────────────────────────── */

.dt-cta-section {
  background: #161718;
  padding: 96px 40px;
  font-family: var(--dt-ff);
  text-align: center;
}

.dt-cta-section__inner { max-width: 640px; margin: 0 auto; }

.dt-cta-section__headline {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 20px;
}

.dt-cta-section__subtext {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin: 0 0 40px;
}

.dt-cta-section__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Light variant.

   The dark band is the right closing note on a page whose footer is not
   also #161718 — but the footer is, so a dark CTA runs straight into it
   and the two read as one 865px block of near-black with 160px of empty
   space through the middle of it. Home has always ended on a light CTA
   for this reason, letting the dark footer be the full stop. This is
   that ending, as a modifier rather than a second component. */
.dt-cta-section--light { background: #ffffff; }
.dt-cta-section--light .dt-cta-section__headline { color: #161718; }
.dt-cta-section--light .dt-cta-section__subtext  { color: var(--dt-text-body); }

/* ── Buttons ──────────────────────────────────────────────── */

.dt-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.dt-btn--primary {
  background: #A4063E;
  color: #ffffff !important;
  border: 2px solid #A4063E;
}
.dt-btn--primary:hover { background: #87052f; border-color: #87052f; color: #ffffff !important; }

.dt-btn--outline {
  background: transparent;
  color: #A4063E !important;
  border: 1.5px solid #A4063E;
}
.dt-btn--outline:hover { background: #A4063E; color: #ffffff !important; }

.dt-btn--ghost {
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.22);
}
.dt-btn--ghost:hover { border-color: rgba(255,255,255,0.55); color: #ffffff !important; }

/* ── About page ───────────────────────────────────────────── */

.dt-about-split {
  background: #ffffff;
  padding: 96px 40px;
  font-family: var(--dt-ff);
}

.dt-about-split__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.dt-about-split__label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-text-meta);
  margin-bottom: 16px;
}

.dt-about-split__heading {
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #161718;
  margin: 0 0 14px;
}

.dt-about-split__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0 0 16px;
}

@media (max-width: 767px) {
  .dt-about-split { padding: 64px 20px; }
  .dt-about-split__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Principles (dark 4-col) ──────────────────────────────── */

.dt-principles {
  background: #161718;
  padding: 96px 40px;
  font-family: var(--dt-ff);
}

.dt-principles__header {
  max-width: 1200px;
  margin: 0 auto 56px;
}

.dt-principles__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

.dt-principles__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.dt-principle {
  padding: 40px 36px;
  border-left: 3px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}

.dt-principle:hover {
  border-left-color: #A4063E;
  background: rgba(164,6,62,0.05);
}

.dt-principle__num {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #A4063E;
  margin-bottom: 16px;
  display: block;
}

.dt-principle__title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.dt-principle__body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin: 0;
}

@media (max-width: 900px) {
  .dt-principles__grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
}
@media (max-width: 600px) {
  .dt-principles__grid { grid-template-columns: 1fr; }
  .dt-principles { padding: 64px 20px; }
}

/* ── Service row (Services page alternating) ──────────────── */

.dt-service-row {
  padding: 96px 40px;
  font-family: var(--dt-ff);
}
.dt-service-row--white  { background: #ffffff; }
.dt-service-row--mist   { background: #F4F4F5; }
.dt-service-row--dark   { background: #161718; }

.dt-service-row__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.dt-service-row__headline {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}
.dt-service-row--white  .dt-service-row__headline,
.dt-service-row--mist   .dt-service-row__headline { color: #161718; }
.dt-service-row--dark   .dt-service-row__headline { color: #ffffff; }

.dt-service-row__body {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.dt-service-row--white  .dt-service-row__body,
.dt-service-row--mist   .dt-service-row__body { color: var(--dt-text-body); }
.dt-service-row--dark   .dt-service-row__body { color: rgba(255,255,255,0.55); }

.dt-service-row__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-service-row__bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.dt-service-row--white  .dt-service-row__bullet,
.dt-service-row--mist   .dt-service-row__bullet { color: #161718; }
.dt-service-row--dark   .dt-service-row__bullet { color: rgba(255,255,255,0.7); }

.dt-service-row__visual {
  background: rgba(164,6,62,0.05);
  border: 1px solid rgba(164,6,62,0.12);
  border-radius: 14px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dt-service-row--dark .dt-service-row__visual {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.dt-service-row__visual-item {
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  color: #161718;
  border-left: 3px solid #A4063E;
}
.dt-service-row--dark .dt-service-row__visual-item {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
}

@media (max-width: 900px) {
  .dt-service-row { padding: 64px 20px; }
  .dt-service-row__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── MSP "invisible by design" section ───────────────────── */

.dt-embedded-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  font-family: var(--dt-ff);
}

.dt-embedded-card {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid transparent;
  padding: 36px 32px;
  transition: all 0.2s;
}

.dt-embedded-card:hover {
  background: rgba(255,255,255,0.05);
  border-left-color: #A4063E;
}

.dt-embedded-card__num {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #A4063E;
  margin-bottom: 16px;
}

.dt-embedded-card__heading {
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.3;
}

.dt-embedded-card__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

@media (max-width: 767px) {
  .dt-embedded-grid { grid-template-columns: 1fr; }
}

/* ── Engage cards (MSP retainer/project) ──────────────────── */

.dt-engage-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 40px 36px;
  font-family: var(--dt-ff);
}
.dt-engage-card--plum  { border-top: 3px solid #A4063E; }
.dt-engage-card--green { border-top: 3px solid #0d6b55; }

.dt-engage-card__label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.dt-engage-card--plum  .dt-engage-card__label { color: #A4063E; }
.dt-engage-card--green .dt-engage-card__label { color: #0d6b55; }

.dt-engage-card__heading {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: #161718;
  margin: 0 0 16px;
  line-height: 1.25;
}

.dt-engage-card__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 28px;
}

/* ── Dark callout box ─────────────────────────────────────── */

.dt-dark-box {
  background: #161718;
  border-left: 3px solid #A4063E;
  border-radius: 10px;
  padding: 32px 40px;
  font-family: var(--dt-ff);
}

.dt-dark-box__heading {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 18px);
  color: #ffffff;
  margin: 0 0 12px;
}

.dt-dark-box__body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ── Big number stats (CIS pages) ────────────────────────── */

.dt-big-stats {
  background: #161718;
  padding: 0 40px 56px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--dt-ff);
}

.dt-big-stats__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.dt-big-stat {
  padding: 48px 40px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

.dt-big-stat__value {
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #A4063E;
  margin: 0 0 8px;
}

.dt-big-stat--teal   .dt-big-stat__value { color: #0d6b55; }
.dt-big-stat--purple .dt-big-stat__value { color: #5b3fa6; }
.dt-big-stat--white  .dt-big-stat__value { color: #ffffff; }

.dt-big-stat__label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 767px) {
  .dt-big-stats { padding: 0 20px 40px; }
  .dt-big-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-big-stat { padding: 32px 24px; }
}

/* ── Nine/six areas grid (CIS pages) ─────────────────────── */

.dt-areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  font-family: var(--dt-ff);
}

.dt-area-card {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  padding: 24px 24px;
}

.dt-area-card__num {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #A4063E;
  margin-bottom: 8px;
  display: block;
}

.dt-area-card--teal   .dt-area-card__num { color: #0d6b55; }
.dt-area-card--purple .dt-area-card__num { color: #5b3fa6; }

.dt-area-card__title {
  font-weight: 700;
  font-size: 15px;
  color: #161718;
  margin: 0 0 6px;
}

.dt-area-card__body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 0;
}

@media (max-width: 767px) {
  .dt-areas-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Journey section (Services page) ─────────────────────── */

.dt-journey {
  padding: 96px 40px;
  background: #161718;
  font-family: var(--dt-ff);
}

.dt-journey__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dt-journey__header {
  margin-bottom: 56px;
}

.dt-journey__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  max-width: 560px;
  margin: 0;
}

.dt-journey__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.dt-journey__step {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: inherit;
  transition: all 0.22s;
}

.dt-journey__step:hover {
  background: rgba(164,6,62,0.08);
  border-left-color: #A4063E;
  color: inherit;
}

.dt-journey__step-num {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #A4063E;
  margin-bottom: 2px;
}

.dt-journey__step-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D2839F;
  margin-bottom: 16px;
}

.dt-journey__step-title {
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dt-journey__step-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin: 0 0 16px;
  flex: 1;
}

.dt-journey__step-why {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.3);
  margin: 0 0 24px;
  padding-left: 12px;
  border-left: 2px solid rgba(164,6,62,0.3);
}

.dt-journey__step-link {
  font-weight: 600;
  font-size: 13px;
  color: #D2839F;
  text-decoration: none;
  transition: color 0.15s;
}

.dt-journey__step:hover .dt-journey__step-link { color: #ffffff; }
.dt-journey__step:hover .dt-journey__step-num  { color: #D2839F; }

@media (max-width: 900px) {
  .dt-journey { padding: 64px 20px; }
  .dt-journey__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .dt-journey__steps { grid-template-columns: 1fr; }
}

/* ── Service detail sections (Services page alternating) ──── */

.dt-service-row__inner--reverse .dt-service-row__visual { order: -1; }

@media (max-width: 900px) {
  .dt-service-row__inner--reverse .dt-service-row__visual { order: 0; }
}

.dt-service-row__visual--dark {
  background: #161718;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 360px;
}

.dt-service-row__icon-wrap {
  width: 80px;
  height: 80px;
  background: rgba(164,6,62,0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-service-row__stat-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.55;
  width: 100%;
}

.dt-service-row__bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.dt-service-row--white .dt-service-row__bullet,
.dt-service-row--mist  .dt-service-row__bullet { color: #161718; }
.dt-service-row--dark  .dt-service-row__bullet { color: rgba(255,255,255,0.7); }

.dt-service-row__bullet::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%23A4063E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

/* The FAQ accordion that used to live here is gone.

   It was the pre-details/summary pattern: hairline rows separated by
   1px rules, with a scripted icon. Every FAQ on the site renders
   details.dt-acc now, so of the rules in this block only two still
   reached anything, and both did so by accident:

     .dt-faq details:first-of-type { border-top: 1px solid #e0e0e1; }

   outscored `details.dt-acc` on specificity, so the first question box
   on Home and the services hub carried a top border one shade off
   every other edge on the page and every other box in the same list.
   That is the inconsistency this block existed to cause.

   Nothing else here was load-bearing. .dt-faq itself survives as the
   section band, defined with the rest of the FAQ component in
   _dt-components.css. The two declarations that looked worth keeping
   turned out not to be: `font-family: var(--dt-ff)` restated what body
   already inherits, and the `@media` padding lost to `.dt-sec`'s own
   !important mobile padding on both sections that use this class.
   Checked in a browser before dropping them. */


/* ── Services start + contact (merged, dark) ──────────────── */

.dt-start-contact {
  padding: 96px 40px;
  background: #161718;
  font-family: var(--dt-ff);
}

.dt-start-contact__left {
  padding-right: 8px;
}

.dt-start-contact__headline {
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 16px;
}

.dt-start-contact__subtext {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.48);
  margin: 0 0 40px;
  max-width: 400px;
}

.dt-start-contact__step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.dt-start-contact__step:first-child { padding-top: 0; }
.dt-start-contact__step:last-child  { border-bottom: none; }

.dt-start-contact__step-num {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #A4063E;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 24px;
}

.dt-start-contact__step-title {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.3;
}

.dt-start-contact__step-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin: 0;
}

.dt-start-contact__email {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}

.dt-start-contact__email a {
  color: #D2839F;
  font-weight: 600;
  text-decoration: none;
}

.dt-start-contact__email a:hover { color: #ffffff; }

@media (max-width: 900px) {
  .dt-start-contact { padding: 64px 20px; }
}
/* ============================================================
   Hero background images
   ------------------------------------------------------------
   Every hero on the site was a photograph saved as PNG and served
   from /hubfs/, between 1.2MB and 1.9MB each. Home alone was
   2.1MB a page, 1.6MB of it the hero.

   Two things were wrong, and format was the bigger one.

   PNG is lossless, so a photograph has no way to come out small.
   HubSpot's resizer re-encodes to JPEG when it can, so the same
   file at width=1920 comes back around 171KB and at width=1600
   around 126KB. That is the 90% saving, and it needs no re-upload.

   The resizer only runs on /hs-fs/hubfs/ paths. The old URLs were
   plain /hubfs/, which serves the original untouched, so the
   ?width=1600 several of them carried did nothing at all.

   So: /hs-fs/hubfs/ with a width, at three sizes. Up to 560 takes
   800, up to 1200 takes 1280, above that 1920. Mobile first, so a
   phone never downloads a desktop image and the widest file is only
   fetched when the viewport is actually that wide.

   The 1920 band starts at 1201 rather than 821. A 1280-wide file
   covers everything up to a 1200px viewport perfectly well, and
   keeping the largest file for genuinely large screens means a
   mis-measured viewport costs 1280 rather than 1920. That mattered:
   before the viewport meta tag was added to the base layout, phones
   laid out at 980 and every one of them took the desktop band.

   The scrim is a separate custom property from the image, so the
   gradient is written once per hero rather than repeated in all
   three breakpoints. Each scrim below is the one that hero
   already had, opacity unchanged.
   ============================================================ */

.dt-hero-media {
  background-image: var(--dt-hero-scrim), var(--dt-hero-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The two scrims in use. A flat wash on the centred heroes, and a
   left-weighted one where the copy sits against the left edge. */
.dt-hero-media--home,
.dt-hero-media--services,
.dt-hero-media--audit,
.dt-hero-media--book {
  --dt-hero-scrim: linear-gradient(rgba(22, 23, 24, 0.88), rgba(22, 23, 24, 0.88));
}

.dt-hero-media--about,
.dt-hero-media--contact {
  --dt-hero-scrim: linear-gradient(to right, rgba(22, 23, 24, 0.95) 35%, rgba(22, 23, 24, 0.5) 100%);
}

/* ── Which of the three the hero takes ────────────────────────
   The URLs themselves are not here any more; they are set inline on
   each hero section, as --dt-hero-s / -m / -l, beside the preloads that
   have to match them.

   They used to live in this file and that is what made the preload
   useless. HubSpot rewrites asset URLs inside a served stylesheet, so
   `https://www.datatechs.co.uk/hs-fs/hubfs/hero-home.png` came back out
   as `https://148777188.fs1.hubspotusercontent-eu1.net/hub/148777188/
   hubfs/hero-home.png`. The preload in the template was not rewritten,
   so the two named the same picture by two different URLs, the browser
   treated them as two resources, and every hero was downloaded twice:
   once eagerly by the preload, then again for the background.

   An inline style attribute is page HTML rather than a stylesheet, so
   it is left alone, which is why the blog post cover already sets its
   own three widths this way. What stays here is only the choice between
   them, because an inline style cannot carry a media query. */

.dt-hero-media { --dt-hero-img: var(--dt-hero-s); }

@media (min-width: 561px) {
  .dt-hero-media { --dt-hero-img: var(--dt-hero-m); }
}

@media (min-width: 1201px) {
  .dt-hero-media { --dt-hero-img: var(--dt-hero-l); }
}

/* Templates
   ------------------------------------------------------------
   One stylesheet for the whole site. These were per-template
   sheets wired in through the layout's `template_css` variable,
   so a page's styling depended on which file it happened to
   load, the same component could drift between pages, and a fix
   in one place did not reach the others.

   They are concatenated here instead and every page loads the
   lot: one request, cached across the whole site, and no page
   with its own private rules. Checked for collisions before
   merging — services-hub, msp-partners, blog, resource-gate and
   system shared no selector with the component library, and the
   only genuine per-page differences (the audit page's larger
   timeline artefacts) are now a `--lg` modifier rather than a
   separate file.

   _dt-components.css is the shared component library and goes first so
   the rest can build on it.
*/

/* ============================================================
   Datatechs — Home V2 template styles
   ============================================================ */


/* ── Typography helpers ───────────────────────────────────── */

.dt-h1-hero {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* The colour is the point of this rule as much as the type is.

   .dt-h2 set no colour at all, so every heading using it inherited the
   bare `h2` rule in theme-overrides.css, whose colour comes from the
   HubSpot theme settings and is plum. Every page hid that by overriding
   each heading to #161718 with an inline style — 38 of them across the
   templates — so the class's real default had never been seen until the
   services hub dropped its inline styles and showed it.

   Same shape as the body-copy grey: a shared default that was wrong, held
   up by per-page hardcoding. The default is black now and the overrides
   come out, so it is load-bearing rather than decorative. Headings on a
   near-black band take --on-dark instead of an inline white. */
.dt-h2 {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #161718;
}

.dt-h2--on-dark { color: #FFFFFF; }

/* Plain uppercase section label, no rule either side. About and Contact
   both used one, restated inline on every instance. The rule-flanked
   variant is .dt-eyebrow-rule; this is the bare one. */
.dt-eyebrow {
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: var(--dt-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dt-accent-1);
  margin: 0 0 16px;
}

.dt-eyebrow--on-dark { color: var(--dt-plum-light); }

/* On-dark variants for the display type, so a hero heading takes a
   modifier rather than an inline white the editor can rewrite. */
.dt-h1-hero--on-dark { color: #FFFFFF; }
/* 0.6 white is 4.3:1 on #161718 and misses AA; 0.7 clears it. */
.dt-subtext--on-dark { color: rgba(255,255,255,0.7); }

.dt-h3 {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dt-body {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.75;
}

.dt-body-lg {
  font-family: var(--dt-ff);
  font-size: 17px;
  line-height: 1.7;
}

.dt-body-sm {
  font-family: var(--dt-ff);
  font-size: 13.5px;
  line-height: 1.6;
}

.dt-subtext {
  font-family: var(--dt-ff);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}

/* Body-copy colour on light grounds. Pair with .dt-body / .dt-body-lg /
   .dt-subtext rather than restating a hex, so paragraph text across the
   site stays on one token. Neutral Grey (#8B8C8C) is captions and
   metadata only — it is under AA for normal text. */
.dt-text-body { color: var(--dt-text-body); }

/* ── Buttons ──────────────────────────────────────────────── */

.dt-btn-primary {
  display: inline-block;
  background: #A4063E;
  color: #ffffff !important;
  border: 2px solid #A4063E;
  padding: 15px 30px;
  border-radius: 8px;
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.dt-btn-primary:hover {
  background: #87052f;
  border-color: #87052f;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.dt-btn-ghost-light {
  display: inline-block;
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.25);
  padding: 15px 30px;
  border-radius: 8px;
  font-family: var(--dt-ff);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.dt-btn-ghost-light:hover {
  border-color: rgba(255,255,255,0.55);
  color: #ffffff !important;
}

.dt-link-crimson {
  color: #A4063E !important;
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.dt-link-crimson:hover { opacity: 0.75; }

/* ── Hero trust items ─────────────────────────────────────── */

.dt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dt-ff);
  font-size: 13.5px;
  /* 0.5 white is 4.44:1 on the hero and just misses AA. */
  color: rgba(255,255,255,0.62);
}

/* ── Shared card base ─────────────────────────────────────── */

.dt-card-mist {
  background: #F4F4F5;
  border: 1px solid #e4e4e5;
  border-radius: 12px;
  padding: 36px 32px;
  font-family: var(--dt-ff);
}

.dt-card-white {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 36px 32px;
  font-family: var(--dt-ff);
}

.dt-icon-box {
  width: 44px;
  height: 44px;
  background: #161718;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Service cards ────────────────────────────────────────── */

.dt-service-card {
  background: #ffffff;
  border: 1.5px solid #e8e8e9;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.22s, border-color 0.22s;
  font-family: var(--dt-ff);
}

.dt-service-card:hover {
  background: #161718;
  border-color: #A4063E;
  color: inherit;
}

.dt-service-card__icon {
  width: 42px;
  height: 42px;
  background: #161718;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background 0.22s;
}

.dt-service-card:hover .dt-service-card__icon {
  background: rgba(255,255,255,0.08);
}

.dt-service-card__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 10px;
  line-height: 1.2;
  transition: color 0.22s;
}

.dt-service-card:hover .dt-service-card__title { color: #ffffff; }

.dt-service-card__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 20px;
  flex: 1;
  transition: color 0.22s;
}

.dt-service-card:hover .dt-service-card__text { color: rgba(255,255,255,0.5); }

.dt-service-card__link {
  font-weight: 600;
  font-size: 13px;
  color: #A4063E;
  transition: color 0.22s;
  margin-top: auto;
}

.dt-service-card:hover .dt-service-card__link { color: #D2839F; }

/* ── Step numbers ─────────────────────────────────────────── */

.dt-step-num {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(164,6,62,0.35);
  margin: 0 0 20px;
}

/* ── Checklist items ──────────────────────────────────────── */

.dt-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #F4F4F5;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--dt-ff);
}

/* ── Certification cards ──────────────────────────────────── */

.dt-cert-card {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--dt-ff);
  position: relative;
}

.dt-cert-title {
  font-weight: 700;
  font-size: 13px;
  color: #161718;
  margin: 0 0 4px;
  line-height: 1.3;
}

.dt-cert-sub {
  font-size: 12px;
  color: var(--dt-text-meta);
  margin: 0;
  line-height: 1.4;
}

.dt-cert-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.dt-cert-dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

/* ── Testimonials ─────────────────────────────────────────── */

.dt-testimonial {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  font-family: var(--dt-ff);
}

.dt-testimonial__mark {
  font-size: 36px;
  line-height: 1;
  /* Plum is 2.0:1 on this near-black card. The light plum keeps the
     brand read and clears the 3:1 a 36px glyph needs. */
  color: #D2839F;
  margin: 0 0 16px;
  font-weight: 700;
}

.dt-testimonial__quote {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
  margin: 0 0 28px;
  flex: 1;
}

.dt-testimonial__attribution {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.dt-testimonial__name {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 2px;
}

.dt-testimonial__org {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ── Testimonial grid ─────────────────────────────────────────
   The number of cards changes. Home has one real testimonial today
   and two more coming, and the two waiting slots are emptied in the
   page rather than deleted, so they can be filled without a deploy.

   That is why this is flex and not a three-column grid. A grid keeps
   its three tracks whatever is in them, so one card sat in the left
   third at a third of the width; flex lets the visible cards share
   the row and centre themselves, and the count takes care of itself:

     one card   -> centred, capped at 760px so a long quote does not
                   run to a full-width measure
     two cards  -> two equal columns
     three      -> three equal columns
     phone      -> one column, whatever the count

   The basis is what drives it. Three cards at 320 plus the gaps fit
   a 1200px row and grow to 384 each; two grow to 588; one would grow
   to the full row, which is what max-width is for. */

.dt-testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.dt-testimonial-grid > .dt-testimonial {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 760px;
}

/* An emptied module still renders its wrapper, so the card around it
   kept its frame, its border and its 36px quote mark, standing at
   full row height with nothing in it.

   The card and the quote mark are template markup wrapping the
   module, so the test is whether the module put a quote inside. Doing
   this in HubL would mean reading widget_data before the module tag
   has rendered, which is the one thing widget_data is unreliable
   about, so it is done here where it can be tested — and it keeps
   working when someone empties a slot in the editor later, with no
   deploy needed.

   Note what this means: a card whose quote is not marked up as
   .dt-testimonial__quote is treated as empty and hidden. Everything
   that writes these modules uses the class. */
.dt-testimonial-grid > .dt-testimonial:not(:has(.dt-testimonial__quote)) {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 960px) {
  .h2-three-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .h2-certs-col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .h2-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .h2-two-col-faq {
    grid-template-columns: 1fr !important;
  }
  .h2-how-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 640px) {
  .h2-three-col {
    grid-template-columns: 1fr !important;
  }
  .h2-certs-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== Our Process — per-card accents =====
   On a pointer device the accents stay where they were: revealed on
   hover, so the row reads as four quiet cards until you engage with
   one.

   A touch screen has no hover, so there the accents would never
   appear at all and the numbers would sit at 7% white — invisible.
   Below the breakpoint they are painted permanently instead.

   The values differ from the light-ground ones used elsewhere because
   this band is near-black: plum is 2.1:1 here and fails even the 3:1
   a 32px number needs, so the first card takes the light plum. */

.dt-how__card:nth-child(2):hover { background: rgba(13,148,136,0.1); border-left-color: var(--dt-accent-2-on-dark); }
.dt-how__card:nth-child(2):hover .dt-how__number { color: var(--dt-accent-2-on-dark); }
.dt-how__card:nth-child(3):hover { background: rgba(99,102,241,0.1); border-left-color: var(--dt-accent-3-on-dark); }
.dt-how__card:nth-child(3):hover .dt-how__number { color: var(--dt-accent-3-on-dark); }
.dt-how__card:nth-child(4):hover { background: rgba(245,158,11,0.1); border-left-color: #f59e0b; }
.dt-how__card:nth-child(4):hover .dt-how__number { color: #f59e0b; }

@media (hover: none), (max-width: 900px) {
  .dt-how__card { border-left-color: #D2839F; }
  .dt-how__number { color: #D2839F; }
  .dt-how__card:nth-child(2) { border-left-color: var(--dt-accent-2-on-dark); }
  .dt-how__card:nth-child(2) .dt-how__number { color: var(--dt-accent-2-on-dark); }
  .dt-how__card:nth-child(3) { border-left-color: var(--dt-accent-3-on-dark); }
  .dt-how__card:nth-child(3) .dt-how__number { color: var(--dt-accent-3-on-dark); }
  .dt-how__card:nth-child(4) { border-left-color: #f59e0b; }
  .dt-how__card:nth-child(4) .dt-how__number { color: #f59e0b; }
  .dt-how__grid--five .dt-how__card:nth-child(5) { border-left-color: #9d80e0; }
  .dt-how__grid--five .dt-how__card:nth-child(5) .dt-how__number { color: #9d80e0; }
}

/* ===== FAQ ===== */

.dt-faq {
  background: #F4F4F5;
  padding: 80px 40px;
  text-align: center;
}

/* Ground variant. The section alternates with the ones either side of it,
   and that alternation lands differently per page: on Home the FAQ sits
   between two white sections, on Services Hub between two grey ones. The
   accordion inside is identical either way — only the band changes. */
.dt-faq--on-white { background: #FFFFFF; }

/* The scripted div accordion that used to be defined here
   (.dt-faq__list, __item, __q, __toggle, __a) is gone. It predates
   details/summary and nothing in the theme renders it any more; its
   answers were display:none waiting on JavaScript the theme no longer
   carries, so anything still using it would already have been broken.
   details.dt-acc below is the one accordion. */


/* ============================================================
   Section eyebrow with rules
   The single treatment used by every section eyebrow on the
   page. Plum on light bands; the theme's plum-light on dark
   ones, matching the existing .dt-eyebrow--dark convention.
   ============================================================ */

.dt-eyebrow-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 20px;
}

.dt-eyebrow-rule::before,
.dt-eyebrow-rule::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(164, 6, 62, 0.4);
  flex-shrink: 0;
}

.dt-eyebrow-rule span {
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
  white-space: nowrap;
}

/* On near-black bands, plum drops below a comfortable contrast
   ratio, so use the plum-light token instead. */
.dt-eyebrow-rule--on-dark::before,
.dt-eyebrow-rule--on-dark::after { background: rgba(210, 131, 159, 0.45); }
.dt-eyebrow-rule--on-dark span   { color: #D2839F; }

/* Left-aligned variant for sections whose header is not centred. */
.dt-eyebrow-rule--left { justify-content: flex-start; }
.dt-eyebrow-rule--left::after { display: none; }

/* Ink variant. Three sections on Services Hub — The Journey, FAQ and
   Get Started — carry black section labels rather than plum. The rules
   either side stay plum so the eyebrow is still recognisably the same
   component; it is the word that changes weight, not the whole mark. */
.dt-eyebrow-rule--ink span { color: #161718; }

@media (max-width: 520px) {
  .dt-eyebrow-rule { gap: 10px; }
  .dt-eyebrow-rule::before,
  .dt-eyebrow-rule::after { width: 18px; }
  .dt-eyebrow-rule span { font-size: 10.5px; letter-spacing: 0.1em; white-space: normal; }
}


/* ============================================================
   Journey — horizontal timeline
   Three stages read left to right, 01 -> 02 -> 03. Marked up as
   an ordered list: the stages are a sequence, and that should be
   in the markup, not only the styling. Vertical on mobile.
   ============================================================ */

.dt-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dt-timeline__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Centred header, left-aligned reading matter below it. */
  text-align: center;
}

/* The rail, drawn per stage from its own node's edge into the gap so it
   meets the next node without depending on column widths. With the node
   centred, it runs from the node's right edge to the next node's left. */
/* Runs node edge to node edge. Percentages resolve against the stage, so
   -50% carries the rail across the gap and half the next column, landing on
   that node's left edge; the 8px keeps a small breath either side.
   Centring the nodes is what made this necessary: the previous -32px
   stopped at the next column's left edge, which is no longer where the
   node starts. */
.dt-timeline__stage:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(50% + 32px);
  right: calc(-50% + 0px);
  height: 2px;
  background: rgba(22, 23, 24, 0.12);
}

.dt-timeline__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dt-ff);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Centred in its column, with the rail passing behind it. */
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}

/* Takes the slack so the artefacts line up along a common baseline. */
.dt-timeline__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ── Journey: a shared row grid ─────────────────────────────
   The three stages are independent columns, so before this each
   one flowed to its own rhythm: a title that wrapped to two lines
   in one column pushed its service name, description and bullets
   below the other two, and the section read as three lists rather
   than one journey.

   The CTA and the artefact card were already level — the body
   takes the slack and the CTA has margin-top:auto — so what was
   left was the bands above them. Each now has a floor sized to
   the longest wrap it can take, which pins every row to a shared
   baseline whatever the copy does. Minimums, not fixed heights:
   longer copy still grows rather than being clipped. */
.dt-timeline__step {
  font-family: var(--dt-ff);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  min-height: 20px;
}

/* The outcome leads; the service name is secondary to it. */
.dt-timeline__head {
  font-family: var(--dt-ff);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #161718;
  /* The floor already provides the separation; a bottom margin on top
     of it just widens the gap when the title is a single line. */
  margin: 0;
  /* Two lines at 21px/1.25. */
  min-height: 53px;
}

.dt-timeline__svc {
  font-family: var(--dt-ff);
  font-size: 13.5px;
  font-weight: 600;
  /* Neutral Grey is 3.07:1 on the mist ground and fails AA. */
  color: var(--dt-text-body);
  margin: 0 0 16px;
  min-height: 22px;
}

.dt-timeline__desc {
  font-family: var(--dt-ff);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 0;
  /* Centred with everything else in the stage. The column previously
     ran on two axes — a centred header over a left-aligned body — and
     that split, rather than the row baselines, was what made the
     section read as three loose lists. */
  text-align: center;
  /* Four lines at 15.5px/1.6, so the bullet lists start level even
     where one description runs longer than the others. */
  min-height: 100px;
}

.dt-timeline__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* The list is centred as a block, but its items stay left-aligned
     inside it. Centring each line individually staggers the leading
     marks into a staircase, which reads as an accident rather than a
     list — this keeps the marks in a column and still sits the list
     centred in the stage. */
  width: fit-content;
  margin: 0 auto;
  text-align: left;
  /* Three points at 14px/1.45 plus two 7px gaps. */
  min-height: 75px;
}

.dt-timeline__point {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-family: var(--dt-ff);
  font-size: 14px;
  line-height: 1.45;
  color: #161718;
}

.dt-timeline__point-mark {
  font-weight: 700;
  flex-shrink: 0;
}

/* margin-top:auto pulls every CTA down to a common line, so the three sit
   level however differently the proof points wrap above them. */
.dt-timeline__cta {
  align-self: center;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--dt-ff);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* The artefact: a progressive state of the same case file. */
.dt-timeline__mock {
  width: 100%;
  min-height: 148px;
  margin: 22px 0 0;
  background: #ffffff;
  border: 1px solid rgba(22, 23, 24, 0.14);
  box-shadow: 3px 3px 0 rgba(22, 23, 24, 0.05);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.dt-timeline__mock-head {
  height: 24px;
  background: rgba(22, 23, 24, 0.04);
  border-bottom: 1px solid rgba(22, 23, 24, 0.1);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.dt-timeline__mock-title {
  font-family: var(--dt-ff);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--dt-text-body);
  text-transform: uppercase;
}

.dt-timeline__mock-body {
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dt-timeline__row { display: flex; align-items: center; gap: 7px; }
.dt-timeline__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dt-timeline__bar { height: 5px; display: block; }
.dt-timeline__tag { font-size: 6px; font-weight: 700; letter-spacing: 0.03em; }
.dt-timeline__rule { height: 5px; background: #161718; opacity: 0.15; margin-left: 14px; }
.dt-timeline__check { font-size: 8px; color: #161718; opacity: 0.4; flex-shrink: 0; }

.dt-timeline__stamp {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  border: 2.5px solid;
  border-radius: 4px;
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dt-ff);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.15;
}

.dt-timeline__closing {
  font-family: var(--dt-ff);
  font-size: 15.5px;
  font-weight: 600;
  color: #161718;
  text-align: center;
  margin: 40px auto 0;
}

/* Below three-up the left-to-right reading breaks down, so the stages
   become a vertical timeline: rail down the left, node beside each stage. */
@media (max-width: 820px) {
  .dt-timeline { grid-template-columns: 1fr; gap: 0; }

  .dt-timeline__stage {
    text-align: left;
    padding: 0 0 36px 52px;
  }

  .dt-timeline__stage:last-child { padding-bottom: 0; }

  .dt-timeline__stage:not(:last-child)::before {
    left: 17px;
    top: 18px;
    right: auto;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .dt-timeline__node {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    font-size: 12.5px;
    margin: 0;
  }

  /* Nothing to pull down to when the stages are stacked. */
  .dt-timeline__cta { margin-top: 0; }

  .dt-timeline__closing { margin-top: 28px; }
}

/* ============================================================
   Process — five-card variant
   Scoped to .dt-how__grid--five so the four-card
   how-we-work.html section keeps its own auto-fit grid.
   ============================================================ */

.dt-how__grid--five .dt-how__card { padding: 32px 24px; }

@media (min-width: 1200px) {
  .dt-how__grid--five { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .dt-how__grid--five { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 600px) and (max-width: 899px) {
  .dt-how__grid--five { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .dt-how__grid--five { grid-template-columns: 1fr; gap: 0; }
}

/* Fifth accent: the theme's established purple (#5b3fa6, already
   used by the audit cards, callouts and big stats). Card accents
   only appear on hover, so it never sits beside the indigo of 03. */
.dt-how__grid--five .dt-how__card:nth-child(5):hover {
  background: rgba(91, 63, 166, 0.12);
  border-left-color: #5b3fa6;
}

.dt-how__grid--five .dt-how__card:nth-child(5):hover .dt-how__number { color: #5b3fa6; }


/* ============================================================
   Who we work with — fit / not-fit panel
   ============================================================ */

.dt-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  overflow: hidden;
  max-width: 1020px;
  margin: 0 auto;
}

.dt-fit__col { padding: 36px 40px; }
.dt-fit__col--yes { background: #ffffff; }
.dt-fit__col--no  { background: #F4F4F5; border-left: 1px solid #e8e8e9; }

.dt-fit__title {
  font-family: var(--dt-ff);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-text-body);
  margin: 0 0 20px;
}

.dt-fit__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dt-fit__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dt-fit__mark {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.dt-fit__mark--yes { color: #A4063E; }
.dt-fit__mark--no  { color: var(--dt-text-body); }

.dt-fit__text {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.5;
  color: #161718;
}

.dt-fit__col--no .dt-fit__text { color: var(--dt-text-body); }

@media (max-width: 760px) {
  .dt-fit { grid-template-columns: 1fr; }
  .dt-fit__col { padding: 28px 24px; }
  .dt-fit__col--no { border-left: none; border-top: 1px solid #e8e8e9; }
}


/* ============================================================
   Hero — secondary checklist link and its note
   ============================================================ */

.dt-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dt-btn-checklist {
  display: inline-block;
  color: #ffffff !important;
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 15px 4px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.45);
  transition: border-color 0.2s, color 0.2s;
}

.dt-btn-checklist:hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

.dt-hero-note {
  font-family: var(--dt-ff);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  margin: 0 0 40px;
}

@media (max-width: 560px) {
  .dt-hero-actions { gap: 8px; flex-direction: column; }
  .dt-btn-checklist { padding: 8px 4px; }
}


/* ============================================================
   Mobile — page-level responsive trims
   ============================================================ */

@media (max-width: 900px) {
  /* Three columns is too tight below ~900px; go two-up, then one-up. */
  .dt-challenge-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .dt-challenge-grid { grid-template-columns: 1fr !important; }
}

/* Stacked columns: the dividing rule belongs on top, not the left.
   Stacked, 24px of padding and no gap ran the three points together
   into one block of text — the rule was doing all the separating on
   its own. More air either side of it, so each point reads as its
   own item. */
@media (max-width: 640px) {
  .dt-challenge-grid {
    gap: 34px !important;
  }
  .dt-challenge-grid > div {
    border-left: none !important;
    border-top: 1px solid rgba(22, 23, 24, 0.1);
    padding: 34px 0 0 !important;
  }
  .dt-challenge-grid > div:first-child {
    border-top: none;
    padding-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .dt-why-grid { grid-template-columns: 1fr !important; }
  /* One column on a phone regardless of how many cards are filled.
     The two column-count overrides that used to sit here went with
     the switch to flex: the basis and the wrap handle the middle
     widths on their own. */
  .dt-testimonial-grid > .dt-testimonial { flex-basis: 100%; }
}


/* ============================================================
   Mobile refinements
   Everything below is scoped to <= 820px. The laptop rendering
   is unchanged — verified pixel-identical at 900/1280/1440/1920.

   Measured against the previous state at 390x844: the page ran
   12,844px (15.2 phone screens), of which 1,656px was section
   padding, gutters disagreed (Process 20px vs 40px everywhere
   else), four links sat under the 44px touch minimum, and the
   journey artefacts cost 510px while rendering 6-8px labels.
   ============================================================ */

@media (max-width: 820px) {

  /* 1 — The journey artefacts are decorative mock-ups. Their internal
     labels render at 6-8.5px on a phone, so they cost 510px of scroll
     for something nobody can read. */
  .dt-timeline__mock { display: none; }

  /* 2 + 3 — One vertical rhythm and one gutter for every band.
     !important because these sections carry inline padding.
     22px gutters return ~36px of content width per line versus the
     40px the desktop layout used. */
  .dt-sec {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* The hero carries the page, so it keeps a little more room. */
  .dt-sec--hero {
    padding-top: 88px !important;
    padding-bottom: 72px !important;
  }

  /* Inner containers hold the desktop gutter inline; the section owns
     it on mobile, so zero theirs rather than stacking the two. */
  .dt-sec > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4 — Centred copy is fine for a heading or a two-line standfirst.
     These run to six lines on a phone, where a ragged left edge makes
     the eye hunt for the start of each line. Headings stay centred. */
  .dt-body-copy,
  .dt-body-copy p { text-align: left !important; }

  /* 5 — Touch targets. The visible underline must not move, so the hit
     area is grown with a transparent overlay centred on the link rather
     than with padding, which would push the border away from the text. */
  .dt-timeline__body a,
  .dt-link-crimson {
    position: relative;
  }

  .dt-timeline__body a::after,
  .dt-link-crimson::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* The hero's checklist link measured 41px. Here the underline sits
     clear of the text already, so padding is the simpler fix. */
  .dt-btn-checklist { padding: 13px 4px; }

  /* 36px/32px card padding costs 64px of a 390px screen. Scoped to
     .dt-sec so it stays on this page — this file is shared by all
     templates. */
  .dt-sec .dt-card-white,
  .dt-sec .dt-card-mist,
  .dt-sec .dt-testimonial { padding: 24px 20px; }
}


/* ============================================================
   Sticky CTA — mobile only
   The primary action sits at 530px and then does not reappear
   for ~11,000px of scroll. This keeps it reachable in between.
   display:none outside the breakpoint, so the laptop view never
   sees it regardless of the script.
   ============================================================ */

/* The sticky CTA moved to theme-overrides.css: msp-partners.css does
   not include this file, and the bar is now on that page too. Keeping
   the styles here would have rendered it as two unstyled stray links. */

/* ============================================================
   Process header, centred
   .dt-how__header is shared with the how-we-work.html section,
   so this is scoped to .dt-sec (home only) rather than changing
   the component for every template that uses it.
   ============================================================ */

.dt-sec .dt-how__header { text-align: center; }

.dt-sec .dt-how__headline {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   Why Datatechs — editorial
   One outcome panel carrying the payoff, and four numbered
   reasons leading to it. A third / two thirds split on desktop;
   stacked on mobile with the outcome first.
   ============================================================ */

.dt-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
  /* The panel runs the full height of the four rows beside it. */
  align-items: stretch;
}

/* The payoff. It was a solid near-black slab, which out-shouted the
   four reasons it is supposed to conclude. A warm off-white with a
   hairline keeps it clearly a panel and clearly the conclusion,
   without a block of black doing the work. */
.dt-why__outcome {
  background: #FAF8F8;
  border: 1px solid #E4E0E1;
  border-radius: 12px;
  padding: 36px 32px;
  color: #161718;
  /* Content sits centred in the taller panel rather than stranded at the
     top. Sticky is gone — it cannot coexist with a stretched grid item. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dt-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #A4063E;
  color: #ffffff;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.dt-why__label {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 14px;
}

.dt-why__outcome-heading {
  font-family: var(--dt-ff);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 14px;
}

.dt-why__outcome-text {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dt-text-body);
  margin: 0;
}

.dt-why__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #dcdcde;
}

/* One grid for all four rows: a fixed circle column, then the text.
   The heading and its description share a single left edge. */
.dt-why__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid #dcdcde;
}

/* The rule above the figure sits level with the heading's cap height. */
.dt-why__row .dt-why__num { margin-top: -6px; }

/* The numerals follow The Challenge: a large, softly tinted figure
   with a short accent rule above it, rather than an outlined circle.
   Each row takes the next accent in the site's sequence — plum, teal,
   indigo, amber — and that progression is what carries the section now
   the panel beside it is no longer black.

   The figure is aria-hidden and decorative: the heading beside it
   carries the meaning, so the tint can stay light without hiding
   anything from anyone. */
.dt-why__num {
  display: block;
  font-family: var(--dt-ff);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-top: 14px;
  position: relative;
  /* The tint lives in the text colour, not in opacity on the element:
     opacity would fade the accent rule below with it. */
  color: var(--dt-accent-1-faded);
}

/* The short rule above each figure, in the same accent at full strength. */
.dt-why__num::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: #A4063E;
}

.dt-why__row:nth-child(2) .dt-why__num { color: var(--dt-accent-2-faded); }
.dt-why__row:nth-child(2) .dt-why__num::before { background: var(--dt-accent-2-on-dark); }
.dt-why__row:nth-child(3) .dt-why__num { color: var(--dt-accent-3-faded); }
.dt-why__row:nth-child(3) .dt-why__num::before { background: var(--dt-accent-3-on-dark); }
.dt-why__row:nth-child(4) .dt-why__num { color: var(--dt-accent-4-faded); }
.dt-why__row:nth-child(4) .dt-why__num::before { background: #f59e0b; }

.dt-why__row-title {
  font-family: var(--dt-ff);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #161718;
  margin: 0 0 6px;
}

.dt-why__row-text {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 0;
}

/* The emphasis carries the point; the sentence after it explains. */
.dt-why__row-lead {
  font-weight: 700;
  color: #161718;
}

@media (max-width: 900px) {
  .dt-why {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Sticky has nothing to stick to once stacked. */
  .dt-why__outcome { justify-content: flex-start; }
}

@media (max-width: 820px) {
  .dt-why__outcome { padding: 26px 22px; }
  .dt-why__row { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; }
}


/* ============================================================
   Services Hub
   Flagship panel, framework chips and the numbered service
   rows. The alternating row layout itself is .dt-service-row
   in _sections.css, which was already in the theme.
   ============================================================ */

/* The row number, sharing the journey markers' weight so the two
   numbered sequences on the site read as the same device. */
.dt-svc-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #A4063E;
  margin: 0 0 12px;
}

.dt-service-row--dark .dt-svc-num { color: #D2839F; }



/* The side panel keeps its desktop 40/36px padding on a phone, which is
   72px of a 390px screen. Scoped to .dt-sec so the change stays with the
   pages that opt in. */
@media (max-width: 820px) {
  .dt-sec .dt-service-row__visual { padding: 24px 20px; }
  .dt-sec .dt-service-row__visual-item { padding: 11px 14px; }
}


/* ============================================================
   FAQ accordion — details/summary
   Replaces the scripted div accordion. Keyboard operation and
   expanded state come from the browser, several can be open at
   once, and there is no JavaScript to keep in sync.
   ============================================================ */

.dt-acc-list { max-width: 800px; margin: 40px auto 0; display: grid; gap: 10px; text-align: left; }

/* The gap has to survive whatever HubSpot puts between the list and the
   boxes. A module tag renders a widget div, and a rich_text module
   puts its content in a span inside that, so a page keeping all its
   questions in one module has its details two levels down and the
   grid's gap never reaches them. Every level in between carries the
   same grid, which passes the gap through at whatever depth the boxes
   turn up.

   The structural selectors stop at :not(details) so a box that is a
   direct child stays a plain block; the class selector catches a
   rich_text wrapper wherever it sits, in case HubSpot nests one level
   deeper again. */
.dt-acc-list > :not(details),
.dt-acc-list > :not(details) > :not(details),
.dt-acc-list .hs_cos_wrapper_type_rich_text {
  display: grid;
  gap: 10px;
}

/* ── FAQ accordion (shared) ────────────────────────────────
   details/summary: keyboard support and expanded state come from the
   browser, and several can be open at once. Separated cards rather than
   hairline rows so the open one is obvious. */
details.dt-acc {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  transition: border-color 0.18s;
}

details.dt-acc[open] { border-color: #c9c9cb; box-shadow: 0 4px 18px rgba(22,23,24,0.05); }

details.dt-acc > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 16px 22px;
  font-weight: 600;
  font-size: 16px;
  color: #161718;
  line-height: 1.45;
}

details.dt-acc[open] > summary { color: #A4063E; }

.dt-acc__icon {
  flex-shrink: 0;
  position: relative;
  width: 14px;
  height: 14px;
}

/* Plus becomes minus: the horizontal bar stays, the vertical one goes. */
.dt-acc__icon::before,
.dt-acc__icon::after {
  content: '';
  position: absolute;
  background: #A4063E;
  border-radius: 1px;
}

.dt-acc__icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.dt-acc__icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }

details.dt-acc[open] .dt-acc__icon::after { display: none; }

.dt-acc__a {
  padding: 0 22px 20px;
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.75;
  color: var(--dt-text-body);
}

/* Stated on both the container and the paragraph, and kept at the same
   value, because whether the answer renders here depends on markup the
   editor controls: Home and Services Hub wrap their answers in <p>,
   Security Audits does not. Either path now lands on the same size, so
   the rendered answer no longer depends on which one a given module
   used.

   No `max-width` here on purpose: it capped the answer well short of
   the card's actual width, which read as the answer not filling the
   box. The card itself is already bounded by `.dt-acc-list`, so nothing
   here needs its own line-length limit. */
.dt-acc__a p { font-size: 15px; }


/* ============================================================
   Grids that never collapsed
   ------------------------------------------------------------
   Three grids on About were hard-coded multi-column with no
   breakpoint: a 1fr/1.6fr founder block and two repeat(3,1fr)
   rows. At 390px they were being asked to fit three columns and
   an 80px gap into 310px, so the page scrolled sideways to
   602px. Stacking them is the fix; nothing about the desktop
   layout changes.
   ============================================================ */

@media (max-width: 780px) {
  .dt-stack-sm {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* ============================================================
   Motion and anchors — site-wide
   ------------------------------------------------------------
   The header is sticky at 68px on every page, so every anchor
   target needs the same clearance, and smooth scrolling should
   not depend on which page you happen to be on. These lived in
   the audit page's stylesheet while that file only loaded there.
   ============================================================ */

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ============================================================
   Hero alignment — centred everywhere except Home
   ------------------------------------------------------------
   Home keeps its left-aligned hero. Every other page centres,
   which is what the page-class hook is for: one rule in the
   shared stylesheet rather than the same edit repeated across
   seven templates.

   Centring text is only half of it. Anything with a max-width
   still sits hard left unless it is given auto margins, and a
   flex row still packs to the start unless it is told otherwise
   — so both are handled here rather than left to look like the
   rule half-worked.
   ============================================================ */

.body-container:not(.dt-page--home) > section:first-child,
.body-container:not(.dt-page--home) > section:first-child * {
  text-align: center;
}

/* Constrained blocks centre themselves rather than hugging the left. */
.body-container:not(.dt-page--home) > section:first-child h1,
.body-container:not(.dt-page--home) > section:first-child p,
.body-container:not(.dt-page--home) > section:first-child .dt-au-hero,
.body-container:not(.dt-page--home) > section:first-child .dt-msp-hero__inner,
.body-container:not(.dt-page--home) > section:first-child .dt-msp-hero__sub {
  margin-left: auto;
  margin-right: auto;
}

/* Flex rows — eyebrows, button rows, trust chips — pack to the centre.
   Applied to every element rather than a list of classes, because
   several of these heroes build their rows from inline `display:flex`
   with no class to hook. `justify-content` is inert on anything that is
   not a flex or grid container, so this is safe to cast wide and it
   catches the rows a class list would miss. */
.body-container:not(.dt-page--home) > section:first-child * {
  justify-content: center;
}

/* The left-anchored eyebrow hides its right-hand rule, which reads as
   an accident once the text above it is centred. In a centred hero it
   takes the balanced form, with a rule either side — the modifier is
   simply undone rather than a third variant invented. */
.body-container:not(.dt-page--home) > section:first-child .dt-eyebrow-rule--left::after {
  display: block;
}


/* ============================================================
   Shared hero geometry — every page except Home
   ------------------------------------------------------------
   The seven non-Home heroes stood at 680px, which is what kept
   them uniform, but 680 is 80% of an 844px phone before a word
   of the page below appears. They come down together.

   Height and vertical padding are set in one place because they
   are one decision: the height a hero settles at is the floor or
   its own copy plus this padding, whichever is larger, so a
   padding left behind in a template quietly breaks the
   uniformity the floor is there to create. That is exactly what
   used to happen — `padding:110px 40px 100px; min-height:680px`
   was repeated inline in six templates and again in
   msp-partners.css, and msp's taller copy pushed it to 734px on
   a phone while the other six sat at 680. Templates now set only
   their side gutter.

   The desktop padding is chosen so the tallest hero (MSP
   Partners, 496px of copy) lands exactly on the floor rather
   than above it.
   ============================================================ */

.body-container:not(.dt-page--home) > section:first-child {
  min-height: 620px;
  padding-top: 62px;
  padding-bottom: 62px;
}

@media (max-width: 820px) {
  /* `!important` here only because a page-level rule further down the
     cascade sets section padding for the whole page with !important of
     its own; the hero is not that kind of section. */
  .body-container:not(.dt-page--home) > section:first-child {
    min-height: 600px;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ============================================================
   Service sub-page components
   ------------------------------------------------------------
   The five non-audit service pages — professional services,
   managed compliance, IT helpdesk, Power Platform, and Azure and
   cloud infrastructure — share one template,
   templates/service-subpage.html. /audit keeps its own flagship
   template and does not use any of this.

   Only the patterns the library did not already have are defined
   here. The section header, cards, step numerals, checklist rows,
   buttons, eyebrow rules and the closing CTA band are the shared
   components reused as they stand: .dt-section, .dt-card,
   .dt-step-num, .dt-checklist-item, .dt-btn-primary,
   .dt-eyebrow-rule and .dt-cta-section.

   Every grid here stacks to a single column on a phone. The
   pages this template replaces hardcoded `grid-template-columns:
   1fr 1fr` and `1fr 1fr 1fr` with no media query anywhere, so at
   375px the challenge columns, the how-it-works steps, the
   checklist and the who-it-is-for cards all stayed side by side
   and two of them clipped their own text. Each grid below
   therefore carries its own breakpoint, and grid children are
   given `min-width: 0` so a long unbroken word in editor-entered
   copy cannot push a track wider than its share and force the
   page to scroll sideways.
   ============================================================ */

.dt-page--service-subpage {
  /* Editors paste URLs and product names into these modules. Without
     this a single unbreakable string is enough to reintroduce the
     horizontal scroll the breakpoints below exist to prevent.
     `anywhere` rather than `break-word` because only `anywhere` also
     lowers an element's min-content width: a long token inside a flex
     or grid child — the eyebrow label is one — otherwise sets a floor
     the track cannot shrink below, and the page scrolls sideways even
     though the text itself is allowed to break. */
  overflow-wrap: anywhere;
}

/* ── Hero ─────────────────────────────────────────────────── */

.dt-svc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Also the fallback: with no hero image set, this is the whole hero,
     and it reads as a deliberate flat band rather than a gap. */
  background: #161718;
  padding-left: 40px;
  padding-right: 40px;
  /* Vertical padding, min-height and horizontal centring come from the
     shared non-Home hero rules above; templates set only the side
     gutter. */
}

/* The photograph, when the page sets one.

   An <img> rather than a background-image so it can carry a srcset: the
   source files are 1.3-1.6MB, and a background has no way to offer the
   browser a smaller one. The module fills in the widths; this only has
   to make the element behave like a background. */
.dt-svc-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* The 88% scrim, the same one Home, the services hub and the audit
   pages put over their heroes, so these five sit in the same family
   rather than looking like a different site. Kept here rather than in
   the module because it is part of the hero's styling, not the image's,
   and it is harmless with no image: #161718 at 88% over #161718 is
   #161718, which is exactly the fallback. */
.dt-svc-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(22, 23, 24, 0.88), rgba(22, 23, 24, 0.88));
  z-index: 1;
  pointer-events: none;
}

.dt-svc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ── Section header (eyebrow + heading + lead) ────────────── */

.dt-svc-head {
  max-width: 720px;
  margin: 0 0 44px;
}

/* ── The challenge: copy beside a highlighted callout ─────── */

/* The grid is .dt-two-col, not a component of its own. This had been a
   1.05fr / 0.95fr split, which at a 1200px inner width resolved to
   600.594px and 543.391px — numbers that look like an accident because
   the ratio behind them was one. There is no reason for the two columns
   to differ, and .dt-two-col is already the theme's even pair, so the
   split is now that rather than a near-duplicate of it eight pixels
   apart on the gap.

   The eyebrow sits above the grid in the template rather than inside the
   left column. Inside it, the callout's top edge aligned to the eyebrow
   and so started 38px above the heading it sits beside. */

/* The right column: a diagram at the top, the callout pinned to the
   bottom, and whatever slack the page has between the two.

   .dt-two-col aligns its children to `start`, which sizes each column to
   its own content and leaves nothing to push against. Only this column
   stretches to the row, via align-self rather than a modifier on the
   grid — the left column should stay at `start`, and the copy is what
   sets the row height anyway.

   From there `margin-top: auto` on the callout takes all the free space,
   so the callout's bottom sits on the row's bottom whether the copy
   opposite runs to 40px of slack or 200px. It does not depend on the
   visual being filled in: with an empty module the slot is a zero-height
   flex item, the auto margin absorbs the lot, and the callout still
   lands on the bottom.

   Stacked below 900px the column is its own content height, so there is
   no free space, the auto margin resolves to zero and the two simply sit
   one above the other with the gap between them. */

.dt-svc-challenge__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* The floor between visual and callout when a page has no slack. */
  gap: 28px;
}

.dt-svc-challenge__callout-slot { margin-top: auto; }

/* The diagram takes whatever the copy leaves, rather than asserting a
   height of its own.

   The first version let the SVG size itself from its viewBox, which put
   a 3:2 diagram at 379px in a 568px column — more than the whole budget
   on four of the five pages, so the right column took the row and the
   bottom-align rule had nothing to push against. Picking a ratio to fit
   would only have held until someone edited a paragraph. `flex: 1 1 0`
   sidesteps the arithmetic: the copy sets the row height on every page,
   always, and the diagram gets the remainder.

   The floor is for the one case that inverts — copy short enough that
   the remainder collapses. There the diagram wins and extends the row,
   which is the right way round: a legible diagram beats a flush callout.

   Scaling inside that box is the SVG's own preserveAspectRatio, not
   `object-fit`, which does nothing to an inline <svg> — it is not a
   replaced element. The default is `xMidYMid meet`, so it fits and
   centres without being asked. `object-fit` is kept for the <img> case,
   where it does apply. */
.dt-svc-challenge__visual { flex: 1 1 0; }

/* The floor sits on the drawing, not on the slot, so it only applies when
   there is a drawing. On the slot it would reserve 140px of nothing for a
   page that has not set a diagram, push the row past the copy and undo the
   bottom alignment; a flex item's automatic minimum size picks this up from
   the child either way. */
.dt-svc-challenge__visual svg,
.dt-svc-challenge__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  max-width: 100%;
  object-fit: contain;
}

/* Stacked, there is no leftover space to take: the column is its own
   content height, so `flex: 1 1 0` would resolve the diagram to the
   floor and letterbox it inside a 140px box. Below the breakpoint it
   goes back to sizing from its own viewBox and filling the column's
   width, which is what a phone wants. */
@media (max-width: 900px) {
  .dt-svc-challenge__visual { flex: 0 0 auto; }
  .dt-svc-challenge__visual svg,
  .dt-svc-challenge__visual img { height: auto; min-height: 0; }
}

.dt-svc-challenge__body p {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0 0 18px;
}

.dt-svc-challenge__body p:last-child { margin-bottom: 0; }

.dt-svc-callout {
  background: #F4F4F5;
  border-left: 3px solid #A4063E;
  border-radius: 0 10px 10px 0;
  padding: 28px 30px;
  font-family: var(--dt-ff);
}

.dt-svc-callout__title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #161718;
  margin: 0 0 10px;
}

.dt-svc-callout p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 12px;
}

.dt-svc-callout p:last-child { margin-bottom: 0; }

/* ── How it works: three numbered steps ───────────────────── */

.dt-svc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.dt-svc-step {
  min-width: 0;
  border-top: 2px solid rgba(22, 23, 24, 0.1);
  padding-top: 22px;
  font-family: var(--dt-ff);
}

/* The shared numeral, one size down: at 56px three of them in a row
   crowd the titles underneath them.

   Colour runs plum, teal, indigo, the same sequence as Home's journey
   timeline. Three identical plum numerals made this page read as one
   note repeated; the sequence is what the rest of the site uses to say
   "these are ordered steps".

   The weight stays where it was. .dt-step-num bakes its 35% into the
   colour, which cannot carry a token, so the alpha moves to `opacity`
   and each accent keeps the same ghosted presence. The numerals are
   aria-hidden in the template — decorative reinforcement of an order
   the reading order already gives, exactly as Home marks its own. */
.dt-svc-step .dt-step-num {
  font-size: 44px;
  margin: 0 0 14px;
  color: var(--dt-accent-1);
  opacity: 0.35;
}

.dt-svc-step:nth-child(2) .dt-step-num { color: var(--dt-accent-2); }
.dt-svc-step:nth-child(3) .dt-step-num { color: var(--dt-accent-3); }

.dt-svc-step__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #161718;
  margin: 0 0 10px;
}

.dt-svc-step__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}

/* ── What is included: checklist grid ─────────────────────── */

/* One rich text module holds the whole list, so the number of items
   varies per service rather than the template carrying a fixed set of
   slots that some pages would leave empty. */
.dt-svc-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dt-svc-checklist > li { min-width: 0; }

.dt-svc-checklist__icon {
  flex-shrink: 0;
  margin-top: 4px;
}

.dt-svc-checklist__text {
  font-family: var(--dt-ff);
  font-size: 14.5px;
  line-height: 1.65;
  color: #161718;
}

/* ── Who it is for: three cards ───────────────────────────── */

.dt-svc-who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dt-svc-who > * { min-width: 0; }

/* Deliberately not .dt-card. That component carries a hover state that
   inverts the whole card to near-black, which belongs to the cards that
   are links — a services-hub tile the visitor can click. These three are
   static copy, so inverting them under the cursor reads as a broken
   link. The top rule, radius and border are the same so they still sit
   in the same family. */
.dt-svc-who__card {
  background: #ffffff;
  border: 1.5px solid #e8e8e9;
  border-top: 3px solid var(--dt-accent-1);
  border-radius: 12px;
  padding: 28px 30px;
  font-family: var(--dt-ff);
}

/* Same sequence as the steps above, for the same reason: three identical
   plum bars read as one bar drawn three times. */
.dt-svc-who__card:nth-child(2) { border-top-color: var(--dt-accent-2); }
.dt-svc-who__card:nth-child(3) { border-top-color: var(--dt-accent-3); }

.dt-svc-who__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #161718;
  margin: 0 0 10px;
}

.dt-svc-who__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}

/* ── Pricing ──────────────────────────────────────────────── */

.dt-svc-pricing {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.dt-svc-pricing__body p {
  font-family: var(--dt-ff);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
}

.dt-svc-pricing__body p:last-child { margin-bottom: 32px; }

/* ── Related services ─────────────────────────────────────── */

.dt-svc-related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dt-svc-related > * { min-width: 0; }

.dt-svc-related__card {
  background: #ffffff;
  border: 1.5px solid #e8e8e9;
  border-radius: 12px;
  padding: 28px 30px;
  font-family: var(--dt-ff);
  transition: border-color 0.22s;
}

.dt-svc-related__card:hover { border-color: #A4063E; }

.dt-svc-related__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #161718;
  margin: 0 0 10px;
}

.dt-svc-related__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 18px;
}

.dt-svc-related__link {
  font-weight: 600;
  font-size: 13.5px;
  color: #A4063E;
  text-decoration: none;
}

.dt-svc-related__link:hover { color: #87052f; }

/* ── Breakpoints ──────────────────────────────────────────── */

/* Tablet: the three-across grids drop to two, matching .dt-three-col.
   The challenge pair stacks at the same width, which .dt-two-col already
   does for itself. */
@media (max-width: 900px) {
  .dt-svc-steps     { grid-template-columns: 1fr; gap: 28px; }
  .dt-svc-who       { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: everything is a single column. */
@media (max-width: 767px) {
  .dt-svc-hero      { padding-left: 20px; padding-right: 20px; }
  .dt-svc-head      { margin-bottom: 32px; }
  .dt-svc-checklist { grid-template-columns: 1fr; }
  .dt-svc-related   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dt-svc-who { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .dt-svc-callout        { padding: 22px 20px; }
  .dt-svc-who__card      { padding: 24px 22px; }
  .dt-svc-related__card  { padding: 24px 22px; }
  .dt-svc-step .dt-step-num { font-size: 38px; }
}
/* ============================================================
   Security Audits — /audit

   Loads the shared system first, exactly as Home, About, Contact
   and Services Hub do, then adds only what this page needs.
   Built from the existing tokens: #A4063E plum, #161718 near-black,
   #F4F4F5 mist, --dt-text-body for copy, #e8e8e9 hairline, Aptos stack.

   The page is organised around one decision, so the visual weight
   sits on the guided selector. Everything after it is reference
   material for people who would rather browse than be asked.
   ============================================================ */



/* --- Muted body colour -----------------------------------------------
   This page used to carry its own grey, var(--dt-text-body), because the theme's
   #8B8C8C is 3.37:1 on white and 3.07:1 on #F4F4F5 and fails WCAG AA
   for body text. The site-wide decision that was deferred here has since
   been made: --dt-text-body is the one body-copy colour, and at 5.30:1
   and 4.82:1 it is a shade better on both grounds than the local value
   it replaces. The page keeps no private grey. */


/* --- Module wrappers -------------------------------------------------
   HubSpot wraps every module in a div. An earlier version of this page
   flattened that div with `display: contents` so the element inside
   became the grid or flex item. That turned out to be a bet on
   behaviour we do not control: on the live page the flattening did not
   apply, the card gaps stopped reaching inside a module, and a negative
   margin meant to group a label with its value overlapped them instead.

   So the wrapper is now left alone and treated as what it is — a real
   box, one per module, exactly as Home and Services Hub treat it. Where
   a flex or grid parent needs a single child per module, the template
   provides an explicit container rather than relying on the wrapper
   vanishing. One deterministic model, and nothing to get wrong. */


/* Smooth scrolling and the anchor offset moved to the shared library:
   they were never page concerns — the sticky header is on every page —
   and an unscoped `html` rule has no business in a page's section of a
   shared stylesheet. */

@media (prefers-reduced-motion: reduce) {
  .dt-cmp,
  .dt-au-path__step { transition: none; }
}


/* --- Hero -------------------------------------------------------------
   Single column. The measure is set on the copy itself rather than by a
   grid track, so the headline breaks on its own terms. */
.dt-au-hero { max-width: 780px; }
.dt-au-hero .dt-h1-hero { margin-bottom: 20px; }
.dt-au-hero .dt-body-lg { max-width: 56ch; }

.dt-au-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}

.dt-au-hero__actions .dt-btn-primary,
.dt-au-hero__actions .dt-btn-ghost-light { white-space: nowrap; }


/* ============================================================
   Guided audit selector
   Radio inputs in fieldsets, one question shown at a time. The
   markup is complete and semantic before JavaScript touches it:
   with no script, every question and every choice is still
   readable and operable, and the page degrades to a plain form
   rather than an empty box.
   ============================================================ */

/* theme-overrides.css strips every non-HubSpot form back to a bare box
   with `form:not(.hs-form)`, which outranks a single class. The extra
   .body-container qualifier wins it back without !important.

   That file also gives every button `display: inline-block`, which beats
   the user-agent rule behind the `hidden` attribute — so the progress
   controls would stay on screen after script hid them. Scoped to this
   component so it cannot reach a HubSpot form or the theme's own buttons. */
.dt-sel [hidden] { display: none !important; }

.body-container .dt-sel {
  max-width: 860px;
  margin: 44px auto 0;
  background: #ffffff;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  padding: 40px 44px 36px;
  font-family: var(--dt-ff);
}

.dt-sel__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececed;
  margin-bottom: 28px;
}

.dt-sel__progress {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
}

.dt-sel__back,
.dt-sel__restart {
  background: none;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dt-text-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
}

.dt-sel__back:hover,
.dt-sel__restart:hover { color: #A4063E; }

.dt-sel__back:focus-visible,
.dt-sel__restart:focus-visible { outline: 2px solid #A4063E; outline-offset: 3px; }

.dt-sel__step { border: 0; margin: 0; padding: 0; min-width: 0; }

.dt-sel__q {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #161718;
  padding: 0;
  margin: 0 0 8px;
}

.dt-sel__why {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 0 0 26px;
  max-width: 62ch;
}

.dt-sel__options { display: grid; gap: 12px; }

/* The whole option is the control: the label wraps the input, so the
   click target is the full card and the accessible name is the text. */
.dt-sel__opt {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 22px;
  background: #ffffff;
  border: 1.5px solid #e4e4e5;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dt-sel__opt:hover { border-color: #c9a3b3; background: #fdfbfc; }

.dt-sel__opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 2px solid #b9b9bc;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
}

.dt-sel__opt input[type='checkbox'] { border-radius: 5px; }

.dt-sel__opt input:checked {
  border-color: #A4063E;
  /* A filled centre, so the selected state is a shape change and not
     only a colour change. */
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 20px #A4063E;
}

.dt-sel__opt input[type='checkbox']:checked {
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 20px #A4063E;
}

.dt-sel__opt:has(input:checked) {
  border-color: #A4063E;
  background: #fdf5f8;
}

.dt-sel__opt:has(input:focus-visible) {
  outline: 2px solid #A4063E;
  outline-offset: 2px;
}

/* Fallback for browsers without :has() — the outline still shows. */
.dt-sel__opt input:focus-visible { outline: 2px solid #A4063E; outline-offset: 3px; }

.dt-sel__opt-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #161718;
  margin-bottom: 4px;
}

.dt-sel__opt-note {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dt-text-body);
}

.dt-sel__next {
  margin-top: 24px;
  display: none;
}

.dt-sel__hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dt-text-body);
}


/* --- Result ---------------------------------------------------------- */
.dt-sel__result { display: none; }

.dt-sel__result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 8px;
}

.dt-sel__result-name {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #161718;
  margin: 0 0 24px;
}

/* When a level is shown it belongs with the name, so it tucks back up
   under it rather than adding a second gap. */
.dt-sel__result-name + .dt-sel__result-level { margin-top: -18px; }

.dt-sel__result-level {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #A4063E;
  background: #F7ECF0;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 22px;
}

.dt-sel__block { margin: 0 0 22px; }

.dt-sel__block h4 {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #161718;
  margin: 0 0 8px;
}

.dt-sel__block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
  max-width: 66ch;
}

.dt-sel__block ul { list-style: none; margin: 0; padding: 0; }

.dt-sel__block li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #161718;
  margin-bottom: 8px;
}

.dt-sel__block li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #A4063E;
  border-bottom: 2px solid #A4063E;
  transform: rotate(-45deg);
}

.dt-sel__caveat {
  display: flex;
  gap: 12px;
  background: #F4F4F5;
  border-left: 3px solid #A4063E;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #161718;
  margin: 0 0 26px;
}

.dt-sel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #ececed;
}

.dt-sel__confirm {
  font-size: 13px;
  color: var(--dt-text-body);
  flex-basis: 100%;
  margin: 0;
}

/* Nothing leaves the browser until this link is followed. */
.dt-sel__cta { flex-shrink: 0; }


/* --- Glossary --------------------------------------------------------- */
.dt-gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 32px; }


/* --- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .dt-sel { padding: 30px 24px 28px; }
  .dt-gloss { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .dt-sel { padding: 24px 18px 22px; border-radius: 12px; }
  .dt-sel__opt { padding: 16px 16px; gap: 12px; }
  .dt-sel__actions .dt-btn-primary { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-sel__opt { transition: none; }
}


/* --- Compare the audits ----------------------------------------------
   Three articles, not three identical cards: each one is a block of
   plain-English answers with the technical scope folded away behind a
   disclosure, so the comparison stays readable at a glance. */
.dt-cmps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 42px;
}

.dt-cmp {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 30px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-top: 3px solid #A4063E;
  border-radius: 4px 4px 12px 12px;
  transition: box-shadow 0.18s;
}

.dt-cmp:hover { box-shadow: 0 8px 26px rgba(22,23,24,0.07); }

.dt-cmp__eyebrow {
  display: block;
  font-family: var(--dt-ff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #A4063E;
  margin-bottom: 10px;
}

.dt-cmp__head {
  font-family: var(--dt-ff);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 8px;
}

.dt-cmp__formal {
  font-family: var(--dt-ff);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dt-text-body);
  margin: 0;
}

/* Every module here sits in its own .dt-cmp__group box, so the card's
   gap applies between the groups and never reaches inside a module.
   That is the whole point: whether HubSpot's wrapper is flattened by
   `display: contents` or left as a block, there is exactly one box per
   module in the card's layout, and the result is identical either way.
   An earlier version leaned on the gap reaching the labels and pulled
   the values back up with a negative margin — which overlapped them on
   the live site, where the gap does not reach that far. */
.dt-cmp__group { display: block; }

.dt-cmp__k {
  font-family: var(--dt-ff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #161718;
  margin: 18px 0 6px;
}

/* First label in a group needs no lead-in; the group gap provides it.
   Safe as a positional rule because the group box is template markup,
   so the label is its module's first painted child in either tree. */
.dt-cmp__group > * > .dt-cmp__k:first-child,
.dt-cmp__group > .dt-cmp__k:first-child { margin-top: 0; }

.dt-cmp__v {
  font-family: var(--dt-ff);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 0;
}

.dt-cmp__levels {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--dt-ff);
}

.dt-cmp__levels li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #161718;
  margin-bottom: 8px;
}

.dt-cmp__levels li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A4063E;
}

/* The scope disclosure sits flush in the card and pushes the link to
   the bottom, so the three cards line their CTAs up. */
.dt-cmp__scope { margin-top: auto; }

.dt-cmp__scope > summary { min-height: 48px; padding: 12px 16px; font-size: 13.5px; }

.dt-cmp__scopelist { list-style: none; margin: 0; padding: 0; }

.dt-cmp__scopelist li {
  position: relative;
  padding-left: 16px;
  font-family: var(--dt-ff);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin-bottom: 7px;
}

.dt-cmp__scopelist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(164,6,62,0.55);
}


/* --- Benchmark levels: a cumulative stack ----------------------------
   Two tiers, Level 2 sitting on the Level 1 baseline, with a bracket
   beside the baseline alone and a second spanning both. The tiers are
   equal and visibly schematic on purpose: we hold no control counts, so
   nothing here may imply a measured quantity. The containment is also
   stated in the copy, so it does not live only in the graphic. */
.dt-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 0 20px;
  margin-top: 36px;
}

.dt-stack__tiers { display: grid; gap: 4px; }

.dt-stack__tier {
  padding: 28px 32px;
  border-radius: 12px;
  border-left: 4px solid #A4063E;
}

/* The addition reads as the lighter layer sitting on the baseline. */
.dt-stack__tier--two {
  background: #FBF3F6;
  border-left-color: #D2839F;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.dt-stack__tier--one {
  background: #F4F4F5;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.dt-stack__tag {
  display: block;
  font-family: var(--dt-ff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #87052f;
  margin-bottom: 12px;
}

.dt-stack__tier--two .dt-stack__tag { color: #A4063E; }

.dt-stack__head {
  font-family: var(--dt-ff);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 10px;
}

.dt-stack__copy {
  font-family: var(--dt-ff);
  font-size: 15px;
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}

/* The brackets. Level 2 spans both tiers, Level 1 only the lower one,
   and they sit at different depths so the spanning one is visibly
   outboard of the one it contains. Drawn absolutely against the full
   height of the stack — sharing a row grid made them overlap, which
   read as one bracket rather than two nested. */
.dt-stack__scale { position: relative; }

.dt-stack__brace { position: absolute; top: 0; bottom: 0; }

.dt-stack__brace-line {
  position: absolute;
  width: 9px;
  border: 2px solid #c9c9cb;
  border-left: 0;
  border-radius: 0 7px 7px 0;
}

.dt-stack__brace-label {
  position: absolute;
  font-family: var(--dt-ff);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--dt-text-body);
}

/* Inner: the baseline alone, the lower half of the stack. */
.dt-stack__brace--one .dt-stack__brace-line { left: 0; top: calc(50% + 2px); bottom: 4px; }
.dt-stack__brace--one .dt-stack__brace-label { left: 15px; top: 75%; transform: translateY(-50%); }

/* Outer: the whole stack, set further out so the nesting is legible. */
.dt-stack__brace--two .dt-stack__brace-line { left: 74px; top: 4px; bottom: 4px; border-color: #A4063E; }
.dt-stack__brace--two .dt-stack__brace-label { left: 89px; top: 50%; transform: translateY(-50%); color: #A4063E; }


/* --- Journey timeline, borrowed from _dt-components.css ----------------------
   Neutral Grey fails AA on this page's mist background. The mock title is
   an infographic label rather than body copy, so it keeps a local value
   rather than moving onto --dt-text-body. */
.dt-timeline--lg .dt-timeline__mock-title { color: #5F6061; font-size: 10px; }


/* --- Step outputs -----------------------------------------------------
   One infographic per stage, each showing that stage's actual output
   rather than three copies of the same placeholder bars. Accents follow
   Home's challenge section: 01 plum, 02 teal, 03 indigo.

   These are the bright hues (the --on-dark variants), used on fills and
   rules only. Wherever the same colour lands on text the darkened
   variant is used instead, since the bright teal (3.9:1) and indigo
   (4.4:1) both fail AA at small sizes on a light ground. */
.dt-mock--one   { --dt-step: #A4063E; --dt-step-soft: rgba(164,6,62,0.10); }
.dt-mock--two   { --dt-step: var(--dt-accent-2-on-dark); --dt-step-soft: rgba(13,148,136,0.10); }
.dt-mock--three { --dt-step: var(--dt-accent-3-on-dark); --dt-step-soft: rgba(99,102,241,0.10); }

.dt-mock { font-family: var(--dt-ff); }

/* The three outputs have different natural heights, and the stage bodies
   above them differ too, so without this the cards bottom-align and their
   tops stagger. A shared floor lines all three up — sized to the tallest
   of the three, the converging-paths one, so none of them overruns it. */
.dt-timeline--lg .dt-timeline__mock-body { min-height: 202px; }

/* 01 — three routes converging on one recommendation. */
.dt-mock__routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.dt-mock__chip {
  display: block;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--dt-step-soft);
  border: 1px solid rgba(22,23,24,0.06);
  font-size: 11.5px;
  font-weight: 600;
  color: #161718;
}

.dt-mock__converge {
  display: block;
  width: 0;
  height: 14px;
  margin: 5px 0 5px 22px;
  border-left: 2px solid var(--dt-step);
  opacity: 0.55;
}

.dt-mock__out {
  margin: 0;
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--dt-step);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
}

/* 02 — the written scope: named systems, then the fee ruled off. */
.dt-mock__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.dt-mock__lines li {
  position: relative;
  padding-left: 20px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #161718;
}

.dt-mock__lines li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--dt-step);
  border-bottom: 2px solid var(--dt-step);
  transform: rotate(-45deg);
}

.dt-mock__fee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid #e8e8e9;
  font-size: 11.5px;
  color: var(--dt-text-body);
}

.dt-mock__fee-val { font-weight: 700; color: var(--dt-accent-2); }

/* 03 — findings by rank. Order only: no counts, no magnitudes. */
.dt-mock__rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: none; }

.dt-mock__rank li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: #161718;
}

/* A severity ramp made of fill weight rather than hue alone: solid, then
   tint, then neutral. White on the mid pink and on grey came out at
   4.22:1 and 3.39:1 at this size, so those two carry dark text on a
   light ground instead — which also reads as less urgent, which is the
   point. */
.dt-mock__sev {
  flex-shrink: 0;
  min-width: 54px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.dt-mock__sev--1 { background: #A4063E; color: #ffffff; }
.dt-mock__sev--2 { background: #F7E3EB; color: #87052f; }
.dt-mock__sev--3 { background: #ECECED; color: #56575A; }


/* --- What you receive ------------------------------------------------ */
.dt-au-deliver {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
  margin-top: 42px;
}

.dt-au-doc {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 14px;
  padding: 26px 28px;
  font-family: var(--dt-ff);
}

.dt-au-doc__title {
  font-size: 13px;
  font-weight: 700;
  color: #161718;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e8e9;
  margin-bottom: 16px;
}

.dt-au-doc__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--dt-text-body);
}

.dt-au-doc__rule {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #ececed;
}

.dt-au-doc__rule--a { max-width: 62%; background: #A4063E; }
.dt-au-doc__rule--b { max-width: 44%; background: #C4567E; }
.dt-au-doc__rule--c { max-width: 74%; background: #ddd8da; }

.dt-au-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Cards, with a hover kept deliberately quiet. These are not links, so
   the state must not promise a click that is not there. Behind a hover
   query so a touch device cannot strand itself in the hovered state. */
.dt-au-group {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

@media (hover: hover) {
  .dt-au-group { transition: border-color 0.18s, background 0.18s; }
  .dt-au-group:hover { border-color: #c9c9cb; background: #FAFAFB; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-au-group { transition: none; }
}

.dt-au-group__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #161718;
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 3px solid #A4063E;
}

.dt-au-group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 17px;
}

.dt-au-group li {
  position: relative;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin-bottom: 7px;
}

.dt-au-group li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(164,6,62,0.5);
}


/* --- Assurance strip -------------------------------------------------
   Four commitments on one row, evenly spread. Ticks are drawn in CSS so
   the module value stays small enough for this theme. */
.dt-au-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 48px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid #dadadc;
}

.dt-au-strip li {
  position: relative;
  padding-left: 26px;
  font-family: var(--dt-ff);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #161718;
  text-align: left;
}

.dt-au-strip li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #A4063E;
  border-bottom: 2px solid #A4063E;
  transform: rotate(-45deg);
}


/* --- Who it is for ----------------------------------------------------
   Four independent triggers, so no rules, no numbers and no boxes. The
   page already carries two card grids; a third would flatten all three.
   Each module sits in its own .dt-trigger__body cell, so the layout does
   not depend on whether HubSpot's wrapper is flattened. */
.dt-triggers {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  margin: 40px 0 0;
  padding: 0;
}

.dt-trigger { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; }

.dt-trigger__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e4e4e5;
  color: #A4063E;
}

.dt-trigger__body { min-width: 0; }

.dt-trigger__title {
  font-family: var(--dt-ff);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 8px;
}

.dt-trigger__text {
  font-family: var(--dt-ff);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dt-text-body);
  margin: 0;
}


/* --- What happens next ------------------------------------------------
   A progression, not a menu: stage one is where the audit leaves you,
   the other two are optional and marked as such. */
.dt-au-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.dt-au-path__step {
  position: relative;
  padding-top: 30px;
}

.dt-au-path__step::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 7px;
  left: 20px;
  right: -34px;
  height: 2px;
  background: #e8e8e9;
}

.dt-au-path__step:last-child::after { display: none; }

.dt-au-path__mark {
  position: absolute;
  /* Above the connector: the line starts at the dot's own centre, so
     without this it is drawn across the dot and bites a piece out. */
  z-index: 1;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c9c9cb;
  background: #ffffff;
}

.dt-au-path__step--done .dt-au-path__mark { border-color: #A4063E; background: #A4063E; }

/* Centred variant: the dots sit on the connector above their column, the
   same arrangement as the 01/02/03 timeline, so the page's two
   progressions read as one system rather than two inventions. */
.dt-au-path--centred .dt-au-path__step { padding-top: 34px; text-align: center; }
.dt-au-path--centred .dt-au-path__mark { left: 50%; transform: translateX(-50%); }
.dt-au-path--centred .dt-au-path__step::after { left: 50%; right: -50%; }
.dt-au-path--centred .dt-au-path__note { max-width: 32ch; margin-left: auto; margin-right: auto; }

/* Stages two and three take the second and third accents. The dot gets
   the bright hue — it is a graphic — while the 10.5px uppercase label
   takes the darkened variant, which passes AA where the bright one
   (var(--dt-accent-2-on-dark) at 3.9:1, var(--dt-accent-3-on-dark) at 4.4:1) would not. */
.dt-au-path__step--two .dt-au-path__mark { border-color: var(--dt-accent-2-on-dark); background: var(--dt-accent-2-on-dark); }
.dt-au-path__step--two .dt-au-path__stage { color: var(--dt-accent-2); }
.dt-au-path__step--three .dt-au-path__mark { border-color: var(--dt-accent-3-on-dark); background: var(--dt-accent-3-on-dark); }
.dt-au-path__step--three .dt-au-path__stage { color: var(--dt-accent-3); }

.dt-au-path__stage {
  display: block;
  font-family: var(--dt-ff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dt-text-body);
  margin-bottom: 8px;
}

.dt-au-path__step--done .dt-au-path__stage { color: #A4063E; }

.dt-au-path__name {
  display: block;
  font-family: var(--dt-ff);
  font-size: 18px;
  font-weight: 700;
  color: #161718;
  margin-bottom: 8px;
}

/* The note's bottom margin would collapse out of the module wrapper, so
   the spacing before the link lives on the link instead, where it holds
   regardless of how the wrapper is rendered. */
.dt-au-path__note {
  display: block;
  font-family: var(--dt-ff);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  max-width: 34ch;
  margin-bottom: 0;
}

.dt-au-path__step > .dt-link-crimson { display: inline-flex; margin-top: 14px; }


/* --- Closing CTA ------------------------------------------------------
   The band is white so it does not stack against the near-black footer,
   matching Home. The colours in these three modules are inline styles,
   which outrank any stylesheet rule — and a field already edited in
   HubSpot keeps its old white text regardless of what the template says.
   This is the one place !important earns its keep: it guarantees the
   copy stays legible even on a field we can no longer reach. */
.dt-sec--cta .dt-h2 { color: #161718 !important; }
.dt-sec--cta .dt-body-lg { color: var(--dt-text-body) !important; }
.dt-sec--cta p:not(.dt-body-lg) { color: var(--dt-text-body) !important; }


/* --- Tablet ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .dt-au-hero .dt-body-lg { max-width: 56ch; }
  .dt-cmps { grid-template-columns: 1fr; }
  .dt-au-deliver { grid-template-columns: 1fr; gap: 36px; }
  .dt-stack { grid-template-columns: 1fr; }
  .dt-stack__scale { display: none; }
}

@media (max-width: 900px) {
  .dt-triggers { grid-template-columns: 1fr; gap: 30px; }
  .dt-au-path { grid-template-columns: 1fr; gap: 0; }
  .dt-au-path--centred .dt-au-path__step { text-align: left; padding-top: 0; }
  .dt-au-path--centred .dt-au-path__mark { left: 0; transform: none; }
  .dt-au-path--centred .dt-au-path__step::after { left: 7px; right: auto; }
  .dt-au-path--centred .dt-au-path__note { max-width: none; margin-left: 0; margin-right: 0; }
  .dt-au-path__step { padding: 0 0 30px 38px; }
  .dt-au-path__step::after { top: 22px; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .dt-au-path__step:last-child { padding-bottom: 0; }
  .dt-au-path__mark { top: 3px; }
  .dt-au-path__note { max-width: none; }
}


/* --- Phone ------------------------------------------------------------
   Tap targets stay at least 44px, and the button rows become full-width
   blocks rather than wrapping mid-label. */
@media (max-width: 520px) {
  .dt-cmp { padding: 26px 22px; }
  .dt-stack__tier { padding: 24px 22px; }
  .dt-au-hero__actions { display: grid; gap: 12px; }
  .dt-au-hero__actions .dt-btn-primary,
  .dt-au-hero__actions .dt-btn-ghost-light {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .dt-au-strip { grid-template-columns: 1fr; gap: 12px; }
  .dt-au-groups { grid-template-columns: 1fr; gap: 24px; }
  .dt-link-crimson { display: inline-flex; align-items: center; min-height: 44px; }
}
/* The rest of the site -- Home, About, Contact -- loads _dt-components.css,
   which carries the shared section rhythm, button and hover behaviour,
   eyebrow rules and mobile rules. This template loaded only its own
   file, so its sections behaved differently from every other page.
   Including it here puts Services Hub on the same footing; the rules
   below then override where this template genuinely differs. */

/* ============================================================
   Services Hub — page styles
   Ported verbatim from the previous /services page so the
   template reproduces it exactly. The page's
   .legal-consent-container suppression is deliberately NOT
   carried over: PR #2 removed that same rule from
   theme-overrides so the HubSpot form editor stays
   authoritative over consent text.
   ============================================================ */

/* The stacking breakpoint for these grids is at the end of this file,
   after the rules it has to override. */
.dt-sv-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(22,23,24,0.3);border-radius:6px;padding:8px 18px;font-family:var(--dt-ff);font-size:var(--dt-fs-small);font-weight:600;color:#161718!important;text-decoration:none!important;transition:all 0.15s;}
.dt-sv-btn:hover{background:#161718!important;color:#fff!important;border-color:#161718!important;text-decoration:none!important;}


/* ============================================================
   Mobile
   The ported markup carries desktop values inline: 40px side
   gutters and up to 140px of vertical padding, which is 80px of
   a 390px screen given to margin. Everything here is scoped to
   <= 820px so the desktop rendering is untouched.
   ============================================================ */

@media (max-width: 820px) {

  /* Scoped to this page. This exists because the markup ported from
     the old /services page carries big desktop paddings inline; the
     other templates set their own mobile padding and must not be
     overridden by a rule written for this one. The hero is excluded:
     its padding is part of the shared hero geometry in _dt-components.css,
     which is what keeps all seven non-Home heroes the same height. */
  .dt-page--services-hub > section:not(:first-child) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Outline buttons measured 39px, under the 44px touch minimum.
     Padding rather than an overlay: this button has no underline to
     hold in place, so the box can simply grow. */
  .dt-sv-btn {
    min-height: 44px;
    padding: 11px 18px;
    box-sizing: border-box;
  }

}



/* The six IT Helpdesk tiles stay three-across even on the narrowest phones,
   where each tile's icon and label need more than a third of 320px. */
@media (max-width: 420px) {
  .dt-sv-tiles { grid-template-columns: repeat(2, 1fr) !important; }
}

/* There is deliberately no rule here flattening the module wrapper.

   HubSpot wraps every module in a div, and this page used to hide that
   div with `display: contents` so the element inside it became the grid
   or flex item. That worked, but it made the layout depend on a wrapper
   behaving as though it were not there — the same bet that shipped
   overlapping compare cards on the audit page. Thirty-eight modules in
   the service sections held a bare <span> inside a flex row owned by
   the template, so the wrapper, not the span, was the flex item.

   Each of those modules now carries a whole element rather than a
   fragment of one, so the wrapper is an ordinary block around an
   ordinary block and changes nothing. Nothing on this page reads
   differently with the wrapper present or absent. */


/* ============================================================
   Two-column service sections
   ------------------------------------------------------------
   Three of the six sections had the supporting graphic as the
   first cell, so the desktop layout alternated nicely but the
   mobile stack put the panel above the heading — the reader met
   the infographic before knowing which service it belonged to,
   and a screen reader read it in that order too.

   The text cell is now first in the markup everywhere, which is
   the reading order. The alternation is restored with `order` at
   desktop width only, where the two cells sit side by side and
   sequence does not carry meaning.
   ============================================================ */

@media (min-width: 901px) {
  .dt-sv-grid--visual-left > :first-child { order: 2; }
  .dt-sv-grid--visual-left > :last-child  { order: 1; }
}


/* ============================================================
   Type scale — in line with Home
   ------------------------------------------------------------
   This page shares Home's stylesheet but never used its type
   classes: 103 inline font-sizes against Home's 18, and none of
   .dt-h2 / .dt-body / .dt-body-lg. It had restated the whole
   scale inline, smaller — section headings capped at 27px where
   Home's reach 42px, body copy at 14.5-15.5px where Home's is
   15-17px. That is why it read smaller, and why it could not
   follow Home when Home changed.

   The template defaults now carry the corrected sizes. This
   block is the safety net: an inline style outranks a
   stylesheet, and a field already edited in the HubSpot editor
   keeps its own copy of the old inline value, out of the
   template's reach. Scoped to this page's sections and to the
   narrative roles only — badges, tile captions and eyebrows are
   deliberately small and stay where they are.
   ============================================================ */

/* Scoped to this page's own grid. An earlier version also carried a
   bare `section > div > h2`, which was harmless while this file only
   loaded on Services Hub — but every page now loads one stylesheet, and
   that selector was reaching every heading on the site and forcing them
   all to 42px. A rule in a shared stylesheet has to say where it
   applies. */
.dt-sv-grid h2 { font-size: clamp(26px, 3.5vw, 42px) !important; line-height: 1.1 !important; }

/* No paragraph rule here on purpose. HubSpot's module wrapper sits
   between the grid cell and the <p>, so the obvious selector matches
   nothing, and a blanket `.dt-sv-grid p` would drag the deliberately
   small notes up to 17px with the leads. The template defaults carry
   the paragraph sizes instead; the residual risk is an already-edited
   paragraph keeping 15.5px rather than 17px, which is a difference of
   1.5px — unlike the headings, which were 15px adrift. */


/* ============================================================
   Services Hub — component layer
   ------------------------------------------------------------
   Every module on this page used to carry its whole appearance
   inline: hex values, font stacks and sizes inside the module
   HTML, with no class doing the work. That is why six modules
   had already silently degraded — open one in the rich text
   editor and HubSpot rewrites what it owns, swapping
   var(--dt-ff) for a literal font stack, var(--dt-text-body) for
   a hex, nudging the size, and appending its own
   include_custom_fonts call. Two of those rewrites dropped the
   tick icon out of a list and two left body copy on a grey that
   fails AA.

   The classes below take that styling off the modules. The
   editor can rewrite an inline style block; it cannot rewrite a
   class name, so a module that carries only its text and a class
   survives being edited. The modules on this page that were
   already class-based — the eyebrow rules, the FAQ accordion —
   are the ones that never degraded, which is the evidence this
   follows.

   Sizes come from the shared scale in objects/_layout.css.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

/* Vertical padding, min-height and centring come from the shared
   non-Home hero rules in _dt-components.css; only the gutter and the
   image are set here. */
.dt-sv-hero {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #161718;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.dt-sv-hero__inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.dt-sv-hero__title { color: #FFFFFF; max-width: 800px; margin: 0 0 24px; }
.dt-sv-hero__sub   { color: rgba(255,255,255,0.65); max-width: 600px; margin: 0; }

/* ── Two-column block grid ────────────────────────────────── */

.dt-sv-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.dt-sv-grid > * { min-width: 0; }

/* ── Service block ────────────────────────────────────────── */

.dt-sv-block { padding: 80px 40px; }
.dt-sv-block--white { background: #FFFFFF; }
.dt-sv-block--mist  { background: #F4F4F5; }

.dt-sv-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* The eyebrow: a short rule then the label, in the block's own accent.
   The colour is on the section, not in the module, so an editor pass
   over the module text cannot take it with it. */
.dt-sv-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--dt-ff);
}

.dt-sv-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.dt-sv-eyebrow span {
  font-weight: 600;
  font-size: var(--dt-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Plum, on every block.

   These briefly carried the accent ramp, which was wrong: measured across
   Home, the audit page and the five sub-pages, the ramp only ever appears
   on numerals. Eyebrows are plum on light and plum-light on dark
   everywhere, headings are near-black or white, and nothing else takes
   teal, indigo or amber. Ramping the eyebrows made this the only page
   breaking that, which is exactly why it read as wrong. */
.dt-sv-eyebrow { color: var(--dt-accent-1); }

.dt-sv-lead {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-lead);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 22px;
}

.dt-sv-lead--sm { font-size: var(--dt-fs-body); margin-bottom: 40px; }

.dt-sv-note {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  line-height: 1.6;
  color: var(--dt-text-body);
  font-style: italic;
  margin: 0;
}

/* ── Tick lists ───────────────────────────────────────────── */

/* The tick was a 16x16 inline SVG repeated verbatim in every item — and
   repeated markup inside a module is exactly what the editor drops when
   it rewrites one, which is how two items in the audit list lost theirs
   while their neighbours kept them. It is a pseudo-element now: there is
   nothing in the module for an editor to delete. */
.dt-sv-ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-sv-tick {
  position: relative;
  padding-left: 26px;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  line-height: 1.55;
  color: #161718;
}

.dt-sv-tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #F7ECF0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 5l2.5 2.5L9 2' stroke='%23A4063E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dt-sv-tick--compact { font-size: var(--dt-fs-small); line-height: 1.5; }
.dt-sv-tick--compact::before { top: 0.1em; }

/* ── Side panel (audit frameworks, managed compliance scope) ─ */

.dt-sv-panel {
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 28px;
  font-family: var(--dt-ff);
}

.dt-sv-panel--white { background: #FFFFFF; border-radius: 14px; padding: 26px; }

.dt-sv-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e0e0e1;
  color: var(--dt-accent-1);
}

.dt-sv-panel__head::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.dt-sv-panel__head span {
  font-size: var(--dt-fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A head with no rule and no border, for the engagements panel. */
.dt-sv-panel__head--plain {
  padding-bottom: 0;
  margin-bottom: 18px;
  border-bottom: 0;
}
.dt-sv-panel__head--plain::before { display: none; }

.dt-sv-panel__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #e8e8e9;
}
.dt-sv-panel__row:last-child { border-bottom: 0; }

/* Same reason as the steps: the template owns the flex items, the
   modules live inside them. */
.dt-sv-panel__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #F7ECF0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dt-accent-1);
}
.dt-sv-panel__names { flex: 1; min-width: 0; }
.dt-sv-panel__badge-slot { flex-shrink: 0; }

.dt-sv-block__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--dt-accent-1);
}
.dt-sv-block__head > :last-child { min-width: 0; }

.dt-sv-start__body { min-width: 0; }
.dt-sv-start__heading { margin: 0 0 10px; }

.dt-sv-panel__name {
  font-size: var(--dt-fs-body);
  font-weight: 700;
  color: #161718;
}

.dt-sv-panel__sub {
  font-size: var(--dt-fs-caption);
  color: var(--dt-text-body);
}

.dt-sv-badge {
  font-size: var(--dt-fs-micro);
  font-weight: 700;
  color: var(--dt-accent-1);
  background: #F7ECF0;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dt-sv-panel__list { display: flex; flex-direction: column; gap: 12px; }

/* ── Capability tiles (IT helpdesk) ───────────────────────── */

.dt-sv-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dt-sv-tiles > * { min-width: 0; }

.dt-sv-tile {
  background: #FFFFFF;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.dt-sv-tile__label {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-caption);
  font-weight: 600;
  color: #161718;
  line-height: 1.3;
}

/* ── Product chips (Power Platform) ───────────────────────── */

.dt-sv-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.dt-sv-chips > * { min-width: 0; }

.dt-sv-chip {
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-radius: 14px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.dt-sv-chip__label {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  font-weight: 600;
  color: #161718;
}

/* ── Engagement steps ─────────────────────────────────────── */

.dt-sv-steps { display: flex; flex-direction: column; }

/* Flex, not grid, and every module gets its own slot div.

   HubSpot wraps each module in a div of its own, so a grid whose cells
   are the modules puts the WRAPPERS in the cells and the grid-column /
   grid-row the module carries lands on an element that is not a grid
   item at all. The old markup did exactly that. Here the template owns
   the flex items and the modules sit inside them, so the layout holds
   whether the wrapper is there or not. */
.dt-sv-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f1;
}
.dt-sv-step:last-child { border-bottom: 0; }
.dt-sv-step__body { flex: 1; min-width: 0; }

/* Home's treatment for a large display numeral: 34px, weight 900, and
   the ramp at a third opacity. Both numbered sequences on this page use
   it, so they stop being styled two different ways. */
.dt-sv-step__num {
  width: 44px;
  flex-shrink: 0;
  font-family: var(--dt-ff);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dt-accent-1-faded);
}
.dt-sv-step:nth-child(2) .dt-sv-step__num { color: var(--dt-accent-2-faded); }
.dt-sv-step:nth-child(3) .dt-sv-step__num { color: var(--dt-accent-3-faded); }
.dt-sv-step:nth-child(4) .dt-sv-step__num { color: var(--dt-accent-4-faded); }

.dt-sv-step__title {
  padding-bottom: 2px;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  font-weight: 600;
  color: #161718;
}

.dt-sv-step__desc {
  padding-top: 2px;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-caption);
  color: var(--dt-text-body);
}

/* ── Azure layer diagram ──────────────────────────────────── */

/* Three cards, each its own colour, not one dark panel.

   The rebuild wrapped them in a #161718 container and gave all three the
   same translucent card, which is why this arrived as a black box. The
   original is a stack: near-black on top, plum in the middle, white at
   the bottom, with a plum arrow between each. The three colours ARE the
   diagram — cloud, integration, foundation — so flattening them lost the
   thing it was drawing. The per-layer colours used to live inside the
   modules; they are modifiers here so the modules stay styling-free. */
.dt-sv-layers { font-family: var(--dt-ff); }

.dt-sv-layer {
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 8px;
}

.dt-sv-layer__label {
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.dt-sv-layer__title {
  font-size: var(--dt-fs-body);
  font-weight: 700;
  margin-bottom: 3px;
}

.dt-sv-layer__desc { font-size: var(--dt-fs-caption); }

/* Cloud layer. */
.dt-sv-layer--dark { background: #161718; }
.dt-sv-layer--dark .dt-sv-layer__label { color: var(--dt-plum-light); }
.dt-sv-layer--dark .dt-sv-layer__title { color: #FFFFFF; }
/* 0.45 white was 4.0:1 on #161718 and missed AA; 0.62 clears it. */
.dt-sv-layer--dark .dt-sv-layer__desc  { color: rgba(255,255,255,0.62); }

/* Integration layer. */
.dt-sv-layer--plum { background: var(--dt-accent-1); }
.dt-sv-layer--plum .dt-sv-layer__label { color: rgba(255,255,255,0.82); }
.dt-sv-layer--plum .dt-sv-layer__title { color: #FFFFFF; }
.dt-sv-layer--plum .dt-sv-layer__desc  { color: rgba(255,255,255,0.82); }

/* Foundation layer. */
.dt-sv-layer--light {
  background: #FFFFFF;
  border: 1px solid #e8e8e9;
  margin-bottom: 0;
}
.dt-sv-layer--light .dt-sv-layer__label { color: var(--dt-text-body); }
.dt-sv-layer--light .dt-sv-layer__title { color: #161718; }
.dt-sv-layer--light .dt-sv-layer__desc  { color: var(--dt-text-body); }

.dt-sv-layer__join {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

/* ── Power Platform chip icons ────────────────────────────── */

.dt-sv-chip__icon {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* ── Get started ──────────────────────────────────────────── */

.dt-sv-start__steps { display: flex; flex-direction: column; gap: 24px; }

.dt-sv-start__step { display: flex; gap: 18px; align-items: flex-start; }

/* The same treatment as the engagement steps above. */
.dt-sv-start__num {
  font-family: var(--dt-ff);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dt-accent-1-faded);
  flex-shrink: 0;
}
.dt-sv-start__step:nth-child(2) .dt-sv-start__num { color: var(--dt-accent-2-faded); }
.dt-sv-start__step:nth-child(3) .dt-sv-start__num { color: var(--dt-accent-3-faded); }

.dt-sv-start__title {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: var(--dt-fs-body);
  color: #161718;
  margin: 0 0 5px;
}

.dt-sv-start__desc {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  line-height: 1.65;
  color: var(--dt-text-body);
  margin: 0;
}

/* ── Breakpoints ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .dt-sv-chips { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .dt-sv-block  { padding: 56px 22px; }
  .dt-sv-hero   { padding-left: 22px; padding-right: 22px; }
  .dt-sv-panel  { padding: 22px; }
  .dt-sv-chips  { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .dt-sv-tiles { grid-template-columns: repeat(2, 1fr); }
}


/* ── Get started grid ─────────────────────────────────────── */

.dt-sv-start {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.dt-sv-start > * { min-width: 0; }

/* The enquiry form sits straight on the band, with no card around it.
   That band is white since the FAQ moved below this section, and the
   theme's fields are white too, so they had only their border left to
   separate them from the page. They take the mist fill instead, which
   is the same rule the rest of the site follows: a filled box never
   carries the background of whatever it sits on. The border is the
   theme's standard #E8E8E9 either way.

   !important because HubSpot's own form stylesheet sets a background
   on these, and it loads after the theme. */
.dt-sv-start .hs-form input[type="text"],
.dt-sv-start .hs-form input[type="email"],
.dt-sv-start .hs-form input[type="tel"],
.dt-sv-start .hs-form input[type="number"],
.dt-sv-start .hs-form select,
.dt-sv-start .hs-form textarea {
  background: #F4F4F5 !important;
  border: 1px solid #e8e8e9 !important;
}

.dt-sv-start .hs-form input[type="text"]:focus,
.dt-sv-start .hs-form input[type="email"]:focus,
.dt-sv-start .hs-form input[type="tel"]:focus,
.dt-sv-start .hs-form input[type="number"]:focus,
.dt-sv-start .hs-form select:focus,
.dt-sv-start .hs-form textarea:focus {
  border-color: #A4063E !important;
  background: #FFFFFF !important;
}

.dt-sv-btn__arrow { color: var(--dt-accent-1); }


/* ── Stacking ─────────────────────────────────────────────────
   Last in the file, after the two-column rules it overrides. An
   earlier version sat at the top and lost to them.
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .dt-sv-grid  { grid-template-columns: 1fr; gap: 40px; }
  .dt-sv-start { grid-template-columns: 1fr; gap: 48px; }
}

/* The framework rows are icon + name + badge on one line. The badge is
   nowrap by design — "Bitlocker, L1, L2" must not break across lines —
   so below this width the row wraps instead and the badge drops under
   the name rather than pushing the page sideways. */
@media (max-width: 560px) {
  .dt-sv-panel__row { flex-wrap: wrap; }
  .dt-sv-panel__names { flex: 1 1 100%; }
  .dt-sv-panel__badge-slot { margin-left: 56px; }
}
/* ============================================================
   About — component layer
   ------------------------------------------------------------
   98% of this page's content was styled inline, and it shows the
   same editor damage as the services hub did: literal
   'Aptos','Segoe UI',system-ui,sans-serif stacks in place of
   var(--dt-ff), an include_custom_fonts call appended to every
   module, and eleven text elements left on #8b8c8c — 3.37:1 for
   the 11px certification names, 3.07:1 for the lead paragraph
   on the mist band. On the page a prospect reads to judge
   whether Datatechs is credible.

   The classes take the styling off the modules so the editor has
   nothing to rewrite. Sizes come from the shared scale in
   objects/_layout.css; body colour is --dt-text-body throughout.
   ============================================================ */

.dt-ab-lead {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-lead);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}

.dt-ab-lead--narrow { max-width: 480px; margin: 0 auto; }
.dt-ab-lead--on-dark { color: rgba(255,255,255,0.7); margin: 0 0 40px; }

.dt-ab-body {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0 0 18px;
}

.dt-ab-body--last { margin-bottom: 0; }
.dt-ab-body--gap  { margin-bottom: 28px; }

.dt-ab-footnote {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  color: var(--dt-text-body);
  text-align: center;
  margin: 0;
}

/* ── Founder credential pills ─────────────────────────────── */

.dt-ab-chips { display: flex; flex-direction: column; gap: 8px; }

.dt-ab-chip {
  display: inline-block;
  width: fit-content;
  background: #161718;
  color: #FFFFFF;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 20px;
  text-decoration: none;
}

.dt-ab-chip:hover { background: var(--dt-accent-1); color: #FFFFFF; }

/* ── Microsoft Partner bar ────────────────────────────────── */

.dt-ab-partner {
  background: #161718;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.dt-ab-partner__title {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: var(--dt-fs-small);
  color: #FFFFFF;
  margin: 0 0 2px;
}

.dt-ab-partner__sub {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-micro);
  /* 0.6 white is 4.3:1 on #161718 and misses AA at this size. */
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ── Certification cards ──────────────────────────────────── */

.dt-ab-swipe {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-micro);
  color: var(--dt-text-body);
  text-align: center;
  margin: 0 0 12px;
}

.dt-ab-certs {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.dt-ab-cert {
  flex: 0 0 200px;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
}

.dt-ab-cert--pending {
  background: #FAFAFA;
  border: 1px dashed #c9c9ca;
  padding: 20px;
}

.dt-ab-cert__logo { margin: 0 auto 12px; display: block; }

.dt-ab-cert__name {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: var(--dt-fs-caption);
  color: #161718;
  margin: 0 0 4px;
}

.dt-ab-cert--pending .dt-ab-cert__name { color: var(--dt-text-body); }

/* The certification names were 11px on #8b8c8c — 3.37:1, and the worst
   failure on the page. The body token clears AA at this size. */
.dt-ab-cert__level {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-micro);
  color: var(--dt-text-body);
  margin: 0 0 12px;
}

.dt-ab-cert__status {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  /* #22c55e measured 2.3:1 on white. This is the darker step of the same
     semantic green the audit timeline uses, at 4.6:1. */
  color: #15803D;
}

.dt-ab-cert__status--pending { color: var(--dt-text-body); }
/* ============================================================
   Contact — component layer
   ------------------------------------------------------------
   100% of this page's content was styled inline, with the same
   editor damage as About and the services hub: literal font
   stacks in place of var(--dt-ff) and an include_custom_fonts
   call on every module. Nothing was rendering wrong yet, so this
   is preventative — the next edit in the page editor is what it
   is protecting against.

   contact_form is a @hubspot/form module and is left alone. Its
   required-field asterisk (#EF6B51) and consent grey (#6F6F77)
   are HubSpot's own defaults, not ours, and are not touched here.
   ============================================================ */

.dt-ct-step__title {
  font-family: var(--dt-ff);
  font-weight: 700;
  font-size: var(--dt-fs-body);
  color: #161718;
  margin: 0 0 6px;
}

.dt-ct-step__body {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0;
}

.dt-ct-trust__label {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  font-weight: 500;
  color: #161718;
}

.dt-ct-email__label {
  font-family: var(--dt-ff);
  font-weight: 600;
  font-size: var(--dt-fs-small);
  color: #161718;
  margin: 0 0 10px;
}

.dt-ct-email__link {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  font-weight: 600;
  color: var(--dt-accent-1);
  text-decoration: none;
}

.dt-ct-email__link:hover { text-decoration: underline; }
/* ============================================================
   Datatechs: Book a Call page
   ------------------------------------------------------------
   One job: show the scheduler. The hero is the shared non-Home
   hero, so this file sets only the side gutter and lets the 620px
   floor and the vertical padding come from the rule in
   _dt-components.css that every page except the homepage uses.

   Nothing here reaches inside the iframe. The embed's colours come
   from the HubSpot brand kit and are not the theme's to set; what
   this file does is stop a third-party iframe from pushing the page
   sideways, which is the usual way an embed goes wrong on a phone.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

.dt-bc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* background-color, not the `background` shorthand. The shorthand
     resets background-image to none, and this file loads after
     _hero-media.css, so it wiped out the hero photograph the section
     now carries. .dt-sv-hero states it the same way for the same
     reason. The colour stays as the fallback behind the image. */
  background-color: #161718;
  padding-left: 40px;
  padding-right: 40px;
}

.dt-bc-hero__circles {
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  opacity: 0.06;
  pointer-events: none;
}

.dt-bc-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.dt-bc-hero__title {
  color: #FFFFFF;
  max-width: 760px;
  margin: 0 0 20px;
}

.dt-bc-hero__sub {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 620px;
  margin: 0;
}

/* ── Scheduler ────────────────────────────────────────────── */

.dt-bc-embed-section {
  background: #FFFFFF;
  padding: 88px 40px;
}

.dt-bc-embed-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  /* A grid or flex child defaults to min-width: auto, which lets an
     iframe wider than the column push the whole page sideways rather
     than being contained by it. Not one here, but the same reasoning
     applies to the block itself. */
  min-width: 0;
}

/* Calendar beside the copy, from 1024 up.

   Everything in this block was set in the page's own Head HTML field in
   HubSpot. It is here now so the page has one source of styling rather
   than two that can drift apart.

   1.6fr / 1fr because the scheduler has a fixed idea of how wide it
   wants to be and the copy beside it does not; minmax(0, …) on both
   tracks so neither can be pushed past its share by its contents, which
   is what an iframe will do given the chance. Below 1024 the grid never
   applies and the two stack in source order: calendar, then copy. */
@media (min-width: 1024px) {
  .dt-bc-embed-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 64px;
    max-width: 1200px;
    align-items: start;
  }

  /* The right-hand column: whatever module follows the calendar. Named
     by what it is not, because it is a HubSpot module wrapper and the
     class on it is not this theme's to choose. */
  .dt-bc-embed-section__inner > :not(.dt-bc-embed) {
    padding-top: 10px;
  }
}

/* Stacked, the copy needs air between it and the calendar above. */
@media (max-width: 1023px) {
  .dt-bc-embed-section__inner > :not(.dt-bc-embed) {
    margin-top: 48px;
  }
}

.dt-bc-embed-section__inner > :not(.dt-bc-embed) h2 {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 32px;
}

/* The embed writes an iframe into this container and sizes it to its
   own content, so there is no fixed height to set. min-height stops
   the section collapsing and reflowing the page while the script is
   still loading.

   overflow: hidden is the part that matters at 320. The meetings
   iframe comes in at a fixed 312px and, with the section's 40px
   gutters either side, needed 392px of a 320px viewport: about 12px
   of sideways scroll after the gutters were reduced, and far more
   before. The gutters drop below 360 and the container clips
   whatever the iframe still insists on. */
.dt-bc-embed {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* Holds the space the scheduler will fill, so the page does not
     reflow while the embed script is still loading. 760 is the measured
     height; the 900 this used to take on phones overshot it and left an
     empty band under the calendar. */
  min-height: 760px;
}

.dt-bc-embed .meetings-iframe-container {
  min-width: 0;
  max-width: 100%;
}

.dt-bc-embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

.dt-bc-alt {
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 28px 0 0;
}

.dt-bc-alt a,
.dt-bc-alt a:visited {
  color: var(--dt-accent-1);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 820px) {
  .dt-bc-hero { padding-left: 20px; padding-right: 20px; }
  .dt-bc-embed-section { padding: 56px 20px; }
}

/* Below 360 the gutters go altogether. A 312px iframe plus even a
   20px gutter each side does not fit a 320px viewport, and a page
   that scrolls sideways is worse than one whose scheduler runs to
   the edges. */
@media (max-width: 359px) {
  .dt-bc-hero { padding-left: 16px; padding-right: 16px; }
  .dt-bc-embed-section { padding-left: 8px; padding-right: 8px; }
}
/* ============================================================
   Audit framework sub-page  ·  .dt-af-*
   ------------------------------------------------------------
   The three framework sub-pages under /audit — CIS Microsoft 365,
   CIS Intune and Cyber Essentials — share one template, so they
   share one block here.

   Why this is a new block rather than a reuse of .dt-big-stat and
   friends: those classes are what the old hand-authored pages used,
   and two of their modifiers are the bug. .dt-big-stat--teal is
   #0d6b55 and --purple is #5b3fa6, both set on a #161718 band, which
   measures 2.78:1 and 2.31:1 — dark-on-dark, under the 3:1 that
   applies even at the 52px these are set in. Neither colour exists
   anywhere else on the site or in the brand guide. They are left
   alone rather than edited, because the pages that use them are being
   replaced wholesale and /audit is not to be touched; nothing in the
   theme references them.

   The rule this block follows instead: accents get LIGHTER on dark,
   never darker. The stat band runs the documented on-dark ramp.

   Verified at 320, 360, 375, 768 and 1440. Three of those widths are
   here because 375 alone has now let two separate overflow bugs
   through on this project — the narrow end is 320, not 375.
   ============================================================ */

/* ── 1 · Hero ─────────────────────────────────
   Laid out like the Home hero rather than like itself. Same 900px
   measure, same order down the page (eyebrow, heading, standfirst,
   buttons, note, ticks) and the same gaps between them.

   The photograph is the one the /audit hub uses, through the shared
   .dt-hero-media component, with the three widths set inline on the
   section beside the preloads that have to match them.

   Height, vertical padding and the centring of the copy all come from
   the shared non-Home hero rules in _dt-components.css, so only the
   side gutter is set here. This used to declare its own
   `padding: 104px 40px 0`, with nothing at the bottom because the stat
   strip filled it; with the strip gone that left the hero sitting on
   its own text. */

.dt-af-hero {
  /* background-color, never the `background` shorthand: the shorthand
     resets background-image, and this file loads after the component
     that sets the photograph. The colour stays as the fallback. */
  background-color: #161718;
  padding-left: 40px;
  padding-right: 40px;
  font-family: var(--dt-ff);
  position: relative;
  overflow: hidden;
}
.dt-af-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.dt-af-hero__copy {
  /* Home's content column. The site centres the first <section> of
     every non-Home page and gives its h1 and p auto margins, but a
     constrained wrapper div is not on that list, so it takes its own
     auto margins or it sits hard left with centred text inside it. */
  max-width: 900px;
  margin: 0 auto;
}

/* Home's standfirst: a narrower measure than the column it sits in,
   because a line of body copy the full width of the column is hard to
   track back from. */
.dt-af-standfirst {
  font-size: var(--dt-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 620px;
  margin: 0 auto 40px;
}

/* ── Hero tick row ─────────────────────────────
   Four short points under the buttons, exactly as the Home hero
   carries them: a crimson tick and the text, centred, wrapping, no
   box and no divider.

   No top margin here on purpose. The note line above it ends with
   Home's 40px, which is the gap, and stating it twice would double it.

   This replaces a four-column strip whose figures ran the on-dark
   accent ramp. The ramp is for large faded numerals, not for text at
   reading size, and the strip cost around 200px of hero on every one
   of these pages. */

.dt-af-ticks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
}

/* An emptied module still renders its HubSpot wrapper, so the cell is
   never :empty itself. The wrapper is a div holding a span, so test
   either depth rather than betting on one. */
.dt-af-tick:has(.hs_cos_wrapper:empty) { display: none; }

/* Page content is updated separately from a deploy, so for the window
   between the two a tick module may still hold the old
   value-and-label markup. Neutralise it rather than let it render at
   display size in an accent colour: same size and colour as a trust
   item, stacked, no ramp. The rules that coloured these by position
   are gone. */
.dt-af-ticks .dt-af-stat__value,
.dt-af-ticks .dt-af-stat__label {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* ── 2 · What the framework is ────────────────────────────────
   Copy on the left, a facts panel on the right. The panel is where
   the publisher, the exact benchmark name and the version live —
   the things that were hardcoded before. */

.dt-af-intro { align-items: start; }
.dt-af-intro__body p {
  font-size: var(--dt-fs-body);
  line-height: 1.8;
  color: var(--dt-text-body);
  margin: 0 0 18px;
}
.dt-af-intro__body p:last-child { margin-bottom: 0; }

.dt-af-facts {
  background: #F4F4F5;
  border-left: 3px solid var(--dt-accent-1);
  border-radius: 0 10px 10px 0;
  padding: 28px 30px;
}
.dt-af-facts dl { margin: 0; }
.dt-af-facts dt {
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-text-body);
  margin: 0 0 4px;
}
.dt-af-facts dd {
  font-size: var(--dt-fs-body);
  font-weight: 600;
  line-height: 1.5;
  color: #161718;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}
.dt-af-facts dd:last-child { margin-bottom: 0; }

/* ── Shared section header ────────────────────────────────────
   Eyebrow, heading and an optional intro paragraph, left-aligned.
   Every section from 3 onward opens with one. */

.dt-af-head { max-width: 760px; margin: 0 0 48px; }
.dt-af-head__intro,
.dt-af-lead {
  font-size: var(--dt-fs-lead);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 16px 0 0;
}
.dt-af-lead--on-dark { color: rgba(255, 255, 255, 0.68); }

/* ── 3 · Why it matters commercially ──────────────────────────
   Four cards: contracts, regulation, insurance, supply chain. */

.dt-af-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.dt-af-why__card {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-top: 3px solid var(--dt-accent-1);
  border-radius: 10px;
  padding: 28px 26px;
  min-width: 0;
}
.dt-af-why__card:nth-child(2) { border-top-color: var(--dt-accent-2); }
.dt-af-why__card:nth-child(3) { border-top-color: var(--dt-accent-3); }
.dt-af-why__card:nth-child(4) { border-top-color: var(--dt-accent-4); }
.dt-af-why__title {
  font-size: var(--dt-fs-sub);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161718;
  margin: 0 0 12px;
}
.dt-af-why__body {
  font-size: var(--dt-fs-body);
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0;
}

/* ── 4 · What it covers ───────────────────────────────────────
   The control or coverage areas. One module holds the whole list:
   the three frameworks have 5, 9 and 14 of these respectively, and
   a fixed set of slots would leave empty ones on two of the three
   pages. Add or remove an <li> in the source view. */

.dt-af-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-af-area {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  padding: 20px 22px;
  min-width: 0;
}
.dt-af-area__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(164, 6, 62, 0.09);
  color: var(--dt-accent-1);
  font-size: var(--dt-fs-caption);
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.dt-af-area__text { min-width: 0; }
.dt-af-area__title {
  font-size: var(--dt-fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: #161718;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.dt-af-area__body {
  font-size: var(--dt-fs-small);
  line-height: 1.65;
  color: var(--dt-text-body);
  margin: 0;
}

/* A counted note under the grid — "140 controls across 9 sections".
   A framework fact, so it is its own module and reads as a caption
   rather than as body copy. */
.dt-af-count {
  margin: 28px 0 0;
  font-size: var(--dt-fs-small);
  line-height: 1.6;
  color: var(--dt-text-body);
}

/* ── 5 · Levels and tiers ─────────────────────────────────────
   Three slots. CIS runs Level 1 / Level 2, Cyber Essentials runs
   CE / CE Plus, so the third is usually emptied — and hidden, the
   same way an unused stat is. */

.dt-af-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}
.dt-af-levels > div:has(> .hs_cos_wrapper:empty) { display: none; }

.dt-af-level {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 30px 28px;
  height: 100%;
  box-sizing: border-box;
}
.dt-af-level__label {
  display: inline-block;
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-accent-1);
  background: rgba(164, 6, 62, 0.08);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 16px;
}
.dt-af-level--two .dt-af-level__label {
  color: var(--dt-accent-2);
  background: rgba(15, 118, 110, 0.09);
}
.dt-af-level--three .dt-af-level__label {
  color: var(--dt-accent-3);
  background: rgba(79, 70, 229, 0.09);
}
.dt-af-level__title {
  font-size: var(--dt-fs-sub);
  font-weight: 700;
  line-height: 1.3;
  color: #161718;
  margin: 0 0 12px;
}
.dt-af-level__body {
  font-size: var(--dt-fs-body);
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0 0 16px;
}
.dt-af-level__body:last-child { margin-bottom: 0; }
.dt-af-level__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-af-level__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--dt-fs-small);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0 0 8px;
}
.dt-af-level__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--dt-accent-1);
}

/* "How to choose between them", under the cards. */
.dt-af-choose {
  margin: 32px 0 0;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-left: 3px solid var(--dt-accent-3);
  border-radius: 0 10px 10px 0;
  padding: 24px 28px;
}
.dt-af-choose__title {
  font-size: var(--dt-fs-body);
  font-weight: 700;
  color: #161718;
  margin: 0 0 8px;
}
.dt-af-choose p {
  font-size: var(--dt-fs-body);
  line-height: 1.75;
  color: var(--dt-text-body);
  margin: 0;
}

/* ── 6 · What the assessment involves ─────────────────────────
   Four stages. Numerals follow the site rule: large display
   numerals are faded and ramped together. */

.dt-af-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
}
.dt-af-stage { min-width: 0; }
.dt-af-stage__num {
  font-family: var(--dt-ff);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--dt-accent-1-faded);
}
.dt-af-stage:nth-child(2) .dt-af-stage__num { color: var(--dt-accent-2-faded); }
.dt-af-stage:nth-child(3) .dt-af-stage__num { color: var(--dt-accent-3-faded); }
.dt-af-stage:nth-child(4) .dt-af-stage__num { color: var(--dt-accent-4-faded); }
.dt-af-stage__title {
  font-size: var(--dt-fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: #161718;
  margin: 0 0 10px;
}
.dt-af-stage__body {
  font-size: var(--dt-fs-small);
  line-height: 1.7;
  color: var(--dt-text-body);
  margin: 0;
}

/* Deliverables, under the stages. */
.dt-af-deliverables {
  margin: 48px 0 0;
  background: #F4F4F5;
  border-radius: 12px;
  padding: 32px 34px;
}
.dt-af-deliverables__title {
  font-size: var(--dt-fs-sub);
  font-weight: 700;
  color: #161718;
  margin: 0 0 18px;
}
.dt-af-deliverables ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-af-deliverables li {
  position: relative;
  padding-left: 26px;
  font-size: var(--dt-fs-body);
  line-height: 1.7;
  color: var(--dt-text-body);
  min-width: 0;
}
.dt-af-deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--dt-accent-1);
  border-bottom: 2px solid var(--dt-accent-1);
  transform: rotate(-45deg);
}

/* ── 7 · What it costs ────────────────────────────────────────
   On the dark band. The price is its own module — it is the single
   worst thing about the pages this replaces, where changing £299
   meant a developer and a deploy. */

.dt-af-price {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
  margin: 8px 0 0;
}
.dt-af-price__figure {
  font-weight: 700;
  font-size: clamp(38px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dt-plum-light);
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.dt-af-price__unit {
  font-size: var(--dt-fs-body);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
}
.dt-af-price__note {
  font-size: var(--dt-fs-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 24px 0 0;
}
.dt-af-includes__title {
  font-size: var(--dt-fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}
.dt-af-includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-af-includes li {
  position: relative;
  padding-left: 26px;
  font-size: var(--dt-fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
}
.dt-af-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--dt-plum-light);
  border-bottom: 2px solid var(--dt-plum-light);
  transform: rotate(-45deg);
}

/* ── 8 · Official sources ─────────────────────────────────────
   Every link leaves the site, so every link says so — the arrow is
   on the class, not typed into the copy, and it cannot be forgotten
   on a new link. One module holds the set: CIS and IASME reorganise
   their URLs, and this way that is one edit in one place. */

.dt-af-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dt-af-source {
  display: block;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  padding: 22px 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
  min-width: 0;
}
.dt-af-source:hover {
  border-color: var(--dt-accent-1);
  transform: translateY(-2px);
}
.dt-af-source__title {
  display: block;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: #161718;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
/* The "leaves the site" mark. A box-with-arrow drawn in borders so it
   needs no icon file and inherits the link colour. */
.dt-af-source__title::after {
  content: "\2197";
  display: inline-block;
  margin-left: 8px;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--dt-accent-1);
  transform: translateY(-1px);
}
.dt-af-source__host {
  display: block;
  font-family: var(--dt-ff);
  font-size: var(--dt-fs-small);
  line-height: 1.5;
  color: var(--dt-text-body);
  margin: 0;
  /* A bare URL has no break opportunities, and `break-word` will not
     lower an element's min-content width — only `anywhere` does. Left
     as `break-word` this pushed the page 40px past a 320 viewport. */
  overflow-wrap: anywhere;
}

/* "Framework information checked on <date>." Its own module, next to
   the sources, so a figure can be re-checked and the date moved
   without a deploy. */
.dt-af-checked {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  font-size: var(--dt-fs-small);
  line-height: 1.6;
  color: var(--dt-text-body);
}
.dt-af-checked::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-accent-2);
}

/* ── 9 · FAQ ──────────────────────────────────────────────────
   Reuses the site's <details> accordion (.dt-acc / .dt-acc-list from
   the component library) so it behaves the way the hub's FAQ does. */

.dt-af-faq__head { text-align: center; max-width: 720px; margin: 0 auto 8px; }

/* An emptied FAQ module would otherwise leave a 10px grid gap where a
   question used to be. Scoped to this template so the services hub's
   own .dt-acc-list is untouched. */
.dt-page--audit-framework .dt-acc-list > .hs_cos_wrapper:empty { display: none; }

/* ── Responsive ───────────────────────────────────────────────
   The grids above are all auto-fit, so they reflow on their own
   rather than at a breakpoint. What is left is the padding and the
   two places a fixed ratio is used.

   These sit at the end of the file deliberately: an earlier
   stylesheet on this project put its stacking rules above the ones
   they override and they lost the cascade, leaving a grid two across
   at 375px. */

@media (max-width: 900px) {
  .dt-af-price { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 767px) {
  /* Only the gutter. Vertical padding is the shared non-Home hero's. */
  .dt-af-hero { padding-left: 20px; padding-right: 20px; }
  .dt-af-head { margin-bottom: 36px; }
  .dt-af-deliverables { padding: 26px 22px; }
  .dt-af-facts { padding: 24px 22px; }
}

/* Below the narrowest phone the site is checked at, the remaining
   fixed minimums are what would overflow: a 260-280px minmax plus
   the section's own 20px gutters exceeds 320. Drop them to one
   column outright rather than relying on auto-fit's floor. */
@media (max-width: 400px) {
  .dt-af-areas,
  .dt-af-levels,
  .dt-af-sources,
  .dt-af-why,
  .dt-af-stages { grid-template-columns: 1fr; }
  .dt-af-deliverables ul { grid-template-columns: 1fr; }
  .dt-af-level { padding: 24px 20px; }
  .dt-af-source { padding: 18px 20px; }
  .dt-af-area { padding: 16px 18px; }
}
/* ============================================================
   Datatechs — MSP Partners page styles
   ============================================================ */

/* --- Shared utilities --- */

.dt-msp-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dt-msp-section__sub {
  font-family: var(--dt-ff);
  font-size: 17px;
  color: var(--dt-text-body);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 48px;
}

/* ===== HERO ===== */

.dt-msp-hero {
  background: #161718;
  /* Matches the shared non-Home hero: every page except the homepage
     runs to the same height so the site does not change shape as you
     move between them. */
  /* Vertical padding and min-height are shared with the other six
     heroes and live in _dt-components.css; only the side gutter is set here. */
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
  overflow: hidden;
  text-align: left;
  /* The same centring .dt-svc-hero and .dt-bc-hero use. Without it this
     hero was the only one of the seven laying its copy out from the top
     of the band: the shared 620px floor is taller than this hero's copy,
     so the slack all collected underneath — 89px of it — and the block
     sat visibly higher here than on a service sub-page. Matching the
     height was never enough on its own; the copy has to sit in the same
     place within it. */
  display: flex;
  align-items: center;
}

.dt-msp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Was a left-to-right gradient — solid at 30%, 0.45 by 70%, clear by
     88% — which suited copy pinned to the left. The hero is centred
     now, so text runs into the thin end of it and loses contrast on the
     right. A flat overlay gives even legibility across the full width,
     and matches how the other heroes sit over their images. */
  background: rgba(22, 23, 24, 0.88);
  z-index: 0;
  pointer-events: none;
}

.dt-msp-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  opacity: 0.78;
}

/* width: 100% because this is a flex item now. A flex item shrinks to
   its content by default, so without it `margin: 0 auto` would centre a
   box narrower than the 1100px this is meant to cap. .dt-svc-hero__inner
   carries the same pair for the same reason. */
.dt-msp-hero__container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Matched to the Home hero's content column (900px).

   This was 520, then 600, then 760, each step widened because the
   copy wrapped into enough lines to push the hero past the shared
   floor. 900 is not another guess at that: it is the width the Home
   hero uses, so this hero now wraps its heading the same way the
   homepage does rather than tracking a number picked to suit its own
   copy.

   Measured at 1440: at 760 the H1 ran to three lines and the four
   tick points wrapped onto two; at 900 the H1 takes two and the
   ticks sit on one. A wider column means fewer lines, so the hero
   still lands on the shared floor rather than above it.

   The image beside it is absolutely positioned under a flat 88%
   scrim, so copy running across it stays legible. */
.dt-msp-hero__inner {
  max-width: 900px;
}

/* Typography (size, weight, line-height, letter-spacing) comes from the
   shared .dt-h1-hero class carried alongside this one in the markup;
   only the colour and spacing that are this page's own stay here. */
.dt-msp-hero__title {
  color: #FFFFFF;
  /* Home's 24px, not this page's old 14px. The two heroes carry the
     same blocks in the same order now, so the gaps between them are
     Home's as well. */
  margin: 0 0 24px;
}

.dt-msp-hero__sub {
  font-family: var(--dt-ff);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  /* Home's subtext measure and spacing: 620px, centred, 40px clear
     of the buttons. The paragraph deliberately stays narrower than
     the 900px column — a line of body copy the full width of the
     column is hard to track back from, which is why Home does the
     same. */
  max-width: 620px;
  margin: 0 auto 40px;
}

/* The four tick points.

   These were boxed pills with their own border. They use the Home
   hero's .dt-trust-item now: a crimson tick and the text, no box. A
   10px gap was right when each item had an outline to separate it
   from its neighbour; without one the items run together, so the
   column gap matches Home's 28px while the row gap stays tight.

   Both rows are centred and given Home's gaps. Neither assumes it
   comes first: the hero's blocks live in separate rich-text modules
   and the editor decides their order, so the trailing margin is
   taken off whichever one ends the hero rather than hardcoded onto
   the one the template happens to list last. */
.dt-msp-hero__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 0 26px;
}

.dt-msp-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Home's .dt-hero-actions: a 24px gap and 14px clear of the note
     line that follows the buttons. */
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

/* A bottom margin on the last block pushes the whole hero off centre
   inside its 620px floor, because the hero centres its content as a
   flex item. Whatever ends up last loses it — the row itself when it
   is a direct child, or the element closing the module wrapper that
   HubSpot renders around it. */
.dt-msp-hero__inner > :last-child,
.dt-msp-hero__inner > :last-child > :last-child {
  margin-bottom: 0;
}

/* ===== THE CHALLENGE ===== */

.dt-msp-challenge {
  background: #FFFFFF;
  padding: 80px 40px;
}

.dt-msp-challenge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

/* Background, border and radius come from the shared .dt-card-mist class
   carried alongside this one; only the accent border stays here. The
   stretch is handled by the pass-through rule further down, with the
   capability columns, because both grids hit the same problem.

   `height: 100%` used to be here and never resolved: its containing
   block is the rich-text span, which is height:auto, so 100% of auto is
   auto. The two cards looked equal only because their copy happened to
   wrap to the same number of lines. */

.dt-msp-challenge__card {
  border-top: 3px solid #A4063E;
}

.dt-msp-challenge__title {
  font-family: var(--dt-ff);
  font-size: 19px;
  font-weight: 700;
  color: #161718;
  line-height: 1.3;
  margin: 0 0 14px;
}

.dt-msp-challenge__body {
  font-family: var(--dt-ff);
  font-size: 15px;
  color: var(--dt-text-body) !important;
  line-height: 1.7;
  margin: 0;
}

.dt-msp-challenge__body a,
.dt-msp-challenge__body a:visited {
  color: var(--dt-text-body) !important;
  text-decoration: none;
}

.dt-msp-challenge__answer {
  margin-top: 24px;
  background: #161718;
  border-radius: 16px;
  border-top: 3px solid #A4063E;
  padding: 40px 48px;
}

.dt-msp-challenge__answer-title {
  font-family: var(--dt-ff);
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0 0 14px;
}

.dt-msp-challenge__answer-body {
  font-family: var(--dt-ff);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin: 0;
  max-width: 860px;
}

/* ===== ENGAGEMENT MODEL ===== */

.dt-msp-model {
  background: #161718;
  padding: 80px 40px;
}

.dt-msp-model__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.dt-msp-model__grid > * {
  display: flex;
  flex-direction: column;
}

/* A card never carries the same background as the section under it.
   On a dark band that is rgba(255,255,255,0.06) with a 0.10 border;
   0.04 over #161718 composites to rgb(31,32,33), which is close
   enough to the section to read as no card at all on a dim screen. */
.dt-msp-model__card {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  overflow: hidden;
}

/* Coloured top accent border */
.dt-msp-model__grid > *:first-child .dt-msp-model__card {
  border-top: 3px solid #A4063E;
}

.dt-msp-model__grid > *:last-child .dt-msp-model__card {
  border-top: 3px solid var(--dt-accent-2-on-dark);
}

.dt-msp-model__option {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* These sit on .dt-msp-model__card, which is rgba(255,255,255,0.04)
   over #161718 — rgb(31,32,33). Plum is 2.07:1 there; plum-light is
   5.80:1. At 11px the 4.5:1 threshold applies, not 3:1. */
.dt-msp-model__grid > *:first-child .dt-msp-model__option {
  color: var(--dt-plum-light);
}

/* The on-dark teal clears AA on a flat band but only reaches 4.34:1
   on this lightened card. The on-tint step is 6.53:1. */
.dt-msp-model__grid > *:last-child .dt-msp-model__option {
  color: var(--dt-accent-2-on-tint);
}

.dt-msp-model__name {
  font-family: var(--dt-ff);
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.dt-msp-model__tag {
  font-family: var(--dt-ff);
  font-size: 14px;
  font-style: italic;
  /* 0.4 is 3.75:1 on the card, under AA. 0.55 is 5.83:1. Measured
     against rgb(31,32,33), the card's composited background, not
     against #161718. */
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
}

.dt-msp-model__desc {
  font-family: var(--dt-ff);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.7;
  margin: 0 0 24px;
}

.dt-msp-model__desc a,
.dt-msp-model__desc a:visited,
.dt-msp-model__desc a:hover {
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none;
}

.dt-msp-model__checks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dt-msp-model__checks li {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65) !important;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  line-height: 1.5;
}

.dt-msp-model__checks li a,
.dt-msp-model__checks li a:visited,
.dt-msp-model__checks li a:hover {
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none;
}

.dt-msp-model__checks li:last-child {
  margin-bottom: 0;
}

.dt-msp-model__checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 12px;
}

.dt-msp-model__grid > *:first-child .dt-msp-model__checks li::before {
  color: #A4063E;
}

.dt-msp-model__grid > *:last-child .dt-msp-model__checks li::before {
  color: var(--dt-accent-2-on-dark);
}

/* ===== CAPABILITY AREAS ===== */

.dt-msp-cap {
  background: #F4F4F5;
  padding: 80px 40px;
}

.dt-msp-cap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

/* Equal-height cards, through however many wrappers HubSpot inserts.

   Third attempt, and the first two failed for the same reason: each
   guessed the shape of markup this template does not own. First a
   `> div > div > div` chain of height:100%, which matched nothing
   because a rich_text module is not three divs. Then
   `> * > .dt-msp-cap__col`, which assumed one wrapper. There are two:
   a widget div, and a span inside it holding the content. The card
   was the div's grandchild, so it kept its natural height and the
   three columns came out 487, 571 and 336.

   So this stops naming depths. The grid item stretches because it is a
   grid item; every level below it is a flex column that grows to fill
   its parent, so the height reaches the card wherever the card is.
   One wrapper, two, or none all work.

   Background, border and radius come from the shared .dt-card-white
   class carried alongside this one; only the accent border stays
   below. */
.dt-msp-challenge__grid > *,
.dt-msp-challenge__grid > * > *,
.dt-msp-cap__grid > *,
.dt-msp-cap__grid > * > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dt-msp-challenge__grid > * > *,
.dt-msp-challenge__grid > * > * > *,
.dt-msp-cap__grid > * > *,
.dt-msp-cap__grid > * > * > * {
  flex: 1 1 auto;
}

.dt-msp-cap__col {
  box-sizing: border-box;
}

/* Coloured top accent per column */
.dt-msp-cap__grid > *:nth-child(1) .dt-msp-cap__col {
  border-top: 3px solid #A4063E;
}

.dt-msp-cap__grid > *:nth-child(2) .dt-msp-cap__col {
  border-top: 3px solid var(--dt-accent-2-on-dark);
}

.dt-msp-cap__grid > *:nth-child(3) .dt-msp-cap__col {
  border-top: 3px solid var(--dt-accent-3-on-dark);
}

.dt-msp-cap__title {
  font-family: var(--dt-ff);
  font-size: 18px;
  font-weight: 700;
  color: #161718;
  margin: 0 0 16px;
}

.dt-msp-cap__subtitle {
  font-family: var(--dt-ff);
  font-size: 13px;
  color: var(--dt-text-meta);
  line-height: 1.5;
  margin: -8px 0 16px;
}

.dt-msp-cap__list {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body) !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dt-msp-cap__list li {
  padding: 9px 0 9px 22px;
  position: relative;
  line-height: 1.5;
  color: var(--dt-text-body) !important;
}

.dt-msp-cap__list li a,
.dt-msp-cap__list li a:visited {
  color: var(--dt-text-body) !important;
  text-decoration: none;
}

.dt-msp-cap__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 9px;
  font-weight: 700;
  font-size: 12px;
}

.dt-msp-cap__grid > *:nth-child(1) .dt-msp-cap__list li::before {
  color: #A4063E;
}

.dt-msp-cap__grid > *:nth-child(2) .dt-msp-cap__list li::before {
  color: var(--dt-accent-2-on-dark);
}

.dt-msp-cap__grid > *:nth-child(3) .dt-msp-cap__list li::before {
  color: var(--dt-accent-3-on-dark);
}

/* ===== OPERATING MODEL ===== */

.dt-msp-opmodel {
  background: #161718;
  padding: 80px 40px;
}

.dt-msp-opmodel__sub {
  font-family: var(--dt-ff);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 0 56px;
}

/* 3-column grid */
.dt-msp-opmodel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.dt-msp-opmodel__col {
  padding-top: 0;
}

/* Accent line at top of each column */
.dt-msp-opmodel__col-line {
  height: 2px;
  width: 100%;
  margin-bottom: 28px;
}

.dt-msp-opmodel__cols > *:nth-child(1) .dt-msp-opmodel__col-line { background: #A4063E; }
.dt-msp-opmodel__cols > *:nth-child(2) .dt-msp-opmodel__col-line { background: var(--dt-accent-2-on-dark); }
.dt-msp-opmodel__cols > *:nth-child(3) .dt-msp-opmodel__col-line { background: var(--dt-accent-3-on-dark); }

/* Large styled number */
.dt-msp-opmodel__num {
  display: block;
  font-family: var(--dt-ff);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 20px;
}

/* Plum is 2.29:1 on this band and these are 48px, so even the 3:1
   large-text threshold is missed. Plum-light is 6.40:1. */
.dt-msp-opmodel__cols > *:nth-child(1) .dt-msp-opmodel__num { color: var(--dt-plum-light); }
.dt-msp-opmodel__cols > *:nth-child(2) .dt-msp-opmodel__num { color: var(--dt-accent-2-on-dark); }
.dt-msp-opmodel__cols > *:nth-child(3) .dt-msp-opmodel__num { color: var(--dt-accent-3-on-dark); }

.dt-msp-opmodel__col-title {
  font-family: var(--dt-ff);
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 12px;
  line-height: 1.3;
}

.dt-msp-opmodel__col-body {
  font-family: var(--dt-ff);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.7;
  margin: 0;
}

.dt-msp-opmodel__col-body a,
.dt-msp-opmodel__col-body a:visited {
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none;
}

@media (max-width: 768px) {
  .dt-msp-opmodel__cols {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ===== FAQ =====
   The accordion itself is the shared details.dt-acc component (see
   _dt-components.css) — this page only owns the section band around it. */

.dt-msp-faq {
  /* Mist, like every other FAQ band on the site. It was white, which is
     why the boxes inside it had to be turned mist to stay visible; both
     halves of that swap are undone here and the section takes the
     standard treatment. */
  background: #F4F4F5;
  padding: 80px 40px;
  text-align: center;
}

/* ===== GETTING STARTED ===== */

/* White, because the FAQ above it is mist now and two mist bands in a
   row read as one long section. The two cards inside invert with it:
   see the steps box and the form card below. */
.dt-msp-start {
  background: #FFFFFF;
  padding: 80px 40px 100px;
}

.dt-msp-start__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.dt-msp-start__sub {
  font-family: var(--dt-ff);
  font-size: 16px;
  color: var(--dt-text-body);
  line-height: 1.7;
  margin: 0 0 40px;
}

/* Was a bare top rule, so the steps sat transparent on the mist band
   while the form beside them was a white card: two halves of the same
   row, one of them a card and one not. Same fill, border and radius as
   the form card now. The inner dividers stay, but the first one is
   redundant once the card has its own edge. */
.dt-msp-start__steps {
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 8px 32px;
}

.dt-msp-start__steps .dt-msp-step:last-child {
  border-bottom: 0;
}

.dt-msp-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid #e8e8e9;
}

.dt-msp-step__num {
  font-family: var(--dt-ff);
  font-size: 36px;
  font-weight: 800;
  /* A large faded display numeral, the same treatment Home, the
     services hub and the audit sub-pages use. It was the one instance
     still on a hand-written alpha rather than the token, and at 0.22
     it was a third fainter than the rest. */
  color: var(--dt-accent-1-faded);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  margin-top: 2px;
}

.dt-msp-step__name {
  font-family: var(--dt-ff);
  font-size: 16px;
  font-weight: 700;
  color: #161718;
  margin: 0 0 6px;
}

.dt-msp-step__body {
  font-family: var(--dt-ff);
  font-size: 15px;
  color: var(--dt-text-body) !important;
  line-height: 1.65;
  margin: 0;
}

/* Form card (right column) */

.dt-msp-start__right {
  background: #F4F4F5;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  border: 1px solid #e8e8e9;
  position: sticky;
  top: 24px;
}

/* HubSpot form field overrides */

.dt-msp-start__right .hs-form fieldset {
  max-width: 100% !important;
}

.dt-msp-start__right .hs-form .field,
.dt-msp-start__right .hs-form .hs-form-field {
  margin-bottom: 14px;
}

.dt-msp-start__right .hs-form label,
.dt-msp-start__right .hs-form .hs-label {
  font-family: var(--dt-ff) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #161718 !important;
  margin-bottom: 5px;
  display: block;
}

.dt-msp-start__right .hs-form input[type="text"],
.dt-msp-start__right .hs-form input[type="email"],
.dt-msp-start__right .hs-form input[type="tel"],
.dt-msp-start__right .hs-form select,
.dt-msp-start__right .hs-form textarea {
  font-family: var(--dt-ff) !important;
  font-size: 14px !important;
  color: #161718 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #e8e8e9 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.dt-msp-start__right .hs-form input:focus,
.dt-msp-start__right .hs-form select:focus,
.dt-msp-start__right .hs-form textarea:focus {
  border-color: #A4063E !important;
}

.dt-msp-start__right .hs-form .hs-button,
.dt-msp-start__right .hs-form input[type="submit"] {
  font-family: var(--dt-ff) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #A4063E !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 4px;
}

.dt-msp-start__right .hs-form .hs-button:hover,
.dt-msp-start__right .hs-form input[type="submit"]:hover {
  background: #87052f !important;
}

.dt-msp-start__right .hs-form .hs-error-msgs {
  font-family: var(--dt-ff);
  font-size: 12px;
  color: #dc2626;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

/* ===== CTA ===== */

.dt-msp-cta {
  background: #161718;
  padding: 80px 40px;
  text-align: center;
}

.dt-msp-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}

.dt-msp-cta__body {
  font-family: var(--dt-ff);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin: 0 0 32px;
}

.dt-msp-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 960px) {
  .dt-msp-start__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .dt-msp-start__right {
    position: static;
  }
}

@media (max-width: 860px) {
  .dt-msp-challenge__grid,
  .dt-msp-model__grid,
  .dt-msp-opmodel__cols {
    grid-template-columns: 1fr;
  }

  .dt-msp-cap__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .dt-msp-hero {
    padding: 80px 24px 64px;
  }

  .dt-msp-challenge,
  .dt-msp-model,
  .dt-msp-cap,
  .dt-msp-opmodel,
  .dt-msp-faq,
  .dt-msp-start,
  .dt-msp-cta {
    padding: 56px 24px;
  }

  .dt-msp-cap__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ =====
   No box rule here any more. The band is mist, so details.dt-acc takes
   the shared white card and #E8E8E9 border it uses everywhere else. */
/* The blog hero photograph, through the resizer at three widths, the
   same bands the rest of the site's heroes use. It was a 1.2MB PNG
   served raw from /hubfs/. Declared on :root so the listing band and
   the post band below share one set of URLs. */
:root {
  --dt-blog-hero-img: url('https://148777188.fs1.hubspotusercontent-eu1.net/hub/148777188/hubfs/hero-blog.png?width=800&name=hero-blog.png');
}

@media (min-width: 561px) {
  :root { --dt-blog-hero-img: url('https://148777188.fs1.hubspotusercontent-eu1.net/hub/148777188/hubfs/hero-blog.png?width=1280&name=hero-blog.png'); }
}

@media (min-width: 821px) {
  :root { --dt-blog-hero-img: url('https://148777188.fs1.hubspotusercontent-eu1.net/hub/148777188/hubfs/hero-blog.png?width=1920&name=hero-blog.png'); }
}

/* =====================================================================
   Blog post (individual post page)
   ===================================================================== */

.blog-post {
  margin: 0 auto;
  max-width: 960px;
}

.blog-post__meta {
  margin-bottom: 1.4rem;
}

.blog-post__meta a {
  text-decoration: underline;
}

.blog-post__timestamp {
  display: block;
}

.blog-post__tags svg {
  height: auto;
  margin-right: 0.35rem;
  width: 15px;
}

.blog-post__tag-link {
  font-size: 0.875rem;
}

/* Blog related posts */

.blog-related-posts {
  background-color: #F8FAFC;
}

.blog-related-posts h2 {
  text-align: center;
}

.blog-related-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.blog-related-posts__post {
  flex: 0 0 100%;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1000px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 3);
  }
}

.blog-related-posts__image {
  height: auto;
  max-width: 100%;
}

.blog-related-posts__title {
  margin: 0.7rem 0;
}

/* Blog comments */

.blog-comments {
  margin: 0 auto;
  max-width: 680px;
}

.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}

/* =====================================================================
   Blog listing page
   ===================================================================== */

/* --- Hero --- */

.dt-bl-hero {
  background: linear-gradient(rgba(22,23,24,0.78), rgba(22,23,24,0.78)), var(--dt-blog-hero-img) center/cover no-repeat;
  padding: 120px 40px 100px;
  position: relative;
  overflow: hidden;
}

.dt-bl-hero__circles {
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  opacity: 0.06;
  pointer-events: none;
}

.dt-bl-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.dt-bl-eyebrow {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 20px;
}

.dt-bl-hero__h1 {
  font-family: var(--dt-ff);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
  margin: 0 0 24px;
}

.dt-bl-hero__sub {
  font-family: var(--dt-ff);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* --- Featured posts block (latest 6, page 1 only) --- */

.dt-bl-featured {
  background: #FFFFFF;
  padding: 72px 40px 56px;
  border-bottom: 1px solid #e8e8e9;
}

.dt-bl-featured__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dt-bl-featured__hdr {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.dt-bl-featured__heading {
  font-family: var(--dt-ff);
  font-size: 22px;
  font-weight: 700;
  color: #161718;
  margin: 0;
  white-space: nowrap;
}

.dt-bl-featured__rule {
  display: block;
  flex: 1;
  height: 1px;
  background: #e8e8e9;
}

.dt-bl-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- Controls bar: search + category pills + sort --- */

.dt-bl-controls {
  background: #F4F4F5;
  border-bottom: 1px solid #e8e8e9;
  padding: 18px 40px;
}

.dt-bl-controls__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.dt-bl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 14px;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}

.dt-bl-search:focus-within {
  border-color: #A4063E;
}

.dt-bl-search__icon {
  flex-shrink: 0;
}

.dt-bl-search__input {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: #161718;
  border: none;
  outline: none;
  background: transparent;
  width: 180px;
}

.dt-bl-search__input::placeholder {
  color: var(--dt-text-meta);
}

.dt-bl-cats__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
}

.dt-bl-pill {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 500;
  color: #161718;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 100px;
  padding: 6px 16px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  display: inline-block;
}

.dt-bl-pill:hover,
.dt-bl-pill--active {
  background: #A4063E;
  border-color: #A4063E;
  color: #FFFFFF;
}

.dt-bl-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dt-bl-sort__label {
  font-family: var(--dt-ff);
  font-size: 13px;
  color: var(--dt-text-meta);
  white-space: nowrap;
}

.dt-bl-sort__select {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 500;
  color: #161718;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  outline: none;
}

.dt-bl-sort__select:focus {
  border-color: #A4063E;
}

/* --- Post list (horizontal rows, posts 7+) --- */

.dt-bl-list {
  background: #FFFFFF;
  padding: 0 40px 80px;
}

.dt-bl-list__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dt-bl-empty {
  font-family: var(--dt-ff);
  color: var(--dt-text-body);
  text-align: center;
  padding: 60px 0;
}

.dt-bl-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid #e8e8e9;
  text-decoration: none;
}

.dt-bl-row__img-wrap {
  flex-shrink: 0;
  width: 160px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

.dt-bl-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dt-bl-row:hover .dt-bl-row__img {
  transform: scale(1.04);
}

.dt-bl-row__body {
  flex: 1;
  min-width: 0;
}

.dt-bl-row__meta {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt-text-meta);
  margin: 0 0 8px;
}

.dt-bl-row__tag {
  color: #A4063E;
}

/* These sit between real words — the tag list and the date — so they
   are read out and read across at 1.73:1, which is close to invisible.
   The metadata colour is what the text either side of them uses. */
.dt-bl-row__sep {
  color: var(--dt-text-meta);
}

.dt-bl-row__title {
  font-family: var(--dt-ff);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.dt-bl-row__title a {
  color: #161718;
  text-decoration: none;
}

.dt-bl-row__title a:hover {
  color: #A4063E;
}

.dt-bl-row__excerpt {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body);
  line-height: 1.65;
  margin: 0;
}

.dt-bl-row__read {
  font-family: var(--dt-ff);
  font-size: 14px;
  font-weight: 600;
  color: #A4063E;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.dt-bl-row__read:hover {
  text-decoration: underline;
}

/* --- Post card --- */

.dt-bl-card {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dt-bl-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.dt-bl-card__img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dt-bl-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dt-bl-card:hover .dt-bl-card__img {
  transform: scale(1.04);
}

.dt-bl-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dt-bl-card__cat {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 10px;
}

.dt-bl-card__title {
  font-family: var(--dt-ff);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
}

.dt-bl-card__title a {
  color: #161718;
  text-decoration: none;
}

.dt-bl-card__title a:hover {
  color: #A4063E;
}

.dt-bl-card__date {
  font-family: var(--dt-ff);
  font-size: 12px;
  color: var(--dt-text-meta);
  margin: 0 0 12px;
}

.dt-bl-card__excerpt {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;
}

.dt-bl-card__more {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 600;
  color: #A4063E;
  text-decoration: none;
  margin-top: auto;
}

.dt-bl-card__more:hover {
  text-decoration: underline;
}

/* --- Pagination --- */

.dt-bl-pag {
  background: #FFFFFF;
  padding: 32px 40px 64px;
}

.dt-bl-pag__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.dt-bl-pag__btn {
  font-family: var(--dt-ff);
  font-size: 14px;
  font-weight: 600;
  color: #161718;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dt-bl-pag__btn:hover {
  background: #A4063E;
  border-color: #A4063E;
  color: #FFFFFF;
}

.dt-bl-pag__info {
  font-family: var(--dt-ff);
  font-size: 13px;
  color: var(--dt-text-meta);
}

/* --- CTA section --- */

.dt-bl-cta {
  background: #161718;
  padding: 100px 40px;
}

.dt-bl-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.dt-bl-cta__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.dt-bl-cta__line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(164, 6, 62, 0.5);
}

.dt-bl-cta__eyebrow {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* The band behind this is #161718. Plum is 2.29:1 there; the theme's
     plum-light is 6.40:1. Same rule as every other eyebrow on a
     near-black band. */
  color: var(--dt-plum-light);
}

.dt-bl-cta__heading {
  font-family: var(--dt-ff);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0 0 20px;
}

.dt-bl-cta__body {
  font-family: var(--dt-ff);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 40px;
}

.dt-bl-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dt-bl-cta__btn-primary {
  font-family: var(--dt-ff);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF !important;
  background: #A4063E;
  border-radius: 8px;
  padding: 14px 32px;
  text-decoration: none;
  transition: background 0.15s ease;
  display: inline-block;
}

.dt-bl-cta__btn-primary:hover {
  background: #8a0534;
  color: #FFFFFF !important;
}

.dt-bl-cta__btn-secondary {
  font-family: var(--dt-ff);
  font-size: 15px;
  font-weight: 500;
  /* Also on #161718, and a link, so it needs 4.5:1 for normal text
     rather than the 3:1 a large heading would get. */
  color: var(--dt-plum-light);
  text-decoration: none;
  display: inline-block;
}

.dt-bl-cta__btn-secondary:hover {
  text-decoration: underline;
}

/* =====================================================================
   Blog post page
   ===================================================================== */

/* --- Post header — featured image overlaid with title --- */

.dt-post-hdr {
  /* CSS fallback when no featured image is set */
  background: linear-gradient(rgba(22,23,24,0.82), rgba(22,23,24,0.82)), var(--dt-blog-hero-img) center/cover no-repeat;
  padding: 120px 40px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* When the post has a cover photograph, the three widths come in as
   custom properties on the element and the gradient stays here, so the
   band can still pick a size by viewport. An inline background
   shorthand could not: it beats the stylesheet and carries no media
   query. Without a cover the rule above stands and the band keeps the
   shared blog hero. */
.dt-post-hdr--has-cover {
  background-image: linear-gradient(rgba(22,23,24,0.72), rgba(22,23,24,0.72)), var(--dt-cover-s);
}

@media (min-width: 561px) {
  .dt-post-hdr--has-cover {
    background-image: linear-gradient(rgba(22,23,24,0.72), rgba(22,23,24,0.72)), var(--dt-cover-m);
  }
}

@media (min-width: 821px) {
  .dt-post-hdr--has-cover {
    background-image: linear-gradient(rgba(22,23,24,0.72), rgba(22,23,24,0.72)), var(--dt-cover-l);
  }
}

.dt-post-hdr__back {
  display: inline-block;
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}

.dt-post-hdr__back:hover {
  color: #ffffff;
}

.dt-post-hdr__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dt-post-hdr__cat {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 20px;
}

.dt-post-hdr__title {
  font-family: var(--dt-ff);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0 0 24px;
}

.dt-post-hdr__meta {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dt-post-hdr__sep {
  color: rgba(255, 255, 255, 0.3);
}

.dt-post-hdr__readtime {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Post body --- */

.dt-post-body {
  background: #FFFFFF;
  padding: 64px 40px 56px;
}

/* 800px to match .dt-post-hdr__inner directly above it. At 720px the reading
   column sat 40px inside the title block on each side, so the left edges of the
   h1 and the body copy did not line up — part of why the column read as narrow
   independently of its absolute width. Everything in here (TOC, content, tags,
   prev/next nav) shares the edge, so they all align as one column. */
.dt-post-body__inner {
  max-width: 800px;
  margin: 0 auto;
}

/* Post content typography — matches site body text standard */

.dt-post-content {
  font-family: var(--dt-ff);
  font-size: 18px;
  line-height: 1.75;
  color: var(--dt-text-body);
}

.dt-post-content h2 {
  font-size: 1.53em;
  font-weight: 700;
  color: #161718;
  margin: 2em 0 0.6em;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.dt-post-content h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: #161718;
  margin: 1.75em 0 0.5em;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.dt-post-content h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: #161718;
  margin: 1.5em 0 0.4em;
}

/* The global `p { font-size: 1rem }` in elements/_typography.css targets the
   element directly, so it beats the size inherited from .dt-post-content above
   — and with the root at 24px that made every post paragraph 24px, larger than
   the h2s sized in em off the intended value. Re-inherit explicitly so the
   .dt-post-content size actually applies and the heading hierarchy is right. */
.dt-post-content p {
  font-size: inherit;
  margin: 0 0 1.4em;
}

.dt-post-content a {
  color: #A4063E;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dt-post-content a:hover {
  color: #8a0534;
}

.dt-post-content ul,
.dt-post-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.5em;
}

.dt-post-content li {
  font-size: inherit;
  margin-bottom: 0.5em;
}

.dt-post-content blockquote {
  border-left: 3px solid #A4063E;
  margin: 2em 0;
  padding: 16px 24px;
  background: #F4F4F5;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--dt-text-body);
}

.dt-post-content blockquote p:last-child {
  margin-bottom: 0;
}

.dt-post-content pre {
  background: #161718;
  border-radius: 8px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 1.6em 0;
}

.dt-post-content code {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875em;
  background: #F4F4F5;
  padding: 2px 6px;
  border-radius: 4px;
  color: #161718;
}

.dt-post-content pre code {
  background: none;
  padding: 0;
  color: #e5e7eb;
  font-size: 0.85em;
  line-height: 1.6;
}

/* ── Tables in a post body ───────────────────────────────────
   The LAPS post carries three data tables and pushed the document
   146px past a 320 viewport, 106px at 360 and 91px at 375 — the
   worst overflow on the site. The tables are authored inside the
   post, so this is fixed here, in the template's stylesheet, and
   any table a future post contains is contained automatically.

   The wrapper is added by the script in blog-post.html, which
   keeps the table a real table: `display: block` on a <table>
   also makes it scroll, but it stops the inline `width: 100%`
   stretching the table across the column on desktop, because the
   anonymous table box inside shrinks to fit instead.

   The @media rule below is the no-JavaScript fallback, and it
   disables itself once the script runs: a wrapped table is no
   longer a child of .dt-post-content, so the selector stops
   matching and the wrapper takes over at every width. */

.dt-post-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  max-width: 100%;
}

.dt-post-table-wrap > table {
  margin: 0;
}

.dt-post-content table {
  max-width: 100%;
}

@media (max-width: 700px) {
  .dt-post-content > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.dt-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.6em 0;
  display: block;
}

/* ── Figure captions ─────────────────────────────────────────
   These are 15px — body-sized text explaining the diagram above
   them — and every post writes them inline as color:#8B8C8C,
   which is 3.37:1 on white. The colour is in the post's own HTML,
   so a plain class rule loses to it; !important is what beats an
   inline style, and is used here deliberately rather than by
   habit. Fixing it in the template means the existing six posts
   and every future one are covered without editing any of them.

   If a caption's colour is ever set deliberately per post, drop
   the !important and set it in the post instead. */
.dt-post-content figcaption {
  color: var(--dt-text-meta) !important;
  font-family: var(--dt-ff);
}

.dt-post-content hr {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 2.5em 0;
}

/* --- Reading progress bar --- */

.dt-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #A4063E;
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* --- Table of contents --- */

.dt-post-toc {
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-left: 3px solid #A4063E;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 36px;
}

.dt-post-toc__label {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 12px;
}

.dt-post-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.dt-post-toc__item {
  counter-increment: toc;
  margin-bottom: 6px;
}

.dt-post-toc__item--sub {
  padding-left: 16px;
}

.dt-post-toc__link {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body);
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.15s ease;
}

.dt-post-toc__link:hover {
  color: #A4063E;
}

/* --- Social share --- */

.dt-post-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #E5E7EB;
  flex-wrap: wrap;
}

.dt-post-share__label {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-text-meta);
  white-space: nowrap;
}

.dt-post-share__btns {
  display: flex;
  gap: 10px;
}

.dt-post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 500;
  color: #161718;
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dt-post-share__btn:hover {
  background: #161718;
  border-color: #161718;
  color: #ffffff;
}

/* --- Author bio --- */

.dt-post-author {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #F4F4F5;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  margin-top: 32px;
}

.dt-post-author__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.dt-post-author__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161718;
  color: #ffffff;
  font-family: var(--dt-ff);
  font-size: 20px;
  font-weight: 700;
}

.dt-post-author__info {
  flex: 1;
  min-width: 0;
}

.dt-post-author__name {
  font-family: var(--dt-ff);
  font-size: 15px;
  font-weight: 700;
  color: #161718;
  margin: 0 0 6px;
}

.dt-post-author__bio {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body);
  line-height: 1.65;
  margin: 0;
}

/* --- Prev / Next navigation --- */

.dt-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #E5E7EB;
}

.dt-post-nav__item {
  font-family: var(--dt-ff);
  font-size: 14px;
  font-weight: 600;
  color: #A4063E;
  text-decoration: none;
}

.dt-post-nav__item:hover {
  text-decoration: underline;
}

.dt-post-nav__item--next {
  margin-left: auto;
}

/* --- Tags --- */

.dt-post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #E5E7EB;
}

.dt-post-tags__label {
  font-family: var(--dt-ff);
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-text-meta);
  margin-right: 4px;
}

.dt-post-tags__pill {
  font-family: var(--dt-ff);
  font-size: 12px;
  font-weight: 500;
  color: #A4063E;
  background: rgba(164, 6, 62, 0.07);
  border: 1px solid rgba(164, 6, 62, 0.2);
  border-radius: 100px;
  padding: 5px 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dt-post-tags__pill:hover {
  background: #A4063E;
  color: #FFFFFF;
  border-color: #A4063E;
}

/* --- Related posts --- */

.dt-post-related {
  background: #F4F4F5;
  padding: 72px 40px;
}

.dt-post-related__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dt-post-related__heading {
  font-family: var(--dt-ff);
  font-size: 22px;
  font-weight: 700;
  color: #161718;
  margin: 0 0 36px;
}

.dt-post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- Responsive breakpoints (listing) --- */

@media screen and (max-width: 960px) {
  .dt-bl-featured__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .dt-bl-controls__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-bl-search {
    width: 100%;
  }

  .dt-bl-search__input {
    width: 100%;
  }

  .dt-bl-sort {
    justify-content: flex-end;
  }
}

@media screen and (max-width: 600px) {
  .dt-bl-hero {
    padding: 80px 24px 60px;
  }

  .dt-bl-featured {
    padding: 48px 24px 40px;
  }

  .dt-bl-featured__grid {
    grid-template-columns: 1fr;
  }

  .dt-bl-controls {
    padding: 16px 24px;
  }

  .dt-bl-list {
    padding: 0 24px 60px;
  }

  .dt-bl-row {
    flex-wrap: wrap;
  }

  .dt-bl-row__img-wrap {
    width: 100%;
    height: 180px;
  }

  .dt-bl-row__read {
    width: 100%;
  }

  .dt-bl-pag {
    padding: 24px 24px 48px;
  }

  .dt-bl-cta {
    padding: 72px 24px;
  }
}

/* Blog post responsive */

@media screen and (max-width: 960px) {
  .dt-post-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .dt-post-hdr {
    padding: 80px 24px 64px;
  }

  .dt-post-body {
    padding: 48px 24px 40px;
  }

  .dt-post-nav {
    flex-direction: column;
    gap: 12px;
  }

  .dt-post-nav__item--next {
    margin-left: 0;
  }

  .dt-post-related {
    padding: 56px 24px;
  }

  .dt-post-related__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Datatechs — Resource Gate page styles
   ============================================================ */

/* --- Hero --- */

.dt-rg-hero {
  background: #161718;
  padding: 120px 40px 100px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.dt-rg-circles {
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  opacity: 0.06;
  pointer-events: none;
}

.dt-rg-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dt-rg-eyebrow {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* The hero behind this is near-black, where plum is 2.29:1. Same
     inversion as the blog CTA band and the MSP numerals. */
  color: var(--dt-plum-light);
  margin: 0 0 20px;
}

.dt-rg-title {
  font-family: var(--dt-ff);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.dt-rg-subtitle {
  font-family: var(--dt-ff);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Body layout --- */

.dt-rg-body {
  background: #F4F4F5;
  padding: 80px 40px 100px;
}

.dt-rg-body__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 56px;
  align-items: stretch;
}

/* --- Preview column (left) --- */

.dt-rg-preview {
  background: #161718;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  min-height: 420px;
}

.dt-rg-preview__doc {
  position: absolute;
  inset: 0;
  background: #161718;
  overflow: hidden;
}

/* Rotated "second page" peeking behind the main document */
.dt-rg-preview__doc::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 20px;
  right: 20px;
  bottom: 0;
  background: rgba(164, 6, 62, 0.35);
  border-radius: 8px 8px 0 0;
  transform: rotate(-3deg);
  transform-origin: bottom center;
}

.dt-rg-preview__doc::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 36px;
  right: 36px;
  bottom: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px 8px 0 0;
  transform: rotate(1.5deg);
  transform-origin: bottom center;
}

/* Document sheet — sits above the pseudo-element pages */
.dt-rg-preview__doc-sheet {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.dt-rg-preview__doc-sheet svg {
  width: 100%;
  display: block;
}

/* Bullet panel overlaid at the bottom of the card */
.dt-rg-preview__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px 32px 28px;
  z-index: 5;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.dt-rg-bullets-heading {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 14px;
}

.dt-rg-bullets {
  font-family: var(--dt-ff);
  font-size: 15px;
  color: var(--dt-text-body);
  line-height: 1.7;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dt-rg-bullets li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}

.dt-rg-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A4063E;
}

/* --- Form card (right column) --- */

.dt-rg-form-card {
  background: #FFFFFF;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  position: sticky;
  top: 24px;
}

.dt-rg-form-eyebrow {
  font-family: var(--dt-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A4063E;
  margin: 0 0 12px;
}

.dt-rg-form-title {
  font-family: var(--dt-ff);
  font-size: 22px;
  font-weight: 700;
  color: #161718;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.dt-rg-form-sub {
  font-family: var(--dt-ff);
  font-size: 14px;
  color: var(--dt-text-body);
  line-height: 1.6;
  margin: 0 0 24px;
}

.dt-rg-form-body {
  margin-bottom: 16px;
}

/* HubSpot form field overrides */

.dt-rg-form-body .hs-form fieldset {
  max-width: 100% !important;
}

.dt-rg-form-body .hs-form .field,
.dt-rg-form-body .hs-form .hs-form-field {
  margin-bottom: 14px;
}

.dt-rg-form-body .hs-form label,
.dt-rg-form-body .hs-form .hs-label {
  font-family: var(--dt-ff) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #161718 !important;
  margin-bottom: 5px;
  display: block;
}

.dt-rg-form-body .hs-form input[type="text"],
.dt-rg-form-body .hs-form input[type="email"],
.dt-rg-form-body .hs-form input[type="tel"],
.dt-rg-form-body .hs-form select,
.dt-rg-form-body .hs-form textarea {
  font-family: var(--dt-ff) !important;
  font-size: 14px !important;
  color: #161718 !important;
  background: #F4F4F5 !important;
  border: 1.5px solid #e8e8e9 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  outline: none !important;
}

.dt-rg-form-body .hs-form input:focus,
.dt-rg-form-body .hs-form select:focus,
.dt-rg-form-body .hs-form textarea:focus {
  border-color: #A4063E !important;
  background: #ffffff !important;
}

.dt-rg-form-body .hs-form .hs-button,
.dt-rg-form-body .hs-form input[type="submit"] {
  font-family: var(--dt-ff) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #A4063E !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease;
  margin-top: 4px;
}

.dt-rg-form-body .hs-form .hs-button:hover,
.dt-rg-form-body .hs-form input[type="submit"]:hover {
  background: #87052f !important;
}

.dt-rg-form-body .hs-form .hs-error-msgs {
  font-family: var(--dt-ff);
  font-size: 12px;
  color: #dc2626;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

/* Trust note */

.dt-rg-trust {
  font-family: var(--dt-ff);
  font-size: 12px;
  color: var(--dt-text-meta);
  line-height: 1.5;
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* --- Responsive --- */

@media (max-width: 960px) {
  .dt-rg-body__inner {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 40px;
  }

  .dt-rg-preview {
    min-height: 480px;
  }

  .dt-rg-form-card {
    position: static;
  }
}

@media (max-width: 600px) {
  .dt-rg-hero {
    padding: 80px 24px 64px;
  }

  .dt-rg-body {
    padding: 48px 24px 64px;
  }

  .dt-rg-form-card {
    padding: 28px 20px;
  }
}
/* ============================================================
   Datatechs — Legal pages (Privacy Policy, Terms & Conditions)
   ------------------------------------------------------------
   One design shared by both pages. Everything here hangs off
   .dt-page--legal or a dt-legal-* class, so the two templates
   carry markup and copy only — no inline styling — and a change
   to the legal layout is made once.

   These pages are deliberately plainer than the marketing
   pages: a compact header, then a single readable column of
   document text. No cards, no artefacts, no closing CTA. The
   measure is capped at 860px, which is the comfortable reading
   range for continuous prose rather than the 1200px the
   marketing bands use.
   ============================================================ */


/* ── Page header ──────────────────────────────────────────── */

/* A light band under the fixed nav, separated from the white
   document below by a hairline rather than a change of weight. */
.dt-legal-header {
  background: #F4F4F5;
  border-bottom: 1px solid #e8e8e9;
  padding: 72px 40px 64px;
  font-family: var(--dt-ff);
}

/* The shared hero geometry gives every non-Home page's first
   section a 620px floor, which is right for a marketing hero
   and wrong for a legal page — the brief asks for a compact
   header. Overridden here rather than in the templates so both
   pages stay in step. Three classes plus the element beats the
   (0,2,1) of the shared rule, so this holds wherever the
   stylesheets end up concatenated. */
.body-container.dt-page--legal > section.dt-legal-header {
  min-height: 0;
  padding-top: 72px;
  padding-bottom: 64px;
}

.dt-legal-header__inner {
  max-width: 860px;
  margin: 0 auto;
}

/* The eyebrow is the site's .dt-eyebrow-rule component, unchanged:
   plum on a light band, and centred like every other page header.
   Nothing to restyle here. */

/* The three header slots are each a wrapper div around a rich text
   module, styled by element inside it. The class sits on markup the
   template owns, so the typography cannot be lost by an editor
   retyping the heading in the WYSIWYG. */
.dt-legal-header__title h1 {
  font-family: var(--dt-ff);
  font-weight: 700;
  /* Smaller than .dt-h1-hero — this is a document title, not a
     marketing headline. */
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #161718;
  margin: 0 0 18px;
}

.dt-legal-header__intro p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dt-text-body);
  max-width: 660px;
  margin: 0 auto;
}

/* #8B8C8C would be 3.07:1 at 13.5px on the mist band, well under AA.
   --dt-text-body is the grey the site moved its light-ground text to in
   #45 and clears it at 4.82:1, so the date can read as secondary without
   the contrast cost. */
.dt-legal-header__updated p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dt-text-body);
  margin: 26px 0 0;
}


/* ── Document body ────────────────────────────────────────── */

.dt-legal-body {
  background: #ffffff;
  padding: 72px 40px 96px;
}

/* The whole document is one rich text field, so its headings,
   paragraphs and lists are styled by element within this scope.
   An editor working in the WYSIWYG gets the right typography
   without having to know a single class name, and pasted or
   reordered content cannot drift out of the design.

   Selectors are descendant, not child: HubSpot wraps every
   module in a real element on the published page, so anything
   depending on the document elements being direct children of
   .dt-legal-doc would break in production (see #36). */
.dt-legal-doc {
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--dt-ff);
}

/* Each numbered section opens with a hairline, which is the only
   division the page needs — it separates the sections without
   boxing them. */
.dt-legal-doc h2 {
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161718;
  border-top: 1px solid #e8e8e9;
  margin: 44px 0 14px;
  padding-top: 40px;
}

.dt-legal-doc h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.dt-legal-doc h3 {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #161718;
  margin: 28px 0 10px;
}

.dt-legal-doc p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--dt-text-body);
  margin: 0 0 18px;
}

.dt-legal-doc ul,
.dt-legal-doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.dt-legal-doc li {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--dt-text-body);
  margin-bottom: 8px;
}

.dt-legal-doc li:last-child {
  margin-bottom: 0;
}

/* The one flourish: list markers pick up the brand plum. It is a
   2px dot repeated down the page, which is as much accent as a
   legal page should carry. */
.dt-legal-doc li::marker {
  color: #A4063E;
}

.dt-legal-doc strong {
  font-weight: 600;
  color: #161718;
}

.dt-legal-doc a {
  color: #A4063E;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.dt-legal-doc a:hover {
  color: #87052f;
}

/* Keyboard focus has to stay visible on a page that is mostly
   links in running text. */
.dt-legal-doc a:focus-visible {
  outline: 2px solid #A4063E;
  outline-offset: 2px;
  border-radius: 2px;
}

.dt-legal-doc p:last-child,
.dt-legal-doc ul:last-child,
.dt-legal-doc ol:last-child {
  margin-bottom: 0;
}


/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 820px) {
  /* !important to match the shared hero rule, which sets this
     section's padding with !important at the same breakpoint.
     The specificity above still decides which of the two wins. */
  .body-container.dt-page--legal > section.dt-legal-header {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 767px) {
  .dt-legal-body {
    padding: 48px 22px 64px;
  }

  .dt-legal-header__intro p {
    font-size: 16px;
  }

  .dt-legal-doc h2 {
    font-size: 19px;
    margin-top: 36px;
    padding-top: 30px;
  }

  .dt-legal-doc p,
  .dt-legal-doc li {
    font-size: 15px;
  }
}
/* Error pages */

.error-page {
  padding: 10rem 0;
  position: relative;
  text-align: center;
}

.error-page:before {
  color: #F3F6F9;
  content: attr(data-error);
  font-size: 40vw;
  font-weight: bold;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: -1;
}

@media screen and (min-width: 1100px) {
  .error-page:before {
    font-size: 20rem;
  }
}

/* System pages */

.systems-page {
  margin: 0 auto;
  max-width: 700px;
  padding: 3rem 1.4rem;
}

.systems-page--search-results {
  max-width: 100%;
}

.systems-page .header {
  background-color: transparent;
  border-bottom: none;
  padding: 0;
}

.systems-page .success {
  background-color: #CDE3CC;
  border: 1.5px solid #4F7D24;
  border-radius: 6px;
  color: #4F7D24;
  display: inline-block;
  margin: 1.4rem 0;
  padding: 0.1rem 0.7rem;
  width: 100%;
}

.systems-page form input {
  max-width: 100%;
}

.systems-page form input[type='submit'] {
  margin: 0.7rem 0;
  display: block;
}

/* Search pages */

.hs-search-results__title {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  text-decoration: underline;
}

.hs-search-results__title:hover {
  text-decoration: none;
}

.hs-search-results__description {
  padding-top: 0.7rem;
}

/* Password prompt */

.password-prompt input[type=password] {
  height: auto !important;
  margin-bottom: 1.4rem;
}

.systems-page #hs-login-widget-remember,
.systems-page #hs-login-widget-remember ~ label {
  display: inline-block;
  margin-bottom: 0.175rem;
}

.systems-page #hs_login_reset {
  display: block;
  margin-bottom: 0.7rem;
}

/* Backup unsubscribe */

.backup-unsubscribe #email-prefs-form div {
  padding-bottom: 0 !important;
}

.backup-unsubscribe input[type=email] {
  font-size: 0.875rem !important;
  margin-bottom: 1.4rem;
  padding: 0.7rem !important;
}

/* Subscription preferences */

#email-prefs-form .item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#email-prefs-form .item.disabled input:disabled {
  cursor: not-allowed;
}

/* Membership pages */

#hs-membership-form a[class*='show-password'] {
  font-size: 0.75rem;
}

/* Input error messages */

.form-input-validation-message ul.hs-error-msgs {
  padding-left: 0;
  margin: 0;
}

.form-input-validation-message ul.hs-error-msgs li {
  margin: 0;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}