/* Approved optical-glass direction. Keep the artwork still and unfiltered. */
.contact-page .contact-opening{
  padding:clamp(164px,10.5vw,208px) var(--pad) 180px;
  background:#edf3f7;
  color:#172b35;
}
.contact-opening .contact-atmosphere{
  inset:0 0 auto;
  height:auto;aspect-ratio:16/9;
  background:none;
  z-index:0;
  pointer-events:none;
}
.contact-opening .contact-atmosphere::after{
  background:linear-gradient(180deg,transparent 74%,#edf3f7 100%);
}
.contact-lens{display:block;width:100%;height:100%}
.contact-lens img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:none;transform:none;animation:none;
}
.contact-page .contact-opening::after{
  content:'';position:absolute;inset:auto 0 0;height:160px;
  background:linear-gradient(180deg,#edf3f700,#a4b0b9 37%,#3d4a53 67%,#080b0d 100%);
  pointer-events:none;z-index:0;
}
.contact-opening .contact-layout{
  position:relative;z-index:1;max-width:1450px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(40px,5vw,90px);align-items:start;
}
.contact-opening .contact-intro{padding-top:27px;min-width:0}
.contact-opening .contact-label{font-size:12px;letter-spacing:.1em}
.contact-opening .contact-intro h1{
  font-size:clamp(50px,4.35vw,84px);line-height:1.05;
  letter-spacing:-.055em;margin:34px 0 30px;
}
.contact-opening .contact-intro h1 span{color:#66747d}
.contact-opening .contact-intro>p{font-size:18px;line-height:1.65;color:#506571}
.contact-opening .direct-contacts{margin-top:42px;gap:5px}
.contact-opening .direct-contacts>a{
  min-height:44px;font-size:clamp(17px,1.32vw,23px);gap:20px;
  max-width:100%;line-height:1.5;
}
.contact-opening .direct-contacts>a .icon{flex:none}
.contact-opening .direct-contacts small{margin-top:3px;color:#536975;line-height:1.6}
.contact-opening .contact-socials{margin-top:17px;gap:24px}
.contact-opening .contact-socials a{min-height:44px;display:inline-flex;align-items:center}
.contact-opening .local-link{min-height:44px;margin-top:36px;padding:20px 0 0;gap:28px}
.contact-opening .brief-form{
  min-width:0;padding:clamp(28px,2.6vw,48px);border-radius:30px;
  border:1px solid #ffffffec;
  background:linear-gradient(135deg,#f8fbfdd9,#eaf3fac7 62%,#e9f0f6c9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,0 20px 65px #29465612;
}
.contact-opening .form-heading h2{
  font-size:clamp(29px,2.2vw,42px);line-height:1.12;
  letter-spacing:-.045em;margin:17px 0 34px;
}
.contact-opening .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:23px 20px}
.contact-opening .form-grid label{min-width:0}
.contact-opening .brief-form input:not([type=checkbox]),
.contact-opening .brief-form textarea{font-size:16px;min-height:48px;border-bottom-color:#647f9140}
.contact-opening .brief-form textarea{min-height:130px;line-height:1.6}
.contact-opening .brief-form fieldset{margin:30px 0}
.contact-opening .service-choices{gap:8px}
.contact-opening .service-choices span{
  min-height:44px;display:flex;align-items:center;
  padding:10px 12px;background:#eff5f72e;border-color:#64829742;
}
.contact-opening .service-choices input:checked+span{background:#243f50;border-color:#243f50}
.contact-opening .form-notice{margin-top:19px;line-height:1.6}
.contact-opening .form-submit{
  min-height:54px;margin-top:22px;border-radius:999px;
  background:#203946;border-color:#203946;padding:16px 24px;
}
.contact-opening .form-submit:hover{background:#365969;border-color:#365969}
.contact-opening .privacy-note{margin-top:20px;font-size:13px;line-height:1.65}
.contact-opening .privacy-note a{text-decoration:underline;text-underline-offset:3px}
@media(min-width:960px) and (max-width:1100px){
  .contact-opening .contact-intro h1{font-size:50px}
  .contact-opening .brief-form{padding:27px}
  .contact-opening .form-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:959px){
  .contact-page .contact-opening{padding:145px 32px 150px}
  .contact-opening .contact-layout{grid-template-columns:1fr;gap:44px;max-width:650px}
  /* Natural portrait ratio means srcset 100vw describes the actual rendered width. */
  .contact-opening .contact-atmosphere{height:auto;aspect-ratio:9/16}
  .contact-opening .contact-lens{position:absolute;inset:0 auto 0 10%;width:100%;height:100%;mask-image:linear-gradient(90deg,transparent,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%)}
  .contact-opening .contact-atmosphere::after{
    background:linear-gradient(180deg,transparent 80%,#edf3f7 100%),linear-gradient(90deg,#f7fbffb0,#f7fbff65 48%,transparent 82%);
  }
  .contact-lens img{object-position:50% 0}
  .contact-opening .contact-intro{padding-top:0}
  .contact-opening .contact-intro h1{font-size:clamp(54px,8.4vw,76px);margin:26px 0}
  .contact-opening .direct-contacts{margin-top:28px}
  .contact-opening .direct-contacts>a{font-size:20px}
  .contact-opening .local-link{margin-top:23px;padding-top:17px}
  .contact-opening .brief-form{padding:34px;border-radius:28px}
  .contact-opening .form-heading h2{font-size:36px;margin-bottom:30px}
  .contact-page .contact-opening::after{height:130px}
}
@media(max-width:600px){
  .contact-page .contact-opening{padding:126px 22px 130px}
  .contact-opening .contact-layout{gap:36px}
  /* Keep the arc visible behind the form without stretching the artwork. */
  .contact-opening .contact-atmosphere{height:max(1040px,177.7778vw);aspect-ratio:auto}
  .contact-opening .contact-lens{left:5%;width:max(100%,585px)}
  .contact-opening .contact-atmosphere::after{
    background:linear-gradient(180deg,transparent 78%,#edf3f7 100%),linear-gradient(90deg,#f7fbffb0,#f7fbff65 63%,transparent 90%);
  }
  .contact-opening .contact-label{font-size:11px;letter-spacing:.08em}
  .contact-opening .contact-intro h1{
    font-size:clamp(40px,11.5vw,64px);line-height:1.06;
    letter-spacing:-.055em;margin:24px 0;
  }
  .contact-opening .contact-intro>p{font-size:16px;line-height:1.65}
  .contact-opening .direct-contacts{margin-top:24px;gap:3px}
  .contact-opening .direct-contacts>a{font-size:clamp(16px,4.1vw,20px);gap:13px}
  .contact-opening .direct-contacts small{font-size:11px}
  .contact-opening .contact-socials{margin-top:10px}
  .contact-opening .local-link{margin-top:20px;font-size:13px}
  .contact-opening .brief-form{padding:28px 22px;border-radius:24px}
  .contact-opening .form-heading h2{font-size:clamp(27px,7vw,35px);margin:14px 0 28px;text-wrap:initial}
  .contact-opening .form-grid{grid-template-columns:1fr;gap:20px}
  .contact-opening .brief-form fieldset{margin:28px 0}
  .contact-opening .brief-form textarea{min-height:150px}
  .contact-opening .service-choices span{font-size:13px;padding:10px 11px}
  .contact-opening .form-notice{font-size:13px}
  .contact-opening .privacy-note{font-size:12px}
  .contact-opening .privacy-note a{display:inline-flex;align-items:center;min-height:44px}
  .contact-page .contact-opening::after{height:110px}
}
@media(max-width:359px){
  .contact-page .contact-opening{padding-inline:18px}
  .contact-opening .brief-form{padding:25px 17px}
  .contact-opening .direct-contacts>a{font-size:15px;gap:10px}
  .contact-opening .form-heading h2{font-size:27px}
}