/* HOLVEM R17 building pages: gallery (3x2 for six tiles, play control top right, tappable tiles), the lightbox, and the "Why spray foam" block (D2, "Paper, one fold").
   Generalised from the approved pilot on /buildings/industrial-units-factories. Scoped to .r14-gal galleries, .r17-lb and .r17d2-why only. */

/* ============================================================ six-tile galleries: two rows of three on desktop, two columns beneath */
.r14-gal .r14-gal-grid.r14-gal-6{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
@media (min-width:640px){ .r14-gal .r14-gal-grid.r14-gal-6{ gap:16px; margin-top:28px; } }
@media (min-width:980px){ .r14-gal .r14-gal-grid.r14-gal-6{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
.r14-gal .r14-gal-grid.r14-gal-6 .r14-tile .rec-cap{ font-size:14.5px; padding:12px 16px 14px; }
@media (max-width:639px){ .r14-gal .r14-gal-grid.r14-gal-6 .r14-tile .rec-cap{ font-size:13.5px; padding:10px 12px 12px; } }
@media (min-width:640px){ .r14-gal .r14-gal-grid.r14-gal-6 .r14-tile .rec-media .fig-name{ display:flex; } }
/* galleries already in one row of three or four keep the template's row (2 columns beneath 860px, no sideways scroll) */

/* ============================================================ every gallery tile: tappable, with a quiet zoom on hover */
.r14-gal .r14-gal-grid .r14-tile{ cursor:pointer; }
.r14-gal .r14-gal-grid .r14-tile .rec-media img{ transition:transform .5s var(--ease); }
@media (hover:hover){ .r14-gal .r14-gal-grid .r14-tile:hover .rec-media img, .r14-gal .r14-gal-grid .r14-tile:focus-within .rec-media img{ transform:scale(1.03); } }
/* the play control: a small paper disc in the top right corner, clear of the picture */
.r14-gal .r14-gal-grid .r14-tile .rec-play{ left:auto; top:10px; right:10px; width:44px; height:44px; margin:0; box-sizing:border-box; border-radius:50%; border-width:1px; box-shadow:0 1px 6px rgba(20,24,27,.22); }
.r14-gal .r14-gal-grid .r14-tile .rec-play svg{ width:14px; height:14px; }
.r14-gal .r14-gal-grid .r14-tile.is-playing .rec-play{ width:44px; height:44px; top:10px; right:10px; }
@media (max-width:639px){ .r14-gal .r14-gal-grid .r14-tile .rec-play, .r14-gal .r14-gal-grid .r14-tile.is-playing .rec-play{ width:40px; height:40px; top:8px; right:8px; } }
/* the open control (injected by hv-r17-bld.js): covers the picture, below the play control; a quiet expand glyph on hover */
.r14-gal .r17-open{ all:unset; position:absolute; inset:0; z-index:1; cursor:pointer; display:block; }
.r14-gal .r17-open:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-3px; border-radius:var(--r); }
.r14-gal .r17-x{ position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(251,250,248,.92); color:var(--heading); opacity:0; transition:opacity var(--dur); }
.r14-gal .r17-x svg{ width:14px; height:14px; }
@media (hover:hover){ .r14-gal .r14-tile:hover .r17-x, .r14-gal .r17-open:focus-visible .r17-x{ opacity:1; } }
.r14-gal .r14-tile.is-playing .r17-x{ display:none; }

/* ============================================================ the lightbox */
html.r17-lock, html.r17-lock body{ overflow:hidden; }
.r17-lb{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column; color:#F4F3EF; background:#0E1113; font-family:var(--font, inherit); -webkit-tap-highlight-color:transparent; overscroll-behavior:contain; }
.r17-lb[hidden]{ display:none; }
.r17-lb button{ all:unset; cursor:pointer; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#F4F3EF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-sizing:border-box; }
.r17-lb button:hover{ background:rgba(255,255,255,.16); }
.r17-lb button:focus-visible{ outline:2px solid #F4F3EF; outline-offset:2px; }
.r17-lb button svg{ width:16px; height:16px; }
.r17-lb-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(10px, env(safe-area-inset-top)) 14px 8px; }
.r17-lb-n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:rgba(244,243,239,.72); }
.r17-lb-main{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 12px; }
.r17-lb-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.r17-lb-stage img, .r17-lb-stage video{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:4px; background:#000; }
.r17-lb-stage video{ width:100%; }
.r17-lb-cap{ margin:0; padding:12px 16px 4px; text-align:center; font-size:14.5px; line-height:1.45; color:rgba(244,243,239,.78); }
.r17-lb-cap b{ display:block; color:#FBFAF8; font-weight:600; margin-bottom:2px; }
.r17-lb-nav{ display:flex; justify-content:center; gap:18px; padding:10px 14px max(14px, env(safe-area-inset-bottom)); }
.r17-lb-nav button{ width:48px; height:48px; }
@media (min-width:760px){
  .r17-lb-main{ padding:0 72px; }
  .r17-lb-nav{ position:absolute; inset:0; padding:0; pointer-events:none; }
  .r17-lb-nav button{ position:absolute; top:50%; margin-top:-24px; pointer-events:auto; }
  .r17-lb .r17-lb-prev{ left:14px; } .r17-lb .r17-lb-next{ right:14px; }
  .r17-lb-cap{ padding:14px 72px 10px; }
}
@media (prefers-reduced-motion: reduce){ .r14-gal .r14-gal-grid .r14-tile .rec-media img, .r14-gal .r17-x{ transition:none; } .r14-gal .r14-gal-grid .r14-tile:hover .rec-media img{ transform:none; } }

/* ============================================================ R17d D2, "Paper, one fold": the "Why spray foam" block on the site's paper, hairlines above and below, dark text, the new ticks, and one thin folded-plane accent in sea-glass, aqua, periwinkle and lilac at the lower right edge. */
.r17d2-why{ position:relative; isolation:isolate; overflow:hidden; padding:64px 0 60px; color:var(--r17d2-body); }
.r17d2-why::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:1; pointer-events:none; background:var(--r17d2-hair-top); }
/* the folded light: HOLVEM's flat colour planes, skewed -59deg like the hero and the closing band; they brighten as the section comes into view */
.r17d2-fold{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.r17d2-fold i{ position:absolute; top:-14%; bottom:-14%; left:var(--x); width:var(--w); background:var(--c); opacity:var(--a); transform:skewX(-59deg); transform-origin:50% 50%; }
.r17d2-js:not(.is-in) .r17d2-fold i{ opacity:calc(var(--a) * .3); }
.r17d2-why.is-in .r17d2-fold i{ transition:opacity 1.9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--k) * 140ms); }
.r17d2-why > .frame{ position:relative; z-index:2; }
.r17d2-why .kicker{ color:var(--r17d2-kicker); }
.r17d2-why .h2{ color:var(--r17d2-head); }
.r17d2-why .lede{ color:var(--r17d2-body); }
.r17d2-ben{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
.r17d2-b{ margin:0; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; align-items:start; padding:14px 0 15px; border-top:1px solid var(--r17d2-hair); }
.r17d2-b:first-child{ border-top:0; padding-top:0; }
/* the tick: an emerald-to-jade disc with a thin luminous inner ring, a sea-glass hairline ring set off by a gap, a top light, a tight halo */
.r17d2-ck{ position:relative; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; margin-top:-2px;
  background:linear-gradient(148deg, #37A77D 0%, #23865F 26%, #1A7354 58%, #12604A 100%);
  box-shadow:inset 0 0 0 1.5px var(--r17d2-ck-inner), inset 0 1px 0 rgba(255,255,255,.18), 0 0 10px 1px var(--r17d2-ck-halo), 0 7px 14px -8px var(--r17d2-ck-drop); }
.r17d2-ck::before{ content:""; position:absolute; inset:1px; border-radius:50%; background:radial-gradient(120% 58% at 50% -8%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%); pointer-events:none; }
.r17d2-ck::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--r17d2-ck-outer); pointer-events:none; }
.r17d2-ck svg{ position:relative; width:20px; height:20px; display:block; }
.r17d2-ck path{ stroke:#FFFFFF; }
.r17d2-bt h3{ margin:0; font-size:16.5px; line-height:1.3; font-weight:600; letter-spacing:-.2px; color:var(--r17d2-head); }
.r17d2-bt p{ margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--r17d2-body); }
/* the action row: the page's orange button, the quiet photographs link, and the page's own reassurance line */
.r17d2-act{ margin:28px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.r17d2-act .btn-action{ display:none; box-shadow:var(--r17d2-btn-ring)!important; }
.r17d2-act .tlink{ font-size:14.5px; color:var(--r17d2-link); }
.r17d2-act .tlink:hover{ color:var(--r17d2-link-hover); }
.r17d2-act .tlink:focus-visible{ outline:2px solid var(--r17d2-head); outline-offset:3px; border-radius:2px; }
.r17d2-note{ margin:0; flex:1 1 100%; font-size:13.5px; line-height:1.45; color:var(--r17d2-note); }
/* reveal: ticks light up and the stroke draws in, item by item, once the section is in view; nothing moves in layout */
.r17d2-ck path{ stroke-dasharray:1; stroke-dashoffset:0; }
.r17d2-js:not(.is-in) .r17d2-ck{ opacity:0; transform:scale(.6); }
.r17d2-js:not(.is-in) .r17d2-ck path{ stroke-dashoffset:1; }
.r17d2-why.is-in .r17d2-ck{ transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * 110ms); }
.r17d2-js:not(.is-in) .r17d2-ck::after{ opacity:0; }
.r17d2-why.is-in .r17d2-ck::after{ transition:opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * 110ms + 320ms); }
.r17d2-why.is-in .r17d2-ck path{ transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * 110ms + 260ms); }
@media (min-width:640px){
  .r17d2-why{ padding:76px 0 72px; }
  .r17d2-ben{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 36px; margin-top:44px; }
  .r17d2-b, .r17d2-b:first-child{ display:block; padding:0 0 0 18px; border-top:0; border-left:1px solid transparent; border-image:var(--r17d2-hair-col) 1; }
  .r17d2-ck{ width:44px; height:44px; margin:0 0 18px; }
  .r17d2-ck svg{ width:24px; height:24px; }
  .r17d2-bt h3{ font-size:17px; }
  .r17d2-bt p{ margin-top:8px; font-size:15px; max-width:34ch; }
  .r17d2-act{ margin-top:40px; }
}
@media (min-width:1000px){
  .r17d2-ben{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 28px; margin-top:50px; }
}
@media (min-width:1110px){
  /* the sticky bar is off above 1110px, so the section carries the page's action here */
  .r17d2-act .btn-action{ display:inline-flex; }
  .r17d2-note{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
  .r17d2-js:not(.is-in) .r17d2-fold i{ opacity:var(--a); }
  .r17d2-why.is-in .r17d2-fold i{ transition:none; }
  .r17d2-js:not(.is-in) .r17d2-ck{ opacity:1; transform:none; }
  .r17d2-js:not(.is-in) .r17d2-ck path{ stroke-dashoffset:0; }
  .r17d2-js:not(.is-in) .r17d2-ck::after{ opacity:1; }
  .r17d2-why.is-in .r17d2-ck, .r17d2-why.is-in .r17d2-ck path, .r17d2-why.is-in .r17d2-ck::after{ transition:none; }
}
.r17d2-why{ --r17d2-head:#14181B; --r17d2-body:#33383E; --r17d2-kicker:#52267E; --r17d2-note:#33383E; --r17d2-link:#4A2473; --r17d2-link-hover:#14181B;
  --r17d2-hair:#DEDBD2; --r17d2-hair-col:linear-gradient(180deg, rgba(106,63,150,.5), rgba(222,219,210,1) 55%, rgba(222,219,210,0));
  --r17d2-hair-top:#DEDBD2;
  --r17d2-ck-inner:rgba(222,246,234,.6); --r17d2-ck-outer:rgba(60,130,105,.6); --r17d2-ck-halo:rgba(31,127,92,.20); --r17d2-ck-drop:rgba(20,24,27,.45);
  --r17d2-btn-ring:0 12px 26px -12px rgba(20,24,27,.5);
  padding:72px 0 68px; background:#FBFAF8; }
.r17d2-why::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1; pointer-events:none; background:#DEDBD2; }
/* air: a little more room above the list and the action row than on the dusk ground */
.r17d2-ben{ margin-top:40px; }
.r17d2-why .lede{ color:#33383E; }
.r17d2-act .tlink:focus-visible{ outline-color:#25528C; }
/* the one fold: four thin planes, sea-glass, aqua, periwinkle, lilac, rising from the bottom edge at -59deg and leaving through the right edge */
.r17d2-fold i{ top:auto; bottom:-2px; height:34%; transform-origin:0 100%; }
.r17d2-fold i:nth-child(1){ --c:#A9C1B6; --a:.6; --x:78%; --w:2%; }
.r17d2-fold i:nth-child(2){ --c:#7CB2B6; --a:.55; --x:80.9%; --w:2%; }
.r17d2-fold i:nth-child(3){ --c:#8D94BC; --a:.5; --x:83.8%; --w:2%; }
.r17d2-fold i:nth-child(4){ --c:#9379AD; --a:.5; --x:86.7%; --w:2%; }
@media (min-width:640px){ .r17d2-why{ padding:88px 0 84px; } .r17d2-ben{ margin-top:52px; } }
@media (min-width:1000px){ .r17d2-ben{ margin-top:58px; } }
@media (max-width:639px){
  .r17d2-fold i{ height:26%; }
  .r17d2-fold i:nth-child(1){ --x:70%; --w:4.5%; } .r17d2-fold i:nth-child(2){ --x:76.5%; --w:4.5%; }
  .r17d2-fold i:nth-child(3){ --x:83%; --w:4.5%; } .r17d2-fold i:nth-child(4){ --x:89.5%; --w:4.5%; } }