/* daylight.css - Euro Decor, Eli 21 Oct: after the projects (untouched) the page walks out into daylight and follows the day:
   Systems in the afternoon's pale blue, the Factory a step deeper, the team deeper still, then back to the window and the evening.
   Systems = a facade: every product is an opening in a light aluminium wall, in its own aluminium frame (black where the product is).
   Factory = the five steps the camera visits, on one profile bar wrapped in the Euro Decor tape. Real photos and videos only.
   The top bar and the logo turn navy over the light parts (daylight.js). */
#dl-walkout{position:relative;z-index:6;height:62vh;min-height:320px;
  background:linear-gradient(to bottom,#05070D 0%,rgba(5,7,13,0) 30%,rgba(238,242,247,0) 52%,#EEF2F7 100%),url(media/drone_f0.jpg) center 70%/cover}
.sec.dl{color:#15181D}
.sec.dl h2{color:#15181D}
.sec.dl .eye{color:#092E7F}
.sec.dl .lead{color:#4B5361}
.sec.dl figure{aspect-ratio:auto;margin:0}
#systems.dl{background:#EEF2F7;padding-top:clamp(96px,13vh,140px)}   /* the menu lands on the section's top: the label clears the top bar */
#factory.dl{background:linear-gradient(to bottom,#E9EEF4 0,#DEE5EE 55%,#D3DBE8 calc(100% - 34vh),rgba(211,219,232,0) 100%);padding-bottom:calc(clamp(80px,12vh,140px) + 34vh)}
.dl h3{font-family:var(--wide);font-stretch:110%;font-weight:700;font-size:17px;line-height:1.15;margin:14px 0 4px;color:#15181D}
.dl figcaption p,.dl-step p{margin:0;color:#4B5361;font-size:13.5px;line-height:1.45}
.dl-frame{position:relative;aspect-ratio:var(--ar,.75);padding:9px;background:linear-gradient(150deg,#E6EAEF,#A2AAB5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.12),0 14px 26px -10px rgba(25,38,60,.42)}
.dl-frame.black{background:linear-gradient(150deg,#41464f,#1b1e23)}
.dl-frame>img,.dl-frame>video{display:block;width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.dl-frame::after{content:'';position:absolute;inset:9px;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.17) 44%,rgba(255,255,255,0) 56%)}
/* systems: the facade */
.dl-facade{margin-top:clamp(28px,4vw,56px);padding:clamp(22px,3.4vw,56px) clamp(16px,3vw,52px) clamp(18px,2.4vw,36px);
  background:linear-gradient(to bottom,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),
             repeating-linear-gradient(to bottom,transparent 0 118px,rgba(60,80,110,.10) 118px 119px,rgba(255,255,255,.8) 119px 120px),
             repeating-linear-gradient(to right,transparent 0 238px,rgba(60,80,110,.10) 238px 239px,rgba(255,255,255,.8) 239px 240px),#DCE3EA;
  box-shadow:0 30px 60px -30px rgba(30,45,70,.35)}
.dl-floor{--h:clamp(220px,23vw,340px);display:flex;gap:clamp(14px,2.6vw,44px);align-items:flex-start}
.dl-floor.g{--h:clamp(250px,28vw,420px)}
.dl-floor .dl-frame{aspect-ratio:auto;height:var(--h)}
.dl-op{flex:var(--w,1) 1 0;min-width:0}
.dl-sill{height:7px;margin:0 -7px;background:linear-gradient(#f8fafc,#bcc4ce);box-shadow:0 5px 9px -3px rgba(30,45,70,.35)}
.dl-slab{height:16px;margin:clamp(22px,2.4vw,34px) calc(-1 * clamp(16px,3vw,52px)) clamp(26px,3vw,44px);background:linear-gradient(#f7f9fb,#b6bfca);box-shadow:0 8px 16px -6px rgba(30,45,70,.35)}
.dl-slab.ground{margin-bottom:0;height:22px}
/* factory: the road on one profile bar */
.dl-road{--g:clamp(12px,2vw,30px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:clamp(28px,4vw,56px)}
.dl-step .dl-frame{--ar:.72}
.dl-bar{height:14px;margin:16px calc(var(--g) / -2) 0;background:linear-gradient(90deg,transparent 36%,#092E7F 36% 64%,transparent 64%),linear-gradient(#f1f3f6,#98a1ad);box-shadow:0 6px 10px -4px rgba(0,0,0,.28)}
.dl-step:first-child .dl-bar{margin-left:calc(-1 * clamp(16px,5vw,80px))}.dl-step:last-child .dl-bar{margin-right:calc(-1 * clamp(16px,5vw,80px))}
.dl-step b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#092E7F;margin-top:14px}
.dl-step h3{margin-top:4px}
.dl-hall{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(56px,7vw,100px)}
.dl-hall .dl-frame{--ar:1.55;padding:7px}
.dl-cap{display:flex;justify-content:space-between;gap:20px;margin-top:12px;color:#4B5361;font-size:13.5px}
.dl-togo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2.4vw,40px);align-items:end;margin-top:clamp(56px,7vw,100px)}
.dl-togo .a .dl-frame{--ar:.78}.dl-togo .b .dl-frame{--ar:.6}
.dl-duo{display:grid;grid-template-columns:1fr .78fr;gap:clamp(10px,1.4vw,20px);align-items:end}
.sec.dl .dl-togo h2,.sec.dl .dl-team h2{font-size:clamp(26px,2.8vw,44px)}
.dl-team{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,3vw,52px);align-items:center;margin-top:clamp(56px,7vw,100px)}
.dl-team .dl-frame{--ar:1.12;padding:7px}
.dl-team .small{margin-top:22px;max-width:360px}.dl-team .small .dl-frame{--ar:1.5;padding:6px}
/* the floor gauge belongs to the building: it steps out over the light parts (Eli 21 Oct) */
#gauge{transition:opacity .3s ease}
body.dl-in #gauge{opacity:0!important;pointer-events:none}
/* the top bar over the light parts */
#hd .brand,#hd nav a:not(.btn),#hd .menu-b{transition:color .35s ease,background-color .35s ease,border-color .35s ease}
#hd::before{transition:opacity .35s ease}
#hd.dl-light::before{background:linear-gradient(rgba(238,242,247,.97) 0%,rgba(238,242,247,.92) 62%,rgba(238,242,247,0) 100%)}   /* phone 16:32: text no longer shows under the bar */
#hd.dl-light .brand{color:#0B1B3F}
#hd.dl-light nav a:not(.btn){color:#24314A}
#hd.dl-light nav a:not(.btn):hover{color:#092E7F;background:rgba(9,46,127,.07)}
#hd.dl-light .menu-b{background:rgba(255,255,255,.72);color:#0B1B3F;border-color:rgba(11,27,63,.25)}
@media (max-width:900px){
  .dl-floor{flex-wrap:wrap}.dl-op{flex:1 1 40%}
  .dl-road{grid-template-columns:repeat(2,minmax(0,1fr))}.dl-bar{margin-left:0!important;margin-right:0!important}
  .dl-hall,.dl-togo,.dl-team,.dl-duo{grid-template-columns:1fr}
  .dl-slab{margin-left:calc(-1 * clamp(16px,3vw,52px));margin-right:calc(-1 * clamp(16px,3vw,52px))}
}
@media (max-width:700px){.dl-floor{--h:230px}.dl-floor.g{--h:260px}}

/* r14 (Richard 24 Oct): the profile - the two French systems, made to measure, the colours, and the cut of the profile (two Sidem 2000
   section drawings from Euro Decor's own company profile, cropped and cleaned, never redrawn) */
.dl-prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(20px,3.4vw,64px);align-items:start;margin-top:clamp(56px,7vw,100px)}
.dl-prof-t h3{font-size:clamp(22px,2.3vw,34px);line-height:1.12;margin:6px 0 14px}
.dl-prof-t>p{margin:0 0 14px;color:#4B5361;font-size:15.5px;line-height:1.55;max-width:46ch}
.dl-prof-t b{color:#15181D;font-weight:700}
.dl-prof-t .dl-cols-l{margin:22px 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#092E7F}
.dl-cols{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.dl-cols li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#24314A}
.dl-cols i{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 3px 6px -2px rgba(25,38,60,.45)}
.dl-cuts{display:grid;gap:clamp(18px,2.4vw,34px)}
.dl-cut .dl-frame>img{object-fit:contain;background:#fff}
@media (max-width:900px){.dl-prof{grid-template-columns:1fr}}

/* r14c (24 Oct): the end card on phones holds the new email lines - it may grow up to the top bar (every row and Privacy inside it,
   measured at 393x852, 375x667 and 430x932); on short phones its sentence steps aside */
@media (max-width:700px){#quote{max-height:calc(100vh - 96px);max-height:calc(100svh - 96px)}}
@media (max-width:700px) and (max-height:700px){#quote>p.eye+h2+p{display:none}}
/* r15 (Richard 24 Oct 16:44): his profile drawings in 3D under the cut, and his crew with the bronze frame beside the team's film */
.dl-cuts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.dl-cuts3 .dl-frame{--ar:.9;padding:7px}
.dl-reel{display:grid;gap:clamp(10px,1.4vw,20px)}
.dl-duo.dl-duo2{grid-template-columns:1fr 1fr;align-items:start}
.dl-reel-c{margin:0;color:#4B5361;font-size:13.5px}
@media (max-width:700px){.dl-cuts3{grid-template-columns:1fr}.dl-cuts3 .dl-frame{--ar:1.25}}
/* r15b: the title of 'From the bench to the building' level with the middle of its photos (two rows since r15) */
.dl-togo{align-items:center}