/* base.css */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-800-normal.woff2) format('woff2'); }

:root {
  /* brand tokens, named as in the Figma variables */
  --red: #da0a2d;          /* brand/color-1 */
  --navy: #1e2e69;         /* brand/color-2 */
  --blue: #5d80b8;         /* brand/color-3 */
  --ice: #c5d7f4;          /* brand/color-4 */
  --mist: #dadbdf;         /* brand/color-5 */
  --ink: #080c28;          /* brand/color-6 */
  --paper: #f0f2f7;        /* brand/color-8 */
  --card: #202a45;         /* brand/color-9 */
  --gray: #6a6a6a;         /* brand/color-10 */
  --gray-2: #888;          /* brand/color-11 */
  --black: #1f1d1b;
  --white: #fff;
  --mist-75: rgba(218, 219, 223, 0.75);
  --font-head: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1320px;
  --wide: 1375px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--black); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container-wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.eyebrow { font: 500 18px/1.25 var(--font-body); text-transform: uppercase; color: var(--gray); }
.h1 { font: 800 64px/1.2 var(--font-head); text-transform: uppercase; color: var(--black); }
.h2 { font: 800 52px/1.2 var(--font-head); text-transform: uppercase; color: var(--black); }
.h5 { font: 700 24px/1.2 var(--font-head); text-transform: uppercase; }
.body-18 { font: 400 18px/1.5 var(--font-body); }
.text-link { display: inline-flex; align-items: center; gap: 8px; height: 24px; font: 700 18px/1.2 var(--font-body); text-transform: uppercase; color: var(--navy); }
.text-link img { width: 20px; height: 20px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 55px; padding: 16px 34px; border-radius: 10px;
  font: 700 18px/normal var(--font-body); text-transform: uppercase; color: var(--white); background: var(--red); white-space: nowrap; transition: filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn--navy { background: var(--navy); }
.btn--sm { height: auto; min-width: 220px; font-size: 16px; }

/* logo: four vector pieces placed exactly as in Figma */
.logo { position: relative; display: block; overflow: hidden; }
.logo img { position: absolute; display: block; max-width: none; width: auto; height: auto; }
.logo .l1 { inset: 0 16.54% 51.19% 16.2%; width: 67.26%; height: 48.81%; }
.logo .l2 { inset: 83.11% 10.16% 0 6.56%; width: 83.28%; height: 16.89%; }
.logo .l3 { inset: 55.48% 0 22.14% 0; width: 100%; height: 22.38%; }
.logo .l4 { inset: 45.63% 13.64% 51.05% 81.98%; width: 4.38%; height: 3.32%; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: 110px; background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.site-header .logo { width: 138px; height: 90px; flex: none; }
.site-header__right { display: flex; align-items: center; gap: 32px; height: 64px; }
.site-header__meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.site-header__phone { font: 700 24px/1.2 var(--font-head); color: var(--navy); text-transform: uppercase; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 48px; }
.site-nav a { font: 700 17px/1.25 var(--font-body); color: var(--black); white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.site-header__toggle { display: none; }

/* footer */
.site-footer { background: var(--ink); padding: 50px 0; color: var(--mist); }
.site-footer__cols { display: flex; align-items: flex-start; }
.site-footer__brand { width: 448px; height: 180px; flex: none; }
.site-footer .logo { width: 122px; height: 80px; }
.site-footer__tagline { width: 300px; padding-top: 24px; font: 400 16px/1.5 var(--font-body); }
.site-footer__contact { width: 448px; flex: none; }
.site-footer__links { width: 440px; flex: none; }
.site-footer__title { font: 500 18px/1.25 var(--font-body); color: var(--white); text-transform: uppercase; white-space: nowrap; }
.site-footer__contact-body { width: 394px; padding-top: 16px; display: flex; flex-direction: column; gap: 24px; }
.site-footer address { font: 400 14px/20px var(--font-body); font-style: normal; white-space: nowrap; }
.site-footer__reach { display: flex; flex-direction: column; gap: 32px; }
.site-footer__phone { font: 700 24px/1.2 var(--font-head); color: var(--white); white-space: nowrap; }
.site-footer__social { display: flex; align-items: center; gap: 24px; }
.site-footer__social a, .site-footer__social img { width: 24px; height: 24px; }
.site-footer__linkcols { display: flex; padding-top: 16px; }
.site-footer__linkcols ul { flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; }
.site-footer__linkcols a { font: 400 14px/20px var(--font-body); color: var(--mist); white-space: nowrap; }
.site-footer__linkcols a:hover { color: var(--white); }
.site-footer__bottom { margin-top: 32px; padding-top: 33px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: space-between; }
.site-footer__bottom p, .site-footer__bottom a { font: 500 12px/1.5 var(--font-body); color: var(--mist-75); }
.site-footer__legal { display: flex; gap: 24px; }

/* the apply/contact form (shared by home and contact) */
.apply-form { background: var(--white); border-radius: 24px; padding: 49px 33px; }
.apply-form__title { font: 700 24px/1.2 var(--font-head); color: #111318; text-transform: uppercase; }
.apply-form__note { padding-top: 8px; font: 400 14px/20px var(--font-body); color: var(--black); }
.apply-form__fields { padding-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.apply-form__row { display: flex; gap: 16px; }
.apply-form__field { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.apply-form label { padding-bottom: 12px; font: 500 15px/1.2 var(--font-body); color: #6b7180; text-transform: uppercase; }
.apply-form input, .apply-form textarea { width: 100%; height: 46px; padding: 13px 16px; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 12px;
  background: var(--paper); font: 500 14px/1.2 var(--font-body); color: var(--black); outline: none; }
.apply-form textarea { display: block; height: 100px; border-radius: 14px; resize: vertical; }
.apply-form input::placeholder, .apply-form textarea::placeholder { color: #6b7180; opacity: 1; }
.apply-form input:focus, .apply-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(93, 128, 184, 0.2); }
.apply-form__submit { display: flex; justify-content: center; padding-top: 40px; }

/* ---------- responsive: header, footer, form ---------- */
.site-header__mobile { display: none; }
@media (max-width: 1360px) {
  .site-nav { gap: 28px; }
  .site-header__right { gap: 24px; }
  .site-footer__brand { width: 34%; height: auto; }
  .site-footer__contact, .site-footer__links { width: 33%; flex: 1 1 0; }
  .site-footer__contact-body { width: auto; }
}
@media (max-width: 1180px) {
  .site-header__mobile { display: flex; align-items: center; gap: 16px; }
  .site-header__call, .site-header__toggle { width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; }
  .site-header__call img, .site-header__toggle img { width: 41px; height: 41px; }
  .site-header__right { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 20px; height: auto;
    padding: 20px var(--gutter) 28px; background: var(--white); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15); }
  .site-header.is-open .site-header__right { display: flex; }
  .site-header__meta { align-items: stretch; gap: 16px; }
  .site-header__phone { order: 2; }
  .site-nav { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid #e6e8ee; font-size: 18px; }
}
@media (max-width: 760px) {
  :root { --gutter: 12px; }
  .site-header { height: 56px; background: var(--white); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner { padding-block: 4px; }
  .site-header .logo { width: 73px; height: 48px; }
  .site-footer { padding: 40px 0 24px; text-align: center; }
  .site-footer__cols { flex-direction: column; align-items: center; gap: 32px; }
  .site-footer__brand, .site-footer__contact, .site-footer__links { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; }
  .site-footer__brand .logo { width: 107px; height: 70px; }
  .site-footer__tagline { display: none; }
  .site-footer__contact-body { align-items: center; padding-top: 16px; }
  .site-footer address { white-space: normal; font-size: 14px; }
  .site-footer__reach { align-items: center; gap: 24px; }
  .site-footer__social { gap: 24px; }
  .site-footer__social a, .site-footer__social img { width: 28px; height: 28px; }
  .site-footer__linkcols { flex-direction: column; align-items: center; padding-top: 16px; gap: 16px; }
  .site-footer__linkcols ul { align-items: center; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; margin-top: 32px; padding-top: 20px; }
  .apply-form { padding: 32px 20px; }
}
@media (max-width: 560px) {
  .apply-form__row { flex-direction: column; gap: 20px; }
}

/* contact.css */
/* contact-us page. Shared shell, type and .apply-form live in base.css */

/* hero (normal flow under the sticky header, Figma y=110 h=513) */
.con-hero { position: relative; min-height: 513px; padding: 120px 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; color: var(--white); }
.con-hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* Figma: left 0, top -28.17%, w 100%, h 214.82%. The photo's own aspect gives exactly that box at 1920x513,
   so cover + this object-position renders the same pixels there and never stretches at other widths. */
.con-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 24.52%; }
.con-hero__shade { position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(17, 19, 24, 0.6) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%),
  linear-gradient(90deg, rgba(17, 19, 24, 0.7) 0%, rgba(17, 19, 24, 0.5) 50%, rgba(17, 19, 24, 0.1) 100%); }
.con-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.con-hero__title { width: 656px; max-width: 100%; color: var(--white); }
.con-hero__text { width: 656px; max-width: 100%; color: var(--white); }

/* form + info cards */
.con-body { background: #f7f7f5; padding: 110px 0; }
.con-body__inner { display: flex; align-items: flex-start; gap: 64px; }

/* Figma strokes sit inside the 756x702 box, so 1px border + 40/32 padding = its 41/33 inset */
.con-body .apply-form { flex: 1 0 0; min-width: 0; padding: 40px 32px; border: 1px solid rgba(218, 219, 223, 0.75); }
.con-body .apply-form__title { font-size: 40px; font-weight: 800; }
/* Figma's first row frame is 107px tall around 32 + 76px of content, so the next row starts 1px early */
.con-body .apply-form__fields > :nth-child(2) { margin-top: -1px; }

.con-info { width: 500px; flex: none; padding: 39px 31px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px;
  background: var(--navy); color: var(--white); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.con-info__title { font: 800 40px/1.2 var(--font-head); text-transform: uppercase; white-space: nowrap; }
.con-info__text { width: 100%; font: 400 18px/1.5 var(--font-body); }
.con-info__phone { font: 700 30px/1.2 var(--font-head); text-transform: uppercase; white-space: nowrap; }
.con-info__phone:hover { color: var(--ice); }

/* responsive */
@media (max-width: 1360px) {
  .con-body__inner { gap: 40px; }
  .con-info { width: 400px; }
}
@media (max-width: 1024px) {
  .con-hero { min-height: 440px; padding: 96px 0; }
  .con-body { padding: 80px 0; }
  .con-body__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .con-body .apply-form { flex: none; }
  .con-info { width: auto; }
}
@media (max-width: 760px) {
  .con-hero { min-height: 0; padding: 72px 0; }
  .con-hero__title { font-size: 48px; }
  .con-hero__text { font-size: 17px; }
  .con-body { padding: 56px 0; }
  .con-body .apply-form { padding: 31px 19px; border-radius: 20px; }
  .con-body .apply-form__row { flex-direction: row; gap: 16px; } /* base stacks rows at 760; keep them two-up to 560 */
  .con-body .apply-form__fields > :nth-child(2) { margin-top: 0; }
  .con-body .apply-form__title { font-size: 32px; }
  .con-body .apply-form__fields { padding-top: 24px; }
  .con-body .apply-form__submit { padding-top: 32px; }
  .con-info { padding: 31px 19px; border-radius: 20px; }
  .con-info__title { font-size: 32px; white-space: normal; }
  .con-info__text { font-size: 17px; }
  .con-info__phone { font-size: 28px; }
}
@media (max-width: 560px) {
  .con-body .apply-form__row { flex-direction: column; gap: 20px; }
  .con-body .apply-form__submit .btn { width: 100%; }
}