/* INSTINCT PARIS — page Contact. */
.contact-main { overflow:hidden; }
.contact-page .site-header { background:rgba(7,8,10,.18); }
.contact-page .nav-links a.active { color:#8ca1ff; }

.contact-hero { position:relative; min-height:100svh; display:flex; align-items:center; padding:145px 0 112px; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 77% 43%,rgba(54,86,235,.28),transparent 28%),linear-gradient(145deg,#050607 0 58%,#0a1022 100%); }
.contact-hero::before { position:absolute; z-index:-2; inset:0; content:""; opacity:.42; background-image:linear-gradient(rgba(132,150,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(132,150,255,.1) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(90deg,#000,transparent 77%); }
.contact-hero::after { position:absolute; z-index:-1; top:9%; right:-4%; width:min(54vw,780px); aspect-ratio:1; border:1px solid rgba(157,174,255,.2); border-radius:50%; content:""; box-shadow:0 0 110px rgba(49,85,235,.08),inset 0 0 80px rgba(49,85,235,.06); }
.contact-hero__grid { position:absolute; top:84px; bottom:62px; left:50%; width:1px; background:linear-gradient(transparent,rgba(151,167,255,.38),transparent); }
.contact-hero__layout { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(320px,.68fr); gap:50px; align-items:center; }
.contact-hero__copy { position:relative; z-index:2; }
.contact-hero h1 { margin:24px 0 36px; font:700 clamp(5rem,12.4vw,14rem)/.68 var(--display); letter-spacing:-.13em; }
.contact-hero h1 span { color:transparent; -webkit-text-stroke:1px #f1f3ef; }
.contact-hero__lead { max-width:485px; margin:0 0 35px; color:#c3c9c5; font:500 .72rem/1.85 var(--mono); letter-spacing:.08em; }

.contact-signal { position:relative; width:min(38vw,490px); aspect-ratio:1; justify-self:end; display:grid; place-items:center; }
.contact-signal::before,.contact-signal::after { position:absolute; border-radius:50%; content:""; }
.contact-signal::before { inset:9%; border:1px solid rgba(199,209,255,.36); box-shadow:inset 0 0 55px rgba(49,85,235,.1); animation:contactBreath 4s ease-in-out infinite; }
.contact-signal::after { inset:25%; background:radial-gradient(circle at 35% 27%,#8ea5ff,#263fae 42%,#080b14 72%); box-shadow:0 22px 70px rgba(38,66,195,.42); }
.contact-signal__orbit { position:absolute; inset:3%; border:1px solid rgba(153,170,255,.46); border-radius:50%; transform:rotateX(65deg) rotateZ(-22deg); animation:contactOrbit 9s linear infinite; }
.contact-signal__orbit--two { inset:18%; border-color:rgba(226,231,255,.25); transform:rotateY(67deg) rotateZ(31deg); animation-direction:reverse; animation-duration:7s; }
.contact-signal__core { position:relative; z-index:2; display:grid; place-items:center; width:24%; aspect-ratio:1; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; font:700 clamp(1.3rem,3.2vw,3rem)/1 var(--display); letter-spacing:-.08em; }
.contact-signal__core i { position:absolute; top:-5px; right:6%; width:9px; height:9px; border-radius:50%; background:#8aa0ff; box-shadow:0 0 20px #7991ff; animation:signalPulse 1.8s ease-in-out infinite; }
.contact-signal>p { position:absolute; z-index:3; right:0; bottom:14%; margin:0; color:#eef0ff; font:500 .54rem/1.5 var(--mono); letter-spacing:.14em; text-align:right; }
.contact-signal>small { position:absolute; z-index:3; top:17%; left:-3%; color:#77817d; font:500 .48rem var(--mono); letter-spacing:.12em; }
.contact-hero__ticker { position:absolute; right:0; bottom:0; left:0; display:flex; justify-content:space-around; align-items:center; height:62px; overflow:hidden; border-top:1px solid rgba(255,255,255,.16); color:#c1c8c3; font:500 .53rem var(--mono); letter-spacing:.14em; }
.contact-hero__ticker i { color:#6f8aff; font-size:1rem; font-style:normal; }

.contact-studio { padding:150px 0; color:#0b0c0d; background:#e7e8e3; }
.contact-studio__grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr); gap:clamp(70px,10vw,165px); align-items:start; }
.contact-studio__intro { position:sticky; top:110px; }
.contact-studio h2 { margin:18px 0 31px; font:700 clamp(3.2rem,6.7vw,7.4rem)/.77 var(--display); letter-spacing:-.115em; }
.contact-studio h2 span { color:transparent; -webkit-text-stroke:1px #0b0c0d; }
.contact-studio__intro>p:not(.section-index) { max-width:430px; margin:0; color:#505552; font-size:.87rem; line-height:1.85; }
.contact-direct { display:grid; gap:13px; margin-top:55px; padding-top:19px; border-top:1px solid #a7aba7; }
.contact-direct>span { color:#6b706d; font:500 .53rem var(--mono); letter-spacing:.12em; }
.contact-direct>a { width:fit-content; font:600 clamp(1rem,1.7vw,1.35rem) var(--body); letter-spacing:-.03em; }
.contact-direct>button { width:fit-content; padding:0 0 6px; border:0; border-bottom:1px solid #111; color:#111; background:transparent; font:500 .53rem var(--mono); letter-spacing:.1em; }
.contact-direct>button b { margin-left:8px; font-size:.8rem; font-weight:400; }

.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:31px 18px; padding:42px; color:#edf0eb; background:#0b0d0f; box-shadow:0 35px 80px rgba(12,14,16,.14); }
.contact-field { position:relative; grid-column:1/-1; }
.contact-field--half { grid-column:auto; }
.contact-field label { display:flex; justify-content:space-between; margin-bottom:12px; color:#aeb4b0; font:500 .54rem var(--mono); letter-spacing:.11em; }
.contact-field label span { color:#646a67; font-size:.47rem; }
.contact-field label b { color:#8198ff; font-weight:500; }
.contact-field input,.contact-field select,.contact-field textarea { width:100%; border:0; border-bottom:1px solid #464b49; border-radius:0; outline:0; color:#f1f2ef; background:transparent; font:500 .8rem/1.6 var(--body); transition:border-color .3s,background-color .3s; }
.contact-field input { height:51px; padding:0 2px; }
.contact-field select { height:53px; padding:0 30px 0 2px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#7d94ff 50%),linear-gradient(135deg,#7d94ff 50%,transparent 50%); background-position:calc(100% - 12px) 23px,calc(100% - 7px) 23px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.contact-field select option { color:#fff; background:#0c0e10; }
.contact-field textarea { min-height:166px; padding:13px 42px 13px 2px; resize:vertical; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color:#69706c; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { border-color:#8298ff; background-color:rgba(79,105,226,.035); }
.contact-field input[aria-invalid="true"],.contact-field textarea[aria-invalid="true"] { border-color:#e17c7c; }
.contact-counter { position:absolute; right:0; bottom:12px; color:#626966; font:500 .48rem var(--mono); }
.contact-consent { grid-column:1/-1; display:grid; grid-template-columns:17px 1fr; gap:11px; align-items:start; color:#989e9a; font-size:.68rem; line-height:1.65; }
.contact-consent input { width:16px; height:16px; margin:2px 0 0; accent-color:#5573f5; }
.contact-consent a { color:#cbd3ff; text-decoration:underline; text-underline-offset:3px; }
.contact-submit { grid-column:1/-1; min-height:58px; display:flex; justify-content:space-between; align-items:center; padding:0 20px; border:1px solid #eef0eb; color:#0b0c0d; background:#eef0eb; font:500 .6rem var(--mono); letter-spacing:.11em; transition:color .3s,background-color .3s,transform .3s; }
.contact-submit:hover { color:#fff; background:#3155eb; transform:translateY(-3px); }
.contact-submit b { font-size:1rem; font-weight:400; }
.contact-form__note,.contact-form__status { grid-column:1/-1; margin:0; font:500 .52rem/1.6 var(--mono); letter-spacing:.04em; }
.contact-form__note { color:#707773; }
.contact-form__status { min-height:17px; color:#98abff; }

.contact-social { position:relative; padding:150px 0 165px; overflow:hidden; background:#08090b; }
.contact-social__halo { position:absolute; top:-18vw; left:48%; width:62vw; height:62vw; border-radius:50%; background:radial-gradient(circle,rgba(49,85,235,.22),transparent 63%); filter:blur(14px); }
.contact-social__head { position:relative; display:flex; justify-content:space-between; align-items:end; margin-bottom:69px; }
.contact-social h2 { margin:17px 0 0; font:700 clamp(3.7rem,8.5vw,9.8rem)/.73 var(--display); letter-spacing:-.12em; }
.contact-social h2 span { color:transparent; -webkit-text-stroke:1px #eef0eb; }
.contact-social__head>p { max-width:330px; margin:0 6% 9px 0; color:#a4aaa6; font-size:.8rem; line-height:1.8; }
.social-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:1px; background:#34383b; }
.social-card { position:relative; min-height:390px; display:flex; flex-direction:column; justify-content:flex-end; padding:25px 23px; overflow:hidden; background:#0c0e10; isolation:isolate; transition:color .5s,transform .5s cubic-bezier(.2,.8,.2,1); }
.social-card::before { position:absolute; z-index:-2; inset:0; content:""; opacity:0; background:linear-gradient(145deg,#5876ff,#18275f 68%,#0c0e10); transform:translateY(35%); transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1); }
.social-card::after { position:absolute; z-index:-1; top:-45%; right:-28%; width:280px; height:280px; border:1px solid rgba(168,183,255,.35); border-radius:50%; content:""; transition:transform .8s; }
.social-card:hover { color:#fff; transform:translateY(-8px); }
.social-card:hover::before { opacity:1; transform:none; }
.social-card:hover::after { transform:scale(1.35); }
.social-card__index { position:absolute; top:23px; left:23px; color:#788fef; font:500 .52rem var(--mono); letter-spacing:.13em; }
.social-card__ghost { position:absolute; top:24%; right:-3%; color:transparent; -webkit-text-stroke:1px rgba(177,190,255,.22); font:700 9rem/.7 var(--display); letter-spacing:-.12em; animation:socialFloat 5.5s ease-in-out infinite; }
.social-card--tiktok .social-card__ghost { animation-delay:-1.7s; }
.social-card--facebook .social-card__ghost { animation-delay:-3.4s; }
.social-card h3 { margin:0 0 12px; font:700 clamp(1.8rem,3.3vw,3.6rem)/.85 var(--display); letter-spacing:-.085em; }
.social-card p { max-width:235px; margin:0; color:#939a96; font-size:.72rem; line-height:1.65; transition:color .4s; }
.social-card>b { position:absolute; right:24px; bottom:24px; color:#7f96ff; font-size:1.2rem; font-weight:400; transition:transform .35s,color .35s; }
.social-card:hover p { color:#dce0dc; }
.social-card:hover>b { color:#fff; transform:translate(4px,-4px); }
.social-feedback { min-height:20px; margin:19px 0 0; color:#849aff; font:500 .53rem var(--mono); letter-spacing:.08em; }

.contact-closing { position:relative; min-height:650px; display:grid; place-items:center; overflow:hidden; text-align:center; background:#3155eb; }
.contact-closing::before { position:absolute; inset:0; content:""; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:70px 70px; }
.contact-closing__line { position:absolute; width:min(74vw,930px); aspect-ratio:1; border:1px solid rgba(255,255,255,.3); border-radius:50%; transform:rotateX(73deg); animation:closingOrbit 8s ease-in-out infinite; }
.contact-closing__content { position:relative; z-index:1; }
.contact-closing .section-index { color:#d4dbff; }
.contact-closing h2 { margin:21px 0 37px; font:700 clamp(3.3rem,8vw,9rem)/.74 var(--display); letter-spacing:-.12em; }
.contact-closing h2 span { color:transparent; -webkit-text-stroke:1px #fff; }
.contact-closing a { display:inline-flex; gap:15px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.8); font:500 .62rem var(--mono); letter-spacing:.11em; }
.contact-closing a b { font-size:.9rem; font-weight:400; }

@keyframes contactOrbit { to { transform:rotateX(65deg) rotateZ(338deg); } }
@keyframes contactBreath { 50% { opacity:.55; transform:scale(1.045); } }
@keyframes signalPulse { 50% { opacity:.35; transform:scale(.72); } }
@keyframes socialFloat { 50% { transform:translateY(-13px) rotate(-2deg); } }
@keyframes closingOrbit { 50% { transform:rotateX(69deg) rotateZ(8deg) scale(1.08); } }

@media (max-width:900px) {
  .contact-hero__layout { grid-template-columns:1fr .65fr; }
  .contact-signal { width:min(42vw,410px); }
  .contact-studio__grid { grid-template-columns:1fr; gap:68px; }
  .contact-studio__intro { position:static; }
  .contact-social__head { display:block; }
  .contact-social__head>p { margin:28px 0 0; }
  .social-card { min-height:330px; }
}

@media (max-width:600px) {
  .contact-hero { min-height:780px; align-items:flex-end; padding:125px 0 105px; }
  .contact-hero::before { background-size:42px 42px; }
  .contact-hero::after { top:8%; right:-38%; width:115vw; }
  .contact-hero__grid { display:none; }
  .contact-hero__layout { display:block; }
  .contact-hero h1 { margin:19px 0 26px; font-size:16vw; letter-spacing:-.1em; }
  .contact-hero__lead { max-width:92%; font-size:.6rem; line-height:1.7; }
  .contact-signal { position:absolute; top:88px; right:-5%; width:58vw; opacity:.68; }
  .contact-signal>p,.contact-signal>small { display:none; }
  .contact-hero__ticker { height:48px; justify-content:flex-start; gap:28px; padding:0 16px; overflow:hidden; white-space:nowrap; }
  .contact-hero__ticker span:nth-of-type(n+3),.contact-hero__ticker i:nth-of-type(n+3) { display:none; }

  .contact-studio { padding:92px 0; }
  .contact-studio__grid { gap:50px; }
  .contact-studio h2 { font-size:14.5vw; }
  .contact-studio__intro>p:not(.section-index) { font-size:.78rem; }
  .contact-direct { margin-top:38px; }
  .contact-direct>a { font-size:.86rem; }
  .contact-form { grid-template-columns:1fr; gap:27px; padding:31px 18px; }
  .contact-field--half { grid-column:1/-1; }
  .contact-field input,.contact-field select,.contact-field textarea { font-size:.77rem; }
  .contact-consent { font-size:.64rem; }
  .contact-submit { min-height:55px; }

  .contact-social { padding:94px 0 105px; }
  .contact-social h2 { font-size:16vw; }
  .contact-social__head { margin-bottom:45px; }
  .contact-social__head>p { max-width:90%; font-size:.73rem; }
  .social-grid { grid-template-columns:1fr; }
  .social-card { min-height:238px; padding:20px 18px; }
  .social-card__index { top:18px; left:18px; }
  .social-card__ghost { top:27%; right:4%; font-size:7rem; }
  .social-card h3 { font-size:2.3rem; }
  .social-card>b { right:18px; bottom:18px; }
  .contact-closing { min-height:510px; padding:80px 0; }
  .contact-closing::before { background-size:42px 42px; }
  .contact-closing h2 { font-size:14.4vw; }
  .contact-closing a { font-size:.5rem; }
}

@media (prefers-reduced-motion:reduce) {
  .contact-signal__orbit,.contact-signal::before,.contact-signal__core i,.social-card__ghost,.contact-closing__line { animation:none; }
  .social-card,.social-card::before,.social-card::after { transition:none; }
}
