.elementor-kit-6{--e-global-color-primary:#0017AB;--e-global-color-secondary:#00CCAB;--e-global-color-text:#3A3A3A;--e-global-color-accent:#C8860A;--e-global-color-265569e:#00A6FF;--e-global-color-f804481:#AFE4B3;--e-global-color-856edc1:#FFFFFF;--e-global-color-3f43d5a:#F7F7F5;--e-global-color-d84b86b:#E8ECFF;--e-global-color-dasdeep:#000C5C;--e-global-typography-primary-font-family:"Caladea";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-font-style:normal;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:500;--e-global-typography-text-text-transform:uppercase;--e-global-typography-text-letter-spacing:0.1em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.08em;--e-global-typography-c9ab781-font-family:"Caladea";--e-global-typography-c9ab781-font-weight:700;font-family:"Montserrat", Sans-serif;font-size:17px;font-weight:400;line-height:1.8em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"Caladea", Sans-serif;font-size:54px;font-weight:400;line-height:1.14em;letter-spacing:-0.01em;}.elementor-kit-6 h2{font-family:"Caladea", Sans-serif;font-size:42px;font-weight:400;line-height:1.2em;letter-spacing:-0.005em;}.elementor-kit-6 h3{font-family:"Caladea", Sans-serif;font-size:24px;font-weight:700;line-height:1.3em;letter-spacing:0em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-6{font-size:17px;}.elementor-kit-6 h1{font-size:44px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:16px;line-height:1.8em;}.elementor-kit-6 h1{font-size:36px;}.elementor-kit-6 h2{font-size:30px;}.elementor-kit-6 h3{font-size:21px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* === DAS global === */
body { background-color: #0017AB; }

/* === DAS section rhythm — 2px teal rule at every dark/light boundary ===
   Phase 1. The rule sits on the section that OPENS each transition.
   Nothing else marks a boundary: no bars, no angles, no gradients.        */
.elementor-element-d47c9ac,   /* Home  0 dark -> 1 light */
.elementor-element-9b5552b,   /* Home  2 light -> 3 dark */
.elementor-element-b1d1e6e,   /* Home  3 dark -> 4 light */
.elementor-element-1a698d2,   /* Home  4 light -> 5 dark */
.elementor-element-tstsec1,   /* Home  5 dark -> 6 light (testimonials) */
.elementor-element-749cd29,   /* Home  7 light -> 8 dark */
.elementor-element-7694f9b,   /* About 0 dark -> 1 light */
.elementor-element-58ca7ca,   /* About 1 light -> 2 dark */
.elementor-element-19e69da,   /* About 2 dark -> 3 light */
.elementor-element-0fdca50,   /* About 5 light -> 6 dark */
.elementor-element-9de5991,   /* Contact 0 dark -> 1 light */
.elementor-element-svcgrid,   /* Services 0 dark -> 1 light */
.elementor-element-svcband    /* Services 1 light -> 2 dark */
{ border-top: 0; }
/* RETIRED 18 Aug 2026 on Nicole's review. The 2px teal rule was drawn at
   every dark/light boundary. Against Off-White it reads as a stray stripe:
   the royal-blue-to-off-white edge is already a hard boundary and does not
   need marking. The rule is KEPT on the two blue-on-darker-blue edges,
   where it is the only thing that draws the seam at all: the footer
   (#0017AB CTA over #06167F footer, 1.20:1) and the mobile nav panel
   (#06167F over #0017AB). Do not reinstate it on light boundaries. */

/* Superseded by Phase 5: the 2px teal boundary rule now lives on the
   <footer> element itself, so it applies on every page. The old
   Contact-only workaround below is retired to avoid a doubled 4px line.
   .elementor-element-c20cee9 { border-bottom: 2px solid #00CCAB; } */


/* === DAS PHASE 3 — BUTTON CONSISTENCY (16 Aug 2026) =====================
   Every button on this site is a v4 atomic `e-button`. There is no
   `.elementor-button` class anywhere in the DOM and no inline style
   attributes: atomic widget styles compile to `.e-<id>-<key>` rules in
   local-*-frontend-*.css, and Elementor's own default lives in
   base-desktop.css (`.e-button-base{border-radius:2px}`). Both load AFTER
   post-6.css, which is this file, so a bare `.e-button-base` rule here
   loses on source order. One extra element .elementor-kit-6 (`body`) lifts these
   to 0,1,1, which beats the widget rules. Elementor's own default is
   `.elementor .e-button-base` at 0,2,0, so the base rule below carries a
   second .elementor-kit-6 at 0,2,1 to outrank it. That is why there is no
   !important on border-radius. Per-button radius/type/padding values have
   been cleared at source, so nothing competes.
   The legacy `.elementor-button` .elementor-kit-6s are kept as a no-op today so
   any v3 button added later inherits the same treatment.               */

body .elementor .e-button-base,   /* 0,2,1 — must outrank Elementor's own
                                     `.elementor .e-button-base` at 0,2,0 */
body .e-button-base,              /* 0,1,1 — fallback for any button that
                                     renders outside the .elementor wrapper */
body .elementor-button,
body a.elementor-button,
body button.elementor-button {
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 16px 32px 16px 34px;  /* +2px left offsets trailing tracking */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  border: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Primary, on Royal Blue sections */
body .e-button-base:not(.das-cta-secondary),
body .elementor-button:not(.das-cta-secondary) {
  background-color: #00CCAB;
  color: #0017AB;
}
body .e-button-base:not(.das-cta-secondary):hover,
body .elementor-button:not(.das-cta-secondary):hover {
  background-color: #00B396;
  transform: translateY(-1px);
}

/* Primary, on Off-White sections */
body .das-section-light .e-button-base:not(.das-cta-secondary),
body .das-section-light .elementor-button:not(.das-cta-secondary) {
  background-color: #0017AB;
  color: #FFFFFF;
}
body .das-section-light .e-button-base:not(.das-cta-secondary):hover,
body .das-section-light .elementor-button:not(.das-cta-secondary):hover {
  background-color: #001489;
}

/* Secondary, outlined. Class sits ON the button for atomic v4, and on a
   wrapper for any future v3 widget, so both shapes are covered. */
body .e-button-base.das-cta-secondary,
body .das-cta-secondary .elementor-button {
  background-color: transparent;
  color: #00CCAB;
  border: 1px solid #00CCAB;
  padding: 15px 31px 15px 33px;
}
body .e-button-base.das-cta-secondary:hover,
body .das-cta-secondary .elementor-button:hover {
  background-color: #00CCAB;
  color: #0017AB;
}


/* --- Phase 3 addenda, from measurement ---------------------------------- */

/* Labels stay on one line. Without this the header CTA wraps: it is a flex
   item pinned to its own 240px min-width whenever the header row is tight. */
body .elementor .e-button-base,
body .e-button-base,
body .elementor-button { white-space: nowrap; }

/* Exception. The footer CTA sits in a 174px column that its 240px min-width
   already overflows, so nowrap would spill it sideways instead of wrapping.
   Phase 5 deletes this button; until then let it wrap, which is the safer
   failure. Logged as a known Phase 3 exception. */
body .elementor .e-button-base.e-6de41b1-0e5aab5 { white-space: normal; }

/* Elementor hides the footer CTA at 1024px and below via the widget's own
   tablet/mobile display setting, which compiles to 0,1,0. The Phase 3
   `display:inline-flex` above sits at 0,2,1 and was resurrecting it on
   phones and tablets. Restore the hide at matching specificity. */
@media (max-width: 1024px) {
  body .elementor .e-button-base.e-6de41b1-0e5aab5,
  body .e-button-base.e-6de41b1-0e5aab5 { display: none; }
}

/* Below 400px "Schedule a Conversation" measures 213px at 14px, and the
   narrowest button box on the site is 235px wide with 66px of padding.
   Drop to 12px, tighten tracking, pull the padding in: measured 194px of
   text in a 210px content box at 320px viewport. */
@media (max-width: 400px) {
  body .elementor .e-button-base,
  body .e-button-base,
  body .elementor-button {
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 16px 12px 16px 13px;
  }
  body .elementor .e-button-base.das-cta-secondary,
  body .e-button-base.das-cta-secondary {
    padding: 15px 11px 15px 12px;
  }
  /* `body` prefix required: the Fluent Forms block further down this file
     shares the .fluentform.ff-default .ff-btn-submit .elementor-kit-6 and would
     otherwise win on source order. */
  body .fluentform.ff-default .ff-btn-submit {
    font-size: 12px;
    letter-spacing: .05em;
    padding: 16px 12px 16px 13px;
  }
}


/* === DAS PHASE 4 — EYEBROW LABELS (16 Aug 2026) =======================
   Same specificity story as Phase 3. post-6.css (this file) loads before
   the atomic widget CSS, and Elementor's own `.elementor .e-heading-base`
   sits at 0,2,0 — it sets `margin:0`, which would eat the margin-bottom
   below. `body .elementor .das-eyebrow` = 0,2,1 and wins cleanly, with no
   !important. Size, weight, tracking, transform and colour were cleared
   at source on all 20 tagged eyebrows, so nothing competes.
   Eyebrows render as <h6 class="e-<id>-<key> e-heading-base das-eyebrow">.
   The `.elementor-widget-heading` .elementor-kit-6 is a v3 no-op, kept for any
   legacy widget added later.                                          */

body .elementor .das-eyebrow,
body .das-eyebrow,
body .elementor-widget-heading .elementor-heading-title.das-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  body .elementor .das-eyebrow,
  body .das-eyebrow { font-size: 11px; letter-spacing: 0.12em; }
}

/* Teal on Royal Blue, Royal Blue on Off-White. The light-section rule is
   0,3,1 so it outranks the base rule above regardless of order. */
body .elementor .das-eyebrow,
body .das-eyebrow { color: #00CCAB; }
body .elementor .das-section-light .das-eyebrow,
body .das-section-light .das-eyebrow { color: #0017AB; }

/* === DAS hero CTA wave motion === */
.e-a1b0f1d-30d3c81, .e-9f690a7-f9f07b8 { position: relative; overflow: hidden; }
.e-a1b0f1d-30d3c81::after, .e-9f690a7-f9f07b8::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 64px 14px;
  transition: opacity .3s ease;
}
.e-a1b0f1d-30d3c81::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 8 0 16 6 T 32 6 T 48 6 T 64 6 L64 14 L0 14 Z' fill='%230017AB'/%3E%3C/svg%3E"); }
.e-9f690a7-f9f07b8::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 8 0 16 6 T 32 6 T 48 6 T 64 6 L64 14 L0 14 Z' fill='%2300CCAB'/%3E%3C/svg%3E"); opacity: 0; }
.e-a1b0f1d-30d3c81:hover::after, .e-9f690a7-f9f07b8:hover::after {
  opacity: 1;
  animation: das-wavedrift 3s linear infinite;
}
/* Hover lift uses brightness, not a tenth blue-green, so the palette stays nine. */
body .e-button-base.e-a1b0f1d-30d3c81:hover { background-color: #00CCAB; filter: brightness(1.08); transform: translateY(-1px); }
body .e-button-base.e-9f690a7-f9f07b8:hover { background-color: transparent; border-color: #00CCAB; color: #00CCAB; }
@keyframes das-wavedrift {
  from { background-position-x: 0; }
  to   { background-position-x: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .e-a1b0f1d-30d3c81::after, .e-9f690a7-f9f07b8::after { animation: none !important; }
}

/* === DAS Fluent Forms — the form section is Off-White as of Phase 1 === */
.fluentform.ff-default .ff-el-form-control {
  background: #FFFFFF;
  border: 1px solid rgba(0,23,171,.20);
  color: #3A3A3A;
  border-radius: 2px;
}
.fluentform.ff-default .ff-el-form-control::placeholder { color: #3A3A3A; opacity: .55; }
.fluentform.ff-default .ff-el-form-control:focus {
  border-color: #00CCAB;
  box-shadow: none;
  background: #FFFFFF;
}
.fluentform.ff-default .ff-el-input--label label {
  color: #3A3A3A;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}
.fluentform.ff-default .ff-btn-submit {
  background: #0017AB !important;   /* light section: Royal Blue fill, per Phase 3 */
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  border: none;
  border-radius: 4px;
  padding: 16px 32px 16px 34px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease;
}
.fluentform.ff-default .ff-btn-submit:hover { background: #001489 !important; filter: none; }
.fluentform.ff-default .ff-message-success {
  color: #3A3A3A;
  border-left: 2px solid #00CCAB;
  background: rgba(0,204,171,.10);
}

/* === DAS hairlines & per-side borders (v4 per-side border-width does not
   compile, so these live here). Tint follows the section they sit on. === */
/* on Royal Blue */
/* .e-294c787 REMOVED 9 Sep 2026 (homepage redesign 2.1). This was the rule
   above the hero strapline. The brief moves the strapline to the bottom
   right of the hero and drops the divider, and this hand-written hairline
   was what actually drew it - the widget's own border props never compiled,
   which is the whole reason this block exists. Removing the source props
   alone left the line on the page. */
.e-092eb6c{border:0 solid #FFFFFF29;border-top-width:1px;border-style:solid;border-color:#FFFFFF29}
.e-153dca1{border:0 solid #FFFFFF29;border-top-width:1px;border-style:solid;border-color:#FFFFFF29}
.e-497aa76{border:0 solid #FFFFFF29;border-top-width:1px;border-style:solid;border-color:#FFFFFF29}
.e-af3cb7b{border:0 solid #FFFFFF29;border-top-width:1px;border-style:solid;border-color:#FFFFFF29}
/* on Off-White */
.e-77cc82e{border:0 dashed #0017AB1A;border-left-width:1px;border-style:dashed;border-color:#0017AB1A}
.e-6df2bec{border:0 solid #0017AB1A;border-top-width:1px;border-style:solid;border-color:#0017AB1A}
.e-fe6f12f{border:0 solid #0017AB1A;border-bottom-width:1px;border-style:solid;border-color:#0017AB1A}
.e-1ec6237{border:0 solid #0017AB1A;border-bottom-width:1px;border-style:solid;border-color:#0017AB1A}
.e-fcd8d61{border:0 solid #0017AB1A;border-bottom-width:1px;border-style:solid;border-color:#0017AB1A}
/* spacer sizing */
body .elementor .e-8a9dd8d{padding:0 !important;height:1px !important;min-height:1px !important}
body .elementor .e-71a2b72{padding:0 !important;height:2px !important;min-height:2px !important}
body .elementor .e-3ecbd7c{padding:0 !important;width:1px !important}
body .elementor .e-83343a2{padding:0 !important;width:1px !important}
body .elementor .e-aeb9fd9{padding:0 !important;width:1px !important}

/* === DAS PHASE 5 — FOOTER REBUILD (16 Aug 2026) =========================
   Three faults fixed. (1) Footer nav rendered #3A3A3A on #0017AB, measured
   1.08:1 — the widget's colour was bound to the kit global `text`. Rebound
   at source and governed here. (2) The duplicate Schedule a Conversation
   button is deleted, so the Phase 3 "known fail" (footer CTA wrapping to
   two lines above 1025px) is gone with it. (3) Contact, social and NMSDC
   slots added.

   Selectors are scoped to the nav and the contact block rather than the
   bare `footer a` in the brief, so the logo link and the social icons keep
   their own treatment. `body footer.elementor` = 0,3,1, which is needed to
   outrank the Phase 4 eyebrow rule (`body .elementor .das-eyebrow`, 0,2,1)
   and Elementor's own nav-menu output.                                    */

/* The inner flexbox is capped at 1200px, so a border on it would not reach
   the viewport edge. Full-bleed blue and the boundary rule go on the
   <footer> element itself. This replaces the Phase 1 workaround that hung
   the closing rule off the bottom of Contact's last light section. */
footer.elementor-location-footer {
  /* Darkened from #06167F 9 Sep 2026 (homepage redesign, global rule 1.2):
     lightness reduced 9%, hue held at ~232deg. White measures 15.46:1. */
  /* Bound to the global colour "Deep Blue (Header/Footer)" (#000C5C), added
     to the kit 9 Sep 2026 so the header and this footer can never drift
     apart again. Change the global, not this value. Fallback repeats it so
     a kit CSS regeneration failure degrades to the right colour.        */
  background-color: var(--e-global-color-dasdeep, #000C5C);
  /* Teal boundary rule REMOVED 19 Aug 2026 on Nicole's call. It was the last
     surviving instance of the Phase 1 rule, kept because #0017AB over #06167F
     is 1.20:1. Flipping the How We Work stepper to Off-White put an off-white
     section directly above the footer on that page, where the teal read as a
     stray stripe against white. Known cost: on pages that still close on a
     Royal Blue section the footer seam is now effectively invisible. The
     footer's own four-column layout is what signals the boundary instead. */
}

/* Footer links are deliberately NOT uppercase and NOT letter-spaced. The
   header nav is both. That difference is most of what stops the two
   reading as the same component. */
body footer.elementor .elementor-nav-menu a,
body footer.elementor .elementor-nav-menu a.elementor-item,
body footer.elementor .das-footer-contact,
body footer.elementor .das-footer-contact a {
  color: rgba(255,255,255,0.82);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: color 0.2s ease;
}
body footer.elementor .elementor-nav-menu a:hover,
body footer.elementor .elementor-nav-menu a.elementor-item:hover,
body footer.elementor .elementor-nav-menu a.elementor-item:focus,
body footer.elementor .das-footer-contact a:hover {
  color: #00CCAB;
  background-color: transparent;
}

/* `.elementor .e-heading-base` sets margin:0 at 0,2,0 — see Phase 4. */
body footer.elementor .das-eyebrow {
  color: #00CCAB;
  margin-bottom: 16px;
}

/* e-divider renders as a bare <hr>, so the line is a border, not a
   background. Same 1px at rgba(255,255,255,0.18) the brief asks for. */
body footer.elementor hr.das-footer-divider {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin: 48px 0 24px;
}

body footer.elementor .das-copyright {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

body footer.elementor .das-footer-tagline {
  font-family: 'Caladea', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  color: #00CCAB;
}

/* Social icons. 48px box so the touch target matches the Phase 3 buttons. */
body footer.elementor .elementor-social-icon {
  background-color: rgba(255,255,255,0.10);
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body footer.elementor .elementor-social-icon:hover { background-color: #00CCAB; }
body footer.elementor .elementor-social-icon i,
body footer.elementor .elementor-social-icon svg { color: #FFFFFF; fill: #FFFFFF; }
body footer.elementor .elementor-social-icon:hover i,
body footer.elementor .elementor-social-icon:hover svg { color: #0017AB; fill: #0017AB; }

/* RETIRED 28 Aug 2026 (Task 7). The NMSDC badge slot and its dashed
   placeholder are gone from footer 787. The badge now lives on About Us
   only, at the head of the Certification section — see DAS TASK 7 below.
   If a footer badge is ever wanted again it must use attachment 1087,
   the white-field variant; 1086's interior is transparent and its dark
   lettering measures 1.29:1 on this footer. */

/* === end DAS PHASE 5 =================================================== */

/* === DAS PHASE 6a — LIGHT-TO-LIGHT SECTION RULE (16 Aug 2026) ==========
   Adjacent Off-White sections ran together as one block with no boundary.
   Dark/light boundaries keep the 2px full-bleed teal rule from Phase 1;
   light/light gets a hairline instead. Teal on Off-White measures 1.75:1
   and would be near invisible, and a heavy bar between two light sections
   reads as a mistake. A faint Royal Blue rule reads as considered.

   Built as a ::before on the section that OPENS each boundary, matching
   Phase 1's convention of hanging the rule off the opening section. It is
   a pseudo-element and not a divider widget because the centred
   max-width:1200px cannot be expressed as a border-top, and the brief
   says prefer CSS over editing _elementor_data. All four targets were
   checked first: position:relative, overflow:visible, no existing
   ::before. Do not mix these two boundary treatments on one edge.       */
.elementor-element-a375f15::before,   /* Home    1 light -> 2 light */
/* .elementor-element-25235ae::before was "Home 6 light -> 7 light".
   The redesign moved the stats band directly under the hero and made it
   Royal Blue, so it now opens a DARK-to-dark boundary, not a light one.
   It keeps this geometry and takes the TASK 15c colour instead. */
.elementor-element-25235ae::before,   /* Home 0 dark -> 1 dark (hero -> stats) */
.elementor-element-1a698d2::before,   /* Home 1 dark -> 2 dark (stats -> client trust) */
.elementor-element-2d05356::before,   /* About   3 light -> 4 light */
.elementor-element-8efad55::before,   /* About   4 light -> 5 light */
.elementor-element-c20cee9::before,  /* Contact   1 light -> 2 light */
.elementor-element-lupdl::before,  /* LUP 4 light -> 5 light (Phase 1 Task 16, 7 Sep 2026).
     Leadership Under Pressure runs D L D L L D: the testimonial slot and the
     one-sheet section are the only same-colour pair on that page. Every other
     boundary there alternates and needs nothing. Preconditions checked: the
     section is a clone of rsrsub, so position:relative, overflow:visible and
     no other ::before. Revisit if the page rhythm changes once copy lands. */
/* .elementor-element-rsrsub::before REMOVED (Phase 1 Task 15, 7 Sep 2026).
   It was the "Resources 3 light -> 4 light" hairline. Task 15 deleted the
   rsrgate section, so rsrsub now opens against the Royal Blue rsrart band.
   That is a dark-to-light boundary, which by the rule above takes no
   hairline, and mixing the two treatments on one edge is ruled out here. */
/* Resources 1 dark -> 2 dark (Task 15c, 31 Aug 2026). The only dark-to-dark
   section adjacency on the site, which is why it never had a rule. It shares
   this geometry so there is one definition of the seam width; only the rule
   COLOUR differs, and that override lives in the TASK 15c block at the end.
   Preconditions re-checked on rsrart before adding: position:relative,
   overflow:visible, no existing ::before. */
.elementor-element-rsrlup::before,   /* Resources: rsrart -> rsrlup, both #0017AB (Task 2, 14 Sep 2026). rsrlup replaced rsrsub in this slot and kept the LUP bands own dark styling, creating a new dark-to-dark pair; the old svcband->t5cta pair no longer exists (svcband moved off Services onto this page). Colour overridden in TASK 15c. */
.elementor-element-ldwho::before,   /* 1092 Leadership Development 2 light -> 3 light */
.elementor-element-cwho::before,    /* 1093 Executive Coaching 2 light -> 3 light */
.elementor-element-kwho::before,    /* 1094 Culture & Climate 2 light -> 3 light */
.elementor-element-cquo::before,    /* 1093 Executive Coaching 6 light -> 7 light */
.elementor-element-ixquo::before,   /* 1095 Intercultural Development 2 light -> 3 light
     Added 8 Sep 2026 when the two Task 7 testimonials moved off the Services
     cards onto their own service pages. Each lands as a light section directly
     after another light one: cquo after cfaq on 1093, ixquo after ixop on 1095.
     1095 has no faq or wrk band, so its quote sits straight after the one-pager.
     Preconditions checked on both: freshly built sections, position:relative
     from .e-flexbox-base, overflow visible, no other ::before.            */
.elementor-element-cfaq::before,    /* 1093 Executive Coaching 5 light -> 6 light */
.elementor-element-kfaq::before,    /* 1094 Culture & Climate 5 light -> 6 light */
.elementor-element-ldfaq::before,   /* 1092 Leadership Development 5 light -> 6 light
     Fix-series Task 4, 8 Sep 2026, REVISED 8 Sep 2026 when the one-pager band
     moved from index 5 to index 1 at Nicole's instruction. The page still runs
     D L D L L L D by count, but the light run is now op+who at the top and
     wrk+faq lower down, not faq+op. So the two same-colour openers are WHO and
     FAQ. The one-pager band now opens against the Royal Blue hero, which is a
     dark-to-light boundary and by the rule above takes no hairline: .*op was
     de-registered here rather than left to draw a rule against a dark edge.
     Preconditions checked on the two new targets: ldwho, cwho and kwho are
     freshly built sections with position:relative from .e-flexbox-base,
     overflow visible and no other ::before. All three service pages run the
     same rhythm. Any further service page built from build_svc.py needs its
     two here too, and needs them chosen after the section order is final. */
.elementor-element-ldquo::before, /* 1092 Leadership Development 6 light -> 7 light (Andre Dick quote, 13 Oct 2026). ldquo sits between ldfaq and the Royal Blue ldcta, so it opens a light-to-light seam against ldfaq and takes the hairline; its edge with ldcta is light-to-dark and takes nothing. Preconditions: clone of cquo, position:relative from .e-flexbox-base, no other ::before. */
.elementor-element-ixwho::before,   /* 1095 Intercultural Development 2 light -> 3 light, added Task 1 14 Sep 2026 */
.elementor-element-sfwho::before,   /* 1096 Strategic Facilitation 2 light -> 3 light, added Task 1 14 Sep 2026 */
.elementor-element-tawho::before,   /* 1097 Transformation Advisory 2 light -> 3 light, added Task 1 14 Sep 2026 */
.elementor-element-rsrart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* At >=1248px this resolves to exactly 1200px, which is the measured
     content width of these sections, so the rule lines up with the text.
     The 48px deduction only bites below that, where it keeps the rule off
     the viewport edge instead of running bezel to bezel. */
  width: calc(100% - 48px);
  max-width: 1200px;
  height: 1px;
  background: rgba(0,23,171,0.32);  /* was 0.15, too faint to separate. 18 Aug 2026 */
  border: 0;
  pointer-events: none;
}
/* === end DAS PHASE 6a =================================================== */

/* === DAS HEADER v2 — matched to Nicole's Figma header (16 Aug 2026) =====
   Changes from the previous header: darker field, serif wordmark with a
   teal subline, wider gutters, nav unpinned from its 60% box, and the
   current-page marker moved from gold to brightness.

   COLOUR FLAG: #06167F is a new hex, not in the August palette, but it
   is the same hue as the primary (both sit at ~232 degrees) simply darker
   and less saturated, so it reads as a deeper Royal Blue rather than the
   dark navy the palette document rules out. Measured on it: white 14.70:1,
   teal 7.15:1, white-at-75% 8.60:1 . all pass. Still needs Darryl's
   sign-off as a palette addition. To revert, change this one value and the
   footer rule below to #0017AB.                            */
/* Darkened from #06167F 9 Sep 2026 (homepage redesign, global rule 1.2):
   HSL lightness reduced 9% with hue and saturation held, so it is the same
   deeper Royal Blue one step darker, not a shift toward navy or teal.
   Measured on #051474: white 15.46:1, teal 7.53:1. Body bands stay #0017AB,
   so the header/footer still read as distinctly darker than the page. */
/* DARKENED AGAIN 9 Sep 2026 (Nicole: "header bleeds into the sections below").
   #051474 was itself a darkening of #06167F, but measured against the page
   ground it was still only dL* 7.8 from #0017AB, which is below the point
   where an edge reads at all - the WCAG ratio (1.26:1) flatters it because
   contrast ratios compress in the dark end. #000C5C is dL* 12.9, a step you
   can actually see, with hue held at 232deg and saturation at 100%, so it is
   the same Royal Blue family and not a drift toward navy.
   Measured ON #000C5C: white 17.40:1, teal #00CCAB 8.47:1, nav white-at-75%
   9.86:1. Every one of those IMPROVED on #051474. The teal CTA chip gains
   separation from the bar for the same reason.
   Now bound to the kit global "Deep Blue (Header/Footer)" - change the
   global, not this value, and the footer follows automatically.       */
body header.elementor-location-header { background-color: var(--e-global-color-dasdeep, #000C5C); }

/* Full-bleed bar, content held to 1240px. This used to live in the Home
   page's HTML widget with !important and applied on the homepage ONLY,
   which is why the header sat differently on every other page. It belongs
   here, so it now applies everywhere. */
body header.elementor .e-da21068 {
  width: 100%;
  max-width: none;
  /* The mockup runs the bar almost edge to edge. 1240 was too narrow for
   the wider nav spacing and pushed the brand off the left edge. */
  padding-inline: max(30px, calc((100% - 1380px) / 2));
}

/* Brand block */
/* e-con-full makes a child container full width by default, and the flex
   item does not shrink, so without this the brand block claimed the whole
   1240px content box and pushed itself off the left edge. */
body header.elementor .das-brand {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-inline-end: auto;
}
body header.elementor .das-wordmark,
body header.elementor .das-wordmark a {
  font-family: 'Caladea', serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
body header.elementor .das-wordmark a:hover,
body header.elementor .das-wordmark a:focus-visible { color: #00CCAB; }

body header.elementor .das-header-tagline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #00CCAB;
  white-space: nowrap;
}

/* Nav sits in the same group as the CTA, per the mockup. */
body header.elementor .elementor-widget-nav-menu { width: auto; flex: 0 0 auto; }
body header.elementor .elementor-nav-menu--main a.elementor-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* --- Header CTA: smaller box, white label ------------------------------
   Requested 16 Aug 2026. Shrinking it is what buys the extra air between
   the wordmark and the nav: the nav and CTA are right-aligned as a group,
   so a narrower button moves the nav's left edge to the right.

   CONTRAST: the label was briefly white, which measured 2.05:1 on the
   teal fill and failed AA. Resolved 17 Aug 2026 by taking the header field
   colour #06167F as the label, which measures 7.15:1 on #00CCAB and ties
   the button back to the bar it sits on. The other approved option was the
   primary #0017AB at 5.98:1 . both pass, this one is the stronger of the
   two and is a one-value swap if the primary is preferred.

   Sizing is header-scoped and deliberately below the Phase 3 button spec
   (48px min-height). That guideline is a touch-target rule and this button
   is hidden below 768px, so it is only ever driven by a mouse.          */
body header.elementor .e-button-base {
  /* Must not be squeezed. The label is white-space:nowrap, so shrinking the
     box pushes the text outside the teal fill rather than wrapping it.
     Measured at 1280px: the button was compressed to 150px against a
     176px label, and the words spilled over the edge. */
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 11px 22px 11px 24px;
  color: #06167F;
}

/* Between the tablet breakpoint and ~1366px the full nav spacing no longer
   fits beside the brand block and the CTA. Tighten the item padding and the
   inter-item margin there instead of letting anything overflow or shrink.
   Elementor drives the gap through a custom property, so overriding the
   variable is cleaner than fighting its generated rule. */
@media (min-width: 1025px) and (max-width: 1366px) {
  body header.elementor .elementor-widget-nav-menu {
    --e-nav-menu-horizontal-menu-item-margin: 16px;
  }
  body header.elementor .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
    padding-inline: 12px;
  }
}
@media (max-width: 1024px) {
  body header.elementor .e-da21068 { padding-inline: 30px; }
}
@media (max-width: 767px) {
  body header.elementor .e-da21068 { padding-inline: 24px; }
  body header.elementor .das-wordmark,
  body header.elementor .das-wordmark a { font-size: 21px; }
  body header.elementor .das-header-tagline { font-size: 9.5px; letter-spacing: 0.12em; }
  /* CTA stays hidden below 768px so the burger is reachable. See the note
     in the previous header block: at 390px the content box is 330px and a
     240px min-width CTA pushes the toggle off-screen. */
  body header.elementor .e-button-base { display: none; }
}
/* === end DAS HEADER v2 ================================================= */

/* === DAS PHASE 6.5 - MOBILE NAVIGATION REPAIR ==========================
   Mobile nav was reported as "opens but the links have zero height". The
   links were never zero height. The header's inner container is
   position:sticky, and a sticky element ALWAYS creates a stacking context.
   It carried z-index:auto, so the whole header subtree sorted among the
   page's other positioned containers in DOM order, and every content
   section after it in the document painted over the open dropdown. The
   dropdown's own z-index:9997 is scoped inside the sticky context and
   cannot escape it, which is why raising it, or forcing max-height:none,
   changed nothing. Giving the sticky element a real z-index lifts the
   header and everything inside it above the page content.

   Hero H1 is z-index 2 (Phase 11), so 100 clears it with room to spare.
   Phase 12's page transition must be set ABOVE 100 when it is built.

   The earlier "every link computes to 0px" reading came from
   getBoundingClientRect on a subtree under transform:scaleY(0): the rects
   collapse while the computed heights stay correct. Measure computed
   height, not rects, under a transformed ancestor.                      */
body header.elementor-location-header { position: relative; z-index: 100; }
body header.elementor .e-con.e-da21068 { z-index: 100; }

/* The panel is the same #06167F as the bar it drops out of, so it reads as
   the bar extending downward. That leaves the panel/hero boundary at
   #06167F on #0017AB = 1.20:1, effectively invisible, so it takes the 2px
   teal rule - the only sanctioned way to draw that edge.                */
body header.elementor .elementor-nav-menu--dropdown {
  border-bottom: 2px solid #00CCAB;
}

/* Touch-target floor. Type, colour and padding are set at source on widget
   4a187b8 so Elementor generates them at its own specificity.           */
body header.elementor .elementor-nav-menu--dropdown a.elementor-item {
  min-height: 48px;
  display: flex;
  align-items: center;
}
body header.elementor .elementor-nav-menu--dropdown a.elementor-item:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: -2px;
}
/* === end DAS PHASE 6.5 ================================================= */

/* === DAS PHASE 8 - TESTIMONIALS (17 Aug 2026) ==========================
   Placeholder structure only. Five approved quotes with named attribution
   are required before launch. Owner: Darryl. See Open Item 9.

   The section is an ADDITION to the original eight-section homepage
   structure and is pending approval. Boundary bookkeeping that came with
   it: the new section now opens the Client Trust dark -> light boundary
   and takes the Phase 1 teal rule, and the founder section 25235ae drops
   to a Phase 6a light -> light hairline. Checked first: 25235ae is
   position:relative, overflow:visible, no existing ::before.           */
/* Three across, then two centred, per the brief. The card widths are driven
   here rather than from the widget's own percentage props because a percentage
   cannot subtract the gaps: 31.5% x 3 plus two 32px gaps overflowed the 1156px
   row by a fraction of a pixel and flex wrapped it to 2 + 2 + 1. calc() states
   the intent exactly and survives any future change to the content width.
   Source keeps its percentages so the Elementor editor still previews sanely. */
body .elementor .das-testimonial-card { width: calc((100% - 64px) / 3); }
@media (max-width: 1024px) {
  body .elementor .das-testimonial-card { width: calc((100% - 32px) / 2); }
}
@media (max-width: 767px) {
  body .elementor .das-testimonial-card { width: 100%; }
}

body .das-testimonial-card {
  transition: background-color 0.25s ease;
}
/* Hover is a fill change and nothing else. The brief rules out lift,
   shadow and scale, so they are pinned rather than merely omitted.     */
body .das-testimonial-card:hover {
  background-color: #DDE3FF;
  transform: none;
  box-shadow: none;
}

/* 40px teal rule under each quote. The v4 e-divider renders a bare <hr>,
   and Elementor's own `.elementor .e-divider-base` (0,2,0, loaded AFTER
   the kit sheet) paints it with height + background-color, not a border.
   So the rule is drawn the same way, and the .elementor-kit-6 carries the extra
   element to reach 0,2,1 and win.                                       */
body .elementor .das-quote-rule {
  width: 40px;
  max-width: 40px;
  height: 2px;
  border: 0;
  background-color: #00CCAB;
  margin: 4px 0;
  flex: 0 0 auto;
}
/* === end DAS PHASE 8 =================================================== */


/* === DAS PHASE 9 — FOUNDER PORTRAIT, ABOUT US (17 Aug 2026) ============
   The founder section is About #12 top-level index 4, id 2d05356. It was
   already Off-White and already carried das-section-light, so item 3 of the
   phase needed no background change. What follows is the split layout and
   the portrait frame.

   Why the widths are calc() and not percentages: the row (c521288) is a
   wrapping flexbox with a 56px gap. 40% + 60% + 56px overflows and flex
   drops the narrative column onto its own line. A percentage cannot
   subtract a gap. Same trap the testimonial cards hit in Phase 8. Source
   keeps 40%/56% so the Elementor editor still previews a split.        */

body .elementor .das-founder-portrait { width: calc((100% - 56px) * 0.4); }
body .elementor .das-founder-body     { width: calc((100% - 56px) * 0.6); }

/* The portrait frame. 4:5 with the subject centred, 4px radius, 3px Royal Blue
   left border (was Teal Mint; changed 7 Sep 2026 on Nicole's note), no drop shadow, no vignette. aspect-ratio, the overflow clip
   and the single-side border all have to live here rather than at source:
   v4 does not compile a per-side border-width, and without overflow:hidden
   the image square-corners straight through the 4px radius.            */
body .elementor .das-founder-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border-left: 3px solid #0017AB;
  box-shadow: none;
  align-self: flex-start;
}

/* The image is a v3 `image` widget inside the v4 flexbox, the same pattern
   the logos use. Its wrapper divs are block-level and have to be stretched
   before object-fit has anything to fit against.                        */
body .elementor .das-founder-portrait > .elementor-widget-image,
body .elementor .das-founder-portrait > .elementor-widget-image > .elementor-widget-container {
  width: 100%;
  height: 100%;
  margin: 0;
}
body .elementor .das-founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Credential chips. Six pills, no border, fill and radius are set at source.
   Only the margin needs to be here: Elementor's own `.elementor
   .e-paragraph-base` sits at 0,2,0 and would eat a source margin.       */
body .elementor .das-founder-chips { width: 100%; }
body .elementor .das-founder-chip  { margin: 0; }

/* Stack on mobile, portrait above the narrative. The source carries a
   mobile `width: 100%` on both columns, but that compiles to 0,1,0 and the
   calc() rules above sit at 0,2,1, so without this the two columns stayed
   side by side at 390px, 106px against 160px. Restore at matching
   specificity rather than weakening the desktop rule.                   */
@media (max-width: 767px) {
  body .elementor .das-founder-portrait,
  body .elementor .das-founder-body { width: 100%; }
}

/* === end DAS PHASE 9 =================================================== */

/* === DAS PHASE 10 — SERVICES + HOW WE WORK (17 Aug 2026) ===============

   10a. The six-card services grid.

   Widths are calc() for the reason established in Phases 8 and 9: a
   percentage cannot subtract a flex gap, and 3 x 31.5% + 2 x 32px
   overflows the row by a fraction of a pixel, which flex resolves by
   wrapping. Source keeps the percentages so the editor previews a grid.
   Breakpoints follow the site's configured Elementor values, tablet
   <=1024 and mobile <=767, not the brief's 1024-and-up.               */

body .elementor .das-service-card { width: calc((100% - 64px) / 3); }
@media (max-width: 1024px) {
  body .elementor .das-service-card { width: calc((100% - 32px) / 2); }
}
@media (max-width: 767px) {
  body .elementor .das-service-card { width: 100%; }
}

/* The 3px teal top rule on every card. Same colour on all six: six
   different accent colours would put back exactly the noise Phase 1
   removed. It lives here because v4 does not compile a per-side
   border-width.                                                        */
body .elementor .das-service-card {
  border-top: 3px solid #00CCAB;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  transition: background-color 0.25s ease, border-top-color 0.25s ease;
}
/* Hover is a fill change and a rule change, nothing else. Lift, shadow
   and scale are pinned off rather than merely left out.                 */
body .elementor .das-service-card:hover {
  background-color: #DDE3FF;
  border-top-color: #00B396;
  transform: none;
  box-shadow: none;
}


/* 10b. The five-stage stepper.

   Five stages at 18.4% plus four 24px gaps overflow the row, so the same
   calc treatment applies. */
body .elementor .das-stepper { position: relative; }
body .elementor .das-stage { width: calc((100% - 96px) / 5); }

/* The 1px connecting line, drawn behind the stage numbers. 22px is the
   mid-line of the 40px/1.1 number box, so the rule passes through the
   numerals' centre. Each number carries an opaque #0017AB background and
   trailing padding (set at source), which breaks the line cleanly either
   side of it and is what makes this read as a connected run rather than
   a strikethrough.                                                      */
body .elementor .das-stepper::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 204, 171, 0.4);
  pointer-events: none;
}
body .elementor .das-stage-num {
  padding-inline: 0 16px;
  position: relative;
}

/* Tablet. Five stages at 47% wrap to 3 + 2, and a horizontal line drawn
   at one fixed offset would cut through the second and third rows. No
   line is the honest answer between 768 and 1024. */
@media (max-width: 1024px) {
  body .elementor .das-stage { width: calc((100% - 24px) / 2); }
  body .elementor .das-stepper::before { display: none; }
}

/* Mobile. The line turns vertical and runs down the left, with the stage
   numbers pulled back over it so they still sit on the line. min-width
   46px against a ~38px numeral guarantees the 18px line offset is always
   covered by the number's own background.                              */
@media (max-width: 767px) {
  body .elementor .das-stage { width: 100%; }
  body .elementor .das-stepper { padding-left: 46px; }
  body .elementor .das-stepper::before {
    display: block;
    top: 12px;
    bottom: 12px;
    left: 18px;
    right: auto;
    width: 1px;
    height: auto;
  }
  body .elementor .das-stage-num {
    margin-left: -46px;
    min-width: 46px;
    padding-inline: 0 12px;
  }
}

/* === end DAS PHASE 10 ================================================== */

/* === DAS PHASE 11 - HERO VIDEO BACKGROUND (17 Aug 2026, scrim opened 18 Aug) =
   Elementor 4.2.2 atomic containers expose no background-video prop, so the
   hero video is a real <video> inside an HTML widget (dasvid1), pulled out of
   flex flow and pinned behind the content. The gradient below is the Phase 11
   scrim verbatim; it is what keeps the clip reading as slow light movement
   rather than as video. Do not lighten it.
   The hero must NOT get its own z-index: it has to stay a non-stacking
   context so the sticky header (z-index 100, Phase 6.5) paints over it. */

body .elementor .das-hero { position: relative; overflow: hidden; }

body .elementor .das-hero .das-hero-media-wrap {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; padding: 0; pointer-events: none;
}
body .elementor .das-hero .das-hero-media {
  position: absolute; inset: 0; overflow: hidden;
}
body .elementor .das-hero .das-hero-video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
  /* Nicole, 18 Aug: the revealed water was reading washed out against the
     100%-saturated Royal Blue elsewhere on the page. Re-saturating claws back
     some of that (mean saturation 84% -> 90%). It cannot fully fix it: foam is
     white, and white has no chroma to boost. */
  filter: saturate(2.0);
}
body .elementor .das-hero .das-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Opened up from the Phase 11 spec values (0.94/0.80/0.97) on Nicole's
     instruction of 18 Aug 2026: she found the clip too hidden and the result
     clashing. DEPARTS from Phase 11's "do not increase the video's
     visibility" - log with Open Item 8.

     Two stacked gradients, not one. All hero text sits in the left column
     (x 132-1012 of 1440) and the brightest foam is on the right, so a flat
     scrim had to be dark enough for the text everywhere, which hid the video
     everywhere. The 90deg wedge holds the text column and releases past 82%;
     the 180deg layer carries the overall tone and opens through the middle.
     Effective alpha = 1 - (1-wedge)(1-vertical).

     Measured worst case over four frames spanning the clip, per element:
       eyebrow  #00CCAB 12px  5.03:1  (needs 4.5) - was FAILING at 3.47:1,
                                       and at 4.38:1 on the spec's own values
       H1       #FFF 66px     5.79:1  (needs 3.0)
       body     #FFF 19px     6.11:1  (needs 4.5)
       tagline  #FFF 19px     8.24:1  (needs 4.5)
     Visible texture in the open right-hand zone is 2.4x the flat-scrim
     version. Do not flatten this back to a single gradient without
     re-measuring the eyebrow: teal is a light colour and it is the first
     thing to fail when the backdrop brightens. */
  background:
    linear-gradient(90deg,
      rgba(0,23,171,0.55) 0%,
      rgba(0,23,171,0.52) 62%,
      rgba(0,23,171,0.00) 82%),
    linear-gradient(180deg,
      rgba(0,23,171,0.82) 0%,
      rgba(0,23,171,0.80) 29%,
      rgba(0,23,171,0.38) 60%,
      rgba(0,23,171,0.74) 100%);
}

/* Content rides above the media layer. */
body .elementor .das-hero > .e-con,
body .elementor .das-hero > .e-con-inner { position: relative; z-index: 2; }

.das-hero h1,
.das-hero h2,
.das-hero p { position: relative; z-index: 2; color: #FFFFFF; }

.das-hero .das-rule {
  width: 64px; height: 2px; background: #00CCAB; border: 0; margin: 0 0 28px 0;
}

/* Mobile: the video now runs here too (29 Aug 2026, Nicole's request). It
   loads from a separate 640x360 / 0.86MB encode, 4.5x lighter than the
   desktop file, and still only after the load event so the hero poster --
   which is the LCP element on mobile -- is never queued behind it. The
   poster below stays as the pre-roll and as the fallback for reduced
   motion, Save-Data, 2g and iOS Low Power Mode. */
@media (max-width: 767px) {
  /* Only the legacy Elementor background-video container stays hidden; the
     real <video> is now allowed to paint. */
  .das-hero .elementor-background-video-container { display: none !important; }

  /* Revised 8 Sep 2026 (Nicole: "the video is barely visible on mobile, the
     blue is not see-through enough for the waves"). The flat 0.86 -> 0.92
     scrim that was here had been set by the ONE element that actually needs
     it: the 11px teal eyebrow. Everything else was being darkened for free.
     Required alpha, measured per row over 12 frames at 390px:
       eyebrow  #00CCAB 11px, top 172-218 of the hero            0.87
       CTA 2    #00CCAB 12px, 212-283 up from the hero's bottom  0.86
       body     #FFF    19px                                     0.63
       H1       #FFF    38px                                     0.49
       tagline  #FFF    19px                                     0.30
     So: two dark bands hold the two teal elements, and everything between
     them opens up. The bands are anchored in PX from the top and from the
     bottom, not in %, because those two elements sit at a fixed offset from
     their own edge at every width from 320 to 767 (eyebrow always top 172;
     CTA always 212-283 up from the bottom) while the hero's height runs
     804 to 1076. A % gradient would slide off them as the copy reflows.
     Effective alpha = 1 - (1-band)(1-base) = 0.885 in the bands, 0.68 between.
     Mean video transmission 0.11 -> 0.22, and 0.32 in the open zones.
     Re-measured worst case per element over 12 frames at 320/390/430/600px:
       eyebrow  #00CCAB 11px/600  4.75:1  (needs 4.5)  <- still the binding one
       CTA 2    #00CCAB 12px/600  4.85:1  (needs 4.5)
       body     #FFF    19px/400  5.40:1  (needs 4.5)
       tagline  #FFF    19px/400  5.40:1  (needs 4.5)
       H1       #FFF    38px/400  5.40:1  (needs 3.0)
     Teal is a light colour and it is the first thing to fail when the
     backdrop brightens. Do not lower the 0.68 base or move the band stops
     without re-measuring the eyebrow and the outline CTA. */
  body .elementor .das-hero .das-hero-media::after {
    background:
      linear-gradient(180deg,
        rgba(0,23,171,0.64) 0,
        rgba(0,23,171,0.64) 230px,
        rgba(0,23,171,0.00) 300px),
      linear-gradient(0deg,
        rgba(0,23,171,0.00) 130px,
        rgba(0,23,171,0.64) 190px,
        rgba(0,23,171,0.64) 300px,
        rgba(0,23,171,0.00) 370px),
      linear-gradient(180deg,
        rgba(0,23,171,0.68),
        rgba(0,23,171,0.68));
  }

  /* The poster fallback (reduced motion, Save-Data, 2g, iOS Low Power Mode)
     carries the same profile so the two versions look like one design. */
  body .elementor .das-hero {
    background-image:
      linear-gradient(180deg,
        rgba(0,23,171,0.64) 0,
        rgba(0,23,171,0.64) 230px,
        rgba(0,23,171,0.00) 300px),
      linear-gradient(0deg,
        rgba(0,23,171,0.00) 130px,
        rgba(0,23,171,0.64) 190px,
        rgba(0,23,171,0.64) 300px,
        rgba(0,23,171,0.00) 370px),
      linear-gradient(180deg,
        rgba(0,23,171,0.68),
        rgba(0,23,171,0.68)),
      url('/wp-content/uploads/2026/08/homepage-hero-poster-mobile.jpg');
    background-size: cover;
    background-position: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .das-hero video,
  .das-hero .das-hero-media,
  .das-hero .das-hero-media-wrap,
  .das-hero .elementor-background-video-container { display: none !important; }
}
/* === end DAS PHASE 11 ================================================== */


/* === DAS REVISIONS - NICOLE'S REVIEW PASS (18 Aug 2026) =================
   Ten notes off a walkthrough of the finished build. Everything that is
   CSS-only lives here. The homepage card and interaction work lives in the
   "DAS - Motion & Interactions" block (widget dasmotn1) alongside the
   existing hover and tab code, so all homepage behaviour stays in one file.

   1  teal boundary rules retired            -> top of this file
   5  light-to-light hairline strengthened   -> Phase 6a block
   6  Client Trust names                     -> below
   4  How We Work stepper flipped to light   -> below
   ====================================================================== */

/* --- 6. CLIENT TRUST NAMES ---------------------------------------------
   Were Caladea 700 at 22px with a 56px gap, which read as five bold
   headlines crowded into one line. Regular weight and more air makes them
   read as a list of organizations rather than as a headline.

   26px is not an arbitrary bump. Caladea has four styles and no 500 or
   600, so the build rule is 400 at 26px and above, 700 below it. Going
   regular therefore requires going to 26px, and the two changes are the
   same change. White on Royal Blue is 12.28:1.

   REVISED 4 Sep 2026 on Nicole's instruction: names stepped down one size
   (26 -> 24 desktop, 24 -> 22 tablet, 21 -> 20 mobile) and the row given
   the gap retuned (88 -> 48) with the section container widened 1240 -> 1400,
   so all seven names sit on ONE line spanning the container instead of
   clustering centrally and spilling two names onto a second row. Measured
   at 1440: names 991px + six 48px gaps = 1279 of 1336 available.
   NOTE: 24px at weight 400 departs from the Phase 2 rule of 400 at >=26px
   and 700 below. Kept at 400 deliberately: 700 restores the crowded bold
   headline look this block was written to fix.                          */
body .elementor .elementor-element-aee19e8 {
  gap: 48px;
  flex-wrap: wrap;
  row-gap: 32px;
}
body .elementor .elementor-element-aee19e8 > *, body .elementor .das-partner-name {
  font-family: 'Caladea', Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0.005em;
}
/* Five names at 26px plus four 88px gaps need roughly 1100px. Below that
   the gap closes before the row is allowed to wrap, so the names never
   break mid-word. */
@media (max-width: 1200px) {
  body .elementor .elementor-element-aee19e8 { gap: 40px; row-gap: 28px; }
  body .elementor .elementor-element-aee19e8 > *, body .elementor .das-partner-name { font-size: 22px; }
}
@media (max-width: 767px) {
  body .elementor .elementor-element-aee19e8 { gap: 24px; row-gap: 20px; }
  body .elementor .elementor-element-aee19e8 > *, body .elementor .das-partner-name { font-size: 20px; font-weight: 700; }
}

/* --- 4. HOW WE WORK - STEPPER SECTION FLIPPED TO OFF-WHITE -------------
   The page ran royal blue hero straight into royal blue stepper, so it was
   one unbroken blue field from the header to the footer. Phase 10b called
   for a dark stepper on the grounds that five stages read as a single
   continuous journey, but that reading comes from the connecting line and
   survives the background change. The page now alternates like the
   homepage does.

   Teal cannot come with it. #00CCAB on #F7F7F5 measures 1.75:1, so the
   stage numbers and subtitles move to Royal Blue #0017AB, which is the
   correct accent on light sections everywhere else on this site. The
   connecting line moves to Royal Blue at 25% for the same reason.

   Targeting is by tag inside .das-stage rather than by the e-hwws* style
   keys, because [class*="e-hwws"] also matches the stage container
   e-hwwst1 and would recolour the whole card.                           */
body .elementor .elementor-element-hwwstep {
  background-color: #F7F7F5;
  padding-top: 64px;          /* was 110px. Gap above the row was 268px. */
}
body .elementor .elementor-element-83bad04 {
  /* 140 -> 96 (Phase 10b) -> 72 (redesign brief 4.1, "reduce hero height").
     72px is the site's standard page-header bottom padding, the same value
     Task 15c set on rsrhero, so this hero is now sized like every other. */
  padding-bottom: 72px;
}
/* Task 6b, 26 Aug 2026. How We Work had no H1 at all: the hero line was an
   H2 and the eyebrow above it was a second H2. The hero line is now the H1,
   stage titles moved h3 -> h2, subtitles h4 -> h3, and the bare 01-05
   numerals left the heading tree entirely for <p class="das-stage-num">.
   These .elementor-kit-6s are deliberately tag-tolerant so they hold whichever way
   the tags land. Title and subtitle take the same colour, so one rule does
   both. The number rule stays class-first: at 0,3,1 it still outranks the
   generic `> p` body rule at 0,2,2 now that the numeral is a <p>.       */
body .elementor .das-stage > .das-stage-num {
  color: #0017AB;
  background-color: #F7F7F5;  /* opaque, so it still breaks the line */
}
body .elementor .das-stage > h2,
body .elementor .das-stage > h3,
body .elementor .das-stage > h4 { color: #0017AB; }
body .elementor .das-stage > p  { color: #3A3A3A; }
body .elementor .das-stepper::before { background: rgba(0, 23, 171, 0.25); }
/* Atomic v4 widgets carry no .elementor-element-<id> class, only containers
   do, so an id .elementor-kit-6 here matched nothing and the footnote stayed white
   at 70% on an off-white field, i.e. invisible. Target the style key.
   rgba(58,58,58,.78) over #F7F7F5 measures 5.53:1, passes AA at 15px.   */
body .elementor [class*="e-hwwfoot-"],
body .elementor [class*="e-hwwfoot-"] * { color: rgba(58, 58, 58, 0.78); }

/* === end DAS REVISIONS ================================================= */


/* === DAS REVISIONS 19 AUG 2026, SECOND PASS ============================ */

/* --- Teal footer rule, homepage only ----------------------------------
   Retired site-wide yesterday because the How We Work and Contact pages
   now close on an Off-White section, where a teal stripe against white
   read as a stray line. The homepage closes on the Royal Blue final CTA,
   and #0017AB over #06167F is the blue-on-darker-blue case the rule was
   written for, so it comes back there and only there. About and Services
   also close on Royal Blue; they are deliberately left without it, per
   Nicole's "homepage only". Revisit if that reads as inconsistent.     */
body.home footer.elementor-location-footer {
  border-top: 2px solid #00CCAB;
}

/* --- Services cards, second paragraph open at rest ---------------------
   FIX-SERIES TASK 2c + 2e, 8 Sep 2026. The hover reveal is removed.

   It had two faults the audit named. Nothing on the card said a second
   paragraph existed, so on a desktop it was undiscoverable; and under
   (hover: none) the escape hatch left it permanently open, so a phone
   showed strictly more copy than a 1440 desktop. The extra paragraph now
   reads at rest at every breakpoint, which is the state the copy was
   written for anyway.

   With nothing left to collapse, align-items goes back to the source
   value `stretch`. That is Task 2e: flex sizes each WRAPPED LINE
   independently, so the three cards in a desktop row match each other,
   the two in a tablet row match each other, and a mobile card is its own
   line and keeps its natural height. No JavaScript, no fixed heights.

   The three min-heights go with it. They were the measured tallest
   COLLAPSED card in each band and are now always exceeded, so they can
   only ever fight the stretch. The 3px teal rule and the background
   hover stay: those are affordance, not a reveal.                     */
body .elementor .das-service-grid { align-items: stretch; }
body .elementor .das-service-card {
  transition: background-color .25s ease, border-top-color .25s ease;
}

body .elementor .das-service-extra {
  margin: 14px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #3A3A3A;
}

/* === end DAS REVISIONS 19 AUG =========================================== */


/* === DAS HEADER FIT (24 Aug 2026, corrected and re-tuned 26 Aug 2026) ==
   The wordmark was pushed off the left edge of the viewport. Cause: the
   header row holds three items that all refuse to shrink, .das-brand, the
   nav widget and the CTA, inside a capped content box. .das-brand carries
   margin-inline-end:auto, so once the three together exceed the box the
   free space goes negative and the cluster is dragged left while the CTA
   stays pinned to the right padding edge. Adding a nav item brings it
   straight back, which is what happened when Resources was added on
   24 Aug and again when Media was added on 26 Aug.

   CORRECTION, 26 Aug. Most of what the 24 Aug version of this block
   claimed to do never happened. Measured with 7 items: nav type read 13px
   at EVERY width despite bands here asking for 12px and 11px, and
   --e-nav-menu-horizontal-menu-item-margin read calc(40px / 2) at every
   width despite bands here setting 16px and 10px.

   Why: `menu_typography_font_size` and `menu_space_between` are set at
   SOURCE on nav widget 4a187b8, and Elementor emits those as
   `.elementor-723 .elementor-element-4a187b8 ... a.elementor-item` at
   0,5,1. Nothing writable in this stylesheet reaches 0,5,1, so kit rules
   for those two properties are dead on arrival however carefully their
   specificity is matched. Only padding-inline and column-gap worked,
   because those are not set at source.

   So the width is bought at source instead: menu_space_between is now
   18px, down from 40px, which returns about 154px at every desktop width.
   Type stays 13px. The build doc's Task 9 puts the floor at 14-15px, so
   shrinking it further is the wrong direction, and it could not be done
   from here anyway.

   The inert font-size and item-margin declarations have been deleted
   rather than left to look load-bearing. If either needs to change, change
   it on the widget, not here.

   Measured after, brand_left at 1025 / 1100 / 1200 / 1280 / 1366 / 1440 /
   1512 / 1600 / 1740: 24 30 30 30 30 30 66 110 180. No wrap, no
   horizontal overflow, header height 88px throughout.

   The wordmark stays 26px Caladea 400 at every desktop width. Caladea has
   no 500 or 600, so anything smaller has to jump to 700, which is a
   heavier brand mark than the footer's.                                */

/* Baseline, 1440 and up. */
body header.elementor .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  padding-inline: 10px;
}
body header.elementor .das-brand { margin-inline-start: 0; }
body header.elementor .e-da21068 { column-gap: 24px; }

/* 1300 to 1439. A smaller CTA. */
@media (min-width: 1300px) and (max-width: 1439px) {
  body header.elementor .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
    padding-inline: 8px;
  }
  body header.elementor .e-da21068 { column-gap: 20px; }
  /* Header-scoped and pointer-only, so the Phase 3 48px minimum does not
     apply. Same reasoning HEADER v2 used to size this button below spec. */
  body header.elementor .e-button-base {
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 12px 18px;
    min-height: 40px;
  }
}

/* 1025 to 1299. Below 1300 the wordmark and the seven nav items want the
   whole bar, so the CTA goes rather than the navigation: it duplicates the
   Contact item sitting immediately to its left, so nothing becomes
   unreachable.

   If losing the button between 1025 and 1299 is not acceptable, the fix is
   a shorter label. "Schedule a Conversation" is 220px wide even at 11px,
   and the site's voice rules pick that phrasing over "Contact Us", so
   shortening it is a copy decision rather than a CSS one.             */
@media (min-width: 1025px) and (max-width: 1299px) {
  body header.elementor .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
    padding-inline: 5px;
  }
  body header.elementor .e-da21068 { column-gap: 14px; }
  body header.elementor .e-button-base { display: none; }
}

/* Just above the burger breakpoint the 30px gutter is the last 60px in
   the way. 24 matches what the mobile block already uses below 768. */
@media (min-width: 1025px) and (max-width: 1099px) {
  body header.elementor .e-da21068 { padding-inline: 24px; }
}

/* --- Gutter cap (26 Aug 2026, Nicole's note on the live header) -------
   The base rule is `max(30px, calc((100% - 1380px)/2))`, which pins the
   bar to a 1380px box and then lets the gutter grow without limit as the
   window widens. Measured distance from the viewport edge to the
   wordmark: 30px at 1440, 110px at 1600, 270px at 1920, 360px at 2100.
   The header therefore reads completely differently depending on window
   size, and on a large display the wordmark floats in the middle of
   nothing. That unbounded growth is the actual fault, not the margin
   being wrong at any single width.

   Capped at 72px. Below about 1524 the old formula still governs, so the
   tight widths are untouched and nothing that was fitting stops fitting.
   Above it the gutter holds at 72 and the bar runs closer to full bleed.

   Deliberate consequence, and a real trade: the wordmark no longer tracks
   the body content edge. Body content is capped at 1240 and the header
   box at 1380, so the wordmark ALREADY sat 102px left of the H1 below it
   at every width; capping the gutter widens that to about 300px at 1920.
   Task 9 asked for the wordmark to sit flush with the body content, which
   points the opposite way. Both cannot hold while the header box is wider
   than the body box. Flagged to Nicole. */
@media (min-width: 1300px) {
  body header.elementor .e-da21068 {
    padding-inline: clamp(40px, calc((100% - 1380px) / 2), 72px);
  }
}

/* === end DAS HEADER FIT =================
 ================================================ */

/* === DAS TASK 4 — RESOURCES PAGE (24 Aug 2026) =========================
   Three content types on one page, kept visually separate on purpose:
   open written pieces on Off-White, email-gated one-pagers on Royal Blue,
   and the Substack panel back on Off-White. The rhythm is D L D L.

   The Insights listing is an Elementor Pro Posts widget querying the
   Insights category, not hardcoded rows, so real posts appear on their
   own. Everything below restyles that widget's own markup to the site's
   type scale. v3 widgets like this one DO carry .elementor-element-<id>,
   unlike the v4 atomic widgets.                                         */

/* --- 1. Insights listing, swipeable strip (rebuilt 31 Aug 2026) --------
   Nicole's brief for this pass: the FYLLA blog reference, adapted. That
   reference opens on two large image tiles; here that is five cards in a
   horizontal strip with two in view at desktop, which is the same picture
   and also answers "roughly five, and scrollable like the one on the home
   page".

   THE IMAGE CONSTRAINT HAS NOT GONE AWAY. The lead-item-plus-text-rows
   layout this replaces was built on 26 Aug precisely because there is no
   image library, and all five posts still share the single placeholder
   attachment 1081. Carrying five image slots is therefore a deliberate
   decision to brief the photography, not an oversight. Every card is a
   real image dependency now. Approved by Nicole, 31 Aug.

   Interaction is the homepage testimonial strip: swipe on touch, pointer
   drag on mouse and trackpad, tappable dots, arrow keys when the strip has
   focus. Never a timer, never auto-advancing, all five articles in the DOM
   in source order. The JS lives in the rsrjs widget on this page and is a
   knowing copy of the homepage one - see the header comment there.

   Band stays Royal Blue. It is the only tonal contrast on the page, Phase
   1's D L D L rhythm depends on it, and dropping it would also cost the
   dark-to-light boundary that lets Task 15 leave rsrgate without a rule.
   Measured on #0017AB: white 12.27:1, white at 85% 9.05:1, teal 5.98:1. */

/* The widget's own container is the scrollport. Elementor renders it as a
   CSS grid driven by classic_columns, so the flex switch has to be
   !important; everything below is ordinary cascade.                     */
body .elementor .das-insight-strip .elementor-posts-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch;
  gap: 32px;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
body .elementor .das-insight-strip .elementor-posts-container::-webkit-scrollbar { display: none; }
body .elementor .das-insight-strip .elementor-posts-container:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: 6px;
}
body .elementor .das-insight-strip article.elementor-post {
  flex: 0 0 auto;
  width: calc((100% - 32px) / 2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}
/* The last card snaps by its END rather than its start. Every start-snap
   position after the first can sit past the scrollport's maximum offset on
   a short strip; Chrome discards a snap position it cannot reach and then
   hauls every programmatic scroll back to zero, which makes the dots and
   the arrow keys look dead while hand-scrolling still works. Cost a full
   wrong diagnosis on the homepage strip, 29 Aug. Do not remove.         */
body .elementor .das-insight-strip article.elementor-post:last-child { scroll-snap-align: end; }

/* ---- the image slot ---- */
body .elementor .das-insight-strip .elementor-post__thumbnail__link {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 22px;
}
/* 7 Sep 2026: slot was 4 / 3. The three real Written Pieces arrived at
   1.52, 1.29 and 1.45, and 4 / 3 clipped both ends of the headline set
   INTO the black-history artwork. 3 / 2 sits inside all three, so cover
   trims 0.7%, 7% and 3% respectively and no artwork is reframed. The teal
   border is the same #00CCAB as every other rule on the site; box-sizing
   keeps it inside the aspect-ratio box instead of growing the card. */
body .elementor .das-insight-strip .elementor-post__thumbnail {
  position: relative;
  aspect-ratio: 3 / 2;
  padding: 0 !important;
  border: 2px solid #00CCAB;
  border-radius: 3px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: rgba(255,255,255,.06);
}
body .elementor .das-insight-strip .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- the text ---- */
body .elementor .das-insight-strip .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
}
/* Task 11's injected content-type label is the first child here. */
body .elementor .das-insight-strip .elementor-post__text > .das-type-label {
  display: block;
  margin-bottom: 10px;
}
body .elementor .das-insight-strip .elementor-post__title {
  margin: 0 0 12px;
  font-family: 'Caladea', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
body .elementor .das-insight-strip .elementor-post__title a { color: #FFFFFF; text-decoration: none; }
body .elementor .das-insight-strip .elementor-post__title a:hover { color: #00CCAB; }
body .elementor .das-insight-strip .elementor-post__excerpt { margin: 0; }
/* Clamped to three lines with a real ellipsis rather than trimmed by word
   count. classic_excerpt_length is set high (60) in the widget on purpose:
   WP's own truncation cuts mid-sentence and appends nothing, which read as
   a broken sentence on the card. Let the text through, clip it here. The
   clamp also levels the text blocks so the read links line up.          */
body .elementor .das-insight-strip .elementor-post__excerpt p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pushed to the foot so the link sits on one line across cards whose
   excerpts run to different lengths.                                    */
body .elementor .das-insight-strip .elementor-post__read-more {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #00CCAB;
  text-decoration: none;
}
/* Literal arrow, not a 2192 escape: update_post_meta unslashes and would
   ship the escape as the visible text "2192". Bitten once already.      */
body .elementor .das-insight-strip .elementor-post__read-more::after {
  content: ' →';
  display: inline-block;
  transition: transform .25s ease;
}
body .elementor .das-insight-strip .elementor-post__read-more:hover::after { transform: translateX(4px); }

/* Empty state. If every post is unpublished the widget prints nothing,
   which would leave a bare heading and a gap.                           */
body .elementor .das-insight-strip .elementor-posts-nothing-found {
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,.85);
}

/* ---- drag affordance and snap suppression ----
   Only where there is a real pointer; touch devices get no grab cursor
   they have no way to use.                                              */
@media (hover: hover) and (pointer: fine) {
  body .elementor .das-insight-strip .elementor-posts-container.das-tst-drag { cursor: grab; }
  body .elementor .das-insight-strip .elementor-posts-container.das-tst-drag.is-dragging { cursor: grabbing; }
}
/* Snapping and smoothing both go off while a drag is in flight, or the
   snap engine fights every scrollLeft write and the strip judders. */
body .elementor .das-insight-strip .elementor-posts-container.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-user-select: none;
  user-select: none;
}
/* And snapping stays off through the release glide. Restore it too early
   and the browser re-snaps from wherever the finger left the strip, which
   overwrites the card the release actually chose.                       */
body .elementor .das-insight-strip .elementor-posts-container.is-settling { scroll-snap-type: none; }

/* ---- dot indicators ----
   These four rules are the same ones the homepage carries inline in its
   own widget. Defining them here in the kit makes them available on this
   page too; the values are identical, so the homepage is unaffected. If
   the homepage copy is ever retired, this becomes the only definition.

   The 18px vertical padding is hit area, not spacing: the marks are 8px
   but the buttons measure 44 by 24, clear of the WCAG 2.5.8 minimum.   */
.das-tst-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.das-tst-dots[hidden] { display: none; }
.das-tst-dot {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 2px;
  padding: 18px 8px;
  line-height: 0;
  cursor: pointer;
}
.das-tst-dot-mark {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0,23,171,.22);
  transition: background-color .25s ease;
}
.das-tst-dot:hover .das-tst-dot-mark { background-color: rgba(0,23,171,.5); }
.das-tst-dot.is-in-view .das-tst-dot-mark { background-color: #0017AB; }
.das-tst-dot:focus-visible { outline: 2px solid #0017AB; outline-offset: 0; }
/* On the Royal Blue band the Royal Blue dots would be invisible, so the
   strip's own dots invert. Scoped to this section only.                 */
body .elementor .elementor-element-rsrart .das-tst-dot-mark { background-color: rgba(255,255,255,.3); }
body .elementor .elementor-element-rsrart .das-tst-dot:hover .das-tst-dot-mark { background-color: rgba(255,255,255,.6); }
body .elementor .elementor-element-rsrart .das-tst-dot.is-in-view .das-tst-dot-mark { background-color: #00CCAB; }
body .elementor .elementor-element-rsrart .das-tst-dot:focus-visible { outline-color: #00CCAB; }

/* Visually hidden helper, carries the keyboard hint for screen readers. */
.das-tst-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- narrower viewports ----
   Below 1024 one card leads and the next peeks, which is what tells the
   reader the strip continues without a caption saying so.               */
@media (max-width: 1023px) {
  body .elementor .das-insight-strip article.elementor-post { width: 78%; }
  body .elementor .das-insight-strip .elementor-post__title { font-size: 23px; }
}
@media (max-width: 767px) {
  body .elementor .das-insight-strip .elementor-posts-container { gap: 20px; }
  body .elementor .das-insight-strip article.elementor-post { width: 86%; }
  body .elementor .das-insight-strip .elementor-post__thumbnail { aspect-ratio: 3 / 2; }
  body .elementor .das-insight-strip .elementor-post__thumbnail__link { margin-bottom: 18px; }
  body .elementor .das-insight-strip .elementor-post__title { font-size: 21px; }
  body .elementor .das-insight-strip .elementor-post__excerpt p { font-size: 15px; }
  .das-tst-dots { margin-top: 10px; }
}

/* ---- reduced motion (non-negotiable) ---- */
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-insight-strip .elementor-posts-container { scroll-behavior: auto !important; }
  body .elementor .das-insight-strip .elementor-post__read-more::after,
  .das-tst-dot-mark { transition: none !important; }
  body .elementor .das-insight-strip .elementor-post__read-more:hover::after { transform: none !important; }
}

/* --- 2. Gated one-pager cards ----------------------------------------- */
/* calc(), not a percentage. Percentage widths cannot subtract a flex gap,
   which is the trap the testimonial row hit in Phase 8.                  */
/* .das-onepager-card retired 30 Aug 2026: Task 14 replaced the three cards
   with nine grouped rows. See the TASK 14 block at the foot. */
@media (max-width: 1023px) {
  body .elementor .das-onepager-card { width: 100%; }
}
body .das-onepager-card {
  border-radius: 4px;
  transition: background-color .25s ease;
}
body .das-onepager-card:hover { background-color: #DDE3FF; }

/* --- 3. The gate form ------------------------------------------------- */
/* The form sits on its own Off-White card inside the Royal Blue section.
   Fluent Forms' site-wide rules assume a light ground (dark labels, white
   inputs, Royal Blue submit); on #0017AB the labels dropped to 1.6:1 and
   the form was unreadable. das-section-light on the card is also what
   hands the submit button the correct light-section treatment.          */
body .das-gate-form-box { border-radius: 4px; }
body .das-gate-form-box .ff-el-group { margin-bottom: 22px; }
body .das-gate-form-box .ff-el-form-check-label span,
body .das-gate-form-box .ff-el-form-check label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3A3A3A;
}
body .das-gate-form-box .ff-el-form-check { margin-bottom: 10px; }
body .das-gate-form-box .ff-el-form-check-label span { font-weight: 400; }
body .das-gate-form-box .ff-el-help-message {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(58,58,58,.75);
  margin-top: 6px;
}
body .das-gate-form-box .ff_submit_btn_wrapper { margin-top: 4px; }

.das-gate-legal {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(58,58,58,.8);
  max-width: 620px;
}
.das-gate-legal a { color: #0017AB; text-decoration: underline; }
.das-gate-legal a:hover { color: #001489; }

/* --- 4. Substack panel ------------------------------------------------- */
/* The v4 per-side border-width props compile to nothing, the same fault the
   kit's hairline block already works around, so the panel border is drawn
   here. Without it the white panel on Off-White has no visible edge and the
   brief asked for a bordered panel.                                       */
/* The .das-substack-panel rule was retired 29 Aug 2026: Task 4c replaced
   the single bordered panel with three linked pieces. See the TASK 4c
   block at the foot of this stylesheet. */

/* Anything still waiting on Darryl is marked, not styled to look final. */
.das-placeholder-note,
body .elementor .das-placeholder-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(58,58,58,.6);
  border-top: 1px dashed rgba(0,23,171,.25);
  padding-top: 14px;
}


/* --- 5. Insights articles (single posts) -------------------------------
   Rendered by Elementor library template #1074, location `single`,
   condition include/singular/post. Title, date and body are dynamic, so a
   real article needs no work in the template.

   Note for whoever reads this next: emptying
   `elementor_pro_theme_builder_conditions` does NOT rebuild itself on the
   next request. It silently unhooks EVERY theme-builder template, header,
   footer, the fonts snippet and the page transition included, across the
   whole site. Regenerate it with Conditions_Cache::regenerate()->save(),
   never with delete_option().                                          */
body .elementor .das-article-back,
body .elementor .das-article-back a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0017AB;
  text-decoration: none;
}
body .elementor .das-article-back a:hover { text-decoration: underline; }

body .elementor .das-article-date,
body .elementor .das-article-date .elementor-icon-list-text,
body .elementor .das-article-date .elementor-post-info__item {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,23,171,.7);
}
body .elementor .das-article-date .elementor-icon-list-icon { display: none; }

body .elementor .das-article-title h1 {
  font-family: 'Caladea', Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #0017AB;
  margin: 0;
}

body .elementor .das-article-body { margin-top: 12px; }
body .elementor .das-article-body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #3A3A3A;
  margin: 0 0 24px;
}
body .elementor .das-article-body h2 {
  font-family: 'Caladea', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  color: #0017AB;
  margin: 44px 0 16px;
}
body .elementor .das-article-body h3 {
  font-family: 'Caladea', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: #0017AB;
  margin: 32px 0 12px;
}
body .elementor .das-article-body blockquote {
  border-left: 2px solid #00CCAB;
  margin: 32px 0;
  padding: 4px 0 4px 24px;
}
body .elementor .das-article-body blockquote p {
  font-family: 'Caladea', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  margin: 0;
}
body .elementor .das-article-body a { color: #0017AB; }

@media (max-width: 767px) {
  body .elementor .das-article-title h1 { font-size: 30px; }
  body .elementor .das-article-body h2 { font-size: 26px; }
  body .elementor .das-article-body p { font-size: 16px; }
}


/* --- 6. Image placeholders (24 Aug 2026) -------------------------------
   Feedback was that the site is short of imagery. These are marked slots,
   not decoration: an empty one says so in words, so nothing can quietly
   survive to launch looking like a design choice.

   Listing rows use a real featured image (attachment 1081, a flat
   lavender PNG) so Elementor's classic skin actually renders the thumb
   slot, and the label is drawn over it in CSS. Replace the featured
   image per post in the normal way and the label goes with it.        */
/* 31 Aug 2026: retargeted from the retired rsrfeat lead widget to the
   whole strip, so ALL FIVE cards carry the label rather than one. Every
   card is still the same marked placeholder (attachment 1081), not stock,
   and the label is what keeps that honest on the page. The label is drawn
   over anything whose src matches das-image-placeholder, so swapping in a
   real featured image removes the label with it. On the Royal Blue band
   the label has to read in white; the Royal Blue version below is still
   correct for the one-pager card slots, which sit on lavender cards. */
body .elementor .das-insight-strip
  .elementor-post__thumbnail__link[href]:has(img[src*="das-image-placeholder"])::after {
  content: 'Image to be supplied';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* This label is drawn over the lavender placeholder IMAGE, not over the
     Royal Blue band, so it takes the same Royal Blue as the card slots.
     White here measured 1.16:1 against the placeholder and was invisible. */
  color: rgba(0,23,171,.55);
  border: 1px dashed rgba(0,23,171,.35);
  border-radius: 3px;
  pointer-events: none;
}
body .elementor .das-image-slot::after {
  content: 'Image to be supplied';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,23,171,.55);
  border: 1px dashed rgba(0,23,171,.35);
  border-radius: 3px;
  pointer-events: none;
}

body .elementor .das-image-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: #DDE3FF;
  border-radius: 4px 4px 0 0;
}
body .elementor .das-image-slot::after { border-radius: 4px 4px 0 0; }

@media (max-width: 767px) {
  /* The lead thumbnail is full width on mobile, so the label still fits;
     it is only the old 120px left-hand thumb that had to drop its text. */
  body .elementor .das-insight-strip
    .elementor-post__thumbnail__link[href]:has(img[src*="das-image-placeholder"])::after {
    font-size: 10px;
  }
}

/* --- 7. Gate cards and modal ------------------------------------------- */
/* The card now opens with an image slot, so its own padding moved onto the
   body block and the fill has to reach the card edge. */
body .elementor .das-onepager-card { overflow: hidden; }
body .das-onepager-card:hover .das-image-slot { background-color: #D2DAFF; }

/* Triggers sit at the foot of cards of unequal copy length, so push them
   down rather than letting them float mid-card. */
body .elementor .das-onepager-card .das-gate-trigger { margin-top: auto; }
body .elementor .das-onepager-card > .e-con:last-child {
  flex: 1 1 auto;
  justify-content: flex-start;
}


/* The cards are light surfaces sitting inside a dark section, so the
   generic dark-section teal fill lands on them and reads loud against the
   lavender. They take the light-section primary instead, which also makes
   them match the modal's own submit button. 0,2,1 to clear Elementor's
   `.elementor .e-button-base` default at 0,2,0. */
body .elementor .das-gate-trigger {
  background-color: #0017AB;
  color: #FFFFFF;
}
body .elementor .das-gate-trigger:hover { background-color: #001489; }

/* The hero and the listing are the same Royal Blue and share an edge, so
   the listing's own 100px top padding lands on top of the hero's bottom
   padding with no colour change to justify it. Measured 200px of empty
   blue between the lede and the Insights eyebrow. Closed to the point
   where the eyebrow still reads as starting a new section.

   SUPERSEDED BY TASK 15c (31 Aug 2026). The seam now carries a hairline, so
   the gap no longer has to be small to stop reading as a fault - it has to be
   SYMMETRICAL, or the rule hangs off the Insights eyebrow instead of sitting
   between the two sections. Total gap is unchanged at both breakpoints
   (110+34 = 144 -> 72+72, and 72+22 = 94 -> 47+47), so nothing below the seam
   moves. The hero half of the split is set in the TASK 15c block. */
body .elementor .elementor-element-rsrart { padding-block-start: 72px; }
@media (max-width: 767px) {
  body .elementor .elementor-element-rsrart { padding-block-start: 47px; }
}

/* === end DAS TASK 4 ==================================================== */


/* === DAS GAP LADDER, HOME SECTION a375f15 (25 Aug 2026) ================
   Option C. Replaces the Intent / the gap / Impact stack in column
   7226159 with a four-stage ladder whose third rung is missing.

   Everything here is structural. All typography is set at source on the
   widgets, so the section stays editable in the builder and nothing in
   this block has to fight it.

   Specificity: post-6.css loads before base-desktop.css, and Elementor's
   own `.elementor .e-con` and `.elementor .e-paragraph-base` sit at
   0,2,0. `body .elementor .x` = 0,2,1 and wins cleanly, no !important.

   Why the rails are backgrounds and not borders: a ladder needs two
   rails plus a rung, which is three marks, and an element only has two
   pseudo-elements. ::before is spent on the rung, so the rails are
   painted as two 2px background gradients. This also sidesteps the
   standing v4 bug where per-side border-width does not compile.     */

/* The visually-hidden description is position:absolute. Without a
   positioned ancestor it resolves against the initial containing block,
   escapes any overflow:hidden and extends the document sideways. This
   rule is load-bearing, not tidiness. */
body .elementor .das-gap-col { position: relative; }

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

/* --- the rails ---------------------------------------------------------- */
body .elementor .das-lad-step {
  position: relative;
  background-image:
    linear-gradient(#0017AB, #0017AB),
    linear-gradient(#0017AB, #0017AB);
  background-size: 2px 100%, 2px 100%;
  background-position: 0 0, 38px 0;
  background-repeat: no-repeat;
}

/* --- the rung ----------------------------------------------------------- */
body .elementor .das-lad-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 40px;
  height: 2px;
  background-color: #0017AB;
}

/* Rails begin at the first rung and end at the last one, so the ladder
   reads as a closed object rather than a line that runs off both ends. */
body .elementor .das-lad-first {
  background-size: 2px calc(100% - 12px), 2px calc(100% - 12px);
  background-position: 0 12px, 38px 12px;
}
body .elementor .das-lad-last {
  background-size: 2px 14px, 2px 14px;
}

/* --- the break: rails carry on, dashed, and the rung is not there ------- */
body .elementor .das-lad-break {
  background-image:
    repeating-linear-gradient(#0017AB6B 0 6px, transparent 6px 12px),
    repeating-linear-gradient(#0017AB6B 0 6px, transparent 6px 12px);
}
body .elementor .das-lad-break::before { content: none; }

/* v4 still does not compile per-side border-width: the widget's own
   border-width prop rendered as 0px, so the dashed void is drawn here.
   Measured on the live page before this rule: 0px dashed. */
body .elementor .das-lad-void {
  border: 1px dashed rgba(0, 23, 171, .42);
}

/* --- mobile: narrower rail, everything else is set at source ------------ */
@media (max-width: 767px) {
  body .elementor .das-lad-step {
    background-position: 0 0, 32px 0;
  }
  body .elementor .das-lad-step::before { width: 34px; }
  body .elementor .das-lad-first {
    background-position: 0 12px, 32px 12px;
  }
}

/* === end DAS GAP LADDER ================================================ */


/* === DAS IMAGE PLACEHOLDER (shared component, 26 Aug 2026) ============
   ONE class for every "a real image goes here" block on the site, so a
   single search for `das-img-placeholder` finds all of them before
   launch. Defined here because Task 5 was built before Task 10; Task 10
   reuses this rather than inventing a second style, and the existing
   `.das-image-slot` blocks on Resources should be folded into it when
   Task 10 runs.

   Deliberately dull: a flat fill and a hairline, nothing patterned that
   could be mistaken for an intentional graphic. The border is dashed
   because dashed reads as unfinished, which is the entire point, and
   because the Resources slots already use dashed.

   Each box holds its aspect ratio, so dropping the real image in shifts
   nothing below it and CLS stays clean.

   These are NOT <img> tags and carry no alt text. A placeholder is not an
   image, so each one is aria-hidden at source and invisible to screen
   readers. When a real image replaces it, alt text becomes mandatory.
   That swap is on the launch checklist.                               */

.das-img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 16px;
  text-align: center;
  background-color: #E8ECFF;
  border: 1px dashed rgba(0,23,171,.35);
  border-radius: 4px;
  box-sizing: border-box;
}
.das-img-placeholder--4x3  { aspect-ratio: 4 / 3; }
.das-img-placeholder--1x1  { aspect-ratio: 1 / 1; }
.das-img-placeholder--21x9 { aspect-ratio: 21 / 9; }

.das-img-placeholder__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* .75 not .62: measured 4.20:1 at .62 on #E8ECFF, which fails AA for
     11px text. .75 measures 6.00:1. */
  color: rgba(0,23,171,.75);
  max-width: 30ch;
}

/* Dark band variant. The site has no `das-section-dark` hook (dark is the
   default and only light sections are tagged), so this is opt-in per
   instance. Measured on #0017AB: label 6.29:1. */
.das-img-placeholder.das-on-dark {
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.30);
}
.das-img-placeholder.das-on-dark .das-img-placeholder__label {
  color: rgba(255,255,255,.72);
}


/* === DAS TASK 5 - MEDIA PAGE (26 Aug 2026) ============================
   Placeholder build. No video or photography has been supplied, so every
   slot is a marked placeholder rather than stock imagery, which is the
   thing most likely to survive to launch unnoticed.

   Rhythm is D L D: hero, video on Off-White, gallery back on Royal Blue.

   Rows are flex with calc() widths, not percentages. A percentage width
   cannot subtract the flex gap, which is the trap the testimonial row,
   the founder columns, the service cards and the stage row all hit. This
   is now a standing rule for any flex row on this site.               */

body .elementor .das-video-row,
body .elementor .das-gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  max-width: none;
  margin-top: 44px;
  align-items: flex-start;
}

/* An emptied row must not leave a gap behind it. This is what keeps the
   page from looking broken while a section is waiting for content.

   `:empty` does NOT work here: it only matches an element with no child
   nodes at all, and Elementor leaves whitespace text nodes inside its
   containers, so an emptied row still measured 20px tall plus its 44px
   margin. `:not(:has(> *))` ignores text nodes and is what actually
   fires. Verified by deleting every child at 1440. */
body .elementor .das-video-row:not(:has(> *)),
body .elementor .das-gallery-row:not(:has(> *)) { display: none; margin-top: 0; }

/* The slots are v3 html widgets, so the width goes on the widget wrapper
   Elementor prints around them, and the container inside has to be told
   to fill it. */
body .elementor .das-video-row > .elementor-element,
body .elementor .das-gallery-row > .elementor-element {
  width: calc((100% - 64px) / 3);
  max-width: none;
}
body .elementor .das-video-row > .elementor-element > .elementor-widget-container,
body .elementor .das-gallery-row > .elementor-element > .elementor-widget-container {
  width: 100%;
}

@media (max-width: 1024px) {
  /* Three 16:9 boxes across a tablet leaves each one too small to read as
     a video; two is the honest maximum. The gallery keeps three because a
     4:3 thumbnail survives the narrower column. */
  body .elementor .das-video-row { gap: 28px; }
  body .elementor .das-video-row > .elementor-element {
    width: calc((100% - 28px) / 2);
  }
  body .elementor .das-gallery-row { gap: 24px; }
  body .elementor .das-gallery-row > .elementor-element {
    width: calc((100% - 48px) / 3);
  }
}

@media (max-width: 767px) {
  body .elementor .das-video-row,
  body .elementor .das-gallery-row { margin-top: 32px; gap: 20px; }
  /* Video goes full width: a 16:9 box at half a 375px screen is 165x93,
     which is not a video, it is a swatch. */
  body .elementor .das-video-row > .elementor-element { width: 100%; }
  /* The gallery stays two up. Six full-width 4:3 boxes would be a very
     long column of nothing. */
  body .elementor .das-gallery-row > .elementor-element {
    width: calc((100% - 20px) / 2);
  }
  body .elementor .das-gallery-row .das-img-placeholder { padding: 10px; }
  body .elementor .das-gallery-row .das-img-placeholder__label {
    font-size: 9px;
    letter-spacing: .08em;
    line-height: 1.6;
  }
}

/* === end DAS TASK 5 ===================================================
 */


/* === DAS TASK 6b - HEADING STRUCTURE (26 Aug 2026) =====================
   6b is a semantics-only change: the tags moved, the design must not. Two
   leaks showed up in the before/after computed-style diff and are closed
   here.

   1. The kit gives headings line-height 1.2 and paragraphs 1.8. Every
      micro-label that came out of <h5>/<h6> and into <p> - the framework
      panel labels, the six "Explore" card links, the client names, the
      Contact field labels and the step numerals - therefore grew by
      10-15px each. `.das-meta-label` puts 1.2 back and carries nothing
      else: size, weight, colour and tracking all still live on each
      widget's own style key. Tagged eyebrows are deliberately NOT in this
      class - they already set their own 1.4 in the Phase 4 block above,
      and two rules at 0,2,1 would be decided by source order.

   2. The kit's H1 and H2 globals carry letter-spacing (-0.01em and
      -0.005em) and H2 carries line-height 1.2, none of which the promoted
      H3s had. Pinned back so the promotion is invisible.                */
body .elementor .das-meta-label { line-height: 1.2; }
body .elementor .das-keep-ls    { letter-spacing: normal; }

/* Contact "Schedule a conversation" also lost the H3 line-height. */
body .elementor [class*="e-f9a3f62-"] { line-height: 1.3; }

/* Refinement pass 9 Sep 2026: How We Work H1 is now 54px site-standard,
   so the -0.005em H2 tracking it was given at 64px no longer applies and
   the rule below is retired. Kit h1 -0.01em now governs. Restore this
   block if the larger hero size ever comes back.
body .elementor [class*="e-b1a9a59-"] { letter-spacing: -0.005em; }        */

/* The one-pager modal title is an H2 per 6b, but it has to keep looking
   like a modal title rather than a page section headline. It carried no
   size of its own, so the retag alone took it from 24px/700 to 42px/400. */
body .elementor [class*="e-rsrgfh-"] {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}
@media (max-width: 767px) {
  body .elementor [class*="e-rsrgfh-"] { font-size: 21px; }
}
/* === end DAS TASK 6b =================================================== */

/* === DAS TASK 7 — NMSDC MBE BADGE, ABOUT US (28 Aug 2026) ==============
   Placement B of the two previewed on 28 Aug. The badge sits at the head
   of the existing Certification section (8efad55) on About Us, above the
   "Certification" eyebrow, so the mark and the copy explaining it read as
   one block. The footer slot .das-nmsdc-placeholder was REMOVED the same
   session on Nicole's instruction (see the retirement note in the Phase 5
   block above); the footer now carries no credentials area at all. If one
   is ever wanted back it must use attachment 1087, not 1086.

   ASSET TRAP: the supplied removebg file has a TRANSPARENT interior, not
   a white one, so its dark grey lettering only works on a light band.
   Attachment 1086 is used here on Off-White. 1087 is the white-field
   variant built for dark backgrounds. Do not swap one for the other.
   ====================================================================== */
body .elementor .das-cert-badge > .elementor-widget-container { line-height: 0; }
body .elementor .das-cert-badge img {
  width: 132px;
  height: auto;         /* aspect ratio preserved — never stretch this mark */
  max-width: 100%;
  display: block;
  margin: 0 auto 12px;  /* + the container's 16px row-gap = 28px to the eyebrow */
}
/* === end DAS TASK 7 ==================================================== */

/* === DAS TASK 3 - TESTIMONIAL QUOTES, REAL CONTENT (29 Aug 2026) ======
   The strip interaction shipped 24 Aug. This block is the second half of
   Task 3: the five placeholder cards are now three approved quotes from
   Task 12.

   Each card's four atomic widgets (quote / divider / name / role) were
   replaced by ONE html widget carrying a real <blockquote> with <cite>,
   because Task 12 requires that markup and no v4 atomic widget emits it.
   The card flexbox itself is untouched, so its id, classes, fill, radius
   and hover all still come from Phase 8 and the strip CSS still selects
   it. Type and colour below reproduce the widget-level values that were
   stripped out, to the pixel, via the kit globals rather than hex.

   Spacing note: the card was a column flexbox with a 16px gap, and the
   teal rule carried margin 4px 0, so quote-to-rule and rule-to-name both
   measured 20px. Inside the blockquote those are ordinary block margins,
   which collapse, so the rule's margin is zeroed here and the 20px is
   stated on the paragraph and the footer instead. Name-to-attribution
   keeps the 16px the flex gap gave it.                                 */
body .elementor .das-tst-q {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}
body .elementor .das-tst-q > p {
  margin: 0 0 20px;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.6em;
  color: var(--e-global-color-text);
}
/* 0,3,1 so it outranks the Phase 8 rule's margin without touching it. */
body .elementor .das-tst-q > .das-quote-rule { margin: 0; }
body .elementor .das-tst-q > footer { margin-top: 20px; }
/* <cite> is italic by default and the attribution is not a quotation. */
body .elementor .das-tst-q cite { font-style: normal; }
body .elementor .das-tst-name {
  display: block;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4em;
  color: var(--e-global-color-primary);
}
body .elementor .das-tst-attr {
  display: block;
  margin-top: 16px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  color: #3A3A3ABF;
  color: color-mix(in srgb, var(--e-global-color-text) 75%, transparent);
}
/* [Title TBC] is deliberately visible, not hidden, so the gap is obvious
   on the page rather than silently absent. Class exists so a pre-launch
   sweep can find every one of them.                                    */
body .elementor .das-tbc { font-style: italic; }
@media (max-width: 767px) {
  body .elementor .das-tst-q > p { font-size: 19px; }
}
/* === end DAS TASK 3 ==================================================== */

/* === DAS TASK 4c - SUBSTACK PIECES (29 Aug 2026) =======================
   Replaces the single bordered "Read on Substack" panel. A link to a
   publication homepage gives a reader no reason to click; they land on an
   index of unfamiliar titles and leave. Three named pieces are three
   reasons, and the publication is what they find once they are there.

   Deliberately LIGHTER than the one-pager cards above: no fill, one
   hairline, smaller title, no image slot. These are outbound links to
   someone else's platform and the hierarchy should say so before anyone
   clicks. Markup lives in the `rsrsbox1` HTML widget, hardcoded rather
   than pulled from /feed so the three stay editorially chosen.

   Three across from 768px, one column below it, per the doc. No carousel:
   three items do not warrant one.                                       */
body .elementor .das-substack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
body .elementor .das-substack-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid rgba(0,23,171,.18);
  border-radius: 4px;
  background: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
body .elementor .das-substack-box:hover {
  background-color: rgba(0,23,171,.04);
  border-color: rgba(0,23,171,.34);
}
/* Content-type label. A span, never a heading: a styled eyebrow marked up
   as h3 or h4 breaks the heading hierarchy on every box at once (6b).
   Final label set is Task 11's decision; `Substack` is the one the 4c
   brief names outright, so it is safe to use ahead of that sign-off.   */
body .elementor .das-type-label {
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Colour moved to the TASK 11 block below: this label now also
     appears on a dark band, where Royal Blue is invisible.      */
}
/* h3 under the section's h2. One step down from the 24px one-pager card
   titles, which is most of what makes these read as secondary.         */
body .elementor .das-substack-title {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--e-global-color-primary);
}
body .elementor .das-substack-standfirst {
  margin: 0;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #3A3A3ACC;
  color: color-mix(in srgb, var(--e-global-color-text) 80%, transparent);
}
body .elementor .das-substack-link {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--e-global-color-primary);
  text-decoration: none;
}
body .elementor .das-substack-link::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform .25s ease;
  /* The arrow is the character itself, not a 2192 escape: update_post_meta
     unslashes, which silently ships the escape as the literal text "2192".
     That has bitten this stylesheet once already.                       */
}
/* One anchor per box, but the whole box is the click target. Keeps the
   accessible name and the hit area in step without a second link.      */
body .elementor .das-substack-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
}
body .elementor .das-substack-box:focus-within {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 3px;
}
body .elementor .das-substack-link:focus-visible { outline: none; }
/* No underline anywhere in this section (31 Aug 2026, Nicole): the arrow
   already says the link leaves the site, and an underline under every one
   of the four Substack links was the loudest thing on the panel. Hover is
   now the arrow nudging instead.                                        */
body .elementor .das-substack-link:hover::after { transform: translateX(4px); }

/* The self-navigation route, once someone is interested. Secondary to the
   three pieces on purpose.                                              */
body .elementor .das-substack-all {
  margin: 28px 0 0;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-size: 15px;
}
body .elementor .das-substack-all a {
  color: var(--e-global-color-primary);
  text-decoration: none;
}
/* Literal arrow, not a 2192 escape: update_post_meta unslashes and would
   ship the escape as the visible text "2192".                           */
body .elementor .das-substack-all a::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform .25s ease;
}
body .elementor .das-substack-all a:hover { color: #001489; }
body .elementor .das-substack-all a:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-substack-link::after,
  body .elementor .das-substack-all a::after { transition: none !important; }
  body .elementor .das-substack-link:hover::after,
  body .elementor .das-substack-all a:hover::after { transform: none !important; }
}

@media (max-width: 767px) {
  body .elementor .das-substack-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  body .elementor .das-substack-box { padding: 24px 20px; }
}
/* === end DAS TASK 4c =================================================== */

/* === DAS TASK 14 - NINE ONE-PAGERS (30 Aug 2026; rows -> boxes 31 Aug) ==
   Nine items, grouped three by three under theme headings. The grouping is
   the part that has never changed: three groups of three read as a
   structured library, nine ungrouped tiles read as a dump.

   31 AUG 2026 - ROWS BECAME BOXES. Nicole's FYLLA reference puts its lower
   block in a grid of small boxes and she asked for the same here. The
   markup in the rsrgrows widget is UNCHANGED - same ul/li, same
   das-gate-key-* classes, same anchors - so the gate JS, the Fluent Forms
   radio values and the confirmation payload all still line up. Only this
   stylesheet changed: .das-op-rows became a three-column grid and
   .das-op-row became a filled tile instead of a horizontal band.

   STILL NO THUMBNAILS, and this is the one part of the reference that was
   deliberately not taken. Nine placeholder images would be nine image
   dependencies for documents that are all visually identical PDFs, and
   there is no image library to fill them from. Confirmed with Nicole,
   31 Aug: boxes yes, thumbnails no, groups kept.

   Not a carousel, by instruction: everything past the first panel gets
   substantially less engagement, and every asset here exists to be seen.
   Boxes also stay findable by in-page search, which a carousel breaks.

   Section is Off-White (das-section-light) as of the 26 Aug rhythm flip,
   so the tiles use the site's established card idiom - #E8ECFF fill, 3px
   teal top rule, #DDE3FF on hover - the same one the homepage practice
   cards and the Services cards use.                                     */
body .elementor .das-op-library { margin-top: 44px; }
body .elementor .das-op-group + .das-op-group { margin-top: 44px; }
/* h3 under the section's h2; the tile titles below are h4. Checked against
   the 6b audit: the page keeps one h1 and the nesting stays in order.   */
body .elementor .das-op-group-title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,23,171,.18);
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: var(--e-global-color-primary);
}
/* Three across, one group per row. Grid rather than flex so the tiles in a
   row share a height without any of them being told what that height is. */
body .elementor .das-op-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
body .elementor .das-op-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 24px 22px;
  border: 1px solid rgba(0,23,171,.12);
  border-top: 3px solid #00CCAB;
  border-radius: 4px;
  background-color: #E8ECFF;
  transition: background-color .25s ease;
}
body .elementor .das-op-row:hover { background-color: #DDE3FF; }
body .elementor .das-op-body {
  flex: 1 1 auto;
  min-width: 0;
}
body .elementor .das-op-body .das-type-label { display: block; margin-bottom: 8px; }
body .elementor .das-op-title {
  margin: 0 0 6px;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--e-global-color-primary);
}
body .elementor .das-op-desc {
  margin: 0;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #3A3A3ACC;
  color: color-mix(in srgb, var(--e-global-color-text) 80%, transparent);
}
/* Compact on purpose: the Phase 3 button (48px min-height, 16/32 padding)
   is a page-level CTA and nine of them would shout down the titles.
   Deliberately NOT given .e-button-base for that reason. margin-top auto
   pins it to the foot so the buttons line up across a row of tiles whose
   titles wrap to different depths.                                      */
body .elementor .das-op-btn {
  flex: 0 0 auto;
  margin-top: auto;
  /* Auto width and left-aligned, NOT a full-width bar. Nine full-width
     Royal Blue bars is the shouting this block's header warns about; the
     tile already frames the action, so the button only has to be a button.
     It goes full width on a phone, where the tile is the screen. */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: var(--e-global-color-primary);
  color: #FFFFFF;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
}
body .elementor .das-op-btn:hover,
body .elementor .das-op-btn:focus-visible { background-color: #001489; color: #FFFFFF; }

/* Two across on tablet, one on a phone. No layout change is needed at
   either step beyond the column count - the tile is already a column. */
@media (max-width: 1023px) {
  body .elementor .das-op-rows { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  body .elementor .das-op-rows { grid-template-columns: 1fr; gap: 16px; }
  body .elementor .das-op-row { padding: 22px 20px; gap: 16px; }
  body .elementor .das-op-group + .das-op-group { margin-top: 36px; }
  body .elementor .das-op-group-title { font-size: 19px; margin-bottom: 16px; }
  body .elementor .das-op-btn { min-height: 46px; align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-op-row, body .elementor .das-op-btn { transition: none !important; }
}
/* === end DAS TASK 14 =================================================== */

/* === DAS TASK 9 - HEADER TAP TARGETS (30 Aug 2026) =====================
   Task 9 item 5: "on mobile, tap targets stay at least 44px regardless of
   the reduced type size." Measured on the live header before this block,
   the burger did not: 39x39 at 375 and 390, 42x42 at 768 and 1024.

   Elementor sizes .elementor-menu-toggle from its icon font-size plus a
   7px padding ring (28px + 14 = 42; 26px + 13 = 39 at mobile), and sets
   width/height explicitly while leaving min-width/min-height at auto.
   Overriding the two min-* properties is therefore uncontested - nothing
   in Elementor's generated CSS sets them - so this needs no specificity
   fight and no !important, and it cannot shrink the control if Elementor
   later ships a larger default.

   Height is safe: the bar is 88px with 14px block padding at mobile, so
   the content row has 60px to give and 44 fits inside it. Width is safe:
   at 375 the content box is 327px and the wordmark link is 146px, so the
   pair occupies 190px. Verified after: 44x44 at 375/390/768/1024, header
   still 88px, no horizontal overflow.

   NOT changed here, reported to Nicole instead: the wordmark link itself
   is 146x25 at 375. It is inline text, which WCAG 2.2 SC 2.5.8 exempts,
   and padding it out to 44px tall would add roughly 19px to the brand
   block and push the bar past its 88px height. Raise it if she wants the
   height to move.                                                      */
@media (max-width: 1024px) {
  body header.elementor .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}


/* === DAS BUILD PROMPT 16 Sep 2026 - RESOURCES LUP/SYSARCH CARD DIVIDER ===
   Vertical hairline between the Leadership Under Pressure and System
   Architecture cards on Resources (rsrlupi is the row flexbox holding
   rsrlupc1/rsrlupc2 side by side). rsrlup's own ::before is already spent
   on the rsrart -> rsrlup dark-to-dark section-boundary hairline (see the
   Task 2, 14 Sep 2026 block above), so this uses rsrlupi instead, which
   carries no existing ::before. Absolute line centred in the 48px column
   gap, spanning the row's own height (which tracks the taller card), white
   at a low alpha to sit quietly on #0017AB. Hidden below 767px where the
   row switches to a single column (rsrlupi flex-direction:column), since a
   vertical rule between two stacked cards would just be a stray mark. */
body .elementor .elementor-element-rsrlupi {
  position: relative;
}
body .elementor .elementor-element-rsrlupi::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 767px) {
  body .elementor .elementor-element-rsrlupi::before { display: none; }
}
/* === end DAS BUILD PROMPT 16 Sep 2026 - RESOURCES LUP/SYSARCH CARD DIVIDER === */
/* === end DAS TASK 9 ==================================================== */


/* === DAS TASK 10 - IMAGE PLACEMENTS (30 Aug 2026) ======================
   Task 10 step 1 audited every page and Nicole approved five new slots.
   All five reuse the `.das-img-placeholder` component defined in the
   shared block above - no new placeholder styling is introduced here,
   only the sizing and rhythm each placement needs. Everything below is a
   layout concern; the look of the box itself stays in one place.

   The five, with the container each one lands in at 1440:
     Home     t10hmb1  62641cd[3]  16:9 on dark, above the six-area grid
     Home     t10hmb2  dba4297[0]  21:9 on dark, narrow, above the CTA
     HowWeWork t10hww1 hwwinn1[1]  21:9 light, above the five-stage row
     Services t10svc1  svcbandi[0] 21:9 on dark, above the callout
     About    t10abt1  c09b481[3]  4:3 light, under the heading column

   WHY THE MAX-WIDTH. The inner containers these sit in are 1240px, but
   the content beside them - the six-area grid, the five-stage row - is
   1176px, because those carry their own 32px inline padding. An
   unconstrained placeholder would therefore sit 64px wider than the grid
   directly beneath it and read as misaligned rather than deliberate.
   1176 lines the slot up with its neighbour. In the About column the cap
   never applies: that column is 410px wide.

   The narrow modifier exists for one reason. The closing CTA section is
   580px tall in total; a full-width 21:9 band would add 504px and make
   the page's closing note its second-tallest section. Capped at 720 it
   adds 309px and stays a supporting band.                             */

.das-t10-slot {
  width: 100%;
  max-width: 1176px;
  margin-inline: auto;
  margin-block: 40px;
}
.das-t10-slot--narrow { max-width: 720px; }

/* THE ONE THAT BIT. Elementor makes the widget WRAPPER the flex item, not
   the div inside it, so `width:100%` on the placeholder resolves against a
   wrapper that has already shrunk to its content. Measured before this
   rule: Services and How We Work were correct at 1176 because those
   containers are align-items:stretch, but the Home closing band came out
   256x110 and the About slot 256x192, because `dba4297` centres its
   children and `c09b481` uses start. Stretch the wrapper and the max-width
   caps above do the rest. Both affected containers are flex COLUMNS, so
   align-self:stretch is the cross-axis (width) here. */
body .elementor .elementor-widget:has(> .das-t10-slot) {
  align-self: stretch;
  width: 100%;
}

/* First child of its container needs no leading gap - the container's own
   padding already supplies it. */
.das-t10-slot:first-child { margin-block-start: 0; }

/* The 16:9 modifier is what the Media page and these slots both write, so
   make it a real declaration rather than relying on the base class value.
   Same result today; it stops a future change to the base from silently
   moving every slot that thought it had asked for 16:9. */
.das-img-placeholder--16x9 { aspect-ratio: 16 / 9; }

@media (max-width: 767px) {
  .das-t10-slot { margin-block: 28px; }
  /* 21:9 at 335px is a 144px sliver, too short to read as an image slot.
     Mobile takes 16:9 for the wide bands instead; the real photography
     can still be a wide crop, this is only the placeholder's shape. */
  .das-t10-slot.das-img-placeholder--21x9 { aspect-ratio: 16 / 9; }
}

/* --- Resources featured item -------------------------------------------
   Task 10 proposed converting this to the shared component and that was
   the wrong call, so it has NOT been done. The featured thumbnail is
   rendered by Elementor's posts widget from attachment 1081 set as the
   post's featured image, and the "Image to be supplied" label is drawn
   over any src matching das-image-placeholder. That means setting a real
   featured image removes the placeholder AND its label in one ordinary
   editorial action. Replacing it with a hand-placed component would turn
   that into a two-step manual swap someone has to remember. Keeping the
   better handover is worth more than class-name uniformity.

   What IS fixed here is the visible half: the featured slot had a flat
   fill and no hairline, so it did not read as the same system as every
   other placeholder. Same 1px dashed Royal Blue as the component.

   The findability gap is real and is handled on the launch checklist,
   which now names BOTH search terms. Note for whoever runs that check:
   this one is a genuine <img> carrying alt="", so an "every image has alt
   text" audit PASSES on it. It will not be caught that way.          */
body .elementor .das-insight-strip
  .elementor-post__thumbnail__link[href]:has(img[src*="das-image-placeholder"])::after {
  border: 1px dashed rgba(0,23,171,.35);
  border-radius: 4px;
  box-sizing: border-box;
}
/* === end DAS TASK 10 =================================================== */


/* === DAS TASK 11 - CONTENT-TYPE LABELS (30 Aug 2026) ==================
   Final label set, signed off 30 Aug 2026: `Article`, `One-pager (PDF)`,
   `Substack`. `Essay` dropped from the applied set - it is a distinction
   of register rather than of what the reader gets, so it does not change
   anyone's click, and no editorial rule for assigning it exists. It stays
   in the vocabulary as category `essay` (term 12), assigned to nothing,
   so adding it to a piece later is a checkbox on the post screen.

   Typography lives in the TASK 4c block above and is unchanged: 11px/600
   Montserrat, 0.12em tracking, uppercase, no background, no border, no
   radius. Metadata, not a badge or a coloured pill.

   COLOUR IS DEFINED HERE, NOT THERE. 4c hardcoded Royal Blue, correct
   while every label sat in the two light sections. The written-pieces
   section `rsrart` carries no `das-section-light`, so it is a Royal Blue
   band and a Royal Blue label on it is invisible. These two rules are the
   same pattern the 20 tagged eyebrows use, and for the same reason: the
   light-section .elementor-kit-6 is 0,3,1 and outranks the base 0,2,1 rule
   whatever the source order.                                          */
body .elementor .das-type-label { color: #00CCAB; }
body .elementor .das-section-light .das-type-label { color: #0017AB; }

/* Directly above the title, per the brief. The one-pager rows set their
   own block/margin in the TASK 14 block; these do the same job for the
   cards the two Posts widgets render. `.elementor-post__title` carries a
   top margin of its own, so the gap below the label is deliberately
   smaller than the eyebrow's 20px.                                    */
body .elementor .das-insight-strip .das-type-label {
  display: block;
  margin: 0 0 6px;
}
body .elementor .das-insight-strip .elementor-post__title {
  margin-top: 0;
}
/* === end DAS TASK 11 =================================================== */


/* === DAS TASK 12 - REAL TESTIMONIALS, SERVICES AND ABOUT (31 Aug 2026) =
   The homepage third of Task 12 shipped 29 Aug inside Task 3 (three
   approved quotes in the swipe strip, block `DAS TASK 3` above). This
   block is the other two thirds: quotes 4 and 5 against their service
   blocks, quote 6 on About.

   Same markup contract as the strip - a real <blockquote> with <cite>,
   in an html widget because no v4 atomic widget emits either - but a
   quieter variant. The strip quote is the main event on its section at
   22px; these are supporting evidence inside somebody else's block, so
   they sit at 17px in a service card and 19px in the About text column,
   below the copy they support rather than above it.

   SEPARATOR IS A BORDER, NOT THE STRIP'S <hr class="das-quote-rule">.
   Inside a 360px card the strip's teal rule would be the second teal
   horizontal line in ~250px, competing with the 3px teal rule the card
   already carries on top. A muted hairline reads as "and here is who
   said so" without adding a third accent to the card.                  */
body .elementor .das-inline-quote {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid rgba(0,23,171,.18);
  quotes: none;
}
body .elementor .das-inline-quote > p {
  margin: 0 0 16px;
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6em;
  color: var(--e-global-color-text);
}
/* The About column is ~550px against the card's ~360px, so it carries
   the larger size without the line length going short.                */
body .elementor .das-inline-quote.is-wide > p { font-size: 19px; }

/* <cite> is italic by default and an attribution is not a quotation.  */
body .elementor .das-inline-quote cite { font-style: normal; }
body .elementor .das-inline-quote .das-tst-name {
  display: block;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4em;
  color: var(--e-global-color-primary);
}
body .elementor .das-inline-quote .das-tst-attr {
  display: block;
  margin-top: 6px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5em;
  color: #3A3A3ABF;
  color: color-mix(in srgb, var(--e-global-color-text) 75%, transparent);
}
/* .das-tbc (italic [Title TBC]) is inherited from the TASK 3 block, so a
   pre-launch sweep for that one class still finds every missing job
   title on the site - now six of them, not three.                     */

@media (max-width: 767px) {
  body .elementor .das-inline-quote > p,
  body .elementor .das-inline-quote.is-wide > p { font-size: 16px; }
}
/* === end DAS TASK 12 =================================================== */


/* === DAS TASK 15c - RESOURCES DARK-TO-DARK SEAM (31 Aug 2026) ==========
   The brief said the whole Resources page was one flat dark blue and that
   the Task 4a dark band therefore had nothing to contrast against. Measured,
   the page is D D L L: rsrhero and rsrart are #0017AB, rsrgate and rsrsub
   are #F7F7F5. So the band's BOTTOM edge is doing its job; only its TOP
   edge, against the hero, has no boundary at all.

   Swept all 8 pages first: every other same-background adjacency already
   carries the Phase 6a hairline, and rsrhero -> rsrart was at the time the
   ONLY dark-to-dark pair on the site. NO LONGER TRUE as of 8 Sep 2026: the
   Services reorder put svcband directly under svchero, both #0017AB, so
   that page now has one too and reuses this same colour override below. That is why the light-to-light mechanism
   never covered it, and why this is one seam rather than a shared cause.

   Precedent for drawing anything here is Phase 1's surviving note: the 2px
   teal rule was retired at dark/light edges but KEPT on the blue-on-darker-
   blue seams, "where it is the only thing that draws the seam at all". This
   is that case at section scale, so it takes Phase 6a's hairline weight
   rather than Phase 1's 2px bar - a breath, not a device.

   Geometry is inherited from the Phase 6a .elementor-kit-6 list above, so there is
   one definition of the seam width. Only the colour is restated, the same
   way the rsrart dot rules restate colour over the shared dot geometry.
   White at an alpha rather than a hex, so it survives the palette sign-off.
   0,2,2 clears Phase 6a's 0,1,1 without !important.                     */
body .elementor .elementor-element-rsrart::before,
/* Services: svcband -> t5cta pair RETIRED (Task 2, 14 Sep 2026). svcband
   moved off Services onto Resources (as rsrlup), so t5cta now follows the
   light svcgrid and needs no hairline. Resources gained the equivalent
   dark-to-dark pair instead: rsrart -> rsrlup, both #0017AB. Same
   treatment: Phase 6a geometry above, white at an alpha here.
   Preconditions checked on rsrlup: position:relative from .e-flexbox-base,
   overflow:visible, no existing ::before. */
body .elementor .elementor-element-rsrlup::before,
/* Home hero -> stats and stats -> client trust (9 Sep 2026). The redesign
   put three Royal Blue bands in a row at the top of the homepage, which
   is two more dark-to-dark seams. Same case as rsrart and svcband, so the
   same treatment: Phase 6a geometry, white at an alpha for the colour.
   Preconditions checked on both: position:relative from .e-flexbox-base,
   overflow visible, and neither carries another ::before. */
body .elementor .elementor-element-25235ae::before,
body .elementor .elementor-element-1a698d2::before {
  background: rgba(255,255,255,0.28);
}
/* Hero half of the symmetrical split. The rsrart half stays in the TASK 4
   block above, where the original 34px value lived, so the two halves are
   not stated in three places. */
body .elementor .elementor-element-rsrhero { padding-block-end: 72px; }
@media (max-width: 767px) {
  body .elementor .elementor-element-rsrhero { padding-block-end: 47px; }
}
/* === end DAS TASK 15c ================================================== */


/* === DAS QUOTE CLEANUP (31 Aug 2026) ==================================
   Nicole curated the visible quote set down to four across the site and
   dropped every [Title TBC], so `.das-tbc` now matches nothing anywhere.
   The class and its rule are kept: it is the pre-launch sweep hook, and
   the next unattributed quote should use it rather than invent a marker.

   `das-quote-standalone` is new. The two existing das-inline-quote homes
   are ~360px (service card) and ~550px (About column), so the component
   never needed a measure of its own. The Contact instance sits under the
   full 1200px contact row, where 19px italic serif would run to roughly
   150 characters a line. 680px is the measure already used by the lede
   paragraphs on Resources, so this borrows it rather than inventing one. */
body .elementor .das-quote-standalone { max-width: 680px; }
/* === end DAS QUOTE CLEANUP ============================================= */


/* === DAS PHASE-1 TASK 2 - FMG LEADING AS PARTNER (3 Sep 2026) ==========
   FMG Leading is a mutual partner, not a client, and neither party is
   the other's client. It was the sixth of eight names in the client row.
   An "In partnership with" label placed inline beside it cannot be kept
   at the start of its row: measured on the live page, the labelled pair
   lands mid-row at 900, 1024 and 1180px, where a reader can bind the
   label backwards onto the preceding client name. That would assert a
   partnership with a named client, the exact claim this change exists
   to prevent. Separation is therefore structural: the name moves into a
   sibling container, which cannot wrap into the client row at any width.

   A hairline and an offset, not a card or a fill. A filled panel would
   read as more important than the clients rather than differently
   sourced. The rule is white at 16% because this section is the dark
   mode ground #0017AB; it is the only place the class is used.

   Type is NOT set here. The .das-partner-name .elementor-kit-6 was added to the
   Phase 6 CLIENT TRUST NAMES rules above so the partner name and the
   client names can never drift apart at any breakpoint. Size, weight
   and family were stripped from widget logofmg at source to match. */
body .elementor .das-partner-block {
  margin-top: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
/* The Phase 4 base rule gives every eyebrow margin-bottom 20px, sized for
   an eyebrow above a 42px headline. A label bound to a single 26px name
   wants a tighter pair. 0,3,1 outranks the 0,2,1 base rule cleanly. */
body .elementor .das-partner-block .das-eyebrow { margin-bottom: 12px; }
@media (max-width: 767px) {
  body .elementor .das-partner-block { margin-top: 12px; padding-top: 22px; }
}
/* === DAS DASUPD 4 Oct 2026 - FMG-OWNED BUSINESSES UNDER THE PARTNER LINE ===
   IVY Rehab and SCA Health are owned by FMG Leading, so they sit under the
   FMG Leading line in the partner block. They carry das-partner-name (same
   family, weight and tracking as every other name) plus das-partner-sub,
   which only steps the size down to 0.92x of the main list at each
   breakpoint (23px / 22px / 20px base). 0,3,1 beats the 0,2,1 base rule. */
body .elementor .das-partner-block .das-partner-sub { font-size: calc(23px * 0.92); margin-top: 8px; }
@media (max-width: 1200px) {
  body .elementor .das-partner-block .das-partner-sub { font-size: calc(22px * 0.92); }
}
@media (max-width: 767px) {
  body .elementor .das-partner-block .das-partner-sub { font-size: calc(20px * 0.92); margin-top: 6px; }
}
/* Eight client names no longer fit one row at desktop width and the eighth
   was left alone on a second row. Capping the list at 960px wraps it 4 + 4
   instead. Desktop only: at 1200px and below the existing wrap already
   splits 5 + 3 and is left as it was. */
@media (min-width: 1201px) {
  body .elementor .elementor-element-aee19e8 { max-width: 960px; align-self: center; }
}

/* 4 Oct 2026, Nicole: IVY Rehab and SCA Health sit side by side under the
   FMG Leading line, not stacked. The partner block becomes a wrapping row;
   the label and the FMG name each take a full line so only the two FMG-owned
   names share the last one. They stay centred and in the same block. */
body .elementor .das-partner-block { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 32px; }
body .elementor .das-partner-block > .das-eyebrow,
body .elementor .das-partner-block > .das-partner-name:not(.das-partner-sub) { flex: 0 0 100%; }
@media (max-width: 767px) {
  body .elementor .das-partner-block { column-gap: 24px; }
}

/* 4 Oct 2026, Nicole: partnership box spacing.
   1. The eight names were squeezed toward the centre (960px cap, 48px gaps).
      Wider gaps and a 1040px cap; still wraps 4 + 4 at desktop (row one is
      890px with 72px gaps, a fifth name would need 1078px).
   2. More air between "In partnership with" and FMG Leading (12px to 20px).
   3. Less white space under the box: the section's bottom padding 64px to 44px.
   `html` in front lifts these above the earlier rules without changing them. */
@media (min-width: 1201px) {
  html body .elementor .elementor-element-aee19e8 { gap: 32px 72px; max-width: 1040px; }
}
@media (min-width: 768px) and (max-width: 1200px) {
  html body .elementor .elementor-element-aee19e8 { gap: 28px 56px; }
}
@media (max-width: 767px) {
  html body .elementor .elementor-element-aee19e8 { gap: 20px 32px; }
}
html body .elementor .das-partner-block .das-eyebrow { margin-bottom: 20px; }
html body .elementor .elementor-element-1a698d2 { padding-bottom: 44px; }
@media (max-width: 767px) {
  html body .elementor .das-partner-block .das-eyebrow { margin-bottom: 16px; }
  html body .elementor .elementor-element-1a698d2 { padding-bottom: 34px; }
}
/* === end DAS PHASE-1 TASK 2 =========================================== */


/* === DAS PHASE-1 TASK 7 - TESTIMONIAL PLACEMENT (6 Sep 2026) ===========
   Row 4 of the signed-off mapping puts the Simpson methodology quote in
   About section 58ca7ca, which is Royal Blue. Every das-inline-quote to
   date has sat on Off-White, so the component's colours are all light-
   background values: #3A3A3A body, #0017AB name, and a rgba(0,23,171,.18)
   hairline that is invisible on blue.

   The site has no `das-section-dark` hook - dark is the default and only
   light sections carry a class - so this follows the das-img-placeholder
   precedent and is opt-in per instance via `das-on-dark`.

   Measured on #0017AB: quote and name white at 12.28:1, attribution at
   rgba(255,255,255,.72) at 6.76:1. The hairline takes the same .30 alpha
   the on-dark placeholder border already uses, so the site carries one
   on-dark border value rather than two.

   `das-quote-standalone` (680px measure) is REUSED here, not redefined.
   It was written for the Contact quote that Task 6 removed and had become
   dead CSS; the Simpson quote sits under the same kind of full-width row,
   which is the case it was written for. Drop it from the pre-launch
   dead-.elementor-kit-6 sweep.                                                 */
body .elementor .das-inline-quote.das-on-dark {
  border-top-color: rgba(255,255,255,.30);
}
body .elementor .das-inline-quote.das-on-dark > p {
  color: #FFFFFF;
}
body .elementor .das-inline-quote.das-on-dark .das-tst-name {
  color: #FFFFFF;
}
body .elementor .das-inline-quote.das-on-dark .das-tst-attr {
  color: rgba(255,255,255,.72);
}
/* === end DAS PHASE-1 TASK 7 =========================================== */

/* === DAS PHASE-1 TASK 7 ROWS 5-6 - SERVICE CARD TESTIMONIALS ==========
   Two signed-off quotes sit on two of the six cards: Stephen Little on
   Executive Coaching (svccrd2) and Jason Strauss on Intercultural
   Development (svccrd4).

   FIX-SERIES TASK 2d, 8 Sep 2026. They shipped 6 Sep as variant C, inside
   the same hover reveal as .das-service-extra, which meant the only two
   pieces of third-party proof on the page were invisible at rest on a
   desktop. Both are now visible at rest at every breakpoint, below the
   service copy and above the one-pager link, in the standard
   .das-inline-quote treatment: 17px italic Caladea over a muted hairline,
   name in Montserrat 600 Royal Blue, organisation beneath it.

   The wrapper carries no spacing of its own any more. .das-inline-quote
   already brings margin-top:20px plus 20px of padding above its hairline,
   and the card's own 12px row-gap sits on top of that, so 32px to the
   rule is set by the component rather than restated here. The reveal's
   extra 14px would have made it 46px and left the quote floating.

   Nothing props the two cards up to their row-mates' height now: Task 2e
   lets the row stretch, so the taller card sets the row and the others
   follow it.                                                          */
body .elementor .das-service-quote { margin: 0; }
/* === end DAS PHASE-1 TASK 7 ROWS 5-6 =================================== */


/* === DAS PHASE-1 TASK 8a - PHOTOGRAPHY PLACEMENT (6 Sep 2026) =========
   Real photography replaces six of the .das-img-placeholder boxes. The
   slots are now v3 `image` widgets, so `_css_classes` lands on the widget
   WRAPPER (.elementor-element-<id>), not on an inner div. That is why the
   Task 10 rule `.elementor-widget:has(> .das-t10-slot)` no longer applies
   to these two, and .das-t10-photo carries the geometry itself.

   THE ONE THAT BIT. This site renders Elementor's OPTIMIZED MARKUP: there
   is no `.elementor-widget-container` div at all and the <img> is a direct
   child of the widget wrapper. A first pass put aspect-ratio on
   `> .elementor-widget-container` and it silently matched nothing - every
   photo rendered at its own native ratio, so the gallery came out with
   four different heights. The ratio therefore goes on the WRAPPER. The
   container/figure rule below is kept only so this still holds if the
   optimized-markup switch is ever turned off.

   The photos keep their native files. The section's shape is imposed with
   aspect-ratio + object-fit:cover so nothing below shifts and CLS stays
   clean, exactly as the placeholders behaved. Re-cropping is therefore a
   CSS change, not a re-upload.

   Alt text is deliberately absent. Elementor's image widget renders alt
   from the attachment's _wp_attachment_image_alt meta, so Task 9 fills
   all six by setting that meta - no page edit needed.                 */

body .elementor .das-photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  line-height: 0;
}
body .elementor .das-photo > .elementor-widget-container,
body .elementor .das-photo figure { margin: 0; width: 100%; height: 100%; }
body .elementor .das-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
body .elementor .das-photo--16x9 { aspect-ratio: 16 / 9; }
body .elementor .das-photo--21x9 { aspect-ratio: 21 / 9; }
body .elementor .das-photo--4x3  { aspect-ratio: 4 / 3; }

/* Home and How We Work bands. Mirrors .das-t10-slot geometry exactly so
   the photo lands where the placeholder stood: 1176 lines the band up
   with the grid beneath it rather than the 1240 container. */
body .elementor .das-t10-photo {
  align-self: stretch;
  width: 100%;
  max-width: 1176px;
  margin-inline: auto;
  margin-block: 40px;
}
body .elementor .das-t10-photo:first-child { margin-block-start: 0; }

@media (max-width: 767px) {
  body .elementor .das-t10-photo { margin-block: 28px; }
  /* Same reasoning as the placeholder rule it replaces: 21:9 at 335px is
     a 144px sliver. The file is uncropped, so this is a free re-frame. */
  body .elementor .das-t10-photo.das-photo--21x9 { aspect-ratio: 16 / 9; }
}

/* Media gallery is FOUR items now, not six (mdagp4/mdagp5 deleted in this
   task). Four in a 3-up grid leaves a single orphan on row two, so the
   grid goes 2-up from the tablet breakpoint upward.

   THE SECOND ONE THAT BIT, and it is a PRE-EXISTING Task 5 bug, not one
   this task introduced. Two things the Task 5 width formula did not
   account for: `.elementor .e-flexbox-base` (base-desktop.css, which
   loads AFTER post-6.css) puts `padding: 10px` on the row, so a flex
   item's `100%` resolves against 1156px, not 1176px; and the desktop gap
   is 32px, because the 24px only lands inside `@media (max-width:1024px)`.
   The desktop rule `calc((100% - 48px) / 3)` therefore budgeted 48px of
   gap where there was 64px, overflowed by 16px, and wrapped. The gallery
   has never actually rendered 3-up at desktop - it has been 1-up since
   Task 5 shipped. The video row next to it was correct, because its
   `calc((100% - 64px) / 3)` happens to match the real 32px gap.

   So the gap is pinned HERE alongside the width, from the same number,
   rather than inherited from a rule in another block. The extra 1px is
   slack: at 24px gap the arithmetic lands on an exact fit, and an exact
   fit is one sub-pixel rounding away from wrapping again.

   Mobile is deliberately untouched and stays at the 2-up the Task 5 build
   chose.                                                              */
@media (min-width: 768px) {
  body .elementor .das-gallery-row { gap: 24px; }
  body .elementor .das-gallery-row > .elementor-element { width: calc((100% - 25px) / 2); }
}
/* === end DAS PHASE-1 TASK 8a ========================================== */


/* === DAS PHASE-1 TASK 8b - PHOTO EDGES + PLACEMENT REVISION (7 Sep 2026) ===
   Nicole's rule: photography OUTSIDE the Media page carries a brand edge -
   Teal Mint on dark grounds, Royal Blue on light ones. The Media gallery stays
   deliberately edgeless; four photos each ruled in teal reads as a table, not
   a gallery.

   Opt-in per instance via a class, the same convention as das-on-dark, because
   the site has no das-section-dark hook to key off. 2px matches the section
   boundary rule already used at every dark/light transition.

   Border, not outline or box-shadow: .das-photo is already overflow:hidden with
   a 4px radius, so a border-box border draws inside the corner curve and insets
   the image cleanly. The OUTER width is unchanged, so .das-t10-photo still lands
   on 1176 and stays aligned with the grid beneath it.                       */
body .elementor .das-photo { box-sizing: border-box; }
body .elementor .das-photo--edge-teal { border: 2px solid #00CCAB; }
body .elementor .das-photo--edge-blue { border: 2px solid #0017AB; }

/* Carried over from the Task 10 placeholder geometry, which Task 8a dropped:
   the Home closing band is capped at 720 so a 21:9 photo adds ~309px rather
   than 504px and stays a supporting note under the closing CTA.

   THE THIRD ONE THAT BIT, and this one needs !important, which this site
   otherwise avoids. Something in the Elementor stack sets
   `max-width: 100% !important` on the widget wrapper. Proven empirically by
   injecting escalating rules against the live element and measuring:

     body .elementor .das-t10-photo--narrow                  (0,2,1) -> 1176px, no effect
     body .elementor .elementor-element.das-t10-photo--narrow (0,3,1) -> 1176px, no effect
     body .elementor .das-t10-photo--narrow ... !important   (0,2,1) ->  720px, applies

   Extra specificity alone cannot beat it, so !important is the only lever.
   The source rule could not be pinned down: this browser's CSSOM enumeration
   returns zero max-width declarations across every sheet, including ones whose
   cssText demonstrably contains them, so it cannot be trusted for this. The
   measurement above is the evidence.

   NOTE: the 1176px cap on .das-t10-photo above is dead for the same reason.
   It is harmless today only because every container it sits in already has a
   1176px content box, so width:100% lands on the same number. Do not rely on
   it if that band is ever moved into a wider container.                     */
body .elementor .das-t10-photo--narrow { max-width: 720px !important; }

/* Services "Pressure is not the disruption." band is now photo + copy side by
   side rather than a full-width image above the text. svcbandi carries its own
   compiled `flex-direction: column` at 0,1,0 in post-16.css; `body .elementor`
   is 0,2,1 and outranks it regardless of load order. */
body .elementor .das-svc-split {
  flex-direction: row;
  align-items: center;
  gap: 56px;
}
body .elementor .das-svc-split > .das-svc-photo {
  flex: 0 0 46%;
  max-width: 46%;
  margin-block: 0;
}
body .elementor .das-svc-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

@media (max-width: 1024px) {
  /* At 768 a 50/50 split leaves the 32px Caladea headline about 300px wide and
     it breaks to five lines. Stack, photo first, which is the DOM order. */
  body .elementor .das-svc-split { flex-direction: column; align-items: stretch; gap: 32px; }
  body .elementor .das-svc-split > .das-svc-photo { flex: 0 0 auto; max-width: none; }
}
/* === end DAS PHASE-1 TASK 8b ========================================== */

/* === DAS PHASE-1 TASK 8c/8d - PRE-TASK-9 PHOTO REVISIONS (7 Sep 2026) ===
   8c was five revisions taken before Task 9 alt text. 8d, later the same day,
   is Nicole's follow-up: the Home "How we partner" photograph is gone (its
   whole 8c rule set with it) and the Media gallery pager is now a swipe strip. Nothing here touches
   copy. 8b's edge rule still holds: teal on the blue grounds, blue on light.  */

/* 2. About portrait rule: Teal Mint to Royal Blue.
   Changed in place in the Phase 9 block above, not overridden here, so there
   is one declaration of that border and not two. Noted here only so the
   change is findable from this block.                                     */

/* 3. Services band photo: crop the tower slab off the right edge.

   Measured on the file (1800x1336), not eyeballed. The building's left edge is
   a hard luminance step at x=1766 - mean column luminance over rows 20-380
   falls 241 -> 62 between x=1764 and x=1768 - and the man in the coral shirt
   ends at x=1770. The 4:3 cover crop, centred, showed x=9..1791, so the slab
   was in frame. 1762/1336 pinned left shows x=0..1762: the slab goes, and so
   does the part-figure at the far right edge, at the cost of about 8px of his
   shoulder. 1.319 is still narrower than the file's native 1.347, so this is a
   horizontal crop only - full height, nothing below shifts, CLS unchanged.

   Sits after .das-photo--4x3, same 0,2,1 specificity, so source order wins. */
body .elementor .das-svc-photo { aspect-ratio: 1762 / 1336; }
body .elementor .das-svc-photo img { object-position: left center; }

/* 4. Media gallery: a three-up grid.  FIX-SERIES TASK 3b (8 Sep 2026)

   REPLACES 8d's one-photograph swipe strip. Nicole, 8 Sep: each photograph
   was rendering 1156x867 at 1440, a full screenful per phone-quality
   conference snapshot, behind six dots and no arrows. Three up at roughly
   380px on desktop, one column on mobile. Edgeless, no borders: 8b's rule
   that Media photography carries no brand edge still stands.

   The mdagjs widget that built the dots, the drag handlers and the screen
   reader hint is DELETED from page 1083 in the same task, so every rule it
   depended on comes out here rather than being left dead. Nothing on this
   page reads .das-tst-dot, .das-tst-drag, .is-dragging or .is-settling any
   more, and the row is no longer a scrollport, so the snap, the hidden
   scrollbar and the focus outline go with them.

   GRID, NOT FLEX PLUS calc(). Every earlier rule for this row sized its
   items with calc((100% - gap) / n) against a flex row, and that formula
   has now been got wrong twice: .elementor .e-flexbox-base (base-desktop.
   css, which loads AFTER post-6.css) puts padding:10px on the row, so an
   item's 100% resolves against 1156px and not 1176px, and the gap the calc
   budgets for has to be restated in every breakpoint or it silently
   disagrees with the real one. That is what left the gallery 1-up from
   Task 5 in August through to Task 8a. Six equal boxes in a fixed column
   count is what a grid track is for: repeat(3, 1fr) needs no arithmetic,
   cannot disagree with its own gap, and equalises both rows with no
   min-height. Measured tracks: 1440 gives 369px, 1024 gives 458px, 768
   gives 330px, 390 gives 330px single column. The 4:3 ratio on .das-photo
   is untouched, so a desktop item is 369x277 against the 1156x867 it
   replaces.

   display:grid has to beat .elementor .e-flexbox-base (0,2,0), which sets
   display:flex, hence body .elementor (0,2,1), the ladder Phase 3
   established for the buttons.

   The item width is reset to auto in the base rule AND inside all three
   breakpoints that still carry a width for this row: Task 5's max-width
   1024 and max-width 767 blocks, and Task 8a's min-width 768 block. An
   explicit width on a grid item overrides its track, so leaving any one of
   them standing would put a 2-up or 3-up flex width back on top of the
   grid.                                                                */
body .elementor .das-gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: none;
  margin-block-start: 32px;
  overflow-x: visible;
  align-items: start;
}
body .elementor .das-gallery-row > .elementor-element {
  width: auto;
  max-width: none;
  margin: 0;
}

/* Tablet. Three 4:3 boxes across 940px would be 297px and across 768px
   would be 226px, which is a contact sheet rather than a gallery. Two up
   is the honest maximum here, and six still divides evenly. */
@media (max-width: 1024px) {
  body .elementor .das-gallery-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  body .elementor .das-gallery-row > .elementor-element { width: auto; }
}

@media (max-width: 767px) {
  body .elementor .das-gallery-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-block-start: 32px;
  }
  body .elementor .das-gallery-row > .elementor-element { width: auto; }
}

/* Task 8a set this row's flex width inside min-width:768. Reset it there
   too, at matching specificity, so the grid track governs at every width. */
@media (min-width: 768px) {
  body .elementor .das-gallery-row > .elementor-element { width: auto; }
}
/* === end DAS PHASE-1 TASK 8c ========================================== */

/* === DAS PHASE-1 TASK 14 - ONE-PAGER CTA ON THE SERVICE CARDS (7 Sep 2026)
   The six .das-op-btn links added to svccrd1-svccrd6 reuse the Resources
   component untouched. One thing does not carry over: on Resources the anchor
   is a direct flex child of .das-op-row, so the component's own mobile rule
   (align-self: stretch) makes it a full-width bar. Inside an Elementor card
   the flex child is the WIDGET WRAPPER, not the anchor, so that rule is inert
   and the button stayed 188px in a 330px card. Two declarations restore the
   intended behaviour: stretch the wrapper, then fill it.
   Scoped to .das-op-cta, which exists only on those six widgets, so the
   Resources rows are untouched and stay working on their own rule.        */
@media (max-width: 767px) {
  body .elementor .das-op-cta { align-self: stretch; }
  body .elementor .das-op-cta .das-op-btn { width: 100%; }
}
/* === DAS FIX-SERIES TASK 2f - ONE-PAGER DEMOTED TO A TEXT LINK =========
   8 Sep 2026. `GET THE ONE-PAGER` was a solid Royal Blue .das-op-btn on
   all six cards, which made a PDF download the most visually prominent
   action on the whole Services page, louder than the six service names
   above it. It is now the same text-link-and-arrow the six homepage cards
   use for `Explore`, so the card leads and the download reads as the
   secondary step it is.

   Type is matched to that homepage link as compiled on page 9
   (.das-card-link: Montserrat 600 / 14px / 1.5px tracking / uppercase),
   and the colour to its LIGHT-section value #0017AB, because svcgrid
   carries das-section-light exactly as the homepage card section does.

   Literal arrow character, not a CSS unicode escape for U+2192:
   update_post_meta unslashes, which strips the backslash and ships the
   escape as the visible text "2192". Bitten twice on this stylesheet
   already, which is also why this very comment carries no backslash.

   margin-top:auto is what lines the six links up along the foot of each
   row now that Task 2e lets the cards stretch to a common height. It has
   to sit on the WIDGET WRAPPER, not the anchor, because the wrapper is
   the card's flex child - the same trap Task 14 hit from the other side.
   Scoped through .das-service-card so page 1091, which reuses .das-op-cta
   around a real .das-op-btn, is untouched.

   .das-op-btn itself is deliberately left in this file. It has no user on
   Services any more, but 1091 still calls it.                          */
body .elementor .das-service-card .das-op-cta { margin-top: auto; }
body .elementor .das-op-link {
  display: inline-block;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0017AB;
  text-decoration: none;
}
body .elementor .das-op-link::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform .25s ease;
}
body .elementor .das-op-link:hover { color: #001489; }
body .elementor .das-op-link:hover::after { transform: translateX(5px); }
body .elementor .das-op-link:focus-visible {
  outline: 2px solid #0017AB;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  body .elementor .das-op-link { font-size: 13px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-op-link::after { transition: none !important; }
  body .elementor .das-op-link:hover::after { transform: none !important; }
}
/* === end DAS FIX-SERIES TASK 2f ======================================= */

/* === end DAS PHASE-1 TASK 14 ========================================== */

/* === DAS FIX-SERIES TASK 4 — SERVICE PAGE COMPONENTS (8 Sep 2026) ======
   Built for 1092 Leadership Development, written as shared components so
   1093 and 1094 reuse them rather than each inventing its own. Nothing here
   is page-scoped.

   Three components: the audience list, the outcomes list, and the FAQ
   accordion. Plus two light-to-light hairlines registered in the Phase 6a
   block above, not here, so there stays one definition of that seam.     */

/* --- 1. Audience list. "Who this is for", light sections. -------------
   The old site rendered these as a plain <ul> and let the browser draw the
   disc. A disc at this size sits too low against 17px Montserrat and the
   indent is inconsistent with everything else on the page, so the marker is
   drawn as a 5px Royal Blue square instead, aligned to the cap height of
   the first line. list-style is removed rather than restyled: ::marker
   cannot be positioned.                                                  */
body .elementor .das-svc-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-width: 760px;
}
body .elementor .das-svc-list li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 14px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: #3A3A3A;
}
body .elementor .das-svc-list li:last-child { margin-bottom: 0; }
body .elementor .das-svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  background-color: #0017AB;
  border-radius: 1px;
}

/* --- 2. Outcomes list. "What you can expect", dark sections. ----------
   The old site typed a literal check character at the start of each line,
   which screen readers announce as "check mark" once per bullet and which
   cannot be styled. The glyph is now a decorative ::before, aria-hidden by
   virtue of being a pseudo-element, and the list is a real <ul> so the item
   count is announced properly.

   Teal Mint on Royal Blue measures 7.6:1, so the mark is legible as well as
   decorative. The .das-on-dark modifier follows the same opt-in convention
   as .das-img-placeholder: dark is this site's default and only light
   sections carry a class, so there is no dark hook to key off.           */
body .elementor .das-svc-checks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-width: 760px;
}
body .elementor .das-svc-checks li {
  position: relative;
  padding-left: 32px;
  margin: 0 0 16px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: #3A3A3A;
}
body .elementor .das-svc-checks li:last-child { margin-bottom: 0; }
body .elementor .das-svc-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #0017AB;
}
body .elementor .das-svc-checks.das-on-dark li { color: #FFFFFF; }
body .elementor .das-svc-checks.das-on-dark li::before { color: #00CCAB; }

/* --- 3. FAQ accordion. THE PATTERN. -----------------------------------
   Nicole, 8 Sep: build it as <details> in an html widget and style it into
   the design system properly, because this sets the pattern for every FAQ
   that follows. So: EVERY FAQ ON THIS SITE IS BUILT THIS WAY. Do not reach
   for Elementor's accordion, nested-accordion or toggle widget. All three
   are registered and all three are unused, and that is deliberate.

   Why <details> and not the v3 widget:
   - It is a v3 widget inside a v4 document. Every other v3 widget on this
     site (image, nav-menu, posts) has needed a kit override to stop it
     rendering as stock Elementor, and an accordion has far more surface
     than an image does.
   - <details>/<summary> is open/close, keyboard operable, and correctly
     announced by screen readers with zero JavaScript and zero ARIA. The
     Elementor widget ships its own script to reproduce that.
   - Find-in-page works. Chrome and Safari open a closed <details> to reveal
     a match; a div-and-JS accordion does not, which quietly hides FAQ copy
     from the reader and is the opposite of what an SEO asset should do.
   - It matches how every other custom component here is done.

   Answers stay in the DOM when closed, so the FAQ text is indexed whether
   or not anything is expanded. That is the whole reason the brief calls the
   FAQ the strongest SEO asset on the old pages.

   No open-by-default item. An accordion with one panel already open reads
   as a mistake in the other panels.                                      */
body .elementor .das-faq {
  margin-top: 8px;
  max-width: 860px;
  border-top: 1px solid rgba(0,23,171,.18);
}
body .elementor .das-faq__item {
  border-bottom: 1px solid rgba(0,23,171,.18);
}
body .elementor .das-faq__q {
  position: relative;
  display: block;
  padding: 22px 44px 22px 0;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  color: #0017AB;
  cursor: pointer;
  /* Both are needed: Safari uses the webkit pseudo-element, everything else
     honours list-style on the summary itself. */
  list-style: none;
}
body .elementor .das-faq__q::-webkit-details-marker { display: none; }
/* The marker. A plus that becomes a minus, drawn from two spans of
   background rather than a glyph, so it is identical at every weight and
   needs no icon font. Rotating a chevron would need a transform on an
   ::after that also carries content, which Safari repaints badly inside
   <details>.                                                            */
body .elementor .das-faq__q::before,
body .elementor .das-faq__q::after {
  content: "";
  position: absolute;
  right: 4px;
  background-color: #00CCAB;
  transition: transform .2s ease, opacity .2s ease;
}
body .elementor .das-faq__q::before {
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
}
body .elementor .das-faq__q::after {
  top: 50%;
  right: 10px;
  width: 2px;
  height: 14px;
  margin-top: -7px;
}
body .elementor .das-faq__item[open] .das-faq__q::after {
  transform: rotate(90deg);
  opacity: 0;
}
body .elementor .das-faq__q:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: 3px;
}
body .elementor .das-faq__a {
  padding: 0 44px 24px 0;
  max-width: 720px;
}
body .elementor .das-faq__a p {
  margin: 0;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: #3A3A3A;
}
@media (max-width: 767px) {
  body .elementor .das-svc-list li,
  body .elementor .das-svc-checks li,
  body .elementor .das-faq__q,
  body .elementor .das-faq__a p { font-size: 16px; }
  body .elementor .das-faq__q { padding: 18px 36px 18px 0; }
  body .elementor .das-faq__a { padding: 0 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-faq__q::before,
  body .elementor .das-faq__q::after { transition: none; }
}

/* --- 4. Sub-section headline spacing. --------------------------------
   "The work" stacks three headline-plus-paragraph units in one section.
   The container's row-gap is uniform, so without this the space above a
   headline equals the space below it and the three units read as six
   loose blocks rather than three sub-sections. Measured at 1440 before
   changing it: 24px on both sides of every headline.

   The margin goes on the headline and not on the paragraph because the
   paragraph is also the last element before the section's image slot,
   where the extra space is not wanted. :first-of-type zeroes it on the
   opening headline, which already has the eyebrow's 20px above it. The
   eyebrow is a <p> and these are <h2>, so first-of-type is unambiguous.

   Shared, not local: 1093 and 1094 use the same three-up sub-section
   band.                                                              */
body .elementor .das-svc-subhead { margin-block-start: 30px; }
body .elementor .das-svc-subhead:first-of-type { margin-block-start: 0; }
@media (max-width: 767px) {
  body .elementor .das-svc-subhead { margin-block-start: 24px; }
}

/* === end DAS FIX-SERIES TASK 4 ========================================= */

/* === DAS FIX-SERIES TASK 5 - THE SERVICE CARDS BECOME LINKS (8 Sep 2026)
   Task 2f made the one-pager a text link so the card would lead. Task 5
   removes the one-pager from the card entirely and gives the card itself
   the destination, so `t14op1`-`t14op6` are gone from page 16 and the
   one-sheets now live on the six service pages.

   The click target is the whole card, but the markup is one ordinary
   anchor per card with a transparent overlay on it, not a wrapper around
   the card. A wrapping anchor would swallow the heading, the description
   and the two testimonials on cards 2 and 4, which is invalid nesting and
   gives a screen reader one enormous link name per card. This way each
   card is a single tab stop with a short, distinct accessible name.

   Known trade-off, recorded rather than hidden: an overlay sitting above
   the card content means text inside the card can no longer be selected
   with the mouse. That is the cost of "the whole card is clickable" and
   it is the standard behaviour of this pattern.

   Affordance is the visible link text at the card foot, at rest, at every
   breakpoint. It does not depend on :hover and so survives `hover: none`,
   which the old fill-on-hover did not. Type and colour are the same
   Montserrat 600 / 14px / 1.5px / uppercase / #0017AB the homepage cards
   and the retired .das-op-link used, so this is not a new component.

   Literal arrow character, not a CSS escape for U+2192: update_post_meta
   unslashes and would ship the escape as the visible text "2192". Same
   reason this comment carries no backslash.                            */
body .elementor .das-service-card { position: relative; }
/* position: static is load-bearing. Elementor sets position:relative on every
   widget wrapper, which would make the wrapper the containing block for the
   overlay below and shrink the click target to the link itself. Neutralising
   it here lets the overlay resolve to .das-service-card as intended.        */
body .elementor .das-service-card .das-go-cta { margin-top: auto; position: static; }
body .elementor .das-card-go {
  display: inline-block;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0017AB;
  text-decoration: none;
}
body .elementor .das-card-go::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform .25s ease;
}
/* Only a card with a destination is clickable. All six hrefs were populated
   on 8 Sep 2026 once 1095, 1096 and 1097 were published, so the no-href rules
   below are now a dormant fallback rather than a live state. Keep them: a
   future seventh card starts life without a destination.                 */
body .elementor .das-card-go[href]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
body .elementor .das-service-card:hover .das-card-go[href] { color: #001489; }
body .elementor .das-service-card:hover .das-card-go[href]::after { transform: translateX(5px); }
body .elementor .das-card-go[href]:focus-visible { outline: 2px solid #0017AB; outline-offset: 3px; }
/* Keyboard parity: focusing the card's link gives the card the same fill
   change a mouse hover does, so the two input methods agree.            */
body .elementor .das-service-card:focus-within {
  background-color: #DDE3FF;
  border-top-color: #00B396;
}
/* Awaiting a destination. Body grey rather than Royal Blue, and a faded
   arrow, so it reads as "not yet" instead of as a broken link. No new hex
   value: #3A3A3A is the standing body colour.                           */
body .elementor .das-card-go:not([href]) { color: #3A3A3A; cursor: default; }
body .elementor .das-card-go:not([href])::after { opacity: 0.45; }
@media (max-width: 767px) {
  body .elementor .das-card-go { font-size: 13px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-card-go::after { transition: none !important; }
  body .elementor .das-service-card:hover .das-card-go[href]::after { transform: none !important; }
}
/* === end DAS FIX-SERIES TASK 5 ======================================== */

/* === DAS FIX-SERIES TASK 6 - homepage services list ==================== */
/* Replaces the six-card grid in homepage section 2 with a typographic list.
   The section ground is Royal Blue #0017AB, so copy is White and the arrow
   is Teal. Measured against #0017AB: White 12.3:1, Teal #00CCAB 5.98:1.
   Both clear AA at every size used here. No new hex value is introduced;
   the hairline is White at 18% alpha, not a fifth grey.
   Literal arrow character, not a CSS escape for U+2192: update_post_meta
   unslashes and would ship the escape as the visible text 2192. Same
   reason this comment carries no backslash.                            */
body .elementor .das-svc-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  width: 100%;
  max-width: 860px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
body .elementor .das-svc-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
body .elementor .das-svc-go {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--e-global-typography-primary-font-family), serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  line-height: 1.25em;
  color: #FFFFFF;
  text-decoration: none;
  transition: color .25s ease;
}
body .elementor .das-svc-go::after {
  content: '→';
  color: #00CCAB;
  flex: none;
  transition: transform .25s ease;
}
body .elementor .das-svc-go:hover { color: #00CCAB; }
body .elementor .das-svc-go:hover::after { transform: translateX(5px); }
body .elementor .das-svc-go:focus-visible { outline: 2px solid #00CCAB; outline-offset: 3px; }
/* Single closing link, one level up from the list. Same Montserrat 600 /
   14px / 1.5px / uppercase as .das-card-go, recoloured for a dark ground. */
body .elementor .das-svc-all {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #00CCAB;
  text-decoration: none;
}
body .elementor .das-svc-all::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform .25s ease;
}
body .elementor .das-svc-all:hover::after { transform: translateX(5px); }
body .elementor .das-svc-all:focus-visible { outline: 2px solid #00CCAB; outline-offset: 3px; }
@media (max-width: 767px) {
  body .elementor .das-svc-go { font-size: 20px; padding: 18px 0; gap: 16px; }
  body .elementor .das-svc-all { font-size: 13px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-svc-go::after,
  body .elementor .das-svc-all::after { transition: none !important; }
  body .elementor .das-svc-go:hover::after,
  body .elementor .das-svc-all:hover::after { transform: none !important; }
}
/* === end DAS FIX-SERIES TASK 6 ======================================== */

/* === DAS FIX-SERIES TASK 7 - native gradient heroes ==================== */
/* Heroes are painted with a CSS gradient rather than a photograph. No image
   file, no HTTP request, no page weight. That matters most on mobile, where
   the homepage hero video is already the heaviest asset on the site.

   ONE definition, referenced by every hero, so a later palette change moves
   all of them at once. Do not set a gradient inline on a section.

   Every value below is already in the kit. Nothing here is a new colour:
     #001489  the darker Royal Blue already used as the .das-card-go and
              .das-op-link hover colour
     #0017AB  Royal Blue, system colour primary
     #00B396  the darker Teal already used on .das-service-card:focus-within
     #00CCAB  Teal, system colour secondary

   The two navy stops measure hue 231.2 and 231.9, so this is one hue at two
   lightnesses and not a colour transition. Lightness runs 26.9% to 33.5%.
   The range is deliberately tight: it should read as a considered surface.

   CONTRAST. The LIGHTEST stop of the navy gradient is #0017AB, which is
   exactly the flat ground every hero used before this task. So the worst
   case is unchanged by definition and every contrast measurement already
   recorded against #0017AB still holds, at every breakpoint. The stops are
   fixed colours, so viewport width moves only where they land, never how
   light the lightest point is. White on #0017AB is 12.28:1 and Teal on
   #0017AB is 5.98:1, both clear of AA for normal text.

   background-color is set to the LIGHTEST stop, not the darker one, so that
   if background-image is ever dropped the fallback is the exact ground the
   contrast figures were measured against.

   The teal variant is defined but NOT yet applied to any page. White copy
   on Teal measures 2.05:1 and fails, so a teal hero needs Royal Blue copy,
   which is a brand decision and goes to the client first.               */
:root {
  --das-hero-angle: 160deg;
  --das-hero-navy-deep: #001489;
  --das-hero-navy-light: #0017AB;
  --das-hero-teal-deep: #00B396;
  --das-hero-teal-light: #00CCAB;
  --das-hero-gradient: linear-gradient(var(--das-hero-angle), var(--das-hero-navy-deep) 0%, var(--das-hero-navy-light) 100%);
  --das-hero-gradient-teal: linear-gradient(var(--das-hero-angle), var(--das-hero-teal-deep) 0%, var(--das-hero-teal-light) 100%);
}
body .elementor .das-hero-gradient {
  background-color: #0017AB;
  background-image: var(--das-hero-gradient);
}
body .elementor .das-hero-gradient-teal {
  background-color: #00CCAB;
  background-image: var(--das-hero-gradient-teal);
}
/* === end DAS FIX-SERIES TASK 7 ======================================== */


/* === DAS REFINEMENT 20260909 - HERO BLOOM COVER (MOVED 9 Sep 2026) ==
   The Services (svchero) and Resources (rsrhero) bloom covers were
   REMOVED here by the homepage redesign: the brief puts the blue light
   burst on the Home testimonial band only. Both headings fall back to
   the flat Royal Blue they already carry as a source background prop,
   so neither page needed an edit and neither breaks.
   The three crops and the image-set() serving are unchanged and now
   live in the DAS HOMEPAGE REDESIGN block at the end of this file.
   Attachments 1132-1137 are still in the library. To restore, move the
   rule back and re-add the two element .elementor-kit-6s. */


/* === DAS REFINEMENT 20260909 - THEME PAGE TITLE =============
   Insights (34) carries no Elementor data, so its heading is the theme's
   .entry-title, not an e-heading. Hello's own `.entry-header .entry-title`
   is 0,2,0 and outranks the kit's `.elementor-kit-6 h1` (0,1,1), so the kit
   h1 could not reach it and the page sat at 42px while every other page
   moved to 54px. This matches it to the Contact standard at one place for
   any theme-rendered page, rather than as a per-page override. */
body .entry-header .entry-title {
  font-family: Caladea, Georgia, serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1.14em;
  letter-spacing: -0.01em;
}
@media (max-width: 1024px) { body .entry-header .entry-title { font-size: 44px; } }
@media (max-width: 767px)  { body .entry-header .entry-title { font-size: 36px; } }
/* === end DAS REFINEMENT 20260909 - THEME PAGE TITLE ============= */


/* === DAS HOMEPAGE REDESIGN (9 Sep 2026) ===============================
   Brief: DAS-homepage-redesign-prompt.md + DAS Landing Redesign mockup.
   Home section order is now hero / stats / client trust / frameworks /
   six areas of practice / testimonials / closing CTA. The problems
   section moved to How We Work and is not deleted.

   PALETTE: the mockup's navy is deliberately NOT adopted. The brief's
   global rule keeps every dark full-width band at Royal Blue #0017AB,
   "exactly as on the current live site", so stats, client trust, the
   practice grid and the closing CTA are all Royal Blue here. The only
   new value on the site is the darkened header/footer, and that is a
   darkening of the existing #06167F, not a new hue.                   */

/* --- 2.5 frameworks: five numbered cards ------------------------------
   Widths are stated at source as 18.4% so the Elementor editor previews
   five across, and restated here as calc() because a percentage cannot
   subtract the four 16px gaps: 18.4% x 5 plus the gaps overflowed the
   row and flex wrapped the fifth card. Same reasoning, and the same
   fix, as the Phase 8 testimonial cards.                              */
body .elementor .das-fw-card { width: calc((100% - 64px) / 5); }
@media (max-width: 1024px) {
  body .elementor .das-fw-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
  body .elementor .das-fw-card { width: 100%; }
}

/* Hover: the card fills to #E8ECFF, the palette's Light Card and the exact
   shade the image placeholder in this same section already uses, so the
   interaction introduces no new colour. All five behave identically - the
   AWARE card lost its filled Royal Blue treatment on 9 Sep 2026 and is now
   white like the other four, so there is no longer a card that cannot
   respond to hover.

   Fill only: no lift and no shadow. The frameworks cards are reference
   material rather than navigation - nothing here is clickable - so a
   movement cue would promise a click that does not exist. The practice
   tiles below, which ARE links, are the ones that scale.

   Measured on #E8ECFF: the Royal Blue number, name and label 10.45:1, the
   body copy 9.68:1. Both were 12.28:1 and 11.37:1 on white, so the hover
   state costs contrast but stays far clear of the 4.5:1 floor. */
body .elementor .das-fw-card { transition: background-color 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  body .elementor .das-fw-card:hover { background-color: #E8ECFF; }
}
/* Touch equivalent of that hover, 15 Sep 2026 (Nicole: "tapping a card
   should give the same blue"). Coarse pointers never match the block
   above, so the fill is repeated for the pressed state.
   The cards are NOT links - see the note above - and iOS Safari only
   fires :active on a non-interactive element when the document carries a
   touch listener, so the paired snippet (DAS Framework Card Touch State)
   also sets .is-touch explicitly. :active alone covers Android/Chrome;
   the class covers iOS. Same #E8ECFF, so the measured contrast figures
   recorded above hold unchanged.                                     */
@media (hover: none), (pointer: coarse) {
  body .elementor .das-fw-card:active,
  body .elementor .das-fw-card.is-touch { background-color: #E8ECFF; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-fw-card { transition: none; }
}

/* The rail. One hairline between two labels, so the row reads as a
   spectrum from internal to organizational rather than as a heading. */
/* The rail line is an e-flexbox, and Elementor's .e-con default padding
   (10px block) made a 1px rule compute to 20px. Padding is zeroed here
   rather than at source so the container keeps its editor defaults. */
body .elementor .elementor-element-fwrline {
  height: 1px;
  min-height: 1px;
  padding: 0;
  align-self: center;
}

/* Text link replacing "Read the full method". An e-heading with tag p
   and a link, which Elementor renders as <p><a class=e-heading-link-base>.
   That is the site's only native inline-link primitive: v4 paragraphs
   here carry plain text with no children, so there is no way to link a
   phrase inside one without an html widget.
   Literal arrow character, not a CSS escape for U+2192: update_post_meta
   unslashes and would ship the escape as the visible text "2192".     */
body .elementor .das-fw-link a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
body .elementor .das-fw-link a::after {
  content: '→';
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.2s ease;
}
body .elementor .das-fw-link a:hover::after { transform: translateX(5px); }
body .elementor .das-fw-link a:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: 3px;
}

/* --- 2.6 six areas of practice: 3 x 2 tile grid -----------------------
   Same calc() reasoning as the framework cards: 32.4% at source for the
   editor, calc() here so the two 16px gaps come out of the row.       */
body .elementor .das-prc-tile { width: calc((100% - 32px) / 3); position: relative; }
@media (max-width: 1024px) {
  body .elementor .das-prc-tile { width: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
  body .elementor .das-prc-tile { width: 100%; }
}

/* Whole tile is the click target, built the way Task 5 built the service
   cards: ONE ordinary anchor per tile with a transparent overlay on it,
   never a wrapper around the tile. The anchor is the service name, so
   each tile is a single tab stop with a short, distinct accessible name.
   Known trade-off, the same one Task 5 recorded: an overlay above the
   tile content means the text inside cannot be selected with the mouse.
   That is the cost of "the whole tile is clickable".                  */
body .elementor .das-prc-name { position: static; }
body .elementor .das-prc-name a {
  color: inherit;
  text-decoration: none;
  position: static;
}
body .elementor .das-prc-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
body .elementor .das-prc-name a:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: -4px;
}
/* Affordance at rest, not on hover, so it survives `hover: none`. The
   tile lifts its fill very slightly instead of moving or shadowing:
   the brief rules out drop shadows and rounded cards.                 */
body .elementor .das-prc-tile {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
/* Hover is a small lift and a lighter fill, nothing else. No shadow, per
   the brief. The scale is 1.025: enough to read as a response, small
   enough that the 16px gutters absorb it without the tiles touching.
   z-index lifts the hovered tile over its neighbours so the grown edge is
   never clipped by the next one. Pointer devices only - a tile that grows
   under a finger just looks like a rendering fault. */
@media (hover: hover) and (pointer: fine) {
  body .elementor .das-prc-tile:hover {
    background-color: #0A24BE;
    transform: scale(1.025);
    z-index: 3;
  }
  /* The photo tile keeps its own ground, so only the overlay lightens. */
  body .elementor .das-prc-photo:hover::after { opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .das-prc-tile { transition: background-color 0.25s ease; }
  body .elementor .das-prc-tile:hover { transform: none; }
}

/* Photo tile treatment. ALL SIX tiles carry photography as of 9 Sep 2026
   (was tile 1 only, as an interim preview). Same duotone treatment and the
   same scrim on every tile, so the grid reads as one set rather than one
   photo tile sitting among five flat Royal Blue ones.

   The desaturation is BAKED INTO THE ASSET, not applied as a CSS filter:
   each file is already a Royal Blue duotone regenerated from the source
   photograph's luminance, so nothing on the page carries a colour
   outside the palette even for the frame before the filter resolves.

   CONTRAST, measured rather than assumed, as the brief demands. Every
   image was sampled at its BRIGHTEST pixel inside the text band - 76% to
   91% down the tile, where the mint eyebrow and the white service name
   actually sit - and composited against the scrim opacity at that exact
   height (0.908-0.928). Worst case per card, mint #00CCAB / white:
     Leadership Development            5.00 / 10.27
     Executive Coaching                5.63 / 11.55
     Intercultural Development         5.29 / 10.87
     Organizational Culture & Climate  5.18 / 10.64
     Strategic Facilitation            5.77 / 11.85
     Transformation Advisory           5.40 / 11.09
   All six clear the 4.5:1 floor. Leadership Development is the tightest,
   because of the blown-out sky in the top right; do not raise the 30%
   stop or lighten the 0.90/0.94 pair without re-measuring that card.  */
body .elementor .das-prc-photo { overflow: hidden; isolation: isolate; }
body .elementor .das-prc-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
/* Per-tile artwork. The shared rule above owns cover / centre / no-repeat,
   so each tile names only its own file and the six cannot drift apart.
   Same specificity as the rule above, later in source order, so these win
   the background-image and nothing else.                             */
body .elementor .e-prct1::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/leadership-development-tint.jpg'); }
body .elementor .e-prct2::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/executive-coaching-tint.jpg'); background-position: center 88%; }  /* 10 Sep 2026: was the shared center 42%, which framed only mast rigging. Raised to bring the deck, crew and hull into view. 1013x1800, cover leaves vertical room to move. */
body .elementor .e-prct3::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/organizational-culture-climate-tint.jpg'); background-size: auto 175%; background-position: center 84%; }  /* 10 Sep 2026: 1800x1660 is near-square so cover barely crops and position alone would not lift the boats clear of the sky. Zoomed ~175% and framed low so horizon, sea and fishing boats fill the tile. */
body .elementor .e-prct4::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/intercultural-development-tint.jpg'); }
body .elementor .e-prct5::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/strategic-facilitation-tint.jpg'); }
body .elementor .e-prct6::before { background-image: url('https://www.das-assoc.co/wp-content/uploads/2026/09/transformation-advisory-tint.jpg'); }
body .elementor .das-prc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.25s ease;
  /* REBALANCED 9 Sep 2026 (Nicole: the photo was too faded). It was a flat
     78% everywhere, which held the text but flattened the image. The wash
     now runs 46% at the top, where there is no text and the ridgeline can
     actually be seen, down to 94% across the bottom third where the eyebrow
     and the service name sit.

     Measured against the image's LIGHTEST point, the blown-out sky, which
     is the worst case: at the 30% mark the wash is 90%, giving mint
     4.89:1 and white 10.04:1, and it only gets darker below that. Above
     that line nothing is written, so the lighter wash costs no contrast.
     Do not raise the 30% stop or lighten the 0.90/0.94 pair without
     re-measuring: mint fails 4.5:1 anywhere lighter than about 88%. */
  /* LIGHTENED 9 Sep 2026 (Nicole: "slightly reduce the tint"). Was
     0.94/0.90/0.52/0.46. The bottom pair is what holds the text, so it only
     comes down 0.02; the top pair carries no text and comes down 0.06, which
     is where most of the visible gain is. Leadership Development is the
     binding constraint on the bottom pair - its blown-out sky leaves only
     0.04 of headroom before mint fails - so 0.02 is taken rather than the
     full 0.04, to keep margin against Imagify recompressing the asset.
     Re-measured mint at the brightest pixel in the text band: LD 4.77,
     Intercultural 5.11, Org Culture 4.99, Transformation 5.22.        */
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.92) 0%,
      rgba(0,23,171,0.88) 28%,
      rgba(0,23,171,0.22) 45%,
      rgba(0,23,171,0.10) 100%);
}

/* Executive Coaching and Strategic Facilitation are much darker exposures
   than the other four, so the shared scrim buried them almost completely -
   they read as flat blue tiles next to four that show a photograph. Being
   dark is exactly why they have headroom the others do not: measured
   maximum bottom-pair reduction before mint fails is 0.22 for Executive
   Coaching and 0.37 for Strategic Facilitation, against 0.04 for Leadership
   Development. These take well inside that, keeping ~0.3 of ratio in hand:
   Executive Coaching mint 4.82 / white 9.90, Strategic Facilitation mint
   4.83 / white 9.93. Do NOT copy these values onto the other four tiles -
   on a bright exposure they fail. Re-measure per image if an asset is
   ever swapped.                                                      */
body .elementor .das-prc-photo.e-prct2::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.74) 0%,
      rgba(0,23,171,0.70) 28%,
      rgba(0,23,171,0.16) 45%,
      rgba(0,23,171,0.06) 100%);
}
body .elementor .das-prc-photo.e-prct5::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.61) 0%,
      rgba(0,23,171,0.57) 28%,
      rgba(0,23,171,0.16) 45%,
      rgba(0,23,171,0.06) 100%);
}

/* Per-tile text-zone value, solved per image so mint holds >= 4.75 at the
   brightest pixel in the text band. Do not copy between tiles.        */
body .elementor .das-prc-photo.e-prct1::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.92) 0%,
      rgba(0,23,171,0.88) 28%,
      rgba(0,23,171,0.22) 45%,
      rgba(0,23,171,0.10) 100%);
}
body .elementor .das-prc-photo.e-prct3::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.89) 0%,
      rgba(0,23,171,0.85) 28%,
      rgba(0,23,171,0.22) 45%,
      rgba(0,23,171,0.10) 100%);
}
body .elementor .das-prc-photo.e-prct4::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.88) 0%,
      rgba(0,23,171,0.84) 28%,
      rgba(0,23,171,0.22) 45%,
      rgba(0,23,171,0.10) 100%);
}
body .elementor .das-prc-photo.e-prct6::after {
  background-image: linear-gradient(to top,
      rgba(0,23,171,0.86) 0%,
      rgba(0,23,171,0.82) 28%,
      rgba(0,23,171,0.22) 45%,
      rgba(0,23,171,0.10) 100%);
}
/* The flat fill set at source is what shows if the image 404s, and it is
   the exact ground the overlay resolves to, so a failed load degrades to
   an ordinary Royal Blue tile rather than to unreadable text.          */

/* --- 2.7 testimonials -------------------------------------------------
   The pale blue card box is removed at SOURCE (the background prop is
   gone from tstcard2 and tstcard5), so the hover fill that Phase 8 set
   against it is neutralised here rather than left painting a box that
   no longer exists. Everything else about the strip is untouched: the
   swipe, the pointer drag, the dots and the arrow keys all read the card
   count from the DOM and none of them care about the fill.            */
body .das-testimonial-card:hover { background-color: transparent; }

/* Larger pull-quote, per the mockup. The rule, the bold blue name and
   the grey role beneath it were already built this way by Task 3, so
   only the size changes.                                              */
body .elementor .das-tst-q > p { font-size: 28px; line-height: 1.5em; }
@media (max-width: 1024px) {
  body .elementor .das-tst-q > p { font-size: 24px; }
}
@media (max-width: 767px) {
  body .elementor .das-tst-q > p { font-size: 21px; }
}

/* The blue light burst was moved here from the Services and Resources page
   headings by the redesign, then REMOVED 9 Sep 2026 on Nicole's review: the
   tinted ground read as a different colour from the frameworks band directly
   above it, and the two light sections are meant to match. This band now
   takes the same flat Off-White, so nothing is set here at all.

   CONSEQUENCE, flagged: the burst now appears on NO page. It is off Services
   and Resources and it is not here. Attachments 1132-1137 are still in the
   library and the three crops plus the image-set() serving are recoverable
   from this file's history if it is ever wanted back. */
/* === end DAS HOMEPAGE REDESIGN ======================================== */


/* === DAS FRAMEWORKS PAGE (9 Sep 2026) =================================
   Redesign brief section 3. SHELL ONLY: Darryl supplies the body copy and
   the five PDFs. Not in the main nav until he signs off, but PUBLISHED,
   because the homepage frameworks band links to /frameworks/. It carries
   rank_math_robots=noindex like the service pages, and that noindex must
   come off at launch.                                                   */

/* One hairline between blocks, none above the first and none below the
   last, so the five read as a sequence rather than as five boxes. Same
   Royal Blue hairline weight as the Phase 6a section rule.             */
body .elementor .das-fp-block + .das-fp-block {
  border-block-start: 1px solid rgba(0,23,171,0.16);
}

/* The empty region each block reserves for Darryl's copy. It has no
   height of its own: an empty block that reserved vertical space would
   read as a layout fault on a page that is otherwise complete. It exists
   so there is an obvious, named container to drop copy into in the
   Elementor editor rather than having to build one per block.          */
body .elementor .das-fp-body:empty { display: none; }

/* The download control is a real disabled <button>, not a link styled to
   look inert, so assistive technology announces it as unavailable
   instead of offering a download that does not exist. It is deliberately
   NOT an .e-button-base: Phase 3 owns that class and every button
   wearing it on this site is a working control.
   To wire one up, swap the element for
     <a class="das-fp-dl" href="....pdf" download>Download the framework</a>
   and delete the :disabled rule's effect by removing the attribute.    */
body .elementor .das-fp-dl {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 16px 32px;
  border: 1px solid rgba(0,23,171,0.35);
  border-radius: 4px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0017AB;
  text-decoration: none;
}
/* 3.9:1 on Off-White. Below the 4.5:1 floor ON PURPOSE and recorded here:
   this is a disabled control, which WCAG 1.4.3 exempts, and the whole
   point is that it must not read as available. The moment it is wired to
   a PDF it becomes an <a>, loses :disabled, and returns to 11.4:1.     */
body .elementor .das-fp-dl:disabled {
  color: rgba(0,23,171,0.55);
  border-color: rgba(0,23,171,0.18);
  cursor: not-allowed;
}
body .elementor a.das-fp-dl:hover { background: rgba(0,23,171,0.06); }
body .elementor .das-fp-dl:focus-visible { outline: 2px solid #00CCAB; outline-offset: 3px; }
/* === end DAS FRAMEWORKS PAGE ========================================== */


/* === DAS HOW WE WORK FIXES (9 Sep 2026) ===============================
   Redesign brief section 4.1. The page now opens hero -> problems ->
   stepper, having taken "The problems that survive every initiative"
   off the homepage unchanged.                                          */

/* The problems section is Off-White and lands directly above the equally
   Off-White stepper, which is a new light-to-light boundary and takes the
   Phase 6a hairline. The hero above it is the Task 7 gradient, so the
   hero/problems edge is dark-to-light and correctly takes nothing.
   Preconditions checked on hwwstep: position:relative from
   .e-flexbox-base, overflow visible, no other ::before.                */
body .elementor .elementor-element-hwwstep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  height: 1px;
  background: rgba(0,23,171,0.32);
  border: 0;
  pointer-events: none;
}

/* The italic framing line, now an html widget rather than an e-paragraph
   so that "the frameworks" can be a link inside the sentence. v4
   paragraphs on this site hold plain text and an empty children array,
   so there is no way to link a phrase within one. Type is restated here
   to the pixel from what the e-paragraph computed: Montserrat 15px
   italic 400, 1.7em, #3A3A3A at 78%, max-width 760, 48px below.       */
body .elementor .das-hww-lead {
  margin: 0 auto 48px;
  max-width: 760px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7em;
  color: rgba(58,58,58,0.78);
}
body .elementor .das-hww-lead a {
  color: #0017AB;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body .elementor .das-hww-lead a:hover { text-decoration-thickness: 2px; }
body .elementor .das-hww-lead a:focus-visible {
  outline: 2px solid #00CCAB;
  outline-offset: 2px;
}

@media (min-width: 1025px) {
  /* All five body paragraphs on one baseline.

     The brief's first-choice fix was to shorten stage 04's sub-line to
     "Align systems and behavior." Measured in the real font at the real
     column width, that string is 213px against 212px available, so it
     STILL WRAPS - it misses by a single pixel. Rather than rewrite
     approved copy further to chase one pixel, this is the brief's
     second option: a floor of two lines on every sub-line, so all five
     bodies start together no matter which one wraps. 42px is exactly
     2 x the computed 21px line box. This also survives any future copy
     edit or width change, which shortening the string would not.
     Desktop only: at <=1024px the columns are 47% and nothing wraps, and
     at <=767px they are stacked. */
  body .elementor .das-stage > h3 { min-height: 42px; }

  /* The connecting rule ran from the row's left edge to its right edge,
     so past the 05 numeral it carried on into empty space with nothing
     to terminate against. The rule itself is right - a single continuous
     line across all five columns reads as a progression, which is the
     brief's preferred option - so it is the overshoot that goes.

     It is masked the same way the line is already broken either side of
     every numeral: with an opaque block in the section's own ground
     colour, anchored to the last numeral's right edge. No magic numbers
     and no dependence on the numeral's rendered width, so it cannot
     drift if the font metrics or the type scale change.               */
  body .elementor .das-stage:last-child .das-stage-num::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100vw;
    background: #F7F7F5;
    pointer-events: none;
  }
}

/* The closing "Schedule a Conversation" button was REMOVED from How We Work
   on 9 Sep 2026 (Nicole: the page already opens with one, and a second on
   the Off-White ground was redundant). The mint override and its 1px
   hairline that lived here went with it, which also retires the WCAG 1.4.11
   note about mint on Off-White - there is no longer a mint button on a
   light section anywhere on the site. */
/* === end DAS HOW WE WORK FIXES ======================================== */


/* === DAS 9 SEP 2026 - RESOURCES TITLE BLOCK SEPARATION =================
   Same fault the header had: rsrhero (the "Writing from the practice."
   title block) and rsrart (the Insights listing under it) were BOTH
   #0017AB, so the two ran together as one blue field and the Task 15c
   hairline was the only thing marking the seam. The title block now takes
   the same Deep Blue as the header and footer, so the page reads
   header / title block / listing as three bands instead of one.
   The source background on rsrhero is set to #000C5C to match, so the
   Elementor editor shows the real colour; this rule is what keeps it tied
   to the global if the global is ever retuned.
   Measured on #000C5C: white 17.40:1, teal eyebrow 8.47:1 - both up on
   what they were against #0017AB.                                     */
body .elementor .elementor-element-rsrhero { background-color: var(--e-global-color-dasdeep, #000C5C); }


/* === DAS 15 Oct 2026 - FMG-OWNED NAMES SPACING ===========================
   Nicole, 15 Oct: Ivy Rehab and SCA Health sat 32px apart under the FMG
   Leading line, close next to the 72px gaps in the client row. Wider
   column gap at each breakpoint; `html` in front outranks the earlier
   0,2,1 rule without editing it. */
html body .elementor .das-partner-block { column-gap: 56px; row-gap: 8px; }
@media (max-width: 1024px) {
  html body .elementor .das-partner-block { column-gap: 44px; }
}
@media (max-width: 767px) {
  html body .elementor .das-partner-block { column-gap: 32px; }
}
/* === end DAS 15 Oct FMG-OWNED NAMES SPACING ============================ *//* End custom CSS */