/* Contact Us page */
.yop-contact{position:relative;overflow:hidden;background:linear-gradient(180deg,#e6f3ff 0%,#ffffff 55%,#f0f8ff 100%);color:#062743;padding:140px 0 90px;isolation:isolate;}
.yop-contact::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(0,140,255,0.14) 0%,transparent 42%),radial-gradient(circle at 82% 72%,rgba(0,87,255,0.12) 0%,transparent 42%);z-index:0;pointer-events:none;}
.yop-contact-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:stretch;}
.yop-contact-head{text-align:center;margin-bottom:34px;}
.yop-contact-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(20,102,250,0.08);border:1px solid rgba(20,102,250,0.25);color:#1466fa;padding:8px 16px;border-radius:100px;font-size:12px;font-weight:600;margin-bottom:22px;}
.yop-contact-badge .yop-badge-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;box-shadow:0 0 12px rgba(34,197,94,0.6);}
.yop-contact-title{font-size:clamp(2.2rem,4.5vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin:0 0 16px;color:#062743;}
.yop-contact-title .yop-grad{background:linear-gradient(90deg,#008CFF,#0057FF,#0095FF,#008CFF);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:yop-shimmer 6s linear infinite;}
.yop-contact-sub{font-size:1.05rem;color:rgba(6,39,67,0.7);line-height:1.65;margin:0 auto;max-width:640px;}
.yop-form-card{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(6,39,67,0.07);border-radius:24px;padding:40px 40px 32px;box-shadow:0 2px 4px rgba(6,39,67,0.04),0 18px 40px rgba(6,39,67,0.08),0 44px 90px rgba(6,39,67,0.07);}
/* thin brand bar across the top of the card */
.yop-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#008CFF,#0057FF,#0095FF);}
.yop-form-title{font-size:20px;font-weight:700;color:#062743;margin:0 0 8px;}
.yop-form-sub{font-size:13px;color:rgba(6,39,67,0.6);margin:0 0 22px;}
.yop-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.yop-form-field{display:flex;flex-direction:column;gap:6px;}
.yop-form-field.full{grid-column:1 / -1;}
.yop-form-label{font-size:12px;font-weight:600;color:#062743;letter-spacing:0.02em;}
.yop-form-input,.yop-form-textarea,.yop-form-select{width:100%;padding:11px 14px;border:1px solid rgba(6,39,67,0.14);border-radius:10px;font-family:inherit;font-size:14px;color:#062743;background:#f8fafc;transition:border-color 0.2s ease,background 0.2s ease,box-shadow 0.2s ease;}
.yop-form-input:focus,.yop-form-textarea:focus,.yop-form-select:focus{outline:none;border-color:#1466fa;background:#fff;box-shadow:0 0 0 3px rgba(20,102,250,0.14);}
.yop-form-textarea{resize:vertical;min-height:120px;}
.yop-form-submit{width:100%;background:linear-gradient(135deg,#008CFF,#0057FF);color:#fff;border:0;padding:14px 22px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:0.01em;box-shadow:0 10px 24px rgba(20,102,250,0.28);transition:transform 0.2s ease,box-shadow 0.2s ease;}
.yop-form-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,102,250,0.36);}
.yop-form-note{font-size:12px;line-height:1.6;color:rgba(6,39,67,0.5);text-align:center;margin:20px auto 0;max-width:420px;padding-top:18px;border-top:1px solid rgba(6,39,67,0.07);}
.yop-form-status{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13px;display:none;}
.yop-form-status.ok{display:block;background:rgba(34,197,94,0.1);color:#15803d;border:1px solid rgba(34,197,94,0.3);}
.yop-form-status.err{display:block;background:rgba(220,38,38,0.08);color:#b91c1c;border:1px solid rgba(220,38,38,0.25);}
@keyframes yop-shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (max-width:900px){
	.yop-contact{padding:110px 0 70px;}
	.yop-form-card{padding:26px 22px 22px;border-radius:20px;}
	.yop-contact-head{margin-bottom:26px;}
	.yop-form-row{grid-template-columns:1fr;}
}

/* ── HubSpot embed + loading skeleton ───────────────────────────── */
.yop-hsform{position:relative;width:100%;min-height:30rem;}
/* The embed paints over the skeleton on an opaque white ground, so the
   placeholder needs no JS to be dismissed. */
.yop-hs-skeleton{position:absolute;top:0;left:0;right:0;z-index:0;display:flex;flex-direction:column;align-items:flex-start;}
.yop-hsform .hs-form-frame{position:relative;z-index:1;background:#fff;}
.yop-hs-skeleton .sk{position:relative;overflow:hidden;display:block;width:100%;background:#edf2fb;border-radius:8px;}
.yop-hs-skeleton .sk::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0) 100%);animation:yopShimmer 1.5s ease-in-out infinite;}
@keyframes yopShimmer{100%{transform:translateX(100%);}}
.yop-hs-skeleton .sk-label{width:5.5rem;height:0.75rem;margin-bottom:0.5rem;}
.yop-hs-skeleton .sk-input{height:2.9rem;margin-bottom:1.25rem;}
.yop-hs-skeleton .sk-input.sk-area{height:4rem;}
.yop-hs-skeleton .sk-btn{height:3rem;margin-top:0.5rem;background:#dce7fa;}
@media (prefers-reduced-motion:reduce){.yop-hs-skeleton .sk::after{animation:none;}}

/* NOTE: the v4 embed renders the form inside a cross-origin <iframe>
   (ui-forms-embed-components-frame-parent), so page CSS cannot reach the
   fields or the submit button. Colours, fonts and the button style are set
   in HubSpot itself: Marketing > Forms > edit this form > Style tab. */

@media (max-width:900px){
	/* fields stack on mobile, so the embed renders taller */
	.yop-hsform{min-height:36rem;}
}