/* WarmContact.css -- Contact Us page (ContactUs/Index_V2.cshtml), 2026-10-05.
   Styles that cannot live inline in the supplied design (chips, focus, hidden) plus the real phone-code dropdown
   (.custom-dropdown, styled globally in CustomLayout.css) re-skinned to match the design's inputs. Scoped to .n4l-contact. */
.n4l-contact .chip{min-height:36px;padding:0 14px;white-space:nowrap;border-radius:30px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #F0E4D6;background:#FFFFFF;color:#2B2140;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.n4l-contact .chip:hover{border-color:#2A007C;}
.n4l-contact .chip[aria-pressed="true"]{border-color:#2A007C;background:#2A007C;color:#FFFFFF;}
.n4l-contact input::placeholder,.n4l-contact textarea::placeholder{color:#8F879F;}
.n4l-contact input:not([type="checkbox"]):focus,.n4l-contact textarea:focus,.n4l-contact select:focus{outline:none;border-color:#2A007C !important;background:#FFFFFF !important;box-shadow:0 0 0 3px rgba(42,0,124,.12);}
.n4l-contact button[type="submit"]{transition:transform .15s ease;}
.n4l-contact button[type="submit"]:hover{transform:translateY(-2px);}
.n4l-contact button:focus-visible,.n4l-contact a:focus-visible{outline:3px solid #FF9A56;outline-offset:2px;}
.n4l-contact [hidden]{display:none !important;}
.n4l-contact section[aria-labelledby="form-title"] a{color:#2A007C;text-decoration:underline;}
.n4l-contact section[aria-labelledby="form-title"] a:hover{color:#B84400;}
.n4l-contact h1,.n4l-contact h2,.n4l-contact h3{text-transform:none;}

/* phone: country-code dropdown + number, 44px like the other inputs */
.n4l-contact .cf-phone{display:flex;gap:8px;align-items:stretch;}
.n4l-contact .cf-phone .phone-input{flex:1 1 auto;min-width:0;}
.n4l-contact .cf-phone .custom-dropdown{flex:0 0 auto;width:auto;min-width:96px;height:44px;border:1.5px solid #F0E4D6;border-radius:10px;background:#FFF8F1;position:relative;box-sizing:border-box;}
.n4l-contact .cf-phone .custom-dropdown.show{border-color:#2A007C;}
.n4l-contact .cf-phone .custom-dropdown .selected-option{display:flex;align-items:center;height:100%;padding:0 26px 0 12px;font-size:14px;color:#2B2140;white-space:nowrap;}
.n4l-contact .cf-phone .custom-dropdown .selected-option img{width:20px;}
.n4l-contact .cf-phone .custom-dropdown .down-arrow::after{top:50%;transform:translate(-50%,-50%);right:-2px;}
.n4l-contact .cf-phone .options-list{border:1px solid #F1E2CE;border-radius:12px;box-shadow:0 18px 36px -16px rgba(42,0,124,.3);top:100%;left:0;margin-top:4px;overflow-y:auto;}
.n4l-contact .options-list .option:hover,.n4l-contact .options-list .option.kb-match{background:#FFEFE0;}
.n4l-contact .options-list .cname{color:#2B2140;}

/* WarmTheme.css forces every link purple (a{color:var(--purple) !important}), which turned the white social icons purple on their
   purple circles. The icons stay white, and hover fills the circle orange like the footer's social icons. */
.n4l-contact aside a[aria-label]{color:#FFFFFF !important;transition:background-color .15s ease;}
.n4l-contact aside a[aria-label]:hover,.n4l-contact aside a[aria-label]:focus{color:#FFFFFF !important;background:#FE5F00 !important;}

/* Contact hero = the functional-page hero (plum gradient, glows, network canvas, grid floor), same shared height */
.n4l-contact .ct-hero{position:relative;overflow:hidden;background:var(--plum-gradient);color:#fff;min-height:var(--func-hero-h);box-sizing:border-box;padding:26px 0 68px;display:flex;flex-direction:column;justify-content:center;}
.n4l-contact .ct-hero::before{content:"";position:absolute;bottom:-140px;left:-90px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(254,95,0,.24),transparent 70%);pointer-events:none;}
.n4l-contact .ct-hero::after{content:"";position:absolute;top:-120px;right:-80px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);pointer-events:none;animation:ctDrift 14s ease-in-out infinite alternate;}
@keyframes ctDrift{from{transform:translate(0,0);}to{transform:translate(-50px,40px);}}
.n4l-contact .ct-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.n4l-contact .ct-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:150px;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:46px 46px;transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 90%);mask-image:linear-gradient(to top,#000 5%,transparent 90%);animation:ctGrid 7s linear infinite;}
@keyframes ctGrid{to{background-position:0 46px,0 0;}}
/* hero motion (grid floor, glow) kept with "reduce motion" on, same as the other warm heroes */
/* consent checkbox: own box + white tick so the shared site CSS cannot hide the tick */
.n4l-contact input[type="checkbox"]{-webkit-appearance:none;appearance:none;display:inline-block;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;padding:0;border:1.5px solid #B9AFCB;border-radius:5px;background:#FFFFFF;cursor:pointer;vertical-align:top;}
.n4l-contact input[type="checkbox"]:checked{border-color:#FE5F00;background:#FE5F00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/12px 12px no-repeat;}
.n4l-contact input[type="checkbox"]:focus-visible{outline:2px solid #2A007C;outline-offset:2px;}