/* Ready listing layout — Property Finder structure, Dandelion styling.
   Loaded by propertydetail.html and, through it, by every page scripts/portal-prerender.mjs
   generates (/property/, /project/, /community/, /developer/, /agent/). */

/* The main site's typography (audit #8: the detail pages were "a different website" in
   Inter/Arial). These are the faces zs-customfonts.css declares for the theme; Persian and
   Arabic pages keep the site's RTL face through the rules keyed on html[dir="rtl"]. */
:root{
  --dn-font-body:"Open Sans 400","Open Sans",Arial,Helvetica,sans-serif;
  --dn-font-strong:"Open Sans 700","Open Sans",Arial,Helvetica,sans-serif;
  --dn-ivory:#fffaf1;
  --dn-ivory-line:#eadfc8;
  --dn-gold-ink:#75591f;
}
html[dir="rtl"]{--dn-font-body:inherit;--dn-font-strong:inherit}
.dn-ready-plp,.dn-hub-page{font-family:var(--dn-font-body)}
.dn-ready-title,.dn-ready-price,.dn-ready-block h2,.dn-hub-section h2,.dn-hub-price,.dn-seo-links h2{font-family:var(--dn-font-strong)}

.dn-ready-plp{display:block}
.dn-ready-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;color:#8a9099;font-size:12px;font-weight:650}
.dn-ready-crumbs a{color:#6b7280;text-decoration:none}
.dn-ready-crumbs a:hover{color:#75591f}
.dn-ready-crumbs span[aria-hidden="true"]{color:#c5c9d0}
.dn-ready-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px}
.dn-ready-toolbar button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;color:#2d3139;font:750 13px/1 var(--dn-font-body);cursor:pointer}
.dn-ready-toolbar button:hover,.dn-ready-toolbar button[aria-pressed="true"]{border-color:#ddcfb2;background:#fffaf1;color:#75591f}

/* ── Photo mosaic (audit #1) ────────────────────────────────────────────────
   The box has a FIXED height and clips its overflow, and only the first three photos are ever
   laid out (one on a phone). The bug it replaces: the project template emitted figure.dn-shot
   while these rules only knew .dn-ready-shot, so 8 photos stacked into ~1,177px of grid rows
   under a bare max-height:440px (desktop) or a 250px block (phones) and painted over "Property
   details". .dn-shot stays listed so a page built by the old generator degrades gracefully
   until it is rebuilt. Every photo still opens in the lightbox via "Show all photos". */
.dn-ready-gallery{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(140px,.9fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;height:clamp(336px,44vh,440px);margin:0 0 22px;overflow:hidden;border-radius:14px}
.dn-ready-gallery>.dn-ready-shot,.dn-ready-gallery>.dn-shot{position:relative;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:14px;overflow:hidden;background:#ece7dc;cursor:pointer}
.dn-ready-gallery>:is(.dn-ready-shot,.dn-shot):first-child{grid-row:1 / span 2}
.dn-ready-gallery>:is(.dn-ready-shot,.dn-shot):nth-child(n+4){display:none}
.dn-ready-gallery img{display:block;width:100%;height:100%;aspect-ratio:4 / 3;object-fit:cover}
.dn-ready-gallery>:is(.dn-ready-shot,.dn-shot):hover img{transform:scale(1.02);transition:transform .25s ease}
/* one photo fills the box; two share it side by side */
.dn-ready-gallery[data-count="1"],.dn-ready-gallery:has(>:is(.dn-ready-shot,.dn-shot):only-of-type){grid-template-columns:1fr}
.dn-ready-gallery[data-count="2"]>:is(.dn-ready-shot,.dn-shot):nth-child(2){grid-row:1 / span 2}
.dn-ready-gallery.is-empty{display:block;height:auto}
.dn-ready-all{position:absolute;inset-inline-end:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid rgba(201,162,77,.65);border-radius:999px;background:rgba(17,24,39,.84);color:#fff;font:700 14px/1 var(--dn-font-body);text-decoration:none;box-shadow:0 10px 24px -12px rgba(17,24,39,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dn-ready-all:hover,.dn-ready-all:focus-visible{border-color:#c9a24d;background:#111827;color:#ecd79c}
.dn-ready-all:focus-visible{outline:3px solid #c9a24d;outline-offset:2px}
/* No JavaScript: "Show all photos" is a link to #photos, and the grid opens up to every photo. */
.dn-ready-gallery:target{height:auto;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-template-rows:none;grid-auto-rows:220px;overflow:visible}
.dn-ready-gallery:target>:is(.dn-ready-shot,.dn-shot){display:block;grid-row:auto}
.dn-ready-gallery:target .dn-ready-all{display:none}
.dn-ready-count{position:absolute;inset-inline-end:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:rgba(17,24,39,.78);color:#fff;font-size:12px;font-weight:800}

.dn-ready-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.dn-ready-price{margin:0 0 8px;color:#111827;font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
/* The site-wide Persian/Arabic rule sets every <p> to 16.5px/400 !important; the price is a <p>
   and shrank to body text on /fa/ and /ar/ pages. */
html[lang] p.dn-ready-price{font-size:36px!important;font-weight:800!important;line-height:1.2!important}
/* chips carry the amenities on the client-rendered page too (the old two-column bullet grid
   scattered left and right on RTL pages) */
ul.dn-chips.dn-ready-amen{display:flex;grid-template-columns:none}
ul.dn-chips.dn-ready-amen li::before{content:none}
.dn-ready-own{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 22px;color:#4b5563;font-size:14px}
.dn-ready-own a,.dn-ready-own button.link{display:inline-flex;align-items:center;min-height:44px;color:#75591f;font-weight:700;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.dn-ready-own small{display:block;width:100%;color:#8a9099;font-size:12px}
.dn-ready-block{margin:0 0 28px;padding:0 0 8px;border-bottom:1px solid #eef0f3}
.dn-ready-block h2{margin:0 0 14px;font-size:22px;font-weight:700;color:#151821}
.dn-ready-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.dn-ready-fact{display:flex;align-items:flex-start;gap:12px;min-height:64px;padding:12px 8px;border-bottom:1px solid #f1f3f6}
.dn-ready-fact .dn-ico{flex:0 0 22px;width:22px;height:22px;margin-top:2px;color:#9b7a37}
.dn-ready-fact span{display:block;color:#737a84;font-size:12px;font-weight:700;letter-spacing:.02em}
.dn-ready-fact strong{display:block;margin-top:3px;color:#1f2430;font-size:15px;font-weight:700}
/* The generated pages write their facts as a real <dl> (dt/dd). */
dl.dn-ready-facts{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
dl.dn-ready-facts .dn-fact{min-width:0;padding:14px 10px;border-bottom:1px solid #f1f3f6}
dl.dn-ready-facts dt{margin:0 0 5px;color:#737a84;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none}
dl.dn-ready-facts dd{margin:0;color:#1f2430;font-size:15px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
.dn-map-inline{display:inline-flex;align-items:center;min-height:32px;margin-inline-start:6px;color:#75591f;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.dn-status-badge{display:inline-flex;align-items:center;vertical-align:middle;margin-inline-start:10px;padding:4px 12px;border:1px solid #cfe7d8;border-radius:999px;background:#eef8f2;color:#087a43;font:700 13px/1.4 var(--dn-font-body);letter-spacing:.02em}
.dn-status-badge.is-sold{border-color:#f0cccc;background:#fcf0f0;color:#9f1c1c}
.dn-ready-kicker{margin:18px 0 6px;color:#667085;font-size:14px}
.dn-ready-title{margin:0 0 14px;font-size:28px;line-height:1.25;font-weight:700;color:#151821}
.dn-ready-desc{color:#4b5563;font-size:15px;line-height:1.75;white-space:pre-line;text-align:start}
.dn-ready-desc.clamp{-webkit-line-clamp:5;line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
/* Prose split into real paragraphs by lib/public-text.mjs (audit #28: one run-on wall of text). */
.dn-ready-prose{max-width:78ch;color:#4b5563;font-size:15px;line-height:1.75;text-align:start}
.dn-ready-prose p{margin:0 0 14px;text-align:start}
.dn-ready-prose h3{margin:22px 0 8px;color:#1f2430;font:700 17px/1.35 var(--dn-font-strong)}
.dn-ready-prose h3:first-child{margin-top:0}
.dn-ready-more{display:inline-flex;align-items:center;min-height:44px;margin:4px 0 0;border:0;background:none;color:#75591f;font:700 14px/1 var(--dn-font-body);cursor:pointer;padding:0}
.dn-ready-amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:0}
.dn-ready-amen li{display:flex;align-items:center;gap:8px;color:#374151;font-size:14px;list-style:none}
.dn-ready-amen li::before{content:"";width:7px;height:7px;border-radius:50%;background:#b9913d;flex:0 0 7px}
/* Amenities, languages and similar short lists as chips (audit #4: "Landscaped Gardens Gymnasium
   Restaurants Shared Pool" printed as one run-on line). */
.dn-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.dn-chips li{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--dn-ivory-line);border-radius:999px;background:var(--dn-ivory);color:#3b3f47;font-size:14px;font-weight:600;line-height:1.3}
.dn-chip-links li{padding:0}
.dn-chip-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;color:#3b3f47;text-decoration:none}
.dn-chip-links a:hover{color:#75591f}
.dn-ready-map{width:100%;height:280px;border:0;border-radius:14px;background:#eef1f4}
.dn-ready-reg{margin:18px 0 0;color:#737a84;font-size:12px}
.dn-ready-agent{position:sticky;top:88px;padding:20px;border:1px solid var(--dn-line,#e6e8ee);border-radius:18px;background:#fff}
.dn-ready-agent-top{display:flex;align-items:center;gap:12px}
.dn-ready-agent-top img,.dn-ready-agent-top .dn-agent-fallback{width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;background:#f2eadc}
.dn-ready-agent-top small{display:block;color:#737a84;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.dn-ready-agent-top strong{display:block;margin-top:4px;font-size:16px}
.dn-ready-agent-top strong a{color:inherit;text-decoration:none}
.dn-ready-agent-top .dn-agent-title,.dn-ready-agent-top .dn-agent-brn{display:block;margin-top:3px;color:#667085;font-size:12px}
.dn-ready-agent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.dn-ready-agent-actions a{min-height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:700}
.dn-ready-agent-actions .dn-call{border:1px solid #d8dee8;color:#173f69;background:#f8fafc}
.dn-ready-agent-actions .dn-whatsapp{border:1px solid #9ed4b3;color:#087a43;background:#effaf3}
.dn-empty-media{min-height:280px;border-radius:14px;display:grid;place-items:center;padding:20px;background:#ece7dc;color:#667085;font-weight:700;text-align:center}

/* Project pages: facts and copy on the left, a sticky contact card on the right. The card is
   first in the HTML, so on a phone it sits directly under the title. */
.dn-project-layout>.dn-project-aside{grid-column:2;grid-row:1;position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid #efe6d3;border-radius:18px;background:linear-gradient(135deg,#fffdf8,#fbf7ee)}
.dn-project-layout>.dn-ready-main{grid-column:1;grid-row:1;min-width:0}
.dn-project-aside .dn-cta-hero-wrap{margin:0}
.dn-project-aside .dn-cta-hero-wrap .dn-cta{width:100%;min-width:0}
.dn-project-aside .dn-hub-stats{grid-template-columns:1fr 1fr;margin:0}
.dn-project-aside .dn-hub-stats dd{font-size:17px}
.dn-project-aside .dn-hub-btn{width:100%}

/* ── Hub pages: community, developer, agent (audit #9) ──────────────────────
   They used to render one viewport high: an H1, one sentence and a bare <ul> of blue links. */
.dn-hub-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin:6px 0 34px;padding:28px;border:1px solid #efe6d3;border-radius:22px;background:linear-gradient(135deg,#fffdf8,#fbf7ee)}
.dn-hub-hero.has-media{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.dn-hub-community .dn-hub-media{order:2}
.dn-hub-agent .dn-hub-hero.has-media{grid-template-columns:200px minmax(0,1fr);align-items:start}
.dn-hub-developer .dn-hub-hero.has-media{grid-template-columns:150px minmax(0,1fr);align-items:start}
.dn-hub-kicker{margin:0 0 6px;color:#8b6725;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
html[dir="rtl"] .dn-hub-kicker{letter-spacing:0;text-transform:none}
.dn-hub-hero .dn-ready-title{margin:0 0 12px;font-size:34px;line-height:1.15}
.dn-hub-lead{margin:0 0 6px;color:#4b5563;font-size:16px;line-height:1.7;text-align:start}
.dn-hub-media{margin:0;border-radius:18px;overflow:hidden;background:#ece7dc}
.dn-hub-media img{display:block;width:100%;height:100%;max-height:360px;aspect-ratio:4 / 3;object-fit:cover}
.dn-hub-portrait{margin:0;border-radius:18px;overflow:hidden;background:#f2eadc;box-shadow:0 18px 40px -24px rgba(17,24,39,.55)}
.dn-hub-portrait img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:center top}
.dn-hub-logo{display:grid;place-items:center;width:150px;height:150px;margin:0;padding:16px;border:1px solid var(--dn-ivory-line);border-radius:22px;background:#fff}
.dn-hub-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.dn-hub-logo span{color:#76591f;font:800 40px/1 var(--dn-font-strong)}
.dn-hub-tags{margin-top:14px}
.dn-hub-tags p{margin:12px 0 8px;color:#374151;font-size:14px}
.dn-hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:18px 0 4px}
.dn-hub-stats div{padding:12px 14px;border:1px solid var(--dn-ivory-line);border-radius:14px;background:#fff}
.dn-hub-stats dt{margin:0 0 4px;color:#737a84;font-size:12px;font-weight:700}
.dn-hub-stats dd{margin:0;color:#111827;font:800 20px/1.2 var(--dn-font-strong);overflow-wrap:anywhere}
.dn-hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.dn-hub-actions .dn-cta,.dn-hub-actions .dn-enquire-btn{display:inline-flex;width:auto;margin:0;min-height:50px}
.dn-hub-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #d8c7a3;border-radius:12px;background:#fff;color:#6d521d;font:700 14px/1 var(--dn-font-body);text-decoration:none;white-space:nowrap}
.dn-hub-btn:hover{border-color:#b9913d;background:var(--dn-ivory);color:#4f3b12}
.dn-hub-btn.dn-whatsapp{border-color:#9ed4b3;color:#087a43;background:#effaf3}
.dn-hub-btn.dn-call{border-color:#d8dee8;color:#173f69;background:#f8fafc}
.dn-hub-section{margin:0 0 36px}
.dn-hub-section h2{margin:0 0 16px;color:#151821;font-size:24px;font-weight:700}
.dn-hub-more{margin:16px 0 0}
.dn-hub-more a{display:inline-flex;align-items:center;min-height:44px;color:#75591f;font-weight:700;text-decoration:none}
.dn-hub-more a:hover{text-decoration:underline}
/* Cards: picture, price, key facts, title, area (also "Similar listings" on detail pages). */
/* at most four across, so a row of eight cards is two full rows rather than 5 + 3 */
.dn-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(260px,calc((100% - 54px) / 4)),1fr));gap:18px;margin:0;padding:0;list-style:none}
.dn-hub-card{min-width:0}
.dn-hub-card>a{display:flex;flex-direction:column;height:100%;border:1px solid #e9e4d8;border-radius:16px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.dn-hub-card>a:hover{border-color:#d8c7a3;box-shadow:0 16px 34px -22px rgba(17,24,39,.45);transform:translateY(-2px)}
.dn-hub-card>a:focus-visible{outline:3px solid #c9a24d;outline-offset:2px}
.dn-hub-card-media{position:relative;display:block;aspect-ratio:4 / 3;background:#ece7dc}
.dn-hub-card-media img{display:block;width:100%;height:100%;aspect-ratio:4 / 3;object-fit:cover}
.dn-hub-card-empty{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,#f3eee3,#e9eef0);color:#8a8f98;font-size:13px;font-weight:600}
.dn-hub-badge{position:absolute;top:12px;inset-inline-start:12px;padding:5px 11px;border-radius:999px;background:rgba(17,24,39,.82);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.dn-hub-badge.is-sold{background:#9f1c1c}
.dn-hub-card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.dn-hub-price{color:#111827;font-size:19px;font-weight:800;line-height:1.25}
/* two lines, always the same height, so a row of cards lines up */
.dn-hub-title{display:-webkit-box;min-height:2.7em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#1f2430;font-size:15px;font-weight:650;line-height:1.35}
.dn-hub-facts{display:flex;flex-wrap:wrap;gap:4px 12px;color:#4b5563;font-size:13px}
.dn-hub-facts span{white-space:nowrap}
.dn-hub-place{margin-top:auto;padding-top:6px;color:#737a84;font-size:13px}
/* Records beyond the first twelve cards: one compact line each */
.dn-hub-more-list{margin:24px 0 0;border-top:1px solid #eef0f3}
.dn-hub-overflow-title{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;color:#1f2430;font:700 17px/1.35 var(--dn-font-strong);cursor:pointer;list-style:none}
.dn-hub-overflow-title::-webkit-details-marker{display:none}
.dn-hub-overflow-title::after{content:"";width:8px;height:8px;margin-inline-start:4px;border-inline-end:2px solid #b9913d;border-bottom:2px solid #b9913d;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.dn-hub-more-list[open] .dn-hub-overflow-title::after{transform:rotate(-135deg) translateY(-2px)}
.dn-hub-overflow{columns:3 280px;column-gap:28px;margin:0;padding:0;list-style:none}
.dn-hub-overflow li{break-inside:avoid}
/* 44px rows (audit #22). These folded lists are new in this release and were 40px here and 36px
   in .dn-seo-links below - the only targets left under the floor the rest of the release sets.
   A developer hub expands to 63 of them and the /project/ crawl index to 240, dense enough to
   mis-tap. They are inside a collapsed <details>, so the extra height is only paid once opened. */
.dn-hub-overflow a{display:inline-flex;align-items:center;min-height:44px;color:#1f2a44;font-size:14px;text-decoration:none}
.dn-hub-overflow a:hover{color:#75591f;text-decoration:underline}
/* Plain crawl indexes and link lists */
.dn-seo-links{margin:0 0 32px}
.dn-seo-links h2{margin:0 0 12px;color:#151821;font-size:20px;font-weight:700}
.dn-seo-links ul{columns:3 260px;column-gap:28px;margin:0;padding:0;list-style:none}
.dn-seo-links li{break-inside:avoid;margin:0}
.dn-seo-links a{display:inline-flex;align-items:center;min-height:44px;color:#1f2a44;text-decoration:none}   /* same 44px floor; .dn-seo-links a also wins over .dn-hub-overflow a inside a crawl index (same specificity, later rule) */
.dn-seo-links a:hover{color:#75591f;text-decoration:underline}

@media(max-width:980px){
  .dn-ready-layout{grid-template-columns:1fr}
  .dn-project-layout>.dn-project-aside,.dn-project-layout>.dn-ready-main{grid-column:1;grid-row:auto;position:static}
  .dn-project-layout>.dn-project-aside{margin:4px 0 26px}
  /* on a phone the card's three figures would repeat the details list right below it */
  .dn-project-layout>.dn-project-aside .dn-hub-stats{display:none}
  .dn-ready-agent{position:static}
  .dn-ready-gallery{grid-template-columns:minmax(0,1fr) 120px;height:288px}
  .dn-ready-price,html[lang] p.dn-ready-price{font-size:30px!important}
  .dn-ready-title{font-size:24px}
  .dn-hub-hero.has-media,.dn-hub-agent .dn-hub-hero.has-media{grid-template-columns:minmax(0,1fr)}
  .dn-hub-community .dn-hub-media{order:0}
  /* width, not max-width: the site-wide mobile rule forces figure{max-width:100%!important} */
  .dn-hub-agent .dn-hub-portrait{width:min(200px,60%)}
}
@media(max-width:640px){
  .dn-ready-gallery{display:block;height:250px}
  .dn-ready-gallery>:is(.dn-ready-shot,.dn-shot){display:none;width:100%;height:100%;border-radius:14px}
  .dn-ready-gallery>:is(.dn-ready-shot,.dn-shot):first-child{display:block}
  .dn-ready-gallery:target{display:grid;grid-template-columns:1fr;grid-auto-rows:240px}
  .dn-ready-all{inset-inline-end:10px;bottom:10px;padding:0 14px;font-size:13px}
  .dn-ready-facts,.dn-ready-amen{grid-template-columns:1fr}
  dl.dn-ready-facts{grid-template-columns:1fr 1fr}
  dl.dn-ready-facts .dn-fact:has(.dn-map-inline){grid-column:1 / -1}
  .dn-ready-toolbar{justify-content:stretch}
  .dn-ready-toolbar button{flex:1}
  .dn-hub-hero{padding:18px;border-radius:18px}
  .dn-hub-hero .dn-ready-title{font-size:27px}
  .dn-hub-developer .dn-hub-hero.has-media{grid-template-columns:88px minmax(0,1fr)}
  .dn-hub-logo{width:88px;height:88px;padding:10px;border-radius:16px}
  .dn-hub-logo span{font-size:26px}
  .dn-hub-actions>*{flex:1 1 calc(50% - 5px)}
  .dn-hub-actions .dn-cta,.dn-hub-actions .dn-enquire-btn{flex-basis:100%;width:100%}
  .dn-hub-grid{grid-template-columns:1fr;gap:12px}
  /* phones: a card is a row (picture beside the facts), a third of the height of a stacked card */
  .dn-hub-grid:not(.is-rail)>.dn-hub-card>a{flex-direction:row}
  .dn-hub-grid:not(.is-rail) .dn-hub-card-media{flex:0 0 38%;aspect-ratio:auto;min-height:128px}
  .dn-hub-grid:not(.is-rail) .dn-hub-badge{top:8px;inset-inline-start:8px;padding:3px 8px;font-size:11px}
  .dn-hub-grid:not(.is-rail) .dn-hub-card-body{min-width:0;padding:10px 12px;gap:4px}
  .dn-hub-grid:not(.is-rail) .dn-hub-price{font-size:16px}
  .dn-hub-grid:not(.is-rail) .dn-hub-title{font-size:14px}
  /* a secondary row scrolls sideways; the next card peeks in so the row reads as scrollable */
  .dn-hub-grid.is-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .dn-hub-grid.is-rail>.dn-hub-card{scroll-snap-align:start}
  .dn-ready-price,html[lang] p.dn-ready-price{font-size:26px!important}
  .dn-hub-section h2{font-size:21px}
}