/* Contact / simple original content, refined through the site's editorial design. */
body:has(.contact-hero) .contact-hero{
 background:#f0f0ee;color:#151515;padding:clamp(55px,6vw,80px) 5% 34px;
 min-height:clamp(380px,50vw,610px);display:flex;flex-direction:column;
 justify-content:space-between;overflow:hidden;
}
.contact-kicker,.contact-index,.contact-hero-bottom,.contact-note{
 font:900 10px/1.5 Arial,sans-serif;letter-spacing:.12em;
}
body:has(.contact-hero) .contact-hero h1{
 font:900 clamp(65px,11.5vw,178px)/.85 Arial,sans-serif;
 letter-spacing:-.095em;margin:35px 0 50px;max-width:1320px;
}
.contact-hero h1 span:not(.contact-stop){color:#8c8c8b}
.contact-hero .contact-stop{color:#8c8c8b}
.contact-hero-bottom{
 display:flex;justify-content:space-between;gap:20px;
 border-top:1px solid #888;padding-top:17px;color:#555;
}
body:has(.contact-hero) .contact-invitation{
 display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
 gap:clamp(35px,8vw,150px);align-items:end;
 background:#d8e7eb;color:#151515;padding:clamp(65px,9vw,125px) 5%;
}
.contact-invitation-lead h2{
 font:900 clamp(43px,6.5vw,100px)/.93 Arial,sans-serif;
 letter-spacing:-.085em;margin:27px 0 0;
}
.contact-invitation-action{display:flex;flex-direction:column;align-items:flex-start;gap:27px}
.contact-invitation-action p{
 font:400 clamp(18px,1.8vw,25px)/1.45 Arial,sans-serif;
 letter-spacing:-.02em;margin:0;max-width:510px;
}
.contact-invitation-action a.micro-cta{
 font:900 15px/1.2 Arial,sans-serif;letter-spacing:.035em;
 padding:13px 15px!important;
}
.contact-note{color:#5b6770;letter-spacing:.045em}
@media(max-width:700px){
 body:has(.contact-hero) .contact-hero{min-height:380px;padding:49px 5% 27px}
 body:has(.contact-hero) .contact-hero h1{font-size:clamp(63px,12vw,94px)}
 .contact-hero-bottom span:last-child{display:none}
 body:has(.contact-hero) .contact-invitation{grid-template-columns:1fr;gap:35px;padding:60px 5%}
}
@media(prefers-reduced-motion:reduce){
 body:has(.contact-hero) .contact-invitation a{transition:none!important}
}

/* Micro UX Lab's inline enquiry form / real submission, then fold and departure. */
body:has(.contact-hero) .contact-study{
 display:block; padding:44px 5% 75px; background:#d8e7eb;
}
.contact-study-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #8eabb4;font:900 10px Arial,sans-serif;letter-spacing:.12em}
.contact-columns{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(35px,6vw,100px);padding-top:45px;align-items:start}
.contact-words{align-self:start}
body:has(.contact-hero) .contact-words h2{
 font:900 clamp(42px,5.6vw,85px)/.93 Arial,sans-serif;letter-spacing:-.075em;margin:24px 0 25px;text-transform:uppercase;
}
.contact-words h2 span{color:#789ba8}
.contact-words p{font:400 clamp(16px,1.65vw,23px)/1.45 Arial,sans-serif;max-width:420px;margin:0 0 22px}
.contact-rule{height:1px;background:#8eabb4;max-width:420px;margin:30px 0 22px}
.contact-words .contact-intro-note{font-size:15px}
.contact-form-column{min-width:0}
.contact-stage{position:relative;min-height:545px;perspective:950px}
.form-object{
 position:relative;z-index:2;transform-origin:center center;
 transition:transform .65s cubic-bezier(.18,.8,.26,1),opacity .4s;
}
.form-object form{
 background:#f8f8f5;color:#151515;border:1px solid #151515;padding:clamp(22px,3vw,40px);
 box-shadow:12px 12px 0 #15151510;
 display:flex;flex-direction:column;gap:18px;
}
.form-heading{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #aaa;padding-bottom:16px;font:900 12px Arial,sans-serif;letter-spacing:.1em}
.form-heading span{color:#888}
#loopi-contact-form label{display:flex;flex-direction:column;gap:8px;font:900 10px Arial,sans-serif;letter-spacing:.11em}
#loopi-contact-form input,#loopi-contact-form textarea{
 box-sizing:border-box;width:100%;border:1px solid #c3c3c3;border-radius:0;background:#fff;color:#151515;
 padding:13px 14px;font:400 15px/1.45 Arial,sans-serif;letter-spacing:0;outline-offset:2px;
}
#loopi-contact-form textarea{resize:vertical;min-height:105px}
#loopi-contact-form :is(input,textarea):focus{outline:2px solid #6293a2;border-color:transparent}
.form-submit{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 border:1px solid #151515;background:#151515;color:#fff;
 font:900 12px Arial,sans-serif;letter-spacing:.08em;padding:16px 18px;
 cursor:pointer;transition:background .2s,color .2s;min-height:55px;
}
.form-submit:hover{background:#fff;color:#151515}
.form-submit span:last-child{font-size:23px;font-weight:400}
.form-submit:disabled{opacity:.55;cursor:wait}
.form-status{min-height:20px;font:400 12px/1.45 Arial,sans-serif;color:#6a6a6a;margin:0}
.form-status[data-error=true]{color:#a52727;font-weight:700}
.contact-honeypot{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.form-fold{position:absolute;z-index:4;left:0;right:0;height:50%;background:#f8f8f5;pointer-events:none;opacity:0;backface-visibility:hidden}
.form-fold.top{top:0;transform-origin:50% 0}
.form-fold.bottom{bottom:0;transform-origin:50% 100%}
.flying-envelope{
 position:absolute;z-index:8;width:175px;height:125px;left:50%;top:40%;
 transform:translate(-50%,-50%) scale(.35);opacity:0;pointer-events:none;
 transform-style:preserve-3d;
}
.envelope-rear,.envelope-front,.envelope-lid,.envelope-letter{position:absolute;inset:0}
.envelope-rear{background:#e1e1de;border:2px solid #151515}
.envelope-front{background:#f3f3f0;clip-path:polygon(0 27%,50% 74%,100% 27%,100% 100%,0 100%);border-bottom:2px solid #151515}
.envelope-lid{background:#ced3d4;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .3s}
.envelope-letter{background:#fff;inset:10px 16px 25px;border:1px solid #bbb}
.envelope-stamp{position:absolute;right:16px;bottom:13px;font:900 17px Arial,sans-serif}
.contact-stage.is-folding .form-object{
 animation:loopi-fold-paper .88s ease-in forwards;
}
.contact-stage.is-folding .form-fold{opacity:1;animation:loopi-paper-fade .88s ease-in forwards}
.contact-stage.is-flying .form-object{opacity:0;visibility:hidden}
.contact-stage.is-flying .flying-envelope{
 animation:loopi-departure 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes loopi-fold-paper{
 0%{transform:scale(1);opacity:1}
 40%{transform:perspective(800px) rotateX(7deg) scale(.83,.82);opacity:1}
 75%{transform:scale(.35,.2);opacity:1}
 100%{transform:scale(.18,.11);opacity:0}
}
@keyframes loopi-paper-fade{0%,60%{opacity:0}75%{opacity:.8}100%{opacity:0}}
@keyframes loopi-departure{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)}
 15%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(0)}
 38%{opacity:1;transform:translate(-35%,-75%) scale(.8) rotate(10deg)}
 100%{opacity:0;transform:translate(155%,-240%) scale(.4) rotate(25deg)}
}
.inline-confirm{
 position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 gap:16px;padding:30px;background:#d8e7eb;
}
.inline-confirm[hidden]{display:none!important}
.inline-confirm>span{font:900 11px Arial,sans-serif;letter-spacing:.12em}
.inline-confirm h3{font:900 clamp(44px,5vw,75px)/.95 Arial,sans-serif;letter-spacing:-.075em;margin:0}
.inline-confirm p{font:400 19px/1.5 Arial,sans-serif;margin:0 0 16px}
.inline-confirm button{border:1px solid #151515;background:transparent;color:#151515;padding:16px 18px;font:900 12px Arial,sans-serif;cursor:pointer}
.inline-confirm button:hover{background:#151515;color:#fff}
@media(max-width:800px){
 .contact-columns{grid-template-columns:1fr;gap:26px}
 .contact-stage{min-height:540px}
 .contact-study-top span:last-child{display:none}
}
@media(max-width:480px){
 .contact-stage{min-height:560px}
 body:has(.contact-hero) .contact-study{padding:35px 5% 65px}
 .form-object form{padding:21px}
}
@media(prefers-reduced-motion:reduce){
 .contact-stage.is-folding .form-object,.contact-stage.is-flying .flying-envelope{animation:none!important}
 .form-object{transition:none!important}
}
