/* ============================================================
 * directories-hub.css — redesigned `/directories` hub (accordion).
 * All selectors prefixed `.dh-` so nothing leaks into shared chrome.
 * Ported from the approved design mock; header/footer come from the
 * global SiteShell so those mock styles are dropped.
 * ============================================================ */

.dh{
  --dh-ink:#171923;
  --dh-gold:#c5a063;
  --dh-gold-soft:#f6efe3;
  --dh-paper:#faf8f4;
  --dh-line:#e9e6df;
  --dh-muted:#5b6472;
  --dh-link:#1a56b0;
  --dh-shadow:0 5px 20px rgba(42,54,77,.06);
  --dh-r-sm:6px;
  --dh-r-md:12px;
  --dh-tr:all ease 400ms;
  color:var(--dh-ink);
  font-size:14px;
}
.dh-wrap{max-width:1340px;margin:0 auto;padding:0 24px;}

/* ── Hero ─────────────────────────────────────────────── */
.dh-hero{background:var(--dh-ink);color:#fff;position:relative;overflow:hidden;}
.dh-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 30%,transparent 100%);}
.dh-hero .dh-wrap{position:relative;padding:80px 24px 80px;}
.dh-crumbs{font-size:12.5px;color:#9aa1ad;margin-bottom:18px;}
.dh-crumbs a{color:#9aa1ad;transition:var(--dh-tr);}
.dh-crumbs a:hover{color:var(--dh-gold);}
.dh-crumbs span{margin:0 7px;color:#565d69;}
.dh-hero h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,36px);letter-spacing:-.5px;margin-bottom:10px;line-height:1.2;}
.dh-hero p{color:#b9bec7;font-size:15px;max-width:660px;line-height:1.6;}
.dh-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.dh-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--dh-r-md);padding:13px 18px;display:flex;align-items:baseline;gap:8px;}
.dh-stat b{font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;color:var(--dh-gold);}
.dh-stat span{font-size:12.5px;color:#b9bec7;}
.dh-stat .dh-star{color:var(--dh-gold);}

/* ── Toolbar ──────────────────────────────────────────── */
/* z-index 9 keeps the sticky toolbar above page content but BELOW the site
   header's stacking context (.gf-hv2-header, z-index:10) so the Discover
   mega-menu (z-index:100 inside that context) opens over it. */
.dh-toolbar{background:var(--dh-paper);border-bottom:1px solid var(--dh-line);position:sticky;top:0;z-index:9;}
.dh-toolbar-inner{display:flex;align-items:center;gap:16px;padding:12px 24px;}
.dh-search{position:relative;flex:0 0 340px;}
.dh-search svg{position:absolute;left:13px;top:12px;width:15px;height:15px;color:var(--dh-muted);}
.dh-search input{width:100%;height:40px;border:1px solid var(--dh-line);border-radius:var(--dh-r-sm);padding:0 14px 0 38px;font-size:13.5px;font-family:'Roboto',sans-serif;background:#fff;transition:var(--dh-tr);}
.dh-search input:focus{outline:none;border-color:var(--dh-gold);box-shadow:0 0 0 3px rgba(197,160,99,.15);}
/* Horizontal chip scroller: no visible scrollbar; a right-edge fade signals
   there's more to scroll. Mask sits on the visible box, so it stays pinned to
   the right edge regardless of scroll position.
   NOTE: overflow-x:auto makes the browser compute overflow-y to auto too, which
   clipped the chips' top/bottom edge on hover/active (gold border + bg). The
   padding-block gives the scroller vertical breathing room so nothing is
   clipped; the matching negative margin-block keeps the toolbar height and
   vertical centering pixel-identical. */
.dh-jump{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-block:4px;margin-block:-4px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);}
.dh-jump::-webkit-scrollbar{display:none;}
.dh-jump-label{font-size:12.5px;color:var(--dh-muted);white-space:nowrap;}
.dh-chip{white-space:nowrap;font-size:12.5px;font-weight:500;padding:7px 14px;border:1px solid var(--dh-line);border-radius:999px;background:#fff;color:var(--dh-ink);transition:var(--dh-tr);}
.dh-chip:hover,.dh-chip.is-active{border-color:var(--dh-gold);background:var(--dh-gold-soft);}
.dh-count{margin-left:auto;font-size:12.5px;color:var(--dh-muted);white-space:nowrap;}

/* ── Directory groups ─────────────────────────────────── */
.dh-main{padding:34px 0 56px;}
.dh-group{margin-bottom:38px;scroll-margin-top:70px;}
.dh-group-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.dh-group-head h2{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.3px;white-space:nowrap;}
.dh-rule{flex:1;height:1px;background:var(--dh-line);}
.dh-gcount{font-size:12.5px;color:var(--dh-muted);white-space:nowrap;}
.dh-group-card{background:#fff;border:1px solid var(--dh-line);border-radius:var(--dh-r-md);box-shadow:var(--dh-shadow);overflow:hidden;}

/* Category rows */
.dh-cat{border-bottom:1px solid var(--dh-line);scroll-margin-top:70px;}
.dh-cat:last-child{border-bottom:none;}
.dh-cat-row{width:100%;display:flex;align-items:center;gap:14px;padding:15px 22px;text-align:left;background:none;border:none;border-left:3px solid transparent;cursor:pointer;transition:var(--dh-tr);font-family:inherit;}
.dh-cat-row:hover{background:var(--dh-paper);}
/* Column-less categories (e.g. RPO, Vibe Coding): plain non-expandable row. */
.dh-cat-row--static{cursor:default;}
.dh-cat-row--static:hover{background:none;}
.dh-cat.is-open .dh-cat-row{border-left-color:var(--dh-gold);background:var(--dh-paper);}
.dh-cat-main{display:flex;flex-direction:column;gap:7px;min-width:0;}
/* Page-level h3 size (category names are <h3>). */
.dh h3{font-size:20px;}
/* margin reset for the flex row; font-size inherited from .dh h3 above. */
.dh-cat-name{margin:0;font-family:'Manrope',sans-serif;font-weight:700;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.dh-badge-trend{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:#b3541e;background:#fdf1e7;border:1px solid #f5ddc7;border-radius:999px;padding:2px 8px;}
.dh-cat-stats{font-size:12px;color:var(--dh-muted);}
.dh-cat-stats b{color:var(--dh-ink);font-weight:600;}
.dh-cat-stats .dh-star{color:var(--dh-gold);}
.dh-allin{margin-left:auto;font-size:13px;font-weight:600;color:var(--dh-link);white-space:nowrap;transition:var(--dh-tr);}
.dh-allin:hover{color:var(--dh-gold);}
.dh-cat-toggle{width:28px;height:28px;border-radius:50%;border:1px solid var(--dh-line);display:grid;place-items:center;flex:0 0 auto;font-size:18px;color:var(--dh-muted);line-height:1;transition:var(--dh-tr);}
.dh-cat.is-open .dh-cat-toggle{background:var(--dh-ink);border-color:var(--dh-ink);color:var(--dh-gold);}

/* Expanded grid */
.dh-cat-body{padding:4px 22px 24px;}
.dh-grid-links{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 28px;}
.dh-col{min-width:0;}
.dh-col h5{font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dh-muted);margin:16px 0 8px;}
.dh-col ul{list-style:none;margin:0;padding:0;}
.dh-col li{padding:4px 0;}
/* Related Categories: a nested category's entry is its deep-link target
   (/directories#<slug>), so clear the sticky toolbar like .dh-cat does. */
.dh-col li[id]{scroll-margin-top:70px;}
/* Crawlable copy of a collapsed card's Related Categories links — never shown.
   Explicit rather than relying on [hidden], so no later display: rule can
   reveal it. */
.dh-related-crawl{display:none;}
.dh-dir{color:var(--dh-link);font-size:14px;transition:var(--dh-tr);}
.dh-dir:hover{color:var(--dh-gold);}
.dh-dir--plain{color:var(--dh-muted);cursor:default;}
.dh-seeall{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--dh-ink);margin-top:8px;transition:var(--dh-tr);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;}
.dh-seeall:hover{color:var(--dh-gold);}
.dh-seeall span{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;}
.dh-empty{padding:48px 0;text-align:center;color:var(--dh-muted);font-size:15px;}

/* Nested (level-2) sub-category expander */
.dh-dir-row{display:flex;align-items:center;gap:6px;}
.dh-sub-toggle{width:16px;height:16px;flex:0 0 auto;border:1px solid var(--dh-line);border-radius:50%;background:#fff;color:var(--dh-muted);font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:var(--dh-tr);}
.dh-sub-toggle:hover,.dh-sub-toggle.is-open{border-color:var(--dh-gold);color:var(--dh-ink);background:var(--dh-gold-soft);}
.dh-sub-note{font-size:12.5px;color:var(--dh-muted);}

/* Sub-category card — full-width breakout below the column grid, reusing the
   same .dh-grid-links / .dh-col / .dh-seeall layout as the parent category. */
.dh-subcard{margin:14px 0 6px;padding:16px 20px 18px;background:var(--dh-paper);border:1px solid var(--dh-line);border-radius:var(--dh-r-sm);}
.dh-subcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--dh-line);}
.dh-subcard-title{font-family:'Manrope',sans-serif;font-size:14px;color:var(--dh-ink);display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;}
.dh-crumb{color:var(--dh-muted);font-weight:600;}
.dh-crumb-sep{color:var(--dh-gold);margin:0 6px;font-weight:600;}
.dh-crumb-cur{color:var(--dh-ink);font-weight:700;}
/* icon-only round close button — shared by the popup + the drawer */
.dh-subcard-close{flex:0 0 auto;background:none;border:1px solid var(--dh-line);border-radius:50%;cursor:pointer;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--dh-muted);transition:var(--dh-tr);}
.dh-subcard-close:hover{border-color:var(--dh-gold);color:var(--dh-gold);}
.dh-subcard-close span{font-size:16px;line-height:1;}

/* Loading skeleton (shimmer) for the sub-category card */
.dh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.dh-skel .dh-skel-h,.dh-skel .dh-skel-line{border-radius:4px;background:linear-gradient(90deg,#ece8e0 25%,#f5f2ec 50%,#ece8e0 75%);background-size:200% 100%;animation:dh-shimmer 1.3s ease-in-out infinite;}
.dh-skel .dh-skel-h{height:9px;width:55%;margin:16px 0 12px;}
.dh-skel .dh-skel-line{height:11px;margin:9px 0;width:85%;}
.dh-skel .dh-skel-line:nth-child(3){width:70%;}
.dh-skel .dh-skel-line:nth-child(4){width:92%;}
.dh-skel .dh-skel-line:nth-child(5){width:64%;}
.dh-skel .dh-skel-line:nth-child(6){width:78%;}
@keyframes dh-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media(prefers-reduced-motion:reduce){.dh-skel .dh-skel-h,.dh-skel .dh-skel-line{animation:none;}}

/* Back to top */
.dh-top{position:fixed;right:26px;bottom:26px;width:42px;height:42px;border-radius:50%;background:var(--dh-ink);color:var(--dh-gold);display:grid;place-items:center;box-shadow:0 6px 18px rgba(23,25,35,.25);opacity:0;pointer-events:none;transition:var(--dh-tr);z-index:60;border:none;cursor:pointer;}
.dh-top.is-show{opacity:1;pointer-events:auto;}
.dh-top svg{width:16px;height:16px;}

@media(max-width:1024px){
  .dh-grid-links{grid-template-columns:repeat(2,1fr);}
  .dh-hero-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
  .dh-search{flex:1;}
  .dh-jump,.dh-count{display:none;}
  .dh-allin{display:none;}
  /* .dh-allin carried the margin-left:auto that right-aligned the row's right
     cluster; it's hidden on mobile, so pin the +/- toggle to the right edge. */
  .dh-cat-toggle{margin-left:auto;}
}
@media(max-width:560px){
  .dh-grid-links{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){.dh-cat-row,.dh-cat-toggle,.dh-top,.dh-dir,.dh-chip{transition:none;}}
.dh-cat-row:focus-visible,.dh-chip:focus-visible,.dh-top:focus-visible{outline:2px solid var(--dh-gold);outline-offset:2px;}

/* ── Focus sub-pages drawer ────────────────────────────────────────────────
   The "+" next to a focus opens its level-3 pages in a RIGHT-SIDE DRAWER that
   slides in from the right edge, full viewport height, on ALL screen sizes.
   Same content design as before (breadcrumb head + the level-3 groups), but the
   groups render as a single-open accordion (Country / State / City …) at every
   width, since the drawer is narrow. Backdrop (.dh-drawer-overlay) pins the
   panel (.dh-drawer) to the right; the panel has a FIXED header over a
   scrollable body. */
.dh-drawer-overlay{
  /* self-contained: the --dh-* vars live on `.dh`, but this overlay is portaled
     to <body> (outside `.dh`), so re-declare them here for the whole subtree. */
  --dh-ink:#171923;--dh-gold:#c5a063;--dh-gold-soft:#f6efe3;--dh-paper:#faf8f4;--dh-line:#e9e6df;--dh-muted:#5b6472;--dh-link:#1a56b0;--dh-shadow:0 5px 20px rgba(42,54,77,.06);--dh-r-sm:6px;--dh-r-md:12px;--dh-tr:all ease 400ms;
  color:var(--dh-ink);font-size:14px;font-family:'Roboto',sans-serif;
  position:fixed;inset:0;z-index:9999;background:rgba(18,20,26,.55);
  display:flex;justify-content:flex-end;animation:dh-fade .15s ease;
}
/* right drawer: pinned to the right edge, full viewport height. flex column so
   a FIXED header (never scrolls) sits over a scrollable body — the breadcrumb +
   close stay put. overflow:hidden clips the scrolling body; slides in from the
   right. Width caps to the viewport, so on phones it fills the screen. */
.dh-drawer{
  width:min(460px,100%);height:100%;max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--dh-paper);border-left:1px solid var(--dh-line);
  box-shadow:-24px 0 64px rgba(10,12,20,.28);animation:dh-slide-in .22s ease;
}
/* clicking a "See all N" inside the drawer widens it for more room (still ≤ vw) */
.dh-drawer.is-expanded{width:min(640px,100%);}
/* fixed header — its own padding, keeps the base border-bottom divider;
   margin:0 so it can't drift while the body scrolls. align-items:flex-start
   pins the close button to the top-right while the breadcrumb wraps. */
.dh-drawer .dh-subcard-head{flex:0 0 auto;margin:0;padding:14px 18px 12px;align-items:flex-start;gap:10px;}
/* breadcrumb takes the remaining width and wraps cleanly (min-width:0 lets it
   shrink inside the flex row); tighter separators for the narrow drawer */
.dh-drawer .dh-subcard-title{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.5;}
.dh-drawer .dh-crumb-sep{margin:0 5px;}
/* close button styling is shared (see base .dh-subcard-close above) */
/* scrollable body — min-height:0 lets the flex child shrink so it scrolls */
.dh-drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 20px 20px;}
.dh-drawer-body .dh-col h5{margin-top:2px;}
/* the narrow drawer stacks the level-3 groups in one column (no 4-up grid) */
.dh-drawer-body .dh-grid-links{grid-template-columns:1fr;gap:0;}
/* Each group is a tap-to-expand accordion row (single-open in JS via mobileCol),
   applied at ALL widths now the container is a narrow drawer: header + toggle
   only; the links + See-all stay hidden until the header is tapped. */
.dh-drawer-body .dh-col{border-bottom:1px solid var(--dh-line);}
.dh-drawer-body .dh-col:last-child{border-bottom:none;}
.dh-drawer-body .dh-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;padding:12px 0;font-family:inherit;text-align:left;cursor:pointer;}
.dh-drawer-body .dh-col-head h5{margin:0;}
/* count pill next to the section name (COUNTRIES 74) — normal case, no tracking */
.dh-drawer-body .dh-col-count{display:inline-block;margin-left:8px;padding:1px 7px;font-size:11px;font-weight:700;letter-spacing:0;color:var(--dh-muted);background:var(--dh-gold-soft);border-radius:10px;vertical-align:middle;}
.dh-drawer-body .dh-col-micon{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--dh-line);border-radius:50%;color:var(--dh-muted);font-size:14px;line-height:1;flex:0 0 auto;}
.dh-drawer-body .dh-col.is-mopen .dh-col-micon{border-color:var(--dh-gold);color:var(--dh-ink);background:var(--dh-gold-soft);}
.dh-drawer-body .dh-col ul,
.dh-drawer-body .dh-col .dh-seeall{display:none;}
.dh-drawer-body .dh-col.is-mopen ul{display:block;padding-bottom:6px;}
.dh-drawer-body .dh-col.is-mopen .dh-seeall{display:inline-flex;margin-bottom:12px;}
/* ── ≥1025px presentation: the centered POPUP ──────────────────────────────
   The component applies these classes (instead of .dh-drawer*) only at
   ≥1025px via the `isWide` switch, so no media query is needed here. Same
   --dh-* redeclare as the drawer overlay (portaled outside `.dh`). The popup
   body keeps the base 4-up .dh-grid-links, so its column headers show plainly
   and every column is visible at once (with an inner "See all N" per column). */
.dh-modal-overlay{
  --dh-ink:#171923;--dh-gold:#c5a063;--dh-gold-soft:#f6efe3;--dh-paper:#faf8f4;--dh-line:#e9e6df;--dh-muted:#5b6472;--dh-link:#1a56b0;--dh-shadow:0 5px 20px rgba(42,54,77,.06);--dh-r-sm:6px;--dh-r-md:12px;--dh-tr:all ease 400ms;
  color:var(--dh-ink);font-size:14px;font-family:'Roboto',sans-serif;
  position:fixed;inset:0;z-index:9999;background:rgba(18,20,26,.55);
  display:flex;padding:24px;overflow-y:auto;animation:dh-fade .15s ease;
}
/* margin:auto centres it on both axes when there's room, and lets it sit at the
   top + scroll (via the overlay) when it's taller than the viewport. */
.dh-modal{margin:auto;width:min(960px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--dh-paper);border:1px solid var(--dh-line);border-radius:var(--dh-r-sm);box-shadow:0 24px 64px rgba(10,12,20,.30);animation:dh-pop .16s ease;}
/* a "See all N" inside the popup widens it for more room */
.dh-modal.is-expanded{width:min(1180px,100%);max-height:94vh;}
.dh-modal .dh-subcard-head{flex:0 0 auto;margin:0;padding:12px 20px 8px;}
.dh-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 20px 16px;}
.dh-modal-body .dh-col h5{margin-top:2px;}
@keyframes dh-fade{from{opacity:0}to{opacity:1}}
@keyframes dh-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes dh-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* On phones the drawer covers 70% of the screen (leaving a peek of the page +
   backdrop behind it) rather than filling it; the See-all expansion nudges it a
   little wider. */
@media(max-width:560px){
  .dh-drawer{width:70%;}
  .dh-drawer.is-expanded{width:85%;}
}
@media(prefers-reduced-motion:reduce){
  .dh-drawer-overlay,.dh-drawer,.dh-modal-overlay,.dh-modal{animation:none}
}


/* =====================================================================
   Deep search results  (2026-09-17, redesigned 2026-09-18)
   Shown in place of the accordion while `/api/directories/search` has a
   result set. Structure follows the reference implementation; colours and
   radii use this file's OWN tokens rather than the reference's palette, so
   the results view matches the rest of the hub.
   ===================================================================== */
.dh .dh-results { display:flex; flex-direction:column; }

.dh .dh-results-head { margin:0 2px 18px; font-size:13.5px; color:var(--dh-muted); }
.dh .dh-results-head b { color:var(--dh-ink); font-weight:700; }

.dh .dh-res-card {
  background:#fff; border:1px solid var(--dh-line);
  border-left:3px solid var(--dh-gold);
  border-radius:var(--dh-r-md); margin-bottom:14px; overflow:hidden;
}
.dh .dh-res-head { padding:16px 20px; background:var(--dh-paper); border-bottom:1px solid var(--dh-line); }
.dh .dh-res-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dh .dh-res-title h3 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.dh .dh-res-title h3 a { color:var(--dh-ink); text-decoration:none; }
.dh .dh-res-title h3 a:hover { color:var(--dh-gold); }
.dh .dh-res-stat { margin-top:4px; font-size:13px; color:var(--dh-muted); }
.dh .dh-res-stat b { color:var(--dh-ink); font-weight:700; }

.dh .dh-res-body { padding:6px 20px 16px; }

/* The service's own page for the matched place — the headline result. */
/* Holds only the link now - the raw URL line the reference showed beneath it
   was dropped (owner, 2026-09-18): it repeated what the link already says and
   added a monospace path to every card. */
.dh .dh-res-base {
  padding:12px 0;
  border-bottom:1px dashed var(--dh-line);
}
/* font-weight:400 — was 700 (owner, 2026-09-22: "make it not bold").
   The `.dh-res-col a` child links were taken from 600 to 400 in the same pass,
   so both levels of result link are now normal weight and the hierarchy is
   carried by SIZE alone (15.5px headline vs 14.5px children) plus the uppercase
   `.dh-res-col-label`. The labels, the card `h3` and the `<b>` count figures
   deliberately keep their weight — they are not result links. */
.dh .dh-res-base a { font-size:15.5px; font-weight:400; color:var(--dh-link); text-decoration:none; }
.dh .dh-res-base a:hover { text-decoration:underline; }

/* One column per section (Platforms / Frameworks / Languages / Solutions). */
.dh .dh-res-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px 28px; padding:16px 0 4px;
}
.dh .dh-res-col-label {
  margin-bottom:11px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dh-muted);
}
.dh .dh-res-col a {
  /* font-weight:400 — was 600 (owner, 2026-09-22), matching `.dh-res-base a`
     in the same pass so no result link is bold. */
  display:block; margin-bottom:10px; font-size:14.5px; font-weight:400;
  color:var(--dh-link); text-decoration:none;
}
.dh .dh-res-col a:hover { text-decoration:underline; color:var(--dh-gold); }

/* Breakpoints from the reference implementation: 4 -> 2 -> 1 column. */
@media (max-width:820px) { .dh .dh-res-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .dh .dh-res-grid { grid-template-columns:1fr; } }

@media (max-width:767px) {
  .dh .dh-res-head { padding:14px 16px; }
  .dh .dh-res-body { padding:6px 16px 14px; }
  .dh .dh-res-title h3 { font-size:17px; }
}