/* GENERATED by migration/build_theme_assets.py from website-package/.
   Edit the generator (or move a rule by hand and stop regenerating), not this file blindly. */

/* Extra styles for template group 'contact-page'. Loaded after site.css. */

.vt-arrow svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,0.9));
}
.contact-grid {
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-12);
  align-items:start;
}
.contact-info h2 { margin: 0 0 var(--sp-8); }
.contact-row {
  display:flex;
  gap:14px;
  margin-bottom: var(--sp-6);
}
.contact-ic {
  width:42px;
  height:42px;
  flex:none;
  border-radius: var(--r-sm);
  background: var(--iso-25);
  color: var(--iso-500);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-ic svg {
  width:20px;
  height:20px;
}
.contact-row b {
  display:block;
  font-family: var(--font-display);
  font-weight:500;
  color: var(--gray-900);
  margin-bottom:2px;
}
.contact-row div {
  color: var(--gray-600);
  line-height:1.6;
}
.contact-row a { color: var(--iso-600); }
.contact-form {
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
}
.cf-row { margin-bottom: var(--sp-5); }
.cf-row label {
  display:block;
  font-size:14px;
  font-weight:500;
  color: var(--gray-800);
}
.cf-row input, .cf-row textarea {
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
  border:1px solid var(--gray-200);
  border-radius: var(--r-sm);
  padding:11px 13px;
  font-family: var(--font-sans);
  font-size:15px;
  color: var(--gray-800);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cf-row input:focus, .cf-row textarea:focus {
  border-color: var(--iso-400);
  box-shadow: 0 0 0 3px rgba(0,104,196,.12);
}
.cf-row textarea { resize:vertical; }
.cf-done {
  margin: var(--sp-4) 0 0;
  color: var(--iso-700);
  font-size:14px;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns:1fr;
    gap: var(--sp-8);
  }
}
.offices-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-8);
}
.office {
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .3s var(--ease-out-quart), box-shadow .3s var(--ease-out-quart), border-color .3s ease;
  position:relative;
  overflow:hidden;
}
.office::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--iso-red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out-quart);
}
.office:hover::after { transform:scaleX(1); }
.office:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--iso-200);
}
.office h4 {
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  color:var(--gray-900);
  margin:0;
}
.office p {
  font-size:14px;
  line-height:1.55;
  color:var(--gray-600);
  margin:0;
  flex:1;
}
.office a {
  font-size:13.5px;
  color:var(--iso-600);
  font-weight:500;
}
.office a:hover { color:var(--iso-700); }
@media (max-width:1000px) {
  .offices-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .offices-grid { grid-template-columns:1fr; }
}