/* D'leaps r99 - project detail page
 * 1. Header over the project hero: same clear-glass treatment as magazine
 *    articles. dleaps-project.js paints every header span white, which left
 *    white labels on a white pill.
 * 2. Hero: chips sat inside the white fade at the bottom of the photo.
 * 3. Pinterest-style gallery (markup from the bundle, __dlpgGal in main.*.js,
 *    tools/patch-r99.py): full width, natural photo heights, Save to
 *    Pinterest on every photo, one lead pin. The lightbox in
 *    dleaps-project.js still opens on click (it binds project-gallery-thumb-N).
 * 4. Breathing room before the "Six things" band, which sat flush on the
 *    last card and looked like it was cutting it off.
 */

/* ---- 1. header over the hero ------------------------------------------ */
html.dlg header[data-testid="main-navbar"].dlp-navdark nav[data-dlp-nf]::before{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.18)!important}
html.dlg header[data-testid="main-navbar"].dlp-navdark nav[data-dlp-nf] .dlp-nf-face,
html.dlg header[data-testid="main-navbar"].dlp-navdark nav[data-dlp-nf] .dlp-nf-face *{color:#fff!important}
html.dlg header[data-testid="main-navbar"].dlp-navdark nav a,
html.dlg header[data-testid="main-navbar"].dlp-navdark nav span{text-shadow:0 1px 8px rgba(0,0,0,.35)!important}
html.dlg header[data-testid="main-navbar"].dlp-navdark [data-dlp-nf-row]>div>a.rounded-full{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important;color:#fff!important}
html.dlg header[data-testid="main-navbar"].dlp-navdark [data-testid="navbar-book-consultation-button"]{
  background:var(--dlg-pri,#4DD9E8)!important;border-color:transparent!important;color:#13223A!important;text-shadow:none!important}
html.dlg header[data-testid="main-navbar"].dlp-navdark [data-testid="navbar-book-consultation-button"] *{color:#13223A!important;text-shadow:none!important}

/* ---- 2. hero ----------------------------------------------------------- */
html.dlp-on [data-testid="project-hero"] .dlp-hero::after{
  background:linear-gradient(180deg,rgba(238,242,246,0) calc(100% - 36px),rgba(238,242,246,1))!important}
html.dlp-on [data-testid="project-hero"] .dlp-hero>.absolute.inset-0{
  background:linear-gradient(0deg,rgba(8,14,18,.74) 0,rgba(8,14,18,.38) 32%,rgba(8,14,18,.06) 62%,rgba(8,14,18,0))!important}
html.dlp-on [data-testid="project-hero"] .dlp-hero .container-d{padding-bottom:clamp(48px,6vw,72px)!important}
html.dlp-on [data-testid="project-hero"] .dlp-chips span{background:rgba(8,14,18,.34)!important;border-color:rgba(255,255,255,.38)!important}

/* ---- 4. spacing -------------------------------------------------------- */
html.dlp-on main>[data-testid="project-hero"]+.container-d{padding-bottom:clamp(64px,8vw,112px)}

/* ---- 3. Pinterest gallery --------------------------------------------- */
.dlpg{--g-ink:#13223A;--g-ink2:#4a5568;--g-tq:#4DD9E8;--g-tqd:#0d8797;--g-mg:#E8407F;margin-top:clamp(56px,7vw,96px)}
.dlpg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(20px,2.6vw,32px)}
.dlpg-k{margin:0 0 8px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-tqd)}
.dlpg-h{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(28px,1.4rem + 1.6vw,42px)!important;line-height:1.1;color:var(--g-ink);-webkit-text-stroke:.3px var(--g-ink)}
.dlpg-c{margin:0;max-width:380px;font-size:14px;line-height:1.6;color:var(--g-ink2)}

.dlpg-grid{columns:2;column-gap:12px}
@media (min-width:760px){.dlpg-grid{columns:3;column-gap:16px}}
@media (min-width:1180px){.dlpg-grid{columns:4}}

.dlpg-pin{position:relative;display:block;margin:0 0 12px;break-inside:avoid;-webkit-column-break-inside:avoid;
  border-radius:18px;overflow:hidden;background:#e3ebee;isolation:isolate;
  box-shadow:0 1px 2px rgba(19,34,58,.06),0 18px 36px -26px rgba(13,135,151,.55)}
@media (min-width:760px){.dlpg-pin{margin-bottom:16px;border-radius:20px}}
/* Pinterest rhythm: the studio shoots most rooms at 3:4, so every photo would
   be the same height. Cycle eight crops so the columns stagger. */
.dlpg-pin img{aspect-ratio:3/4;object-fit:cover;object-position:50% 45%}
.dlpg-grid>:nth-child(8n+2) img{aspect-ratio:1/1}
.dlpg-grid>:nth-child(8n+3) img{aspect-ratio:2/3}
.dlpg-grid>:nth-child(8n+4) img{aspect-ratio:4/5}
.dlpg-grid>:nth-child(8n+5) img{aspect-ratio:1/1}
.dlpg-grid>:nth-child(8n+7) img{aspect-ratio:4/5}
.dlpg-grid>:nth-child(8n) img{aspect-ratio:3/5}
.dlpg-pin img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.dlpg-pin:hover img{transform:scale(1.04)}
.dlpg-pin:focus-visible{outline:3px solid var(--g-tq);outline-offset:3px}
.dlpg-shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,rgba(8,14,18,.42),rgba(8,14,18,0) 32%,rgba(8,14,18,0) 70%,rgba(8,14,18,.45))}
.dlpg-pin .dlpg-save{position:absolute!important;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:999px;background:var(--g-mg);color:#fff!important;font-size:13px;font-weight:700;line-height:1;text-decoration:none;
  box-shadow:0 8px 18px -8px rgba(232,64,127,.8);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s,background .2s}
.dlpg-pin .dlpg-save:hover{background:#d22d6c}
.dlpg-pin .dlpg-save:focus-visible{opacity:1;transform:none;outline:3px solid #fff;outline-offset:2px}
.dlpg-n{position:absolute;left:14px;bottom:12px;z-index:1;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.dlpg-pin:hover .dlpg-shade,.dlpg-pin:focus-within .dlpg-shade,
.dlpg-pin:hover .dlpg-n,.dlpg-pin:focus-within .dlpg-n{opacity:1}
.dlpg-pin:hover .dlpg-save,.dlpg-pin:focus-within .dlpg-save{opacity:1;transform:none}
/* touch screens have no hover: keep a small Save visible */
@media (hover:none){
  .dlpg-pin .dlpg-save{opacity:1;transform:none;padding:7px 10px;font-size:12px;top:8px;right:8px}
  .dlpg-shade{opacity:.7;background:linear-gradient(180deg,rgba(8,14,18,.32),rgba(8,14,18,0) 26%)}
}

/* the lead pin */
.dlpg-lead{padding:26px 22px 24px;text-decoration:none;color:var(--g-ink);
  background:radial-gradient(120% 90% at 100% 0%,rgba(232,64,127,.22),rgba(232,64,127,0) 55%),linear-gradient(160deg,#bff3f8,#4DD9E8);
  display:flex;flex-direction:column;gap:10px}
.dlpg-lead-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#0b5f6b}
.dlpg-lead-h{font-family:"Poiret One",Lato,sans-serif;font-size:clamp(24px,2vw,28px);line-height:1.15;-webkit-text-stroke:.35px var(--g-ink)}
.dlpg-lead-p{font-size:13.5px;line-height:1.55;color:#24384a}
.dlpg-lead-b{align-self:flex-start;margin-top:6px;padding:11px 18px;border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--g-ink);
  box-shadow:inset 2px 2px 1px rgba(255,255,255,.6),0 10px 20px -12px rgba(13,135,151,.9);transition:transform .3s}
.dlpg-lead:hover .dlpg-lead-b{transform:translateY(-2px)}

/* entrance: photos rise in one after another as the section paints */
@media (prefers-reduced-motion:no-preference){
  .dlpg-pin{animation:dlpg-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--i,0),12) * 55ms)}
  @keyframes dlpg-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.dlpg-pin img,.dlpg-save,.dlpg-shade{transition:none}.dlpg-pin:hover img{transform:none}}

/* ---- 5. facts box at 320px -------------------------------------------- */
/* grid items default to min-width:auto, so the two-column facts grid could
   not shrink below its content and pushed the page 13px wide on small phones */
[data-testid="project-facts"] .grid>*{min-width:0}
[data-testid="project-facts"] .grid>* *{overflow-wrap:anywhere}
@media (max-width:359px){[data-testid="project-facts"] .grid{column-gap:12px!important}}