/* Contact page */
body { background: #f8f4ec; }
.c-hero { position: relative; height: 566px; overflow: hidden; background: #f8f4ec; }
.c-hero .bg { position: absolute; left: 50%; top: 39px; width: 919px; height: 531px; margin-left: -160px; max-width: none; object-fit: cover; }
.c-hero .wrap { height: 566px; }
.c-hero .t { position: absolute; left: 89px; top: 176px; width: 533px; }
.c-hero h1 { font: 900 72px/87.1px 'Inter', sans-serif; letter-spacing: -2px; color: #0a1128; }
.c-hero h1 em { font-style: normal; color: #d97706; }
.c-hero p { margin-top: 25px; font: 500 40px/48.4px 'Inter', sans-serif; color: #64748b; }
.git { background: #f7f5ee; }
.git .wrap { display: flex; gap: 64px; padding: 80px; align-items: center; }
.git-l { width: 616px; display: flex; flex-direction: column; gap: 32px; align-self: flex-start; }
.git-l h2 { font: 800 36px/45.4px 'Outfit', sans-serif; color: #111827; }
.git-l .sub { margin-top: 8px; font: 400 24px/36px 'Outfit', sans-serif; color: #4b5563; }
.cards { display: flex; flex-direction: column; gap: 16px; }
.cc { display: flex; gap: 16px; align-items: center; padding: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; transition: transform .3s var(--ease), box-shadow .3s ease; }
a.cc:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .07); }
.cc img { width: 48px; height: 48px; flex: none; }
.cc .ti { display: flex; gap: 8px; align-items: baseline; font: 700 16px/20.2px 'Outfit', sans-serif; color: #111827; }
.cc .ti small { font: 600 12px/15.1px 'Outfit', sans-serif; color: #22c55e; }
.cc .li { margin-top: 4px; font: 500 14px/17.6px 'Outfit', sans-serif; color: #111827; }
.cc .ar { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 700 13px/16.4px 'Outfit', sans-serif; }
.cc .ar svg { width: 12px; height: 12px; }
.form { width: 600px; flex: none; display: flex; flex-direction: column; gap: 24px; padding: 40px; background: #fff; border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); }
.form .fh { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.form .fh img { width: 56px; height: 56px; }
.form h3 { font: 800 28px/35.3px 'Outfit', sans-serif; color: #111827; }
.form .fh p { margin-top: 6px; font: 400 14px/17.6px 'Outfit', sans-serif; color: #4b5563; }
.fields { display: flex; flex-direction: column; gap: 16px; }
.fr { display: flex; gap: 16px; }
.fr > div { flex: 1; }
.fields label { display: block; font: 600 14px/17.6px 'Outfit', sans-serif; color: #111827; margin-bottom: 8px; }
.fields input, .fields select, .fields textarea { width: 100%; padding: 12px; background: #faf7f0; border: 1px solid #e5e7eb; border-radius: 8px; font: 400 14px/17.6px 'Outfit', sans-serif; color: #111827; transition: border-color .25s ease, box-shadow .25s ease; }
.fields textarea { height: 120px; resize: vertical; }
.fields input::placeholder, .fields textarea::placeholder { color: #4b5563; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: none; border-color: #df8a0a; box-shadow: 0 0 0 3px rgba(223, 138, 10, .15); }
.fields select { appearance: none; -webkit-appearance: none; color: #4b5563; background-image: url(../assets/icons/chevron-down.svg); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 12px; background: #df8a0a; color: #fff; font: 700 16px/20.2px 'Outfit', sans-serif; transition: transform .3s var(--ease), box-shadow .3s ease; }
.send img { width: 16px; height: 16px; }
.send:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(223, 138, 10, .35); }
.form .note { margin-top: 12px; text-align: center; font: 400 12px/15.1px 'Outfit', sans-serif; color: #4b5563; }
.c-strip { position: relative; height: 486px; overflow: hidden; background: #faf6ed; }
.c-strip .bg { position: absolute; left: 50%; top: 0; width: 1440px; height: 486px; margin-left: -720px; max-width: none; object-fit: cover; }
@media (max-width: 899.98px) {
  .c-hero { height: auto; display: flex; flex-direction: column; }
  .c-hero .wrap { order: 1; height: auto; padding: 120px 24px 0; }
  .c-hero .bg { position: static; order: 2; width: 100%; height: 230px; margin: 24px 0 0; object-position: 30% 50%; }
  .c-hero .t { position: static; width: auto; }
  .c-hero h1 { font-size: 44px; line-height: 52px; letter-spacing: -1px; }
  .c-hero p { margin-top: 12px; font-size: 20px; line-height: 28px; }
  .git .wrap { flex-direction: column; gap: 32px; padding: 40px 24px 48px; }
  .git-l { width: 100%; }
  .git-l h2 { font-size: 28px; line-height: 36px; }
  .git-l .sub { font-size: 16px; line-height: 24px; }
  .form { width: 100%; padding: 28px 20px; }
  .fr { flex-direction: column; }
  .c-strip { height: 300px; }
  .c-strip .bg { width: auto; min-width: 100%; height: 300px; left: 0; margin-left: 0; object-position: 50% 50%; }
}