/* Font faces lifted verbatim from the Figma Sites export, pruned to the
   families the clean design uses (Urbanist / Inter / DM Sans / Noto Sans).
   Per-weight family names ("Urbanist:Bold") are intentional - the weight lives
   in the family NAME; keep font-family AND font-weight in sync (clean_approach.md par.8).
   TODO(prod): consolidate to real variable font faces and shrink the payload. */

@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Inter:Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"DM Sans:Medium";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Urbanist:Regular";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Urbanist:SemiBold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"DM Sans:Bold";font-style:normal;src:url("/_woff/v2/DMSans_opsz_wght__1/DMSans_opsz_wght__1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Noto Sans:Regular";font-style:normal;src:url("/_woff/v2/NotoSans-VF_3/NotoSans-VF_3.woff2");font-display:swap}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Inter:Semi Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Urbanist:Bold";font-style:normal;src:url("/_woff/v2/Urbanist_wght__2/Urbanist_wght__2-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Inter:Regular";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Inter:Medium";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Inter:Extra Bold";font-style:normal;src:url("/_woff/v2/Inter_1/Inter_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}

/* ============================================================
   marketplace.42px.org — clean rebuild (see ../../../clean_approach.md)
   One semantic layout replacing the export's two baked DOM trees
   (1440 desktop / 375 mobile). Values read from the export's
   computed styles at 1440.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* palette */
  --ink:   #0f172a;                    /* headings, primary text          */
  --slate: #475569;                    /* body text                       */
  --slate-2:#64748b;                   /* footer / faint text             */
  --accent:  #2563eb;                  /* buttons, dots, rules, badges    */
  --accent-d:#1d4fd0;                  /* button hover                    */
  /* page gradient (export: svg linearGradient over full page) */
  --grad-1:#a8d3ff; --grad-2:#cce1f2; --grad-3:#fff4df;
  /* frosted surfaces */
  --panel:      rgba(255,255,255,.25); /* approach / step cards           */
  --chip:       rgba(255,255,255,.16); /* service chips, quote, checks    */
  --chip-line:  rgba(255,255,255,.3);
  /* decorative circles */
  --purple:#9574ee; --yellow:#f3d374; --pink:#fc53e0;
  /* type — per-weight family names from the export; keep font-weight in sync (§8) */
  --ff-hero:  "Urbanist:Bold", sans-serif;
  --ff-title: "Urbanist:Bold", sans-serif;      /* card titles 22px */
  --ff-head:  "Inter:Semi Bold", sans-serif;    /* section titles, labels */
  --ff-body:  "Urbanist:Regular", sans-serif; /* Cyrillic falls to the system font, as in the export */
  --ff-btn:   "Urbanist:SemiBold", sans-serif;
  --ff-num:   "Inter:Bold", sans-serif;         /* step badges, checkmarks */
  --ff-lang:  "DM Sans:Bold", sans-serif;
  --ff-note:  "Inter:Regular", sans-serif;      /* footer */
  /* layout rhythm */
  --maxw: 1440px;
  --gutter: 120px;
  --col-gap: 32px;
  --card-gap: 20px;
  --radius: 12px;
  --radius-lg: 16px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 24%, var(--grad-3) 65%);
  color:var(--ink);
  font-family:var(--ff-body); font-weight:400;
  font-size:16px; line-height:1.5;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- utilities ---------- */
.container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--col-gap); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--card-gap); }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--card-gap); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 32px; border-radius:8px;
  background:var(--accent); color:#fff;
  font-family:var(--ff-btn); font-weight:600; font-size:18px; line-height:1.33;
  transition:background-color 160ms ease;
}
.btn:hover,.btn:focus-visible{ background:var(--accent-d); }
.btn__arrow{ font-family:inherit; }
.btn--wide{ min-width:520px; }

/* section scaffolding */
.section{ margin-top:156px; }
.section__title{
  font-family:var(--ff-head); font-weight:600;
  font-size:36px; line-height:1.2; color:var(--ink);
}
.rule::after{
  content:""; display:block;
  width:48px; height:3px; margin-top:14px;
  border-radius:2px; background:var(--accent);
}

/* decorative circles */
.orb{
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:-1;
}
.orb--purple{ background:var(--purple); }
.orb--yellow{ background:var(--yellow); }
.orb--pink{ background:var(--pink); }

/* ---------- header ---------- */
.site-header{
  background:#b8d7f5;
  box-shadow:0 4px 32px rgba(115,117,146,.15);
}
.site-header__inner{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px;
  padding-block:44px;
}
.logo img{ width:60px; height:34px; }
.expertise-nav{
  justify-self:center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--ff-body); font-weight:400; font-size:14px; line-height:1; color:var(--ink);
  text-transform:lowercase;
}
.expertise-nav__link{
  padding:8px 2px 7px; border-bottom:1px solid transparent; white-space:nowrap;
  transition:color .15s,border-color .15s,opacity .15s;
}
.expertise-nav__link:hover,
.expertise-nav__link:focus-visible{
  color:var(--accent); border-bottom-color:var(--accent);
  font-family:var(--ff-btn); font-weight:600;
}
.expertise-nav__link:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px;
}
.expertise-nav__link:active{ opacity:.65; }
.lang{
  display:flex; align-items:center; gap:4px;
  padding:8px 12px; border-radius:20px;
  background:rgba(238,240,250,.2);
}
.lang__opt{
  padding:10px 12px; border-radius:16px;
  font-family:var(--ff-lang); font-weight:700; font-size:14px; line-height:1;
  color:rgba(15,23,42,.6);
}
.lang__opt.is-active{ background:rgba(37,99,235,.3); color:#fff; }

/* ---------- hero ---------- */
.hero__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding-top:64px;
}
.hero__title{
  font-family:var(--ff-hero); font-weight:700;
  font-size:48px; line-height:1.15; color:var(--ink);
}
.hero__lead{
  margin-top:20px;
  font-size:22px; line-height:1.4; color:rgba(15,23,42,.8);
}
.hero__text{
  margin-top:22px; max-width:960px;
  display:flex; flex-direction:column; gap:16px;
  font-size:16px; line-height:1.6; color:rgba(15,23,42,.7);
}
.hero .btn{ margin-top:24px; }

/* ---------- services (frosted chips + quote) ---------- */
.services{ margin-top:140px; }
.services__inner{ position:relative; }
.services .orb--p1{ width:99px; height:99px; left:81px; top:97px; }
.services .orb--p2{ width:58px; height:58px; right:107px; top:459px; }
.svc-list{
  display:flex; flex-wrap:wrap; gap:var(--card-gap);
  margin-top:44px;
}
.svc-list .svc{ width:280px; }
.svc{
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  min-height:106px; padding:24px;
  border-radius:var(--radius-lg);
  background:var(--chip); border:1px solid var(--chip-line);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  font-family:var(--ff-head); font-weight:600; font-size:16px; line-height:1.4;
}
.svc__dot{
  flex:none; width:8px; height:8px; margin-top:4px;
  border-radius:50%; background:var(--accent);
}
.quote{
  display:flex; gap:20px; align-items:center;
  margin-top:67px; padding:28px 32px;
  border-radius:var(--radius-lg);
  background:var(--chip); border:1px solid var(--chip-line);
  backdrop-filter:blur(6px);
}
.quote__bar{
  flex:none; width:4px; height:26px;
  border-radius:2px; background:var(--accent);
}
.quote p{ font-size:16px; line-height:1.5; color:var(--ink); }

/* ---------- approach panels (MVP / turnkey) + steps ---------- */
.approaches .section__title{ text-align:center; }
.approaches .grid-2{ margin-top:64px; }
.panel{
  padding:32px;
  border-radius:var(--radius);
  background:var(--panel);
}
.panel__title{
  font-family:var(--ff-title); font-weight:700;
  font-size:22px; line-height:1.3; color:var(--ink);
}
.panel__label{
  margin-top:20px;
  font-family:var(--ff-head); font-weight:600; font-size:16px; color:var(--ink);
}
.panel p{ margin-top:16px; font-size:16px; line-height:1.55; color:var(--slate); }
.dots{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.dots li{
  padding-left:14px; position:relative;
  font-size:16px; line-height:1.5; color:var(--slate);
}
.dots li::before{ content:"·"; position:absolute; left:2px; }

.steps__inner{ position:relative; }
.steps .orb--y1{ width:99px; height:99px; right:83px; top:220px; }
.steps .orb--y2{ width:99px; height:99px; left:85px; top:920px; }
.steps .grid-2{ margin-top:48px; }
.step{ backdrop-filter:blur(6px); }
.step__num{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:6px;
  background:var(--accent);
  font-family:var(--ff-num); font-weight:700; font-size:16px; color:#fff;
}
.step .panel__title{ margin-top:20px; }
.step .dots li{ font-size:14px; }
.step p{ font-size:14px; }

/* ---------- case teasers ---------- */
.eyebrow{
  font-family:var(--ff-head); font-weight:600;
  font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent);
}
.case-block .section__title{ margin-top:12px; max-width:1030px; }
.case-block__text{
  margin-top:32px; max-width:900px;
  display:flex; flex-direction:column; gap:16px;
  font-size:16px; line-height:1.6; color:var(--slate);
}
.case-block .btn{ margin-top:36px; }

/* ---------- audience + checks ---------- */
.audience .grid-3{ margin-top:42px; }
.checks__inner{ position:relative; }
.checks .orb--pk1{ width:70px; height:70px; right:128px; top:97px; }
.checks .grid-3{ margin-top:44px; }
.check{
  display:flex; gap:14px; align-items:flex-start;
  padding:24px;
  border-radius:var(--radius-lg);
  background:var(--chip); border:1px solid var(--chip-line);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  font-family:var(--ff-head); font-weight:600; font-size:16px; line-height:1.4;
}
.check__mark{
  flex:none; display:grid; place-items:center;
  width:32px; height:32px; border-radius:6px;
  background:#dbeafe;
  font-family:var(--ff-num); font-weight:700; font-size:16px; color:var(--accent);
}

/* ---------- final CTA ---------- */
.cta-final{ margin-top:195px; }
.cta-final__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cta-final .orb--pk2{ width:83px; height:83px; left:457px; top:-276px; }
.cta-final__title{
  font-family:var(--ff-head); font-weight:600;
  font-size:36px; line-height:1.25; color:#1a1a1a;
}
.cta-final__sub{ margin-top:16px; font-size:16px; color:#666; }
.cta-final .btn{ margin-top:48px; }

/* ---------- case pages ---------- */
.case-hero__inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:80px;
}
.case-hero .eyebrow{
  font-size:13px; line-height:1.2;
  padding:8px 20px; border-radius:20px;
  background:rgba(37,99,235,.15);
}
.case-hero__title{
  margin-top:20px; max-width:1060px;
  font-family:var(--ff-hero); font-weight:700;
  font-size:48px; line-height:1.15; color:var(--ink);
}
.case-hero .shot{ margin-top:32px; }
/* screenshot frame: the export shows a 1:1 capture through an overflow window;
   per-shot geometry (aspect, zoom, offsets) is inline on the img — it is content, not design */
.shot{ display:block; position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.shot__patch{ position:absolute; top:0; left:0; width:100%; margin:0; }
.shot picture{ display:block; width:100%; max-width:none; }
.shot img{ display:block; width:100%; max-width:none; }
.shot-row{ display:grid; grid-template-columns:1fr 1fr; gap:39px; margin-top:40px; }
.prose{
  margin-top:36px; max-width:780px;
  display:flex; flex-direction:column; gap:16px;
  font-size:16px; line-height:1.6; color:var(--slate);
}
.prose + .shot,.section > .container > .shot{ margin-top:40px; }
.step--lg p,.step--lg .dots li{ font-size:16px; }
.lede{
  margin-top:36px; max-width:900px;
  font-family:var(--ff-title); font-weight:700;
  font-size:22px; line-height:1.4; color:var(--slate);
}
.lede + .lede{ margin-top:16px; }
.tasks{ margin-top:44px; }
.steps__gallery{ grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.steps--case .grid-2{ row-gap:24px; }
.footer__back{ font-size:14px; color:var(--accent); }

/* ---------- sarita case components ---------- */
.case-hero__sub{
  margin-top:24px; max-width:1065px;
  font-size:16px; line-height:1.6; color:#5f6377;
}
.case-hero{ display:flex; flex-direction:column; }
.case-banner{ display:block; width:100%; margin-top:48px; }
.case-banner picture{ display:block; width:100%; }
.case-banner img{ width:100%; height:auto; }
.prose--ink{ color:#1a1b2e; }
.lede--ink{ color:#1a1b2e; }
.tasks-2{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.task{
  display:flex; align-items:center; gap:20px;
  padding:24px 28px; border-radius:var(--radius);
  background:rgba(248,250,252,.25);
  font-family:var(--ff-head); font-weight:600; font-size:16px; line-height:1.4; color:#1a1b2e;
}
.task img{ width:44px; height:44px; flex:none; }
.numlist{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.num{ padding:24px; border-radius:var(--radius); background:rgba(248,250,252,.25); }
.num__badge{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:6px;
  background:var(--accent);
  font-family:var(--ff-num); font-weight:700; font-size:16px; color:#f8fafc;
}
.num p{ margin-top:16px; font-size:14px; line-height:1.5; color:#1a1b2e; }
.metrics{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric{ padding:28px; border-radius:24px; background:rgba(255,255,255,.25); }
.metric img{ width:40px; height:40px; }
.metric__num{
  margin-top:24px;
  font-family:"Inter:Extra Bold", sans-serif; font-weight:800;
  font-size:48px; line-height:1.1; color:var(--ink);
}
.metric__num::after{
  content:""; display:block;
  width:40px; height:3px; margin-top:14px;
  border-radius:2px; background:var(--m, var(--accent));
}
.metric--blue{ --m:#3b6bf5; }
.metric--amber{ --m:#ffd166; }
.metric--pink{ --m:#ff7eb3; }
.metric__label{ margin-top:20px; font-family:var(--ff-head); font-weight:600; font-size:16px; color:var(--ink); }
.metric__note{ margin-top:12px; font-size:14px; line-height:1.45; color:#5f6377; }
.footnote{ margin-top:24px; max-width:900px; font-size:14px; line-height:1.5; color:#6b7185; }

.section--center .section__title{ text-align:center; }
.section--center .rule::after{ margin-inline:auto; }
.section--center .prose{ margin-inline:auto; text-align:center; }

/* ---------- footer ---------- */
.footer__inner{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-block:140px 36px;
}
.footer p{
  font-family:var(--ff-note); font-weight:400;
  font-size:13px; color:var(--slate-2);
}

/* ============================================================
   Survey — a self-contained modal form with its OWN palette
   (slate-900 / blue-600), distinct from the marketing pages.
   ============================================================ */
.survey {
  --s-ink:#0f172a; --s-muted:#64748b; --s-blue:#2563eb; --s-blue-d:#1d4fd0;
  --s-chip:#e6ecf4; --s-field:#fdfdfc; --s-line:#e2e8f0; --s-opt:#37404c;
  min-height: 100vh; padding: 60px 20px;
  background: linear-gradient(155deg, #828fa6 0%, #9aa0aa 60%, #a39f9c 100%);
}
.survey__card { position: relative; max-width: 1200px; margin-inline: auto; background: #fff; border-radius: 16px; padding: 40px; color: var(--s-ink); }
.survey__close { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f1f5f9; color: var(--s-muted); font-size: 18px; line-height: 1; }
.survey__close:hover { background: #e2e8f0; }
.survey__title { margin: 0; max-width: 90%; font-weight: 600; font-family: var(--ff-head); font-size: 18px; line-height: 1.3; color: var(--s-ink); }
.survey__sub { margin: 8px 0 0; font-weight: 400; font-family: var(--ff-body); font-size: 16px; line-height: 1.45; color: var(--s-muted); }
.survey__form { display: flex; flex-direction: column; gap: 36px; margin-top: 32px; }

.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.q__num { flex: none; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--s-blue); color: #fff; font-weight: 600; font-family: var(--ff-head); font-size: 15px; }
.q__title { padding: 0; font-weight: 600; font-family: var(--ff-head); font-size: 15px; line-height: 1.3; color: var(--s-ink); }
.q__sub { margin: 0 0 14px; font-weight: 400; font-family: var(--ff-body); font-size: 15px; line-height: 1.45; color: var(--s-muted); }
.q__body { padding-left: 40px; }

/* chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; padding: 9px 22px; border-radius: 6px; background: var(--s-chip); color: var(--s-ink); font-family: var(--ff-body); font-size: 16px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(:checked) { background: var(--s-blue); color: #fff; }
.chip:focus-within { outline: 2px solid var(--s-blue); outline-offset: 2px; }

/* radios (single-select) */
.radios { display: flex; flex-direction: column; gap: 14px; }
.radio { display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--ff-body); font-size: 16px; color: var(--s-opt); }
.radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #cbd5e1; border-radius: 50%; flex: none; display: grid; place-content: center; cursor: pointer; }
.radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); background: var(--s-blue); transition: transform .12s; }
.radio input:checked { border-color: var(--s-blue); }
.radio input:checked::before { transform: scale(1); }

/* text fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.field__label { font-family: var(--ff-body); font-size: 14px; color: var(--s-muted); }
.field__req { color: #dc2626; }
.input, .textarea { width: 100%; background: var(--s-field); border: 1px solid var(--s-line); border-radius: 6px; padding: 10px 14px; font-family: var(--ff-body); font-size: 16px; color: var(--s-ink); }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.input:focus, .textarea:focus { outline: none; border-color: var(--s-blue); }

/* submit + status */
.survey__submit { width: 100%; margin-top: 8px; height: 54px; border: 0; border-radius: 8px; background: var(--s-blue); color: #fff; font-weight: 600; font-family: var(--ff-head); font-size: 16px; cursor: pointer; transition: background-color .15s; }
.survey__submit:hover { background: var(--s-blue-d); }
.survey__submit:disabled { opacity: .6; cursor: default; }
.survey__status { margin-top: 14px; font-family: var(--ff-body); font-size: 14px; min-height: 1em; }
.survey__status.is-error { color: #dc2626; }
.survey__status.is-ok { color: #16a34a; }

/* ============================================================
   breakpoints — one responsive layout instead of two DOM trees
   ============================================================ */
@media (max-width:1080px){
  :root{ --gutter:48px; }
  .expertise-nav{ flex-direction:column; align-items:flex-start; gap:8px; }
  .grid-4,.grid-5,.metrics{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .svc{ width:calc(50% - var(--card-gap)/2); }
  .orb{ display:none; }
}
@media (max-width:760px){
  :root{ --gutter:32px; --col-gap:20px; }
  .site-header__inner{ grid-template-columns:auto 1fr; align-items:start; gap:18px 12px; padding-block:32px; }
  .lang{ grid-column:2; grid-row:1; justify-self:end; }
  .expertise-nav{ grid-column:1/-1; grid-row:2; justify-self:start; }
  .grid-2,.grid-3,.grid-4,.grid-5,.metrics,.numlist,.tasks-2{ grid-template-columns:1fr; }
  .section{ margin-top:100px; }
  .services{ margin-top:100px; }
  .section__title{ font-size:20px; }
  .hero__inner{ padding-top:64px; }
  .hero__title{ font-size:24px; }
  .hero__lead{ margin-top:14px; font-size:16px; }
  .hero__text{ margin-top:8px; gap:10px; font-size:14px; }
  .hero .btn{ margin-top:12px; }
  .btn{ font-size:16px; padding:14px 28px; }
  .btn--wide{ min-width:0; width:100%; }
  .svc-list{ margin-top:20px; }
  .svc-list .svc{ width:100%; }
  .svc{ min-height:104px; font-size:14px; gap:8px; }
  .steps__gallery{ grid-template-columns:1fr 1fr; gap:16px; }
  .quote{ margin-top:24px; padding:28px 24px; }
  .quote p{ font-size:14px; }
  .approaches .grid-2{ margin-top:42px; gap:32px; }
  .steps .grid-2{ margin-top:30px; gap:12px; }
  .step p{ margin-top:12px; }
  .audience .grid-3{ margin-top:28px; }
  .checks .grid-3{ margin-top:44px; }
  .panel{ padding:24px 20px; }
  .panel__title{ font-size:18px; }
  .panel__label,.panel p,.dots li{ font-size:14px; }
  .case-block__text{ margin-top:24px; font-size:14px; }
  .case-block .btn{ margin-top:20px; }
  .audience .svc{ min-height:0; }
  .approaches .panel{ padding:32px 24px; }
  .check{ font-size:14px; }
  .cta-final{ margin-top:96px; }
  .cta-final__title{ font-size:20px; }
  .cta-final__sub{ margin-top:24px; font-size:14px; }
  .footer__inner{ padding-block:90px 36px; flex-direction:column; }
  .survey{ padding:0; }
  .survey__card{ border-radius:0; padding:24px 20px 32px; min-height:100vh; }
  .q__body{ padding-left:0; }
  .footer p{ font-size:12px; }
  .case-hero{ flex-direction:column-reverse; }
  .case-hero .case-banner{ margin-top:0; }
  .case-hero__inner{ padding-top:32px; padding-bottom:8px; }
  .case-hero__title{ font-size:24px; }
  .shot-row{ grid-template-columns:1fr; gap:20px; margin-top:24px; }
  .prose{ margin-top:24px; font-size:14px; }
  .lede{ margin-top:24px; font-size:16px; }
  .case-hero__sub{ font-size:14px; }
  .task{ flex-direction:column; align-items:flex-start; gap:16px; padding:24px; font-size:14px; }
  .step--lg p,.step--lg .dots li{ font-size:14px; }
  /* the export keeps two small purple circles on mobile; the rest disappear */
  .orb{ display:block; }
  .services .orb--p1{ width:62px; height:62px; left:-14px; top:180px; }
  .services .orb--p2{ right:18px; top:781px; }
  .steps .orb--y1{ width:75px; height:75px; right:24px; top:406px; }
  .steps .orb--y2{ width:60px; height:60px; left:25px; top:1770px; }
  .checks .orb--pk1{ width:66px; height:66px; right:32px; top:563px; }
  .cta-final .orb--pk2{ width:46px; height:46px; left:26px; top:-599px; }
}

/* ---------- contact request form replacement ---------- */
.survey--contact {
  --contact-bg: linear-gradient(155deg, #8291a6 0%, #9ba1aa 56%, #a39f9c 100%);
  --contact-card: #fff;
  --contact-line: #d8e2ee;
  --contact-accent: #2563eb;
  --contact-accent-hover: #1d4fd0;
  --contact-ink: #323c49;
  --contact-muted: #71849d;
  --contact-field: #f8fafc;
  --contact-field-line: #d8e2ee;
  --contact-button-fg: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: var(--contact-bg);
  color: var(--contact-ink);
  cursor: pointer;
}
.survey--contact .survey__card {
  position: relative;
  width: min(100%, 540px);
  min-height: 0;
  padding: 44px;
  border: 1px solid var(--contact-line);
  border-radius: 16px;
  background: var(--contact-card);
  color: var(--contact-ink);
  box-shadow: 0 28px 70px rgba(35, 50, 70, .18);
  cursor: default;
}
.survey--contact .survey__card[hidden] { display: none; }
.survey--contact .survey__logo { width: 60px; height: 34px; margin-bottom: 18px; }
.survey--contact .survey__form { display: flex; flex-direction: column; gap: 0; margin-top: 0; }
.survey--contact .survey__label {
  font-family: var(--ff-head);
  font-size: 16px;
  line-height: 1.35;
  color: var(--contact-ink);
}
.survey--contact .input {
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--contact-field-line);
  border-radius: 6px;
  background: var(--contact-field);
  padding: 15px 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--contact-ink);
}
.survey--contact .input:focus { outline: none; border-color: var(--contact-accent); }
.survey--contact .survey__hint {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--contact-muted);
}
.survey--contact .survey__submit {
  width: 100%;
  height: 52px;
  margin-top: 26px;
  border: 0;
  border-radius: 6px;
  background: var(--contact-accent);
  color: var(--contact-button-fg);
  font-family: var(--ff-head);
  font-size: 16px;
  cursor: pointer;
}
.survey--contact .survey__submit:hover,
.survey--contact .survey__submit:focus-visible { background: var(--contact-accent-hover); }
.survey--contact .survey__submit:disabled { opacity: .62; cursor: default; }
.survey--contact .survey__status {
  min-height: 20px;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}
.survey--contact .survey__status.is-error { color: #dc2626; }
.survey--contact .survey__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}
.survey--contact .survey__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: 14px;
  color: var(--contact-ink);
}
.survey--contact .survey__link:hover,
.survey--contact .survey__link:focus-visible { color: var(--contact-accent); }
.survey--contact .survey__link-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
}
.survey--contact .survey__link-icon--tg { background: #29a8e8; color: #fff; }
.survey--contact .survey__link-icon--mail { color: var(--contact-accent); border-radius: 0; font-size: 18px; }
.survey--contact .survey__card--thanks { text-align: center; }
.survey--contact .survey__check {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 28px auto 18px;
  border: 1.5px solid var(--contact-accent);
  border-radius: 50%;
  background: #eef5ff;
  color: var(--contact-accent);
  font-size: 30px;
  cursor: pointer;
}
.survey--contact .survey__thanks-title {
  margin: 0;
  font-family: var(--ff-head);
  font-size: 18px;
  color: var(--contact-ink);
}
.survey--contact .survey__thanks-text {
  max-width: 340px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--contact-muted);
}
@media (max-width: 560px) {
  .survey--contact { padding: 36px 12px; }
  .survey--contact .survey__card { width: min(100%, 344px); padding: 34px 24px; }
  .survey--contact .survey__links { flex-direction: column; justify-content: center; gap: 18px; }
}