/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
/* Contact Us — page-scoped styles. Shared tokens, nav, and footer styles
   live in /public/css/new/global-2026.css. */

/* Page-scoped reset / typography helpers (don't disturb other pages) */
.contact-us-page, .contact-us-page *, .contact-us-page *::before, .contact-us-page *::after { box-sizing: border-box; }
.contact-us-page img { display: block; max-width: 100%; }
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
.contact-us-page a:where(:not([class*="pui-"])) { color: inherit; text-decoration: none; }
.contact-us-page ul { list-style: none; padding: 0; margin: 0; }

.contact-us-page .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: var(--pui-space-12);
  padding-right: var(--pui-space-12);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Sticky-footer pattern: body fills viewport, footer sits at the bottom
   even on short pages. */
body.page-contactus {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* The @yield('content') is wrapped in a .contact-us-page div, which sat between
   <body> (the flex column) and .contact-main and broke the sticky-footer flex
   chain — so on a short page at a tall/zoomed-out viewport the footer floated up
   and left an empty band below it. Make the wrapper a growing flex column so
   .contact-main's flex:1 + the footer's margin-top:auto reach the bottom again. */
body.page-contactus > .contact-us-page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
body.page-contactus .contact-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
  padding-bottom: 0;
}
.page-contactus .contact-main > div.container:first-of-type {
  margin-bottom: var(--pui-space-64);
}
.page-contactus .contact-main > .footer-2026 {
  margin-top: auto;
}

/* ---------- Eyebrow ----------
   Uses the global .page-eyebrow class (global-2026.css) — no local rule.
   That one class is the single source for the eyebrow on every 2026 page. */

/* ---------- HERO ---------- */
.contact-hero {
  display: flex;
  align-items: stretch;
  gap: 134px;
  margin-bottom: 51px;
}
.contact-hero__left {
  flex: 0 0 638px;
  display: flex;
  flex-direction: column;
}
:where(.contact-hero__left) > .pui-text--headline-small {
  margin: 0 0 5px;
}
:where(.contact-hero__left) > .pui-text--body-large {
  margin: 0 0 var(--pui-space-48);
  color: var(--pui-text-subtle);
}

/* HQ card (Headquarter) */
:where(.contact-hero__left) > .pui-card {
  width: 430px;
  max-width: 100%;
  /* B — the tinted card (surface/card, radius 16, padding 20, a column at gap 12) is .pui-card; the 430 width and the glass blur over the hero gradient stay the site's (stated) */
}
.hq-card__icon {
  flex: 0 0 var(--pui-space-64);   /* B — the site's own: a 64 flag photo box, not the Card's icon box (a 32 glyph on the accent) — by name */
  width: var(--pui-space-64);
  height: var(--pui-space-64);
  border-radius: var(--pui-radius-8);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hq-card__icon img { width: 100%; height: 100%; object-fit: cover; }
:where(.pui-card__texts) > .pui-text--body-large {
  color: var(--pui-text-default);
  word-break: break-word;
  overflow-wrap: anywhere;
}
:where(.pui-card__texts) > .pui-text--body-large:hover { color: var(--pui-color-blue-400); }

/* ---------- FORM CARD ---------- */
.contact-hero__right { flex: 0 0 525px; }
/* F — the card is the form's own (blocks/form-2026: .form-card.pui-card.form-card--raised); it fills this column */

/* ---------- OFFICES GRID ---------- */
.offices-section { margin-top: 51px; }
.offices-grid {
  background: var(--pui-color-light-blue-100);
  border-radius: var(--pui-radius-32);
  padding: var(--pui-space-32);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px 57px;
  backdrop-filter: blur(5.2px);
  -webkit-backdrop-filter: blur(5.2px);
}
.office-card {
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-8);
  min-width: 0;
}
.office-card__flag {
  width: 49px;
  height: auto;
  display: block;
  border-radius: var(--pui-radius-4);   /* B — by name */
}
:where(.office-card) > strong.pui-text--body-medium {
  /* B2 — Fedor's veto: Bold, the country-over-email hierarchy — font/weight/700 by name (request 17);
  the offices grid and its entries stay the site's own */
  color: var(--pui-text-default);
}
:where(.office-card) > a.pui-text--body-medium {
  color: var(--pui-text-default);
  word-break: break-word;
}
:where(.office-card) > a.pui-text--body-medium:hover { color: var(--pui-color-blue-400); }

/* =========================================================================
   TABLET — 768 .. 1023
   ========================================================================= */
@media (max-width: 1023px) {
  /* The forced break in the form title is desktop-only — below 1024px the card
     narrows and the heading should wrap on its own. */
  .cf-title-br { display: none; }

  .contact-us-page .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--pui-space-32);
    padding-right: var(--pui-space-32);
  }

  .page-contactus .contact-main > div.container:first-of-type { margin-bottom: var(--pui-space-48); }

  .contact-hero {
    gap: var(--pui-space-24);
    align-items: flex-start;
  }
  .contact-hero__left  { flex: 1 1 0; min-width: 0; }
  .contact-hero__right { flex: 0 0 374px; max-width: 50%; }

  :where(.contact-hero__left) > .pui-text--body-large {
    margin-bottom: var(--pui-space-32); font-size: var(--pui-type-body-medium-font-size); }
  :where(.contact-hero__left) > .pui-card { width: 100%; }
  :where(.contact-hero__left) .pui-card__slot { font-size: var(--pui-type-body-small-font-size); }

  .offices-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pui-space-40) var(--pui-space-40);
    padding: var(--pui-space-32);
  }
  :where(.pui-card__texts) > .pui-text--body-large { font-size: var(--pui-type-body-medium-font-size); }   /* the size pin stays (request 61) — restored 2026-10-05 */
  :where(.contact-hero__left) .pui-card__title { font-size: var(--pui-type-body-medium-font-size); }   /* the size pin stays (request 61) — restored 2026-10-05 */
}

/* =========================================================================
   MOBILE — <768
   ========================================================================= */
@media (max-width: 767px) {
  .contact-us-page .container { padding-left: var(--pui-space-16); padding-right: var(--pui-space-16); }

  .page-contactus .contact-main > div.container:first-of-type { margin-bottom: var(--pui-space-32); }

  .contact-hero {
    flex-direction: column;
    gap: var(--pui-space-32);
    margin-bottom: var(--pui-space-32);
  }
  .contact-hero__left,
  .contact-hero__right { flex: 1 1 100%; width: 100%; max-width: 100%; }

  :where(.contact-hero__left) > .pui-text--headline-small {
    margin-bottom: 0;
  }
  /* Tighten title→sub gap on mobile to 8px (design spec). The parent
     .contact-hero has flex gap: 32px, so a -24px margin-top here lands the
     effective gap at 0 + 32 + (-24) = 8px. */
  :where(.contact-hero__left) > .pui-text--body-large {
    margin-top: -24px;
    margin-bottom: 0; font-size: var(--pui-type-body-small-font-size); }

  /* HQ card moves AFTER the form on mobile */
  .contact-hero__left { display: contents; }
  .contact-hero .contact-hero__left > .pui-text--headline-small { order: 1; }
  .contact-hero__left :where(.contact-hero__left) > .pui-text--body-large {
   order: 2;
 }
  .contact-hero .contact-hero__left > .pui-card { order: 4; width: 100%; }
  .contact-hero__right { order: 3; }


  /* F — the card's inset on a phone is the form card's own (global-2026.css) */

  .offices-section { margin-top: var(--pui-space-32); }
  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pui-space-24) var(--pui-space-12);
    padding: var(--pui-space-20);
    border-radius: 20px;
  }
  :where(.office-card) > a.pui-text--body-medium { font-size: var(--pui-type-body-x-small-font-size); }
  :where(.office-card) > strong.pui-text--body-medium { font-size: var(--pui-type-body-small-font-size); }   /* the size pin stays (request 61) — restored 2026-10-05 */
}

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */