/* Huis van Lys — revision 12: approved soft recessed paper aperture.
   IMPORTANT: this is NOT a picture frame and NOT a window.
   One continuous white/off-white paper plane sits above the photograph.
   The image is visible through a clean aperture with only a very fine inner edge cue.
   No grey fill, no stepped layers, no outer border, no image filter. */
:root{
  --hvl-page:#ffffff;
  --hvl-paper:#fdfdfc;
  --hvl-cut-shadow:rgba(42,50,56,.18);
  --hvl-cut-highlight:rgba(255,255,255,.98);
}

/* Never tint or grey the photography. */
.home-page .hero-slide img,
.inner-page .page-hero > picture img{
  filter:none!important;
  -webkit-filter:none!important;
}
.home-page .hero-shade{display:none!important}

/* =========================================================
   MAIN TOP IMAGE — HOMEPAGE / LANDING SLIDER
   One paper aperture only.
   ========================================================= */
.home-page .hero-wrap{
  --hvl-aperture:clamp(20px,1.8vw,30px);
  background:var(--hvl-page)!important;
  padding:clamp(32px,3.3vw,50px) clamp(42px,5.2vw,86px) 0!important;
  overflow:visible!important;
}
.home-page .hero{
  --hvl-media-height:clamp(540px,73svh,750px);
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:calc(var(--hvl-media-height) + (2 * var(--hvl-aperture)))!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:var(--hvl-aperture)!important;
  border:0!important;
  outline:0!important;
  background:var(--hvl-paper)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.home-page .hero::before{content:none!important;display:none!important}
.home-page .hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:var(--hvl-aperture)!important;
  z-index:8!important;
  pointer-events:none!important;
  /* Hairline aperture cue only: the paper visually sits above the image. */
  box-shadow:
    inset 0 7px 8px -9px var(--hvl-cut-shadow),
    inset 7px 0 8px -9px rgba(42,50,56,.12),
    inset 0 -1px 0 var(--hvl-cut-highlight)!important;
}
.home-page .hero-stage{
  position:absolute!important;
  inset:var(--hvl-aperture)!important;
  width:auto!important;
  height:auto!important;
  overflow:hidden!important;
  background:#fff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.home-page .hero-stage::before,
.home-page .hero-stage::after{content:none!important;display:none!important}
.home-page .hero-slide,
.home-page .hero-slide img{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.home-page .hero-slide img{
  object-fit:cover!important;
}
.home-page .hero-brand-mark{top:30px!important}
.home-page .hero-copy{bottom:clamp(56px,8vh,100px)!important}

/* Keep slider controls clean: no white/grey cut-out dock. */
.home-page .hero-progress-dock{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
  margin:0!important;
  height:56px!important;
  padding:0 var(--pad)!important;
}
.home-page .hero-progress{background:#d5d9dc!important}

/* =========================================================
   MAIN TOP IMAGE — ALL INNER PAGES
   Exactly the same one-aperture visual principle.
   ========================================================= */
.inner-page .page-hero{
  --hvl-aperture:clamp(20px,1.8vw,30px);
  background:#fff!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:clamp(108px,9vw,148px) clamp(42px,5.2vw,86px) 0!important;
}
.inner-page .page-hero::after{display:none!important}
.inner-page .page-hero > picture{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1440px!important;
  height:clamp(430px,48vw,690px)!important;
  margin:0 auto!important;
  padding:var(--hvl-aperture)!important;
  overflow:visible!important;
  border:0!important;
  outline:0!important;
  background:var(--hvl-paper)!important;
  box-shadow:none!important;
}
.inner-page .page-hero > picture::before{content:none!important;display:none!important}
.inner-page .page-hero > picture::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:var(--hvl-aperture)!important;
  z-index:4!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:
    inset 0 7px 8px -9px var(--hvl-cut-shadow),
    inset 7px 0 8px -9px rgba(42,50,56,.12),
    inset 0 -1px 0 var(--hvl-cut-highlight)!important;
}
.inner-page .page-hero > picture img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.inner-page .page-hero-copy{
  width:min(1440px,100%)!important;
  margin:0 auto!important;
}

/* Licensing process: no arbitrary automatic numbering. */
.license-page .process-list,
.license-page .process-list.compact-list{
  counter-reset:none!important;
  list-style:none!important;
  padding-left:0!important;
}
.license-page .process-list li,
.license-page .process-list.compact-list li{
  counter-increment:none!important;
  padding-left:0!important;
}
.license-page .process-list li::before,
.license-page .process-list.compact-list li::before{
  content:none!important;
  display:none!important;
  counter-increment:none!important;
}

/* Preserve the existing orange angle/corner decorations and secondary-image styling.
   Intentionally no overrides for flow-media, editorial-media, concept-card or gallery-item. */

/* Preserve the already-approved compact contact treatment. */
.contact-simple{max-width:780px!important;margin-left:auto!important;margin-right:auto!important}
.contact-form-compact{max-width:700px!important}
.contact-fields{grid-template-columns:1fr 1fr!important;gap:0 clamp(24px,3vw,42px)!important}
.contact-form-compact input,.contact-form-compact textarea{max-width:100%!important}

@media(max-width:900px){
  .home-page .hero-wrap{--hvl-aperture:18px;padding:26px 24px 0!important}
  .home-page .hero{--hvl-media-height:clamp(520px,68svh,680px)}
  .inner-page .page-hero{--hvl-aperture:18px;padding-left:28px!important;padding-right:28px!important}
  .inner-page .page-hero > picture{height:60vw!important;min-height:350px!important}
}
@media(max-width:720px){
  .home-page .hero-wrap{--hvl-aperture:12px;padding:18px 12px 0!important}
  .home-page .hero{--hvl-media-height:clamp(500px,68svh,640px)}
  .home-page .hero-brand-mark{top:20px!important}
  .home-page .hero-copy{bottom:46px!important}
  .home-page .hero-slide:nth-of-type(2) img{object-position:68% center!important}
  .inner-page .page-hero{--hvl-aperture:12px;padding-top:86px!important;padding-left:14px!important;padding-right:14px!important}
  .inner-page .page-hero > picture{height:64vw!important;min-height:300px!important}
  .contact-fields{grid-template-columns:1fr!important}
}

/* 2026-08-14 — definitive landing slider motion.
   All four photographs use one continuous zoom-out per appearance.
   No bounce, no reverse motion, no internal looping. */
@keyframes hvlLandingZoomOutOnce {
  from { transform:scale(1.085); }
  to   { transform:scale(1); }
}
.home-page .hero-stage,
.home-page .hero-slide {
  overflow:hidden!important;
}
.home-page .hero-slide img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  transform:scale(1);
  animation:none!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}
/* Important transform must not stay on active images: animation owns transform. */
.home-page .hero-slide.is-active img {
  animation:hvlLandingZoomOutOnce 7.4s cubic-bezier(.16,.84,.28,1) both!important;
  transform-origin:center center!important;
}
/* The fourth source is 3:2 while the landing aperture is wider: always crop to fill. */
.home-page .hero-slide:nth-of-type(4),
.home-page .hero-slide:nth-of-type(4) img {
  width:100%!important;
  height:100%!important;
}
.home-page .hero-slide:nth-of-type(4) img {
  object-fit:cover!important;
  object-position:50% 50%!important;
}
@media (prefers-reduced-motion:reduce) {
  .home-page .hero-slide.is-active img {
    animation:none!important;
    transform:scale(1)!important;
  }
}