/* =====================================================================
   d400.css  ·  D400 quote wall (the user, 30 Oct; Boss spec)
   Masonry tiles with the full quote. Columns are filled by the build (_build/d400.py), so the wall needs no script;
   assets/js/d400.js folds it to 9 tiles (4 on phones) behind "Show all N" and re-balances the 2 tablet columns.
   Load AFTER d391.css. Undo = remove the <link>, the <script> and the d400.apply line in build.py.
   ===================================================================== */

.d400Wall{
  --d4-gap: 18px;
  display: flex; align-items: stretch; gap: var(--d4-gap);
  margin: 0; padding: 0;
}
.d400Col{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--d4-gap); }

/* tints (d391 palette) */
.d400Tile{ --bg: #fff; --ink: var(--i-lavender, #4e35a6); --edge: rgb(27 35 51 / 7%); display: flex; flex-direction: column; min-width: 0; }
.d400Tile.isMint{ --bg: var(--t-mint, #dcf5e9); --ink: var(--i-mint, #0e6b44); }
.d400Tile.isButter{ --bg: var(--t-butter, #fff3c9); --ink: var(--i-butter, #765600); }
.d400Tile.isLavender{ --bg: var(--t-lavender, #ece7ff); --ink: var(--i-lavender, #4e35a6); }
.d400Tile.isPeach{ --bg: var(--t-peach, #ffe7da); --ink: var(--i-peach, #9a3b0e); }
.d400Tile.isWhite{ --bg: #fff; --ink: var(--m-royal, #1452a4); --edge: var(--m-line, #e3e8f0); }

/* the tiles of a column share the last few pixels, so all bottoms end level */
.d400Col > .d400Tile{ flex-grow: 1; }
.d400Wall.isFolded .d400Tile.isX9{ display: none; }
.d400Wall.isFolded .d400Tile.isXF{ display: none; }   /* D442: guide pages, one row (2 tiles on phones) */

.d400Fig{
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 auto; display: flex; flex-direction: column;
  margin: 0; padding: 24px;
  background: var(--bg); border: 1px solid var(--edge); border-radius: 22px;
  box-shadow: 0 1px 2px rgb(27 35 51 / 5%);
  transition: transform .25s var(--ease-out, ease), box-shadow .25s var(--ease-out, ease);
}
.d400Tile:nth-child(odd) .d400Fig{ border-radius: 22px 22px 22px 6px; }   /* a small quirk: one sharp corner, alternating */
.d400Tile:nth-child(even) .d400Fig{ border-radius: 22px 6px 22px 22px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .d400Fig:hover{ transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 24px rgb(27 35 51 / 10%); }
  .d400Col:nth-child(even) .d400Fig:hover{ transform: translateY(-3px) rotate(.4deg); }
}

/* the big quote mark in the corner (decorative) */
.d400Glyph{ position: absolute; z-index: -1; top: 10px; right: 12px; width: 76px; height: 76px; color: var(--ink); opacity: .13; pointer-events: none; }
.d400Glyph svg{ display: block; width: 100%; height: 100%; fill: currentColor; }

/* logo or monogram badge */
.d400Top{ display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 72px 16px 0; }
.d400Top img{ display: block; width: auto; height: auto; max-width: 132px; max-height: 34px; object-fit: contain;
  background: #fff; border-radius: 10px; padding: 5px 9px; box-sizing: content-box; box-shadow: 0 0 0 1px rgb(27 35 51 / 6%); }
.d400Top .m3QMono{ flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--ink); font: 800 14px/1 var(--m-font, system-ui); letter-spacing: .02em; box-shadow: 0 0 0 1px rgb(27 35 51 / 6%); }
.d400Top .m3QCo{ font: 700 13px/1.3 var(--m-font, system-ui); color: var(--m-ink-2, #46506a); min-width: 0; }

/* the quote, in full */
body.isM3 .d400Text{ margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: 500 16px/1.6 var(--m-font, system-ui) !important; color: var(--m-ink, #1b2333) !important; overflow-wrap: anywhere; quotes: none; }
body.isM3 .d400Tile.isBig .d400Text{ font-size: 19px !important; line-height: 1.5 !important; font-weight: 600 !important; letter-spacing: -.005em; }
.d400Text::before, .d400Text::after{ content: none !important; }
.d400P{ display: block; }
.d400P + .d400P{ margin-top: 9px; }

/* who said it, pinned to the bottom */
body.isM3 .d400Who{ margin: auto 0 0 !important; padding-top: 16px; display: flex !important; align-items: flex-start; gap: 12px;
  border-top: 1px solid rgb(27 35 51 / 9%); }
.d400Who .m3Avatar{ flex: 0 0 48px; width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 3px #fff; }
.d400Who .m3Avatar.isLogo{ object-fit: contain; padding: 4px; box-sizing: border-box; }
.d400Who > span{ display: grid; gap: 2px; min-width: 0; }
.d400Who b{ color: var(--m-ink, #1b2333); font-size: 15px; line-height: 1.3; }
body.isM3 .d400Who small{ display: block !important; font-size: 13.5px !important; line-height: 1.4 !important; color: var(--m-ink-2, #46506a) !important;
  -webkit-line-clamp: unset !important; overflow: visible !important; }
.d400Who .m3SectorChip, .d400Who .m3SpeakerTag{ justify-self: start; margin-top: 4px; background: rgb(255 255 255 / 70%); }

/* one control with JS: "Show all N"; "Read all N testimonials" is the no-JS fallback */
html.d400Js .d400NoJs{ display: none !important; }

/* "Show all N" (shown by d400.js only) */
.d400MoreRow{ display: flex; justify-content: center; margin: 22px 0 0; }
.d400More{ min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 1.5px solid var(--m-ink, #1b2333); background: #fff;
  color: var(--m-ink, #1b2333); font: 700 15px/1.2 var(--m-font, system-ui); cursor: pointer; }
.d400More:hover{ background: var(--m-ink, #1b2333); color: #fff; }
.d400More:focus-visible{ outline: 3px solid var(--m-blue, #0b5fd9); outline-offset: 3px; }
.d400More[hidden]{ display: none !important; }
@media (min-width: 641px){ .d400More.isFew{ display: none; } }

/* tablets: 2 columns, filled by the browser in the build's order */
@media (max-width: 1100px) and (min-width: 641px){
  .d400Wall{ display: block; columns: 2; column-gap: 16px; }
  .d400Col{ display: contents; }
  .d400Tile{ break-inside: avoid; margin-bottom: 16px; }
  .d400Fig{ flex: none; }
}
/* tablets with d400.js: two real columns re-balanced from measured heights (isJs2); level bottoms as on wide screens */
@media (max-width: 1100px) and (min-width: 641px){
  .d400Wall.isJs2{ display: flex; columns: auto; gap: 16px; }
  .d400Wall.isJs2 > .d400Col{ display: none; }   /* emptied by the script while it runs */
  .d400Wall.isJs2 > .d400Col2{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .d400Wall.isJs2 .d400Tile{ margin-bottom: 0; flex-grow: 1; }
  .d400Wall.isJs2 .d400Fig{ flex: 1 1 auto; }
  .d400Wall.isMeasure .d400Tile{ flex-grow: 0 !important; }
}

/* phones: 1 column, in the page's quote order; 4 tiles until "Show all N" */
@media (max-width: 640px){
  .d400Wall{ flex-direction: column; gap: 14px; }
  .d400Col{ display: contents; }
  .d400Tile{ order: var(--r); flex-grow: 0 !important; }
  .d400Wall.isFolded .d400Tile.isX4{ display: none; }
  .d400Wall.isFolded .d400Tile.isXP{ display: none; }   /* D442: guide pages, 2 tiles on phones */
  .d400Fig{ padding: 20px; }
  .d400Top{ margin-right: 60px; }
  .d400Glyph{ width: 60px; height: 60px; }
  .d400More{ width: 100%; }
}

/* ---------- D411: the design lab picks (d411.py) ---------- */
/* P8 count-up */
.d411N{ display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }
body.isM3 .peProofItem b .d411N{ display: inline-block; margin: 0; font: inherit; font-size: inherit !important; color: inherit !important; }

/* P9 calm reading: a bar on top; on a computer the contents stay beside the text */
.d411Bar{ position: fixed; top: 0; left: 0; right: 0; z-index: 10001; height: 3px; background: rgb(11 95 217 / 12%); pointer-events: none; }
.d411Bar span{ display: block; height: 100%; background: var(--m-blue, #0b5fd9); transform: scaleX(var(--rp, 0)); transform-origin: left; }
@media (min-width: 1200px){
    body.isM3 main[data-d411="read"]{ display: grid; grid-template-columns: minmax(24px, 1fr) 236px minmax(0, 840px) minmax(24px, 1fr); column-gap: 36px; }
    body.isM3 main[data-d411="read"] > *{ grid-column: 1 / -1; min-width: 0; }
    body.isM3 main[data-d411="read"] > .m3TocBox{ display: block; grid-column: 2; align-self: start; position: sticky; top: calc(var(--m3-top, 72px) + 20px);
        max-width: none; margin: 32px 0 0; padding: 0; max-height: calc(100vh - var(--m3-top, 72px) - 40px); overflow-y: auto; }
    body.isM3 main[data-d411="read"] > .d411R{ grid-column: 3; }
    body.isM3 main[data-d411="read"] > .d411R > .pgWrap{ max-width: none; padding-left: 0; padding-right: 0; }
    body.isM3 main[data-d411="read"] .m3TocBox ol{ columns: auto; padding: 0; border: 0; border-left: 2px solid var(--m-line); border-radius: 0; background: none; }
    body.isM3 main[data-d411="read"] .m3TocBox li a{ min-height: 0; padding: 7px 0 7px 14px; margin-left: -2px; border-bottom: 0; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; }
    body.isM3 main[data-d411="read"] .m3TocBox li a[aria-current]{ color: var(--m-ink, #1b2333); font-weight: 700; border-left-color: var(--m-blue, #0b5fd9); }
    body.isM3 main[data-d411="read"] .m3TocJump{ display: none; }
}

/* P9: Key takeaways read as a list of ticks */
body.isM3 .peTakeaways .peBox ul:not(#_){ list-style: none; padding-left: 0; }
body.isM3 .peTakeaways .peBox li:not(#_){ position: relative; padding-left: 28px; margin-bottom: 10px; }
body.isM3 .peTakeaways .peBox li:not(#_)::before{ content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; background: none; border: 0; border-left: 2.5px solid var(--i-sky); border-bottom: 2.5px solid var(--i-sky); border-radius: 0; transform: rotate(-45deg); }

/* P6 swipe rows: they scroll with or without the script; the arrows come from it */
body.isM3 .d411Row.d411Row:not(#_){ display: flex !important; flex-wrap: nowrap !important; gap: 16px; overflow-x: auto !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; list-style: none; margin: 0; padding: 4px 4px 14px; scrollbar-width: none; }
.d411Row::-webkit-scrollbar{ display: none; }
body.isM3 .d411Row.d411Row:not(#_) > *{ flex: 0 0 min(84%, 320px) !important; width: min(84%, 320px) !important; max-width: min(84%, 320px) !important; scroll-snap-align: start; }
.d411Row:focus-visible{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }
body.isM3 .m3Events .m3Stack{ grid-template-columns: minmax(0, 1fr); }   /* a grid column would grow to the row's full width */
body.isM3 .m3Events .m3StackG{ min-width: 0; }
.d411Arrows{ display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
.d411Arrows[hidden]{ display: none; }
.d411Arrows button{ width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--m-line); background: #fff; color: var(--m-ink, #1b2333); font-size: 20px; line-height: 1; cursor: pointer; }
.d411Arrows button:disabled{ opacity: .35; cursor: default; }
.d411Arrows button:focus-visible{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }
/* D422: a magazine card: same thumbnail shape, two lines of title, two of text, author and date at the foot */
.d411Card{ position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m-line, #e6e9f0); border-radius: 18px; background: #fff; color: var(--m-ink, #1b2333); }
.d411Thumb{ display: block; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--t-sky); }
.d411Thumb.isArt{ display: grid; place-items: center; color: var(--i-sky); }
.d411Thumb.isArt svg{ width: 52px; height: 52px; fill: currentColor; opacity: .85; }
.d411Thumb.isArt[data-tone="mint"]{ background: var(--t-mint); color: var(--i-mint); }
.d411Thumb.isArt[data-tone="peach"]{ background: var(--t-peach); color: var(--i-peach); }
.d411Thumb.isArt[data-tone="lavender"]{ background: var(--t-lavender); color: var(--i-lavender); }
.d411Thumb.isArt[data-tone="butter"]{ background: var(--t-butter); color: var(--i-butter); }
.d411Thumb.isArt[data-tone="rose"]{ background: var(--t-rose); color: var(--i-rose); }
.d411CardIn{ display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.d411Cat{ font-size: 13px; font-weight: 700; color: #0b5fd9; }
.d411Card h3{ margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.d411Card h3 a{ color: inherit; text-decoration: none; }
.d411Card h3 a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.d411Card h3 a:focus-visible::after{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: -2px; }
.d411Card:hover h3{ text-decoration: underline; text-underline-offset: 3px; }
.d411Card p{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-ink-2, #46506a); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.d411Card footer{ display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; font-size: 13.5px; line-height: 1.35; color: var(--m-ink-3, #5a6377); }
.d411Card footer b{ font-weight: 700; color: var(--m-ink, #1b2333); }

/* P10 ticker: still with no script or with reduced motion (it scrolls by hand then) */
body.isM3 main > section.d411Tk:not(#_){ display: flex; overflow-x: auto; padding: 16px 0 !important; background: var(--t-sky) !important; color: var(--i-sky); scrollbar-width: none; outline: none; }
.d411Tk::-webkit-scrollbar{ display: none; }
.d411Tk:focus-visible{ box-shadow: inset 0 0 0 3px var(--m-blue, #0b5fd9); }
.d411Tk ul{ display: flex; align-items: center; flex: none; min-width: 100%; list-style: none; margin: 0; padding: 0; }
.d411Tk li{ display: inline-flex; align-items: center; white-space: nowrap; font-size: clamp(17px, 2vw, 22px); line-height: 1.3; font-weight: 500; }
.d411Tk li::after{ content: ""; flex: none; width: 7px; height: 7px; margin: 0 clamp(18px, 2.4vw, 30px); border-radius: 50%; background: currentColor; opacity: .45; }
.d411Tk li.isB, .d411Tk li b{ color: var(--m-ink, #1b2333); font-weight: 800; }
.d411Tk li b{ margin-right: .3em; }
body.isM3 main > section.d411Tk.isRun:not(#_){ overflow: hidden; }
.d411Tk.isRun ul{ animation: d411Mq var(--tk, 60s) linear infinite; }
.d411Tk.isRun:hover ul, .d411Tk.isRun:focus ul{ animation-play-state: paused; }
@keyframes d411Mq{ to{ transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .d411Tk.isRun ul{ animation: none; } body.isM3 main > section.d411Tk.isRun:not(#_){ overflow-x: auto; } }

/* D420: the team band: the photo leads, the facts sit beside it as the home tiles */
body.isM3 main > section.d354TeamBand:not(#_){ padding: clamp(24px, 3.5vw, 44px) 0 !important; background: transparent !important; }
body.isM3 .d354TeamIn{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(18px, 2.4vw, 32px); align-items: center; }
body.isM3 .d354TeamPic{ margin: 0; min-width: 0; }
body.isM3 .d354TeamPic img{ display: block; width: 100%; height: auto; aspect-ratio: 960 / 721; object-fit: cover; border-radius: 22px; }
body.isM3 .d354TeamPic figcaption{ margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--m-ink-3, #5a6377); }
body.isM3 .d354TeamFacts.d354TeamFacts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: inherit; font-weight: inherit; }
body.isM3 .d354TeamFacts li.peProofItem{ white-space: normal; min-width: 0; }
body.isM3 .d354TeamFacts .peProofItem b{ font-size: clamp(23px, 2.5vw, 34px) !important; line-height: 1.12; }
body.isM3 .d354TeamLink{ margin: 12px 0 0; font-size: 16px; font-weight: 700; }
body.isM3 .d354TeamLink a{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #0b5fd9; }
@media (max-width: 767px){ body.isM3 .d354TeamIn{ grid-template-columns: minmax(0, 1fr); } }

/* D423: content tabs. Without the script every panel shows, each under its own small heading */
.d423Bar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.d423List{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.d423List::-webkit-scrollbar{ display: none; }
.d423List button{ flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--m-line, #e6e9f0); border-radius: 999px; background: #fff; color: var(--m-ink, #1b2333); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.d423List button[aria-selected="true"]{ background: #0b5fd9; border-color: #0b5fd9; color: #fff; }
.d423List button:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 2px; }
.d423View{ flex: none; font-size: 15px; font-weight: 700; color: #0b5fd9; text-decoration: none; }
.d423View:hover{ text-decoration: underline; }
.d423PanelT{ margin: 24px 0 8px; font-size: 18px; font-weight: 700; }
html.d423On .d423PanelT{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.d423Panel:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 4px; border-radius: 12px; }
.d423All{ margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.d423All a{ color: #0b5fd9; text-decoration: none; }
@media (max-width: 640px){ .d423Bar{ flex-direction: column; align-items: stretch; gap: 8px; } .d423View{ align-self: flex-end; } }

/* Phone menu: an old rule painted each group's last link blue (it was an "all" link once); all links in a group match */
body.isM3 .hxMob details.mnPil li:last-child a:not(#_){ color: var(--m-ink-2) !important; }
/* Phone menu: an old rule painted each group's last link blue (it was an "all" link once); all links in a group match */
body.isM3 .hxMob details.mnPil li:last-child a:not(#_){ color: var(--m-ink-2) !important; }

/* D426 (user, 31 Oct: "the boxes should be symmetrically designed"): challenge cards match in a grid, on tablet and up, with their
   links on one line. Opening "How we work on this" grows only that card: d400.js keeps the closed height in --d426h. On a phone the
   cards are stacked, so each keeps its own height. */
@media (min-width: 768px){
  body.isM3 .d354ChGrid{ align-items: stretch; grid-auto-rows: 1fr; }
  body.isM3 .d354Ch{ display: flex; flex-direction: column; }
  body.isM3 .d354Ch > p + .d354How, body.isM3 .d354Ch > p + a.m3Worry.d354WorryLink:not(#_){ margin-top: auto !important; }
  body.isM3 .d354Ch > a.m3Worry{ align-self: flex-start; }
  body.isM3 .d354ChGrid:has(details[open]){ align-items: start; grid-auto-rows: auto; }
  body.isM3 .d354ChGrid:has(details[open]) > .d354Ch:not(#_){ min-height: var(--d426h, 0) !important; }
  body.isM3 .d354ChGrid > .d354Ch:last-child:nth-child(odd){ grid-column: 1 / -1; }   /* D427: any number of cards; an odd last card takes the whole row */
}
/* D426: a tile with its own line: the name is the link and still fills the tile */
body.isM3 .peIndTile .peIndName a{ font: inherit; color: inherit; }
body.isM3 .peIndTile:hover .peIndName a{ color: var(--ci); }

/* D427 "Ask about this": a quiet text link on a tile, above the tile's stretched link; the form sheet centred from tablet up (phones: the bottom sheet as ever) */
.peAsk{ display: none; }
html.peAskOn .peAsk{ position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; margin-top: auto; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1.3 var(--m-font, sans-serif); color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }
html.peAskOn .peAsk:focus-visible{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }
.peSheet.isAsk .peSheetSub b{ font-weight: 700; color: var(--m-ink, #1b2333); }
@media (min-width: 768px){
  .peSheet.isAsk .peSheetPanel{ left: 50%; right: auto; top: 50%; bottom: auto; width: min(480px, calc(100vw - 48px)); height: auto; max-height: min(680px, calc(100vh - 48px)); border-radius: 20px; transform: translate(-50%, -46%); }
  .peSheet.isAsk.isIn .peSheetPanel{ transform: translate(-50%, -50%); }
  .peSheet.isAsk .peSheetGrip{ display: none; }
}
html.peAskOn .peSvcCard .peAsk{ z-index: 4; margin-top: auto; padding-top: 4px; }   /* above the card's stretched link (z-index 3) */
body.isM3.d354 section.d427Hub .peSvcCard.peFold{ display: none !important; }   /* the step 2 card rule would otherwise keep folded cards on show */

/* D423: guides list filters. Hidden without the script: the list and its paged links work alone */
.d423Filter{ display: none; }
html.d423F .d423Filter{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px 16px; margin: 0 0 20px; }
.d423Filter label{ display: grid; gap: 4px; margin: 0; font-size: 14px; font-weight: 600; color: var(--m-ink, #1b2333); }
.d423Filter select{ width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--m-line, #e3e8f0); border-radius: 12px; background: #fff; font: 500 15px/1.3 var(--m-font, sans-serif); color: var(--m-ink, #1b2333); }
.d423Filter select:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 1px; }
.d423Clear{ min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font: 700 15px/1.3 var(--m-font, sans-serif); color: #0b5fd9; }
.d423Count{ grid-column: 1 / -1; margin: 0; font-size: 14.5px; color: var(--m-ink-2, #46506a); }
.d423Count:empty{ display: none; }
.d423Results{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.d423Results[hidden]{ display: none; }
.d423Results > li{ margin: 0; padding: 0; }
.d423Results > li::before{ content: none; }
.d423More{ display: flex; margin: 20px auto 0; }
body.isM3 .d423More[hidden]{ display: none !important; }
.pePosts[hidden], .pePager[hidden]{ display: none !important; }
@media (max-width: 991px){ .d423Results{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ html.d423F .d423Filter{ grid-template-columns: 1fr; } .d423Results{ grid-template-columns: 1fr; } .d423Clear{ justify-self: start; } }

/* D423 (01): the menu hint sits outside the link; the whole row still answers the tap */
body.isM3 .hxGoalList li{ position: relative; padding: 8px 10px; border-radius: 10px; }
body.isM3 .hxGoalList a{ padding: 0; }
body.isM3 .hxGoalList a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.isM3 .hxGoalList small{ display: block; margin-top: 2px; font-size: 13px; color: var(--m-ink-2); line-height: 1.4; }
body.isM3 .hxGoalList li:hover, body.isM3 .hxGoalList li:focus-within{ background: var(--hxT); }
body.isM3 .hxGoalList a:hover, body.isM3 .hxGoalList a:focus-visible{ background: none; }

/* D423: a guide picture can carry words: show it whole, never clip them */
img.d411Thumb{ object-fit: contain; }
body.isM3 .hxMob .mnPil li{ position: relative; }
body.isM3 .hxMob .mnPil li > a::after{ content: ""; position: absolute; inset: 0; }
body.isM3 .hxMob .mnPil li > small{ display: block; margin-top: 2px; font-size: 13px; color: var(--m-ink-2); font-weight: 400; line-height: 1.4; pointer-events: none; }

/* D429: a sample picture in a table's first column; the caption stays with it */
.d429Pic{ margin: 8px 0 0; max-width: 180px; }
.d429Pic img{ display: block; width: 100%; height: auto; border-radius: 10px; }
.d429Pic figcaption{ margin-top: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--m-ink-3, #5b6478); }
@media (max-width: 767px){ .d429Pic{ max-width: 100%; } }
/* D428 "What we cannot fix": under the challenge cards, always open; a quiet panel, items side by side from tablet up */
.d428{ margin-top: 20px; padding: 20px; border: 1px solid var(--m-line); border-radius: 18px; background: #fff; }
body.isM3 h3.d428T{ margin: 0 0 12px !important; font-size: 18px !important; font-weight: 700; line-height: 1.3; color: var(--m-ink); }
.d428List{ display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.d428List > li{ margin: 0; padding: 0; }
.d428List > li::before{ content: none; }
.d428List strong{ display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--m-ink); }
.d428List p{ margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--m-ink-2); }
@media (min-width: 768px){ .d428List{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; } }

/* D435: the guide lists use the D422 card */
.d423Results.pePosts{ list-style: none; padding: 0; }
.d423Results > li.d423Old > .pgCard{ height: 100%; }

/* D384 work files: the work as a plain ticked list */
.d384TickList{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.d384TickList li{ display: flex; gap: 10px; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.45; color: var(--m-ink, #1b2333); }
.d384TickList li::before{ content: none; }
.d384TickList i{ margin-top: 3px; color: var(--m-blue, #0b5fd9); }

/* D437: home: the cities we serve, one small row under the guides */
body.isM3 main > section.d437Cities:not(#_){ padding-top: 28px !important; padding-bottom: 28px !important; }
.d437CitiesT{ margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--m-ink, #1b2333); }
.d437Cities ul{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.d437Cities li{ margin: 0; padding: 0; }
.d437Cities li::before{ content: none; }
.d437Cities a{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--m-line, #e6e9f0);
  border-radius: 999px; background: #fff; color: var(--m-ink, #1b2333); font-size: 15px; font-weight: 600; text-decoration: none; }
.d437Cities a.isAll{ color: #0b5fd9; }
.d437Cities a:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 2px; }

/* D440: /clients/: every client logo, with filters */
.d440Wall{ scroll-margin-top: 96px; }
.d440Label{ margin: 12px 0 0; }
.d440Bar{ margin-top: 16px; }
.d440Top{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d440Sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d440Find{ position: relative; flex: 1 1 190px; max-width: 420px; margin: 0; }
.d440Find input{ width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--m-line, #e6e9f0); border-radius: 12px; background: #fff; color: var(--m-ink, #1b2333); font: inherit; font-size: 16px; }
.d440Sort{ display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--m-ink, #1b2333); }
.d440Sort select{ height: 44px; padding: 0 10px; border: 1px solid var(--m-line, #e6e9f0); border-radius: 12px; background: #fff; color: var(--m-ink, #1b2333); font: inherit; font-size: 16px; font-weight: 500; }
.d440ChipsT{ margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--m-ink, #1b2333); }
.d440Chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.d440Chip{ display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--m-line, #e6e9f0); border-radius: 999px;
  background: #fff; color: var(--m-ink, #1b2333); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.d440Chip small{ font-size: 13px; font-weight: 500; opacity: .7; }
.d440Chip[aria-pressed="true"]{ border-color: #0b5fd9; background: #0b5fd9; color: #fff; }
.d440Count{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; margin: 8px 0 0; font-size: 15px; color: var(--m-ink, #1b2333); }
.d440Clear{ min-height: 44px; padding: 0; border: 0; background: none; color: #0b5fd9; font: inherit; font-weight: 700; cursor: pointer; }
.d440Clear[hidden]{ display: none; }
.d440Find input:focus-visible, .d440Sort select:focus-visible, .d440Chip:focus-visible, .d440Clear:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 2px; }
.d440List{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.d440List li{ display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 104px; margin: 0; padding: 10px; border: 1px solid var(--m-line, #e6e9f0); border-radius: 12px; background: #fff; }
.d440List li span{ color: var(--m-ink, #1b2333); font-size: 13px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.d440List li::before{ content: none; }
.d440List li[hidden]{ display: none; }
.d440List li.isName{ justify-content: center; }
.d440List li.isName span{ font-size: 15px; font-weight: 700; }
.d440List img{ display: block; width: 100%; height: 56px; object-fit: contain; }
.d440None{ margin: 16px 0 0; font-size: 16px; color: var(--m-ink, #1b2333); }
.d440Open{ margin-top: 28px; }
.d440Links{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.d440Links li{ margin: 0; padding: 0; }
.d440Links li::before{ content: none; }
.d440Links a{ display: flex; align-items: center; min-height: 44px; color: #0b5fd9; font-size: 16px; font-weight: 600; }
.d440Links a:focus-visible{ outline: 2px solid #0b5fd9; outline-offset: 2px; }
@media (max-width: 767px){
  .d440Chips{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .d440Chips::-webkit-scrollbar{ display: none; }
  .d440List{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .d440List li{ min-height: 84px; padding: 8px 6px; border-radius: 10px; }
  .d440List img{ height: 44px; }
  .d440List li span{ font-size: 12px; }
  .d440List li.isName span{ font-size: 13px; }
}
.d440Links a:not([href]){ color: var(--m-ink, #1b2333); font-weight: 500; }