/* Loyalty pages use two webfont families on the critical path:
   Playfair Display for display text and Montserrat for UI/body text. */

@font-face{font-family:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Montserrat:SemiBold";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Montserrat:Medium";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_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:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Playfair Display:SemiBold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}
@font-face{font-family:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_wght__1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}
@font-face{font-family:"Playfair Display:Bold";font-style:normal;src:url("/_woff/v2/PlayfairDisplay_wght__1/PlayfairDisplay_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}

/* ============================================================
   loyalty.42px.org — clean rebuild (see ../../../clean_approach.md)
   One semantic layout replacing the export's three baked DOM
   trees (1280 / 800 / 375). Values read from the export's
   computed styles at 1280.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* palette — warm stone/amber gamification theme */
  --ink:   #1c1917;                 /* headings, dark band bg          */
  --stone: #57534e;                 /* body text                       */
  --muted: #a8a29e;                 /* step numbers, metric labels     */
  --muted-2:#78716c;                /* footer                          */
  --amber: #f59e0b;                 /* buttons, eyebrows, rules, nums  */
  --amber-soft:#fff1bc;             /* active lang pill                */
  --cream: #fff8eb;                 /* hero band, step cards           */
  --paper: #fffdf7;                 /* "what we build" band            */
  --dark-card:#292524;              /* chips on the dark band          */
  --callout:#fde68a;                /* yellow callout strip            */
  /* type — per-weight family names from the export (§8) */
  --ff-display:  "Playfair Display:SemiBold", serif;
  --ff-display-b:"Playfair Display:Bold", serif;
  --ff-body:  "Montserrat:Medium", sans-serif;
  --ff-label: "Montserrat:SemiBold", sans-serif;
  --ff-arrow: "Montserrat:SemiBold", sans-serif;
  --ff-lang:  "Montserrat:SemiBold", sans-serif;
  --ff-note:  "Montserrat:Medium", sans-serif;
  --ff-note-b:"Montserrat:SemiBold", sans-serif;
  --ff-back:  "Montserrat:Medium", sans-serif;
  /* layout rhythm */
  --maxw: 1280px;
  --gutter: 120px;
  --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:#fff;
  color:var(--ink);
  font-family:var(--ff-body); font-weight:500;
  font-size:15px; line-height:1.6;
}
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-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 32px; border-radius:48px;
  background:var(--amber); color:#fff;
  font-family:var(--ff-label); font-weight:600; font-size:16px; line-height:1.4;
  transition:filter 160ms ease;
}
.btn:hover,.btn:focus-visible{ filter:brightness(.95); }
.btn__arrow{ font-family:var(--ff-arrow); font-weight:600; font-size:18px; }

.eyebrow{
  font-family:var(--ff-label); font-weight:600;
  font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--amber);
}
.eyebrow--orange{ color:#fb923c; }
.section__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1; letter-spacing:-1.6px; color:var(--ink);
}

/* ---------- header ---------- */
.site-header{ background:#fff; }
.site-header__inner{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px;
  height:122px; /* logo 34 + 44/44 padding; the lang pill overflows the row like the export */
}
.logo img{ width:60px; height:34px; }
.expertise-nav{
  justify-self:center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 22px;
  font-family:var(--ff-lang); font-weight:700; font-size:14px; line-height:1; color:var(--ink);
}
.expertise-nav__link{
  padding:10px 12px; border-radius:14px;
  transition:background-color .15s,color .15s,box-shadow .15s,transform .15s;
}
.expertise-nav__link:hover,
.expertise-nav__link:focus-visible{
  background:var(--amber-soft); color:var(--stone); box-shadow:inset 0 -2px 0 var(--amber); outline:0;
}
.expertise-nav__link:active{ transform:translateY(1px); }
.lang{
  display:flex; align-items:center; gap:4px;
  padding:8px 12px; border-radius:20px;
  background:rgba(238,240,250,.2);
}
.lang__opt{
  padding: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:var(--amber-soft); color:var(--stone); }

/* ---------- hero (cream band + sparkle canvas) ---------- */
.hero{ position:relative; background:var(--cream); overflow:hidden; }
.hero__canvas{
  position:absolute; top:11px; left:50%;
  width:1176px; max-width:none; transform:translateX(-50%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-block:48px 44px;
}
.hero__title{
  max-width:990px;
  font-family:var(--ff-display); font-weight:600;
  font-size:60px; line-height:.9; letter-spacing:-1.8px; color:var(--ink);
  font-variant-ligatures:common-ligatures;
  font-feature-settings:"liga" 1, "clig" 1;
}
.hero__lead{
  margin-top:24px;
  font-size:32px; line-height:1; letter-spacing:-.54px; color:var(--stone);
}
.hero__text{
  margin-top:24px; max-width:820px;
  display:flex; flex-direction:column; gap:12px;
  font-size:15px; line-height:1.55; color:var(--stone);
}
.hero .btn{ margin-top:32px; }

/* ---------- "what we build" (paper band, 9 cards) ---------- */
.build{ background:var(--paper); padding-block:80px 56px; }
.build .section__title{ text-align:center; }
.build .grid-3{ margin-top:40px; }
.card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; min-height:141px; padding:28px 24px;
  border-radius:var(--radius); background:#fff;
}
.card img{ width:48px; height:48px; }
.build__note{
  margin-top:40px; text-align:center;
  font-size:15px; color:var(--stone);
}

/* ---------- dark band (achievements chips) ---------- */
.achieve{ background:var(--ink); padding-block:80px; color:#fffdf7; }
.achieve__title{
  text-align:center;
  font-family:var(--ff-body); font-weight:500;
  font-size:32px; line-height:1; color:#fffdf7;
}
.achieve__title::before{
  content:""; display:block;
  width:48px; height:3px; margin:0 auto 18px;
  border-radius:2px; background:var(--amber);
}
.achieve__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  margin-top:30px; max-width:1025px; margin-inline:auto;
}
.achieve__chip{
  display:flex; align-items:center; gap:16px;
  padding:28px 24px; border-radius:var(--radius);
  background:var(--dark-card);
  font-family:var(--ff-label); font-weight:600; font-size:16px; line-height:1.4;
  color:#fffdf7;
}
.achieve__chip{ max-width:300px; min-height:133px; }
.achieve__chip img{ width:44px; height:44px; flex:none; }

/* ---------- approach (eyebrow + 3 step cards + callout) ---------- */
.approach{ padding-block:80px 0; }
.approach__head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
}
.approach__sub{
  max-width:760px;
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.5; color:var(--stone);
}
.approach .grid-3{ margin-top:36px; gap:32px; }
.step{
  padding:32px;
  border-radius:var(--radius); background:var(--cream);
}
.step__top{ display:flex; align-items:center; justify-content:space-between; }
.step__top img{ width:48px; height:48px; }
.step__num{
  font-family:var(--ff-label); font-weight:600; font-size:14px; color:var(--muted);
}
.step__title{
  margin-top:22px;
  font-family:var(--ff-display-b); font-weight:700;
  font-size:22px; line-height:1.3; color:var(--ink);
}
.step p{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--stone); }
.callout{
  display:flex; align-items:center; gap:16px;
  margin-top:48px; padding:32px 40px;
  border-radius:var(--radius); background:var(--callout);
}
.callout img{ width:32px; height:32px; flex:none; }
.callout p{
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.45; color:var(--ink);
}

/* ---------- selected projects (teaser cards) ---------- */
.projects{ padding-block:140px 0; }
.projects__head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
}
.teaser{
  display:grid; grid-template-columns:513px 1fr; align-items:center;
  margin-top:40px;
  border-radius:var(--radius-lg); background:#fff; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
}
.teaser--flip{ grid-template-columns:1fr 513px; }
.teaser__media{ position:relative; align-self:stretch; min-height:430px; }
.teaser__media picture{ position:absolute; inset:0; display:block; }
.teaser__media img{ width:100%; height:100%; object-fit:cover; }
.teaser--flip .teaser__media{ order:2; }
.teaser__body{ padding:48px; }
.teaser__body .eyebrow{ display:block; margin-bottom:12px; }
.teaser__title{
  font-family:var(--ff-display-b); font-weight:700;
  font-size:22px; line-height:1.3; color:var(--ink);
}
.teaser__body > p{ margin-top:14px; font-size:15px; line-height:1.55; color:var(--stone); }
.teaser__metrics{ display:flex; gap:56px; margin-top:28px; }
.metric__num{
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1; letter-spacing:-1.6px; color:var(--amber);
}
.metric__label{
  margin-top:6px;
  font-family:var(--ff-label); font-weight:600; font-size:16px; color:var(--muted);
}
.btn--look{ margin-top:28px; padding:14px 64px; border-radius:var(--radius-lg); }

/* ---------- dark CTA band + footer ---------- */
.cta-dark{
  position:relative; overflow:hidden;
  margin-top:100px;
  background:var(--ink); color:#fffdf7;
  padding-block:96px 0;
}
.cta-dark__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cta-dark__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1.25; letter-spacing:-1.6px; color:#fffdf7;
}
.cta-dark__sub{ margin-top:18px; font-size:15px; color:var(--muted); }
.cta-dark .btn{ margin-top:32px; color:var(--ink); }
.cta-dark .btn .btn__arrow{ color:var(--ink); }
.spark{ position:absolute; pointer-events:none; }
.footer__inner{ padding-block:126px 28px; }
.footer__inner p{
  font-family:var(--ff-note); font-weight:400;
  font-size:13px; color:var(--muted-2);
}

/* ============================================================
   case pages (mcdonalds, krasny_yar) — values probed from the
   export's desktop tree at 1280 (see scratchpad probes)
   ============================================================ */
.kicker{
  font-family:var(--ff-label); font-weight:600;
  font-size:14px; line-height:1.4; letter-spacing:-.35px;
  text-transform:uppercase; color:var(--amber);
}
.kicker--sparse{
  font-family:var(--ff-note-b); font-weight:600;
  line-height:1.2; letter-spacing:2px;
}
.container--wide{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:60px;
}
.container--game{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:80px;
}

/* generic case section band */
.cs{ padding-block:80px; }
.cs--paper{ background:var(--paper); }
.cs--cream{ background:var(--cream); }
.cs--dark{ background:var(--ink); color:#fffdf7; }
.cs__head{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.cs__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1.05; color:var(--ink);
}
.cs--dark .cs__title{ color:#fffdf7; }
.cs__title--snug{ line-height:1; letter-spacing:-1.6px; }
.kicker + .cs__title{ margin-top:16px; }

/* dark case hero */
.case-hero{
  background:var(--ink); color:#fffdf7;
  padding-block:80px; text-align:center;
}
.case-hero__title{
  margin-top:32px;
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1.05; color:#fffdf7;
}
.case-hero__title--snug{ line-height:1; letter-spacing:-1.6px; }
.case-hero__client{ display:block; margin-top:32px; }
.case-hero__intro{
  max-width:860px; margin:32px auto 0;
  font-size:15px; line-height:21px; color:#fffdf7;
}
.case-shot{ margin-top:32px; }
.case-shot img{ width:100%; height:auto; border-radius:16px; }
.case-media{ width:min(600px,100%); aspect-ratio:600/540; margin:32px auto 0; }
.case-media img{ width:100%; height:100%; object-fit:contain; }

/* objective — mcdonalds numbered goals */
.lede{
  margin-top:40px; text-align:center;
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.2; color:var(--stone);
}
.numgrid{
  max-width:792px; margin:48px auto 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.numgrid li{ background:var(--callout); border-radius:12px; padding:24px 32px; }
.numgrid__num{
  font-family:var(--ff-display-b); font-weight:700;
  font-size:40px; line-height:1.33; color:var(--ink);
}
.numgrid p:not(.numgrid__num){
  margin-top:16px;
  font-family:var(--ff-note); font-weight:400;
  font-size:16px; line-height:1.6; color:var(--ink);
}
.note-display{
  margin-top:48px; text-align:center;
  font-family:var(--ff-display-b); font-weight:700;
  font-size:22px; line-height:1.32; color:var(--muted);
}

/* objective — krasny yar goal chips */
.goals{
  margin-top:44px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
}
.goal{
  width:331px; padding:25px 28px;
  border-radius:var(--radius); background:var(--cream);
  display:flex; align-items:center; gap:16px;
  font-size:15px; line-height:21px; color:var(--ink);
}
.goal img{ width:40px; height:40px; flex:none; }
.note-plain{
  max-width:700px; margin:40px auto 0; text-align:center;
  font-size:15px; line-height:21px; color:var(--stone);
}

/* solution copy + phone screenshots (mcdonalds) */
.cs__copy{
  max-width:800px; margin:24px auto 0; text-align:center;
  font-size:15px; line-height:21px; color:var(--stone);
}
.cs__copy p + p{ margin-top:21px; }
.phones{
  max-width:969px; margin:60px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  align-items:start;
}
.phone{ background:#fff; border-radius:20px; padding:8px; }
.phone img{ width:100%; height:auto; border-radius:14px; }

/* solution timeline (krasny yar) */
.tl{ max-width:792px; margin:80px auto 0; }
.tl__item{ display:grid; grid-template-columns:48px 1fr; column-gap:40px; }
.tl__item + .tl__item{ margin-top:64px; }
.tl__badge{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--amber);
  font-family:var(--ff-label); font-weight:600; font-size:14px; color:var(--ink);
}
.tl__title{
  font-family:var(--ff-display-b); font-weight:700;
  font-size:22px; line-height:1.32; color:var(--ink);
}
.tl__body{ margin-top:14px; font-size:15px; line-height:21px; color:var(--stone); }

/* "what we delivered" cards */
.dlv{ margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dlv__card{ background:#fff; border-radius:16px; padding:24px; }
.dlv__card img{ width:48px; height:48px; }
.dlv--plain .dlv__card img{ width:44px; height:44px; }
.dlv__name{
  margin-top:20px;
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.2; color:var(--ink);
}
.dlv__text{ margin-top:20px; font-size:15px; line-height:21px; color:var(--stone); }
.dlv--plain .dlv__text{ margin-top:16px; color:var(--ink); }

/* interactive demo (mcdonalds) */
.demo__title{ margin-top:40px; }
.demo__sub{
  margin-top:40px; text-align:center;
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.2; color:var(--muted);
}
.demo__frame{ margin-top:40px; }
.demo__frame iframe{
  display:block; width:100%; height:1055px;
  border:0; border-radius:15px;
}
.demo__hints{
  margin-top:40px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px 40px;
}
.hint{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-note); font-weight:400;
  font-size:14px; color:var(--muted);
}
.hint img{ width:18px; height:18px; flex:none; }

/* game examples (krasny yar) */
.games__title{
  margin-top:48px; text-align:center;
  font-family:var(--ff-display-b); font-weight:700;
  font-size:36px; line-height:1.3; color:#fffdf7;
}
.games__sub{
  max-width:700px; margin:48px auto 0; text-align:center;
  font-family:var(--ff-note); font-weight:400;
  font-size:16px; line-height:1.6; color:var(--muted);
}
.game-row{
  margin-top:24px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:48px;
}
.game{ width:280px; text-align:center; }
.game-row--wide{ --gh:533px; }
.game-row--wide .game{ width:300px; }
.game__media{
  height:var(--gh,498px);
  display:flex; align-items:flex-end; justify-content:center;
}
.game__media img{ border-radius:16px; }
.game__title{
  margin-top:16px;
  font-family:var(--ff-display-b); font-weight:700;
  font-size:22px; line-height:1.32; color:#fffdf7;
}
.game__text{
  max-width:280px; margin:20px auto 0;
  font-size:15px; line-height:21px; color:var(--muted);
}

/* business impact metric cards (krasny yar) */
.display-xl{
  font-family:var(--ff-display); font-weight:600;
  font-size:60px; line-height:54px; letter-spacing:-1.8px; color:var(--ink);
}
.kicker + .display-xl{ margin-top:16px; }
.impact__lede{
  max-width:900px; margin:40px auto 0; text-align:center;
  font-size:15px; line-height:21px; color:var(--ink);
}
.icards{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.icard{ background:var(--paper); border-radius:16px; padding:32px 48px 48px; }
.icard--wide{ grid-column:1 / -1; }
.icard > img{ width:44px; height:44px; }
.icard__num{
  margin-top:14px;
  font-family:var(--ff-display); font-weight:600;
  font-size:60px; line-height:54px; letter-spacing:-1.8px; color:#0f172a;
}
.icard__num::after{
  content:""; display:block; width:36px; height:4px; margin-top:14px;
  border-radius:2px; background:var(--amber);
}
.icard__label{
  margin-top:13px;
  font-family:var(--ff-label); font-weight:600;
  font-size:14px; line-height:1.4; letter-spacing:-.35px; text-transform:uppercase;
  color:#475569;
}
.icard__text{ margin-top:14px; font-size:15px; line-height:21px; color:#0f172a; }
.impact__note{
  max-width:900px; margin:40px auto 0; text-align:center;
  font-size:15px; line-height:21px; color:var(--ink);
}

/* result band */
.result{ padding-block:80px; }
.cs__title--rule::before{
  content:""; display:block;
  width:48px; height:4px; margin:0 auto 32px;
  border-radius:2px; background:var(--amber);
}
.result__lede{
  max-width:800px; margin:40px auto 0; text-align:center;
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.2; color:#fffdf7;
}
.result__lede + .result__lede{ margin-top:19px; }
.result__copy{ max-width:800px; margin-inline:auto; text-align:center; }
.result__copy p{ margin-top:28px; font-size:15px; line-height:21px; color:#fffdf7; }
.result__grid{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left;
}
.result__grid > div{
  background:var(--dark-card); border-radius:var(--radius);
  padding:28px 24px;
}
.result__grid > div::before{
  content:""; display:block;
  width:30px; height:3px; margin-bottom:8px;
  border-radius:2px; background:var(--amber);
}
.result__grid h3{
  font-family:var(--ff-label); font-weight:600;
  font-size:16px; line-height:1.2; color:#fffdf7;
}
.result__grid p{ margin-top:8px; font-size:15px; line-height:21px; color:var(--muted); }

/* light CTA + white footer strip (case pages) */
.cta-lite{ background:var(--cream); padding-block:80px; text-align:center; }
.cta-lite__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:40px; line-height:1.05; color:var(--ink);
}
.cta-lite p{ margin-top:32px; font-size:15px; line-height:21px; color:var(--stone); }
.cta-lite .btn{ margin-top:32px; }
.foot-lite{ background:var(--ink); }
.foot-lite__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:32px 28px;
}
.foot-lite__copy{ font-family:var(--ff-note); font-weight:400; font-size:13px; color:var(--muted-2); }
.back-home{
  font-family:var(--ff-back); font-weight:400;
  font-size:14px; line-height:21px; color:var(--amber);
}

/* ============================================================
   Survey — self-contained modal form; slate text palette with
   the loyalty amber accent (probed from the export at 1460)
   ============================================================ */
.survey{
  --s-ink:#0f172a; --s-muted:#64748b; --s-accent:#f59e0b; --s-accent-d:#d97706;
  --s-chip:#fef4d0; --s-field:#fdfdfc; --s-line:#e2e8f0; --s-opt:#37404c;
  min-height:100vh; padding:60px 20px;
  background:rgba(15,23,42,.4);
}
.survey__card{
  position:relative; max-width:1024px; margin-inline:auto;
  background:#fff; border-radius:16px; padding:32px 40px 40px; color:var(--s-ink);
}
.survey__close{
  position:absolute; top:32px; right:40px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--s-chip); color:#a16207;
  font-size:18px; line-height:1;
}
.survey__close:hover{ background:#fdeeb8; }
.survey__title{
  max-width:90%;
  font-family:var(--ff-note-b); font-weight:600;
  font-size:36px; line-height:1.3; color:#000;
}
.survey__sub{
  margin-top:44px;
  font-family:var(--ff-back); font-weight:400;
  font-size:16px; line-height:1.45; color:#475569;
}
.survey__form{ display:flex; flex-direction:column; gap:36px; margin-top:56px; }

.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-accent); color:#fff;
  font-family:var(--ff-arrow); font-weight:600; font-size:18px;
}
.q__title{
  padding:0;
  font-family:var(--ff-note-b); font-weight:600;
  font-size:16px; line-height:1.3; color:#000;
}
.q__sub{
  margin:0 0 14px;
  font-family:var(--ff-back); font-weight:400;
  font-size:16px; line-height:1.45; color:#475569;
}
.q__body{ padding-left:0; }
.q__grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; row-gap:16px; }
.q__grid .field + .field{ margin-top:0; }
.q__grid + .field{ margin-top:16px; }

/* chips (multi-select) */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:inline-flex; align-items:center; padding:10px 22px;
  border-radius:6px; background:var(--s-chip); color:#6f6f6f;
  font-family:var(--ff-back); font-size:16px; line-height:1.35;
  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-accent); color:#fff; }
.chip:focus-within{ outline:2px solid var(--s-accent); outline-offset:2px; }

/* radios (single-select) */
.radios{ display:flex; flex-direction:column; gap:20px; }
.radio{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  font-family:var(--ff-back); font-size:16px; line-height:1.35; 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-accent); transition:transform .12s;
}
.radio input:checked{ border-color:var(--s-accent); }
.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-back); font-size:14px; color:#454343; }
.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-back); font-size:16px; line-height:1.4; 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-accent); }

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

/* ============================================================
   breakpoints — one responsive layout instead of three trees
   ============================================================ */
@media (max-width:980px){
  :root{ --gutter:48px; }
  .expertise-nav{ flex-direction:column; align-items:flex-start; gap:8px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .hero__title{ font-size:44px; }
  .hero__lead{ font-size:24px; }
  .teaser,.teaser--flip{ grid-template-columns:1fr; }
  .teaser--flip .teaser__media{ order:0; }
  .teaser__media img{ max-height:360px; }
  .hero__canvas{ display:none; }
  .container--wide,.container--game{ padding-inline:48px; }
  .numgrid{ max-width:none; gap:40px; }
  .dlv{ grid-template-columns:repeat(2,1fr); }
  .icards{ grid-template-columns:1fr; }
  .icard--wide{ grid-column:auto; }
  .result__grid{ grid-template-columns:1fr; gap:32px; }
  .demo__frame iframe{ height:820px; }
}
@media (max-width:640px){
  :root{ --gutter:24px; }
  .site-header__inner{ grid-template-columns:auto 1fr; align-items:start; gap:18px 12px; height:auto; 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-3{ grid-template-columns:1fr; }
  .hero__inner{ padding-block:40px 48px; }
  .hero__title{ font-size:30px; }
  .hero__lead{ margin-top:16px; font-size:19px; }
  .hero__text{ margin-top:16px; font-size:14px; }
  .section__title{ font-size:28px; }
  .achieve__title{ font-size:22px; }
  .achieve__chip{ width:100%; padding:20px; font-size:14px; }
  .build,.achieve{ padding-block:56px 64px; }
  .approach{ padding-block:64px 0; }
  .projects{ padding-block:72px 0; }
  .step{ padding:24px; }
  .callout{ padding:24px 20px; }
  .callout p{ font-size:14px; }
  .teaser__body{ padding:28px 24px; }
  .teaser__metrics{ gap:32px; }
  .metric__num{ font-size:32px; }
  .btn--look{ width:100%; padding:14px 32px; }
  .cta-dark{ margin-top:72px; padding-block:64px 0; }
  .cta-dark__title{ font-size:24px; }
  .btn{ font-size:15px; }
  .footer__inner{ padding-block:64px 24px; }
  .container--wide,.container--game{ padding-inline:24px; }
  .cs,.case-hero,.cta-lite{ padding-block:56px; }
  .result{ padding-block:72px 56px; }
  .case-hero__title,.cs__title,.cta-lite__title{ font-size:28px; }
  .display-xl{ font-size:40px; line-height:1; }
  .icard__num{ font-size:40px; line-height:1; }
  .icard{ padding:24px 24px 32px; }
  .numgrid{ grid-template-columns:1fr; }
  .numgrid__num{ font-size:32px; }
  .note-display{ margin-top:48px; font-size:18px; }
  .goal{ width:100%; max-width:360px; }
  .phones{ grid-template-columns:1fr; max-width:340px; }
  .tl{ margin-top:48px; }
  .tl__item{ grid-template-columns:40px 1fr; column-gap:20px; }
  .tl__item + .tl__item{ margin-top:40px; }
  .tl__badge{ width:40px; height:40px; }
  .dlv{ grid-template-columns:1fr; }
  .games__title{ font-size:26px; }
  .games__sub{ margin-top:32px; }
  .game{ width:100%; max-width:300px; }
  .game__media{ height:auto; }
  .game__media img{ width:100%; height:auto; }
  .demo__frame iframe{ height:560px; }
  .foot-lite__inner{ flex-direction:column-reverse; align-items:flex-start; gap:12px; }
  .survey{ padding:0; }
  .survey__card{ border-radius:0; padding:24px 20px 32px; min-height:100vh; }
  .survey__close{ top:20px; right:20px; }
  .survey__title{ font-size:26px; }
  .survey__sub{ margin-top:20px; }
  .survey__form{ margin-top:32px; }
  .q__grid{ grid-template-columns:1fr; }
}

/* ---------- contact request form replacement ---------- */
.survey--contact {
  --contact-bg: #fdfaf3;
  --contact-card: #fff;
  --contact-line: #fde0a8;
  --contact-accent: #f59e0b;
  --contact-accent-hover: #d97706;
  --contact-ink: #1c1917;
  --contact-muted: #78716c;
  --contact-field: #fffdf8;
  --contact-field-line: #eadfce;
  --contact-button-fg: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
  background: var(--contact-bg);
  color: var(--contact-ink);
  cursor: pointer;
}
.survey--contact::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("/_assets/contact-form-bg-desktop.svg") center center / 1152px 350px no-repeat;
}
.survey--contact .survey__card {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  min-height: 0;
  padding: 44px;
  border: 1px solid var(--contact-line);
  border-top: 3px solid var(--contact-accent);
  border-radius: 16px;
  background: var(--contact-card);
  color: var(--contact-ink);
  box-shadow: 0 28px 70px rgba(120, 80, 20, .14);
  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-note-b);
  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-label);
  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-label);
  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: #fff8eb;
  color: var(--contact-accent);
  font-size: 30px;
  cursor: pointer;
}
.survey--contact .survey__thanks-title {
  margin: 0;
  font-family: var(--ff-note-b);
  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: 1199px) {
  .survey--contact::before {
    background-image: url("/_assets/contact-form-bg-tablet.svg");
    background-size: 736px 725px;
  }
}
@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; }
}