.contact{max-width:1080px;margin:0 auto;padding:0 24px}.contact-hero{padding-block:clamp(56px,12vh,150px)}.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,6vw,72px);display:grid}.contact-eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:16px;font-size:13px;font-weight:700;display:inline-block}.contact-intro h1{font-family:var(--font-display);letter-spacing:-.02em;color:var(--fg-1);text-wrap:balance;margin:0;font-size:clamp(34px,5vw,64px);font-weight:800;line-height:1.05}.contact-intro p{color:var(--fg-2);text-wrap:pretty;max-width:46ch;margin:22px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.6}.contact-cards{flex-direction:column;gap:16px;display:flex}.contact-card{background:var(--surface-1);box-shadow:var(--shadow-border);transition:transform var(--dur-fast) var(--ease-out-soft),box-shadow var(--dur-fast),background var(--dur-fast),scale var(--dur-fast) var(--ease-out-soft);border-radius:20px;align-items:center;gap:18px;padding:22px 24px;text-decoration:none;display:flex}.contact-card:hover{box-shadow:var(--shadow-md);background:#fff;transform:translateY(-2px)}.contact-card:active{scale:.98}.contact-card-ic{background:var(--brand-gradient);color:#fff;border-radius:14px;flex:none;justify-content:center;align-items:center;width:48px;height:48px;display:inline-flex}.contact-card-ic svg{width:24px;height:24px}.contact-card-text{flex-direction:column;gap:3px;min-width:0;margin-inline-end:auto;display:flex}.contact-card-title{font-family:var(--font-display);color:var(--fg-1);font-size:17px;font-weight:700}.contact-card-sub{color:var(--fg-2);font-size:14px;line-height:1.45}.contact-card-arrow{color:var(--fg-3);transition:transform var(--dur-fast) var(--ease-out-soft),color var(--dur-fast);flex:none;display:inline-flex}.contact-card:hover .contact-card-arrow{color:var(--color-primary);transform:translate(4px)}@media (max-width:760px){.contact-grid{grid-template-columns:1fr;gap:32px}.contact-intro p{max-width:none}}[dir=rtl] .contact-card-arrow{transform:scaleX(-1)}[dir=rtl] .contact-card:hover .contact-card-arrow{transform:scaleX(-1)translate(4px)}