/* Contact page CSS -- shared across EN/RU/AR (Figma 544:2 "P-Contact").
   Consolidated 2026-09-02 from 3 near-identical inline copies (contact.astro
   x3) into this one file, matching the intl-tel-input self-hosting precedent
   (Batch 5A) and an even older abandoned version of this exact pattern found
   in git history (commit 90498f14, later reverted). Single source of truth --
   the whole reason for this move was that the 3 inline copies had already
   drifted (RU/AR were 3 sections behind on the 80px block-spacing canon
   extension, e25a4e53, plus a stale align-items:center never getting the
   24.07 flex-end fix) despite an explicit "kept identical by design" comment
   further down. That class of drift is now structurally impossible. */
/* ── Contact page — Figma 544:2 "P-Contact" ── */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

/* ── Rail (max-width 1440, px 80) ── */
.cnt-rail {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  box-sizing: border-box;
}

/* ── Kicker (JetBrains Mono 12px tracked) ── */
.cnt-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.cnt-kicker--dark  { color: rgba(14,14,16,0.6); }
.cnt-kicker--light { color: rgba(247,237,217,0.6); }

/* ─────────────────────────────────────────
   1. BREADCRUMB — Figma 561:10
──────────────────────────────────────────*/
.cnt-breadcrumb {
  background: #f2f0ec;
  height: 40px;
  display: flex;
  align-items: center;
}
.cnt-breadcrumb__inner {
  display: flex;
  align-items: center;
}
.cnt-breadcrumb a,
.cnt-breadcrumb span {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(14,14,16,0.55);
  text-decoration: none;
  line-height: 1;
}
.cnt-breadcrumb a:hover { color: #d28c5a; }
.cnt-breadcrumb__sep {
  margin: 0 4px;
  color: rgba(14,14,16,0.3);
}
.cnt-breadcrumb__current { color: #0e0e10; }

/* ─────────────────────────────────────────
   2. HERO WITH FORM — Figma 545:2
   bg: #f2f0ec, h: 606px
   Left: headline + contact methods
   Right: Lead form (white card, rounded-16)
──────────────────────────────────────────*/
.cnt-hero {
  background: #f2f0ec;
  padding: 80px 0;
}
.cnt-hero__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* Left column */
.cnt-hero__left {
  flex: 0 0 640px;
  max-width: 640px;
}
.cnt-hero__kicker {
  margin-bottom: 28px;
}
.cnt-hero__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(40px, 3.89vw, 56px);
  color: #0e0e10;
  line-height: 1.05;
  margin: 0 0 36px;
}
.cnt-hero__sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(14,14,16,0.8);
  line-height: 1.5;
  margin: 0 0 48px;
}

/* Contact methods list */
.cnt-methods {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cnt-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(14,14,16,0.08);
}
.cnt-method:first-child { border-top: none; padding-top: 0; }
.cnt-method__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cnt-method__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.cnt-method__body {
  flex: 1;
}
.cnt-method__label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(14,14,16,0.5);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.cnt-method__value {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #0e0e10;
  text-decoration: none;
  display: block;
  line-height: 1.2;
}
.cnt-method__value:hover { color: #d28c5a; }
.cnt-method__tag {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(14,14,16,0.6);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* Right column: Lead form card */
.cnt-hero__right {
  flex: 1;
  min-width: 0;
}
.cnt-form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  box-sizing: border-box;
}
.cnt-form-card__kicker {
  margin-bottom: 16px;
}
.cnt-form-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 32px;
  color: #0e0e10;
  line-height: 1.1;
  margin: 0 0 32px;
}

/* Form fields */
.cnt-field {
  margin-bottom: 20px;
}
.cnt-field__label {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(14,14,16,0.7);
  margin-bottom: 8px;
}
.cnt-field__input,
.cnt-field__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(14,14,16,0.15);
  border-radius: 12px;
  padding: 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #0e0e10;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.cnt-field__input::placeholder,
.cnt-field__textarea::placeholder {
  color: rgba(14,14,16,0.4);
}
.cnt-field__input:focus,
.cnt-field__textarea:focus {
  border-color: #d28c5a;
}
.cnt-field__textarea {
  height: 96px;
  resize: vertical;
}

/* Phone field with intl prefix hint */
.cnt-field__phone-wrap {
  position: relative;
}
.cnt-field__phone-wrap .iti {
  width: 100%;
}
.cnt-field__phone-wrap .iti__country-container {
  background: rgba(14,14,16,0.03);
  border-radius: 12px 0 0 12px;
  border-right: 1px solid rgba(14,14,16,0.15);
}
.cnt-field__phone-wrap .iti__selected-dial-code {
  color: rgba(14,14,16,0.85);
}

/* Privacy checkbox */
.cnt-form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.cnt-form-privacy input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: #d28c5a;
  cursor: pointer;
}
.cnt-form-privacy label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(14,14,16,0.7);
  line-height: 1.5;
  cursor: pointer;
}
.cnt-form-privacy label a {
  color: rgba(14,14,16,0.7);
  text-decoration: underline;
}
.cnt-form-privacy label a:hover { color: #d28c5a; }

/* Submit button — copper pill, Figma: bg #d28c5a, radius 999, h 48 */
.cnt-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d28c5a;
  border: none;
  border-radius: 999px;
  height: 48px;
  padding: 0 32px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #0e0e10;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.cnt-form-submit:hover { background: #b87340; }

/* ─────────────────────────────────────────
   3. WHAT TO EXPECT — Figma 545:33
   bg: #2d3745, h: 240px
   3 numbered steps across
──────────────────────────────────────────*/
.cnt-expect {
  background: #2d3745;
  padding: 80px 0;
}
.cnt-expect__kicker {
  margin-bottom: 40px;
}
.cnt-expect__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.cnt-expect__num {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 36px;
  color: #d28c5a;
  line-height: 1;
  margin: 0 0 16px;
}
.cnt-expect__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 22px;
  color: #f7edd9;
  margin: 0 0 8px;
  line-height: 1.2;
}
.cnt-expect__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(247,237,217,0.8);
  line-height: 1.55;
  margin: 0;
}

/* ─────────────────────────────────────────
   4. ONLINE 24/7 + LANGUAGES — Figma 545:44 / 545:50
   bg: #f2f0ec — merged into a 2-column row per Mikhail
   16.07: languages pill sits in the column to the right
   of the Online 24/7 text, not stacked below the map.
──────────────────────────────────────────*/
.cnt-hours {
  background: #f2f0ec;
  padding: 80px 0;
}
.cnt-hours__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  /* 24.07: was align-items:center — the shorter .cnt-hours__col--lang column got vertically
     centered against its 190px-tall sibling, leaving ~35px of dead space below its own content
     ON TOP of the section's normal 80px bottom padding, making the ONLINE→FIND US gap read as
     broken/oversized. flex-end bottoms both columns out flush, restoring the clean 80+80=160px
     sitewide section-gap canon with no extra slack. */
}
.cnt-hours__col { flex: 1 1 auto; min-width: 0; }
.cnt-hours__kicker {
  margin-bottom: 24px;
}
.cnt-hours__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 32px;
  color: #0e0e10;
  line-height: 1.15;
  margin: 0 0 24px;
  max-width: 792px;
}
.cnt-hours__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(14,14,16,0.8);
  line-height: 1.6;
  margin: 0;
  max-width: 700px;
}

/* ─────────────────────────────────────────
   5. MAP — Figma 949:3
   bg: #f2f0ec, h: 480px
──────────────────────────────────────────*/
.cnt-map {
  background: #f2f0ec;
  padding: 80px 0;
}
.cnt-map__kicker {
  margin-bottom: 24px;
}
.cnt-map__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 32px;
  color: #0e0e10;
  margin: 0 0 32px;
  line-height: 1.1;
}
.cnt-map__embed {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  border: none;
  display: block;
  background: rgba(14,14,16,0.06);
  overflow: hidden;
}
.cnt-map__embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 16px;
}

/* ─────────────────────────────────────────
   6. LANGUAGES PILL — Figma 545:50
   bg: #f2f0ec, pill: #f7edd9, radius 999
   Now the right-hand column of .cnt-hours__inner (see #4 above),
   not its own stacked section.
──────────────────────────────────────────*/
.cnt-hours__col--lang {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.cnt-lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7edd9;
  border-radius: 999px;
  height: 59px;
  padding: 0 60px;
}
.cnt-lang-note {
  font-family: 'IBM Plex Sans', 'Arial', sans-serif;
  font-size: 14px;
  color: rgba(14,14,16,0.6);
  margin: 0;
  max-width: 280px;
}
.cnt-lang-pill__text {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px;
  color: #0e0e10;
  white-space: nowrap;
  line-height: 1;
}

/* ── Responsive ── */
/* 1100px is a documented intermediate-easing step (canon whitelist #4/#5,
   MOBILE_DESIGN_CANON_20260817.md), not chaos: same 80px->40px(1100)-
   >24px(960) cascade already established as legitimate elsewhere — identical
   shape to BaseLayout.astro's own nav breakpoint (whitelist #5, "1100px
   intermediate step, 960px final collapse") and to .up-rail-inner on
   property-card.css (whitelist #4). contact/privacy-policy are "full-page"
   templates per canon (forms/legal), so the easing lands on 960px->24px
   rather than 768px->24px — matching this page's own 960px/480px tiers
   below, not the sectional 768px tier. Same pattern on ru/ + ar/ variants
   of this page and on privacy-policy.astro's .prv-rail — kept identical
   across all 4 by design, not independently drifted. */
@media (max-width: 1100px) {
  .cnt-rail { padding: 0 40px; }
  .cnt-hero__inner { gap: 40px; }
  .cnt-hero__left { flex: 0 0 480px; max-width: 480px; }
}
/* 26.08 (Mikhail-reported): the "REQUEST CALLBACK" form card lives inside
   .cnt-hero__right, which was flex:1/min-width:0 — its own width shrank
   proportionally as the viewport narrowed from a 13" iPad (1366px, where it
   naturally computes to ~550px) down through 11" (1194px, where it fell to a
   cramped 378px — narrower than mini's 424px, a non-monotonic dip caused by
   the left column's own fixed-width tiers not lining up with where the
   right side actually got squeezed). Pinned the right column to the 13"
   reference width (550px, live-measured) across the whole 961-1365px band
   so it no longer narrows below that; the left column absorbs the
   remaining space instead of the card itself shrinking. 1366px and true
   desktop (>=1366px) are unchanged — this only touches the range that was
   actually broken.
   26.08 code-review finding (3/3 models independently, deepseek_r1 +
   gemini_2_5_pro + gpt_5_5): the left column isn't just freely-wrapping
   text — .cnt-method rows (email) have a non-shrinking
   .cnt-method__tag (white-space:nowrap) + a .cnt-method__body without its
   own min-width:0, live-confirmed to overflow by ~4px at the tightest edge
   of this range (961px, left column ~291px — the unbreakable
   "clients@uae-prop.com" + "Replies within minutes" tag no longer both fit
   on one row). Fixed below, scoped to this same range only. */
@media (min-width: 961px) and (max-width: 1365px) {
  .cnt-hero__right { flex: 0 0 550px; max-width: 550px; min-width: 0; }
  .cnt-hero__left { flex: 1 1 auto; max-width: none; min-width: 0; }
  .cnt-method__body { min-width: 0; }
  .cnt-method__value { overflow-wrap: anywhere; }
  .cnt-method__tag { white-space: normal; text-align: right; flex-shrink: 1; }
}
/* 25.08 (Mikhail, sitewide sweep): 961-1100 keeps its own documented 40px
   (matches privacy-policy's .prv-rail exception, tied to the fixed-480px
   hero column right above — not touched). But 1101-1439 had NO tier at
   all, falling through to the 80px desktop base — live-confirmed via
   screenshot the hero heading sat noticeably right of the breadcrumb
   above it. 48px matches the sitewide canon everywhere else at this
   breakpoint. NOTE — this intentionally diverges from privacy-policy's
   own 1101-1439 value (still 80px, a separately documented exception,
   not touched here). This page's ru/ and ar/ variants have since been
   given the SAME 1101-1439→48px addition (mirrored fix, own comment in
   each file) — the "kept identical by design" claim near the top of this
   file now only holds for the pre-existing 40/24/20px tiers, not this new
   one relative to privacy-policy. */
@media (min-width: 1101px) and (max-width: 1439px) {
  .cnt-rail { padding: 0 48px; }
}
@media (max-width: 960px) {
  .cnt-rail { padding: 0 24px; }
  .cnt-hero__inner { flex-direction: column; gap: 32px; }
  .cnt-hero__left { flex: 1 1 auto; max-width: 100%; }
  .cnt-form-card { padding: 28px; }
  .cnt-expect__grid { grid-template-columns: 1fr; gap: 24px; }
  .cnt-hero__h1 { font-size: 36px; }
  .cnt-hero__sub { margin-bottom: 32px; }
  .cnt-hours__title { font-size: 26px; }
  .cnt-map__title { font-size: 26px; }
  .cnt-hours__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cnt-hours__col--lang { align-items: flex-start; text-align: left; }
  /* Section vertical rhythm compressed to ~64px combined gap between
     sections (32px each side) — canon §Spacing scale, real mobile
     design pass 2026-08-17 (specs/MOBILE_DESIGN_CANON_20260817.md). */
  .cnt-hero, .cnt-expect, .cnt-hours, .cnt-map {
    padding: 32px 0;
  }
  /* Touch target: consent checkbox was ~20px tall (16px box + no row
     padding) — grown + given breathing room. Still short of the 44px
     ideal without a full checkbox redesign — honest partial fix per
     canon §Touch targets, not a false full-compliance claim. */
  .cnt-form-privacy { padding: 6px 0; }
  .cnt-form-privacy input[type="checkbox"] { width: 20px; height: 20px; }
}
/* W4-documented micro-breakpoint (specs/MOBILE_DESIGN_CANON_20260817.md):
   these 4 rules are hero-title/map/lang-pill SIZING, not rail padding — kept
   at their own pre-existing 600px cutoff (18.08 review caught a real
   regression when a first pass collapsed this into 480px: at 550px the
   H1 measurably jumped to 36px/map to 320px/pill-padding to 60px, not
   "no visible difference" as originally claimed). 481-599px keeps the
   compact values below; 481-767's own rail/section rhythm is unaffected. */
@media (max-width: 600px) {
  .cnt-hero__h1 { font-size: 30px; }
  .cnt-lang-pill { padding: 0 32px; }
  .cnt-lang-pill__text { font-size: 20px; }
  .cnt-map__embed { height: 240px; }
}
/* Phone tier — canon: "20px at 390px, 24px at 430-768px", boundary at 480. */
@media (max-width: 480px) {
  .cnt-rail { padding: 0 20px; }
  .cnt-hero__h1 { font-size: 28px; }
  .cnt-form-card { padding: 24px; }
  .cnt-hero, .cnt-expect, .cnt-hours, .cnt-map {
    padding: 24px 0; /* tightest rhythm, ~48px combined gap */
  }
  /* Added 2026-09-02 (contact.astro consolidation): RU/AR's longer translated
     email-reply tag (e.g. RU "Отвечаем в течение нескольких минут", 36 chars vs EN's
     "Replies within minutes", 23 chars) needed this wrap treatment at the
     tightest mobile tier -- EN's shorter copy never needed it. The rule itself
     is applied to all locales, but round-2 independent review correctly caught
     that the .cnt-method--email CLASS being added to EN's markup too was not
     actually a "safe no-op" as first written here -- it unconditionally forces
     a wrap regardless of whether the text needs it, a real (if visually clean)
     layout change EN never had before. Fixed at the markup level instead
     (src/components/ContactPage.astro applies the class only for currentLang
     !== 'en'), so this CSS rule only ever activates for RU/AR, matching where
     the original bug actually existed. margin-inline-start (not margin-left)
     so this flips correctly under
     dir="rtl" without a separate AR-only override. */
  /* Round-3 review: scoped to .cnt-method--email (not bare .cnt-method__body)
     -- the original 480px tier never touched EN's min-width at all, and
     round 2 already established the discipline of not changing EN's mobile
     behavior beyond the confirmed original bug's scope (RU/AR only). */
  .cnt-method--email .cnt-method__body {
    min-width: 0;
  }
  .cnt-method--email {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .cnt-method--email .cnt-method__tag {
    flex: 1 1 calc(100% - 44px);
    max-width: calc(100% - 44px);
    margin-inline-start: 44px;
    white-space: normal;
    line-height: 1.35;
  }
}