/* =========================================================================
   custom.css: YOUR experiments live here.
   It loads AFTER site.css, so anything you write here wins, and updates to the
   site will never overwrite this file. Edit, save, refresh (Ctrl+F5).
   ========================================================================= */

/* ---- glass experiment ---- */
.glass-card {
  background: rgb(255 255 255 / .35);             /* lower = more see-through (was .75) */
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);     /* blur = frost, saturate = richer colours behind */
  border: 1px solid rgb(255 255 255 / .55);       /* bright rim, the glass edge */
  box-shadow:
    0 20px 60px -20px rgb(27 42 74 / .45),
    inset 0 1px 0 rgb(255 255 255 / .9),          /* light catching the top edge */
    inset 0 -1px 0 rgb(255 255 255 / .25);
}

body, #hero, main {
	background: #f0eeb !important;
}

#hero > img {
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: multiply !important;
}

.glass-card {
	background: rgb(240 238 251 / .45 ) !important;
	border: 1px solid rgb(255 255 255/ .6)!important;
	box-shadow: 0 20px 60px -20px rgb(24 16 65/ .35), inset 0 1px 0rgb(255 255 255/ .9)!important;
}

h1, h2 , h3{
	color: 181041;
}
@media (max-width: 1023px) {
	#hero {flex-direction:column; justify-content:flex-start; padding-top:4.5rem; padding-bottom:1.5rem; min-height:0;}
	#hero > img{
		position: static; z-index:auto;
		width: 100%; max-width:40rem; height:auto; object-fit: contain;
		margin-bottom:-15.75rem;
	}
}