/* ============ SECTION BLEND — shared deep base (assembly 2) ============
   Loaded LAST. Every boundary on the page melts through the shared
   page base (#060607): the bottom edge of each section feathers down
   into the base, and the top edge of the next section feathers up out
   of it, so no hard colour line survives anywhere — Hero→Work,
   Work→About, About→Services, Services→Studio, Studio→FAQ,
   FAQ→Footer. Each section keeps its OWN palette in its interior;
   the feathers only touch the outermost ~12vh at each edge, are pure
   gradient overlays (no motion, no filters), and introduce no colour
   that is not already the page base.
   No section root used ::before / ::after before this file, so the
   pseudos are free. z-index 1 keeps them above section backgrounds
   and below section content (wrappers run z-index 2-3). */

.work::before,.about::before,.services-exp3::before,
.studio::before,.letters::before,.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(72px,12vh,132px);
  background:linear-gradient(180deg,rgba(6,6,7,.88),rgba(6,6,7,0));
  pointer-events:none;z-index:1;
}
.hero::after,.work::after,.about::after,
.services-exp3::after,.studio::after,.letters::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(72px,12vh,132px);
  background:linear-gradient(180deg,rgba(6,6,7,0),rgba(6,6,7,.88));
  pointer-events:none;z-index:1;
}

@media (max-width:768px){
  .work::before,.about::before,.services-exp3::before,
  .studio::before,.letters::before,.footer::before,
  .hero::after,.work::after,.about::after,
  .services-exp3::after,.studio::after,.letters::after{
    height:clamp(56px,9vh,96px);
  }
}

/* Sami trim (2026-10-21): the Services→Studio and FAQ→Footer pauses
   read too wide — those two boundaries only get HALF-height feathers
   (6vh desktop / 4.5vh mobile instead of 12vh / 9vh) so the sections
   sit closer. The melt stays: the gradient shape is unchanged, only
   its reach is shorter. The other four boundaries keep the sizes
   above, byte for byte. */
.services-exp3::after,.studio::before,
.letters::after,.footer::before{
  height:clamp(36px,6vh,66px);
}
@media (max-width:768px){
  .services-exp3::after,.studio::before,
  .letters::after,.footer::before{
    height:clamp(28px,4.5vh,48px);
  }
}