:root{
    --ease:cubic-bezier(.2 ,.61,.36,1);
    --duration:700ms;

    --depth-scale:0.93;

    --text-dark:#333;
    --text-light:#fff;
}
/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    font-family:'Lato', sans-serif;
    background:#fff;
}

.footnote {
    width:100%;
    text-align: center;
    position: absolute;
	bottom: 0px;
	font-family: Lato, Sans-serif;
	font-weight: 100;
	font-size: 6px;
	color: #999;
	padding-bottom: 3px;
	z-index: 100000;
}


/* =========================
   CINEMATIC SCENES
========================= */

.panel{
    position:fixed;
    inset:0;

    opacity:0;
    pointer-events:none;

    transform:translateY(60px) scale(1);

    will-change:transform, opacity, filter;

    transition:
        transform var(--duration) var(--ease),
        opacity var(--duration) var(--ease),
        filter var(--duration) var(--ease);

    z-index:1;
}

.panel.active{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    z-index:10;
}

.panel.leaving{
    opacity:0;
    transform:translateY(-40px) scale(1.02);
    z-index:5;
}

.panel.inactive{
    opacity:0.25;
    filter:blur(6px) saturate(0.8);
    transform:scale(var(--depth-scale));
}

/* Panels follow the trackpad directly while a scroll gesture is active. */
/* The JavaScript adds this class while the trackpad is moving. */
html.is-wheel-scrolling .panel{
    transition:none;
}

/* =========================
   HERO
========================= */

#hero{
    background:#fff !important;
    filter:none !important;
    opacity:1 !important;
}

.hero-logo{
    position:absolute;
    left:50%;
    top:45vh;
    transform:translate(-50%,-50%);
}

.hero-logo img{
    width:180px;
    height:90px;
    object-fit:contain;
}

/* =========================
   PANELS
========================= */

.research-panel{
/*    background:linear-gradient(135deg,#8c1f8e,#c21b92,#f1087f);*/
    color:#fff;
	text-shadow: #909 1px 0 9px;	
}

.research-panel-art{
    background-image: url('../img/art/ada-vilhan-7650-250x100.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
	margin: 9px;
	border-radius: 9px;
	height: 97.2%;
}

.services-panel{
/*    background:linear-gradient(135deg,#2b2e8f,#225aa9,#00aae8);*/
    color:#fff;
	text-shadow: #009 1px 0 9px;
}

.services-panel-art{
    background-image: url('../img/art/ada-vilhan-7357-250x100.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
	margin: 9px;
	border-radius: 9px;
	height: 97.2%;
}

.office-panel{
    background:#f5f5f5;
    color:#fff;
	text-shadow: #999 1px 0 9px;
}

.office-panel-art{
    background-image: url('../img/art/ada-vilhan-202439.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
	margin: 9px;
	border-radius: 9px;
	height: 97.2%;
}

/* =========================
   HEADER
========================= */

.section-header{
    position:absolute;
    top:45px;
    left:45px;

    display:flex;
    gap:42px;
    align-items:center;

    z-index:20;
}

.brand{
    letter-spacing:8px;
    font-size:14px;
}

.section-name{
    font-family:Lato;
    font-size:18px;
	text-transform: uppercase;
	opacity: 0.36;
}

/* =========================
   ACCESSORIES
========================= */

.highlight {
	text-transform: uppercase;
	font-size: 11px;
}

/* =========================
   GRID (MAIN TEASERS)
========================= */

.content-grid{
    width:min(1170px, 88vw);
    margin:auto;

    min-height:100vh;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:63px;

    align-content:center;
}

.content-grid article{
    max-width:333px;
    cursor:pointer;

    transition:transform 300ms var(--ease), opacity 300ms var(--ease);
}

.content-grid article:hover{
    transform:translateY(-6px);
}

.content-grid h2{
    font-family:Georgia, serif;
    font-style:italic;
    font-weight:400;

    font-size:18px;
    line-height:1.15;

    margin-bottom:27px;
}

.content-grid p{
    font-size:14px;
    line-height:1.8;
}

.col-right {
	padding-top: 9px;
    opacity:0.6;
    font-size:9pt;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* =========================
   MENU BUTTON
========================= */

.menu-btn{
    position:fixed;
    top:36px;
    right:54px;

    width:36px;
    height:36px;

    border:none;
    background:none;
    cursor:pointer;

    z-index:1000;
}

.menu-btn span{
    position:absolute;
    left:0;
    width:100%;
    height:1px;
    transition:0.45s var(--ease);
}

.menu-light span{ background:#999; }
.menu-dark span{ background:#999; }

.menu-btn span:first-child{ top:18px; }
.menu-btn span:last-child{ top:27px; }

.menu-btn.open span:first-child{
    top:18px;
    transform:rotate(45deg);
}

.menu-btn.open span:last-child{
    top:18px;
    transform:rotate(-45deg);
}

/* The menu button becomes the global X while a subpage is open. */
.menu-btn.subpage-close-control{
    z-index:5000;
}

/* =========================
   MENU OVERLAY
========================= */

.menu-overlay{
    position:fixed;
    inset:0;

    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(18px);

    opacity:0;
    visibility:hidden;

    transition:opacity 450ms var(--ease), visibility 450ms var(--ease);

    z-index:4000;
}

.menu-overlay.show{
    opacity:1;
    visibility:visible;
	z-index: 500;
}

.menu-content{
    width:min(1200px, 88vw);
    margin:auto;

    min-height:100vh;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:72px;

    align-content:center;
}

.menu-heading{
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:32px;
}

.menu-column a{
    display:block;

    font-family:Georgia, serif;
    font-style:italic;

    font-size:18px;
    line-height:1.25;

    text-decoration:none;
    color:#333;

    margin-bottom:27px;

    transition:transform 300ms var(--ease);
}

.menu-column a:hover{
    transform:translateX(9px);
}

/* =========================
   SUBPAGE OVERLAY
========================= */

.subpage-overlay{
    position:fixed;
    inset:0;

    background:rgba(255,255,255,0.81);
    backdrop-filter:blur(9px);

    opacity:0;
    visibility:hidden;

    transition:opacity 600ms var(--ease), visibility 600ms var(--ease);

    z-index:4500;
	/* The inner element is the only scrolling area. */
	overflow:hidden;
    overscroll-behavior:contain;
}

.subpage-overlay.show{
    opacity:1;
    visibility:visible;
	margin: 9px;
	border-radius: 9px;
}

.subpage-inner{
    width:min(1170px, 92vw);
    margin: 0 auto;
	
	padding: 135px 0;

    display:block;
	
    height:100%;
    max-height:100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
 
}

/* =========================
   SUBPAGE GRID (NEW SYSTEM)
========================= */

.subpage-grid{
    width:100%;

    display:grid;
    grid-template-columns:90px 2fr 1fr;
    gap:63px;

    align-items:start;

    animation:focusIn 900ms var(--ease);
    transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}

.subpage-grid h1{
    font-family:Georgia, serif;
    font-style:italic;
    font-weight:400;

    font-size:27px;
    line-height:1.15;

    margin-bottom:27px;
	margin-left: -45px;
}

.subpage-grid h2{
    font-family:Lato, sans-serif;
    font-weight:400;

    font-size:18px;
    line-height:1.15;

    margin-bottom:27px;
	margin-left: -9px;
}

.url-block a{
	color: inherit;
	display: block;
    text-transform: uppercase;
	font-size: 11px;
	text-decoration: none;
}

.url-block a:hover{
    transform: translateX(3px);
}


.subpage-data{
    display:none;
}

.card-teaser{
    display:block;
}

.readmore {
    font-size:9px;
	letter-spacing: 2px;
	display: inline-block;
	margin-top: 9px;
}

.mshow {
	text-transform: uppercase;
	display: none;
}

.mhide {
    display:show;
}


/* CENTER */

.subpage-title {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.1;

    position: sticky;
    top: 140px; /* keeps it elegant while scrolling */
}

.subpage-col-left {
    display: flex;
    align-items: flex-start;
}
.subpage-col-center{
    font-size:14px;
    line-height:1.8;
    max-width:760px;
}

/* RIGHT */
.subpage-col-right{
    opacity:0.6;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.subpage-close{
	border: none;
    font-size: 1px;
	font-weight: 100;
	display: block;
	text-align: center;
	cursor: pointer;
	margin: auto;
}


.subpage-col-center p{
    margin-bottom:27px;
}

.subpage-meta {
    opacity: 0.6;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: sticky;
    top: 140px;
	text-align: center;
}

/* COLUMN ENTRY ANIMATION */
.subpage-col{
    animation:subpageIn 900ms var(--ease);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes subpageIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes focusIn{
    from{
        transform:translateY(30px) scale(0.98);
        opacity:0;
    }
    to{
        transform:translateY(0) scale(1);
        opacity:1;
    }
}

/* =========================
   NOISE
========================= */

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

    opacity:0.22;
    mix-blend-mode:overlay;
}

/* ===========================
CONTACT FORM
=========================== */

#openCallForm{
    cursor:pointer;
    position:relative;
    z-index:50000;
}

.contact-form-wrap{

    margin-top:40px;
    max-width:620px;

}

.contact-form-wrap form{

    display:flex;
    flex-direction:column;
    gap:28px;

}

.contact-form-wrap label{

    display:flex;
    flex-direction:column;

    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#777;

}

.contact-form-wrap input[type=text],
.contact-form-wrap input[type=email]{

    margin-top:10px;

    border:none;
    border-bottom:1px solid #bbb;

    background:none;

    padding:10px 0;

    font-family:Lato;
    font-size:15px;

    transition:.35s;

}

.contact-form-wrap input:focus{

    outline:none;
    border-color:#000;

}

.interest-title{

    font-size:10px;
    letter-spacing:2px;
    margin-bottom:16px;
    color:#777;

}

.interest-group{

    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    gap:14px 30px;

}

.interest-group label{

    flex-direction:row;
    align-items:center;

    gap:10px;

    text-transform:none;
    letter-spacing:.4px;

    font-size:14px;
    cursor:pointer;
}

.interest-group input{

    accent-color:#444;

}

.contact-submit{

    margin-top:18px;
    align-self:flex-start;
    border:none;
    background:none;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.35s;
    color:#222;

}

.contact-submit:hover{

    letter-spacing:5px;

}

.hp{
    position:absolute;
    left:-9999px;
}

#formSuccess{
    display:none;
    padding:50px 0;
}

#formSuccess.show{
    display:block;
    animation:fadeIn .7s;
}

#formSuccess h3{
    font-family:Georgia,serif;
    font-style:italic;
    font-weight:normal;
    margin-bottom:24px;
}

#formSuccess p{
    line-height:1.8;
    margin-bottom:40px;
}

#closeSuccess{
    border:none;
    background:none;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:11px;
}

.field{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:18px;
	
	padding:6px 0;
}

.field label{
    width:140px; /* controls alignment column */
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
    flex-shrink:0;
}

.field:hover label{
    color:#000;
}

.field input{
    flex:1;

    border:none;
    border-bottom:1px solid #bbb;
    padding:10px 0;

    font-size:15px;
    background:none;
}

.field input:focus{
    outline:none;
    border-color:#000;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:10px;

    border:1px solid #ccc;
    padding:9px 18px;

    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;

    cursor:pointer;
    transition:.25s ease;

    user-select:none;
}

.pill input{
    display:none;
}

/* hover */
.pill:hover{
    border-color:#000;
}

/* selected state */
.pill input:checked + span{
    font-weight:500;
}

.pill:has(input:checked){
    border-color:#000;
    background:#000;
    color:#fff;
}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(12px);

}

to{

opacity:1;
transform:none;

}

}

/* =========================
TRIGGER
========================= */

.schedule-trigger{
    cursor:pointer;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1px;
}

/* =========================
OVERLAY
========================= */

.call-overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,0.98);

    opacity:0;
    pointer-events:none;

    transition:opacity .35s ease;
	margin: 9px;
	border-radius: 9px;
    z-index:999999;
}

.call-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* =========================
PANEL
========================= */

.call-panel{
    position:relative;
    width:min(720px, 92vw);
    margin:0 auto;
    padding:100px 0;
}

/* =========================
CALL FORM
========================= */

.call-form{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.call-form label{
    display:flex;
    flex-direction:column;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#666;
}

.call-form input[type="text"],
.call-form input[type="email"]{
    border:none;
    border-bottom:1px solid #999;
    padding:9px 0;
    font-size:18px;
    background:none;
}

.call-form input:focus{
    outline:none;
    border-color:#000;
}

/* interests */

.interests{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px 18px;
}

.interests .title{
    grid-column:1/-1;
    font-size:10px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.interests label{
    font-size:9pt;
    text-transform:uppercase;
    letter-spacing:0;
}

/* buttons */

.submit-btn{
	margin-top: 36px;
    border:none;
    background:none;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:11px;
}

.call-close{
    top: 0px;
    right: 18px;
    position: absolute;
    font-size: 45px;
    text-align: center;
    display: block;
    margin: auto;
    font-weight: 100;
    background: none;
    color: #999;
	border: none;
	cursor: pointer;
	z-index: 100000;
}

/* success */

.success-state{
    display:none;
    padding:60px 0 0 9%;
}

.success-state.active{
    display:block;
}

.success-state.active h3{
    font-family: Georgia, serif;
	margin-bottom: 18px;
}

/* honeypot */

.hp-field{
    position:absolute;
    left:-9999px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

    .section-header{
        top:27px;
        left:24px;
        gap:18px;
        flex-wrap:wrap;
    }
	
	.section-name{
        font-size: 14px;
    }

    .content-grid{
        grid-template-columns:1fr;
        padding: 27px 18px 9px;
        gap:36px;
    }
	
	.content-grid p{
        font-size:14px;
    }

	.content-grid h2 {
        font-size: 11.7pt;
		margin-bottom: 9px;
     }
	
	.card-teaser {
        font-size: 9.9pt;
		padding-left: 18px;
     }
	
	.mhide {
        display:none;
	}

    .mshow {
        display:inline-block;
    }
	
    .menu-content{
        grid-template-columns:1fr;
        padding:135px 36px;
        gap:45px;
    }

	.menu-heading{
        font-size:14px;
        letter-spacing:1px;
        margin-bottom:9px;
    }

    .menu-column a{
        display:block;

        font-family:Georgia, serif;
        font-style:italic;

        font-size:18px;
        line-height:1.25;

        text-decoration:none;
        color:#333;

        margin-bottom:9px;

    }

    .menu-btn{
        top:18px;
        right:36px;
    }
	
    .content-grid h2{
        font-size:18px;
    }	

    .subpage-grid{
        grid-template-columns:1fr;
        gap:36px;
        padding:90px 27px;
    }


    /* LEFT */
	
    .subpage-title,
    .subpage-meta {
        position: static;
    }
	
    .subpage-title{
        font-family:Georgia, serif;
        font-style:italic;
        font-size:18px;
        line-height:1.1;
    }
	.subpage-grid h1{
        font-size: 27px;

        margin-bottom: 18px;
        margin-left: -27px;
    }
	.subpage-inner {
        padding: 110px 24px;
		overflow-y: auto;
        height: 100%;
		max-height:100%;
		overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }


    /* CENTER */
    .subpage-col-center{
        font-size:14px;
        line-height:1.8;
        max-width:520px;
    }

    /* RIGHT */
    .subpage-col-right{
        opacity:0.6;
        font-size:9px;
        letter-spacing:1px;
        text-transform:uppercase;
    }
	.subpage-close{
		top: 0px;
		right: 18px;
		position: absolute;
        font-size: 45px;
        text-align: center;
        display: block;
		margin: auto;
		font-weight: 100;
		background: none;
		color: #999;
/*		text-shadow: 1px 1px 9px #636363;*/
    }
	
    /* CALL FORM */

	.call-panel{
		padding: 54px 0px;
	}
	
	
	.call-form{
		gap: 3px;
	}
	
	.contact-form-wrap input[type=text],
    .contact-form-wrap input[type=email]{

        margin-top:3px;

        padding:3px 0;

        font-family:Lato;
        font-size:11px;

    }
	
	.field{
		margin-bottom: 9px;
		gap: 1px;
    }
	
	.field label{
		width: 72px;
    }
	
	.interests{
        grid-template-columns:1fr;
        gap:3px;
    }
	
	.submit-btn{
		margin-top: 18px;
		z-index: 100000;
		color: #000000;
	}

}