:root{
  --sky:#A9D3EA; --sky-soft:#DDEEF7; --paper:#FBF9F4; --panel:#FFFFFF;
  --wood:#C68A4B; --wood-deep:#8A5A2E; --wood-light:#E3B683;
  --fern:#4E7C4A; --fern-soft:#6FA05F;
  --red:#E8574B; --amber:#F2B93B; --blue:#3E7BC0; --green:#4E9159;
  --ink:#26333B; --ink-soft:#55666F; --cream:#F2EEE4; --line:#D9E4EA;
  --pop:6px 7px 0 rgba(38,51,59,.16);
  --pop-hard:4px 5px 0 var(--wood-deep);
}
@media (prefers-color-scheme: dark){
  :root{
    --sky:#7FB5D6; --sky-soft:#1D3A4E; --paper:#14212B; --panel:#1E3040;
    --wood:#D49B5E; --wood-deep:#E3B683; --wood-light:#8A5A2E;
    --fern:#7FB379; --fern-soft:#6FA05F;
    --ink:#EAF1F6; --ink-soft:#A3B7C2; --cream:#233642; --line:#31485A;
    --pop:6px 7px 0 rgba(0,0,0,.45);
    --pop-hard:4px 5px 0 #0E1820;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;}

h1,h2,h3{font-weight:900;letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.12}
a{color:var(--fern)}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

header.site{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:5}
.bar{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:var(--ink);text-decoration:none}
.logo b{color:var(--fern)}
.bar .spacer{flex:1}
.tel{color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap;font-weight:600}
.tel:hover{color:var(--wood-deep)}
.langsel{position:relative}
.langsel summary{list-style:none;display:flex;align-items:center;gap:8px;
  border:2px solid var(--ink);border-radius:999px;padding:6px 14px;
  font-size:14px;font-weight:700;cursor:pointer;color:var(--ink);user-select:none}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary .chev{font-size:11px}
.langsel[open] summary{background:var(--ink);color:var(--paper)}
.langsel ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;
  list-style:none;background:var(--panel);border:2px solid var(--ink);border-radius:14px;
  box-shadow:var(--pop);min-width:180px;z-index:30}
.langsel li a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:14px}
.langsel li a:hover{background:var(--sky-soft)}
.langsel li a.on{color:var(--fern)}
.langsel li.soon{padding:8px 12px;color:var(--ink-soft);font-size:14px;font-weight:600}
.langsel li.soon em{font-style:normal;font-size:11px;background:var(--cream);
  border-radius:999px;padding:2px 8px;margin-left:6px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px}

/* HERO */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-soft) 0%,var(--paper) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle 3px, var(--red) 98%, transparent),
    radial-gradient(circle 2.5px, var(--amber) 98%, transparent),
    radial-gradient(circle 3px, var(--blue) 98%, transparent),
    radial-gradient(circle 2.5px, var(--green) 98%, transparent);
  background-size:230px 190px,270px 210px,310px 230px,250px 170px;
  background-position:20px 30px,90px 120px,160px 60px,60px 170px;}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-top:64px;padding-bottom:72px}
.hero .wrap.thanks{grid-template-columns:1fr;min-height:40vh}
.loc-pill{display:inline-block;background:var(--panel);border:2px solid var(--ink);border-radius:999px;
  padding:7px 16px;font-size:14px;font-weight:700;box-shadow:var(--pop);margin-bottom:20px}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.hero p.lead{font-size:19px;color:var(--ink-soft);margin:22px 0 30px;max-width:32em}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:999px;padding:15px 28px;font-size:17px;font-weight:800;
  text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease}
.btn:hover{transform:translateY(-2px) rotate(-.5deg)}
.btn.primary{background:var(--red);color:#fff;box-shadow:var(--pop)}
.btn.wa{background:var(--green);color:#fff;box-shadow:var(--pop)}
.photo-stack{position:relative}
.snap{background:var(--panel);border-radius:18px;padding:12px 12px 14px;box-shadow:var(--pop);
  transform:rotate(2deg);margin:0}
.snap.tilt-left{transform:rotate(-2deg)}
.snap img{border-radius:10px}
.snap figcaption{font-size:13.5px;color:var(--ink-soft);padding-top:10px;text-align:center;font-weight:600}
.sticker{position:absolute;z-index:2;background:var(--amber);color:#26333B;font-weight:900;font-size:15px;
  padding:10px 18px;border-radius:999px;border:2.5px solid #26333B;box-shadow:var(--pop-hard);
  transform:rotate(-7deg);top:-16px;left:-14px}

/* ticker */
.ticker{background:linear-gradient(180deg,var(--wood-light) 0%,var(--wood) 55%,var(--wood-deep) 100%);
  overflow:hidden;padding:12px 0;border-top:3px solid var(--wood-deep);border-bottom:3px solid var(--wood-deep)}
.ticker .track{display:inline-flex;white-space:nowrap;animation:tick 26s linear infinite;will-change:transform}
.ticker span.item{color:#fff;font-weight:800;font-size:16px;padding:0 8px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
@keyframes tick{to{transform:translateX(-50%)}}

section{padding:70px 0}
.kicker{display:inline-block;background:var(--ink);color:var(--paper);border-radius:999px;
  padding:6px 16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.sub{color:var(--ink-soft);font-size:17px;max-width:44em;margin:0 0 30px}

/* services tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{border-radius:20px;padding:24px;color:#26333B;box-shadow:var(--pop);border:2.5px solid #26333B}
.tile:nth-child(odd){transform:rotate(-.8deg)}
.tile:nth-child(even){transform:rotate(.8deg)}
.tile h3{font-size:19px;margin-bottom:8px}
.tile p{margin:0;font-size:14.5px;line-height:1.5}
.tile.blue{background:#BBD8F2}.tile.amber{background:#F8DE9C}.tile.green{background:#C4E3C0}
.tile.red{background:#F6C3BE}.tile.cream{background:#F2EEE4}.tile.sky{background:#C9E6F6}
.tile img.tphoto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:2px solid #26333B;margin-bottom:14px}

/* toys band */
.toysband{position:relative;border-top:3px solid #26333B;border-bottom:3px solid #26333B}
.toysband img{width:100%;height:280px;object-fit:cover;display:block}
.toysband .sticker{top:22px;left:50%;transform:translateX(-50%) rotate(-3deg);position:absolute}

/* who we help + signs */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.helplist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.helplist li{background:var(--panel);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;box-shadow:var(--pop)}
.helplist b{display:block;font-size:17px}
.helplist span.d{color:var(--ink-soft);font-size:14.5px}
.signs{background:var(--amber);border:2.5px solid #26333B;border-radius:22px;padding:28px;color:#26333B;
  box-shadow:var(--pop-hard);transform:rotate(.6deg)}
.signs h3{font-size:22px;margin-bottom:14px}
.signs ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.signs li{padding-left:30px;position:relative;font-weight:600;font-size:15.5px}
.signs li::before{content:"✔";position:absolute;left:0;top:0;font-weight:900;color:#8A5A2E}
.signs .fine{font-size:12.5px;opacity:.75;margin:12px 0 0}
.signs .btn{background:#26333B;color:#F8DE9C;font-size:15px;padding:12px 22px}

/* steps as blocks */
.stepsflex{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.blockrow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end;margin-top:10px}
.block{border-radius:20px;padding:24px;border:2.5px solid #26333B;color:#26333B;box-shadow:var(--pop-hard)}
.block .n{font-size:44px;font-weight:900;line-height:1}
.block h3{font-size:19px;margin:8px 0 8px}
.block p{margin:0;font-size:14.5px}
.block.b1{background:#F6C3BE;min-height:210px;transform:rotate(-1deg)}
.block.b2{background:#F8DE9C;min-height:240px;transform:rotate(.6deg)}
.block.b3{background:#BBD8F2;min-height:270px;transform:rotate(-.6deg)}

/* instagram cards */
.ig{background:var(--sky-soft)}
.igrow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0}
.igcard{display:block;text-decoration:none;border-radius:20px;padding:18px 18px 22px;
  border:2.5px solid #26333B;color:#26333B;font-weight:900;font-size:18px;line-height:1.3;
  box-shadow:var(--pop-hard);transition:transform .12s ease}
.igcard:hover{transform:translateY(-4px) rotate(-1deg)}
.igcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:2px solid #26333B;margin-bottom:14px}
.igcard.c1{background:#BBD8F2;transform:rotate(-1deg)}
.igcard.c2{background:#F8DE9C;transform:rotate(.8deg)}
.igcard.c3{background:#C4E3C0;transform:rotate(-.5deg)}

/* contacts */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.card{background:var(--panel);border:2px solid var(--ink);border-radius:20px;padding:24px;box-shadow:var(--pop)}
.card.wide{grid-column:1/-1}
.card h3{font-size:20px;margin-bottom:4px}
.card .role{color:var(--ink-soft);font-size:14px;margin:0 0 14px}
.card .num{font-size:19px;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;font-weight:800}
.card .row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.chip{display:inline-block;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;text-decoration:none}
.chip.wa{background:var(--green);color:#fff;box-shadow:var(--pop)}
.chip.call{border:2px solid var(--ink);color:var(--ink)}
.chip.call:hover{background:var(--ink);color:var(--paper)}
address{font-style:normal;line-height:1.7}
.maps{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.note{font-size:13px;color:var(--ink-soft)}

/* form */
.formsec{background:var(--cream)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:14px;font-weight:700;color:var(--ink-soft)}
input,textarea{background:var(--panel);border:2px solid var(--ink);border-radius:14px;
  padding:13px 15px;font:inherit;color:var(--ink);width:100%}
textarea{min-height:96px;resize:vertical}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ornament divider (Kyrgyz kochkor / ram's-horn motif) */
.ornament{display:block;width:100%;height:26px;background:var(--cream)}

.wainscot{height:14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 47px),
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 45%, var(--wood-deep) 100%);}
.speckle{height:26px;background-color:var(--sky);
  background-image:
    radial-gradient(circle 2.2px, #E8574B 98%, transparent),
    radial-gradient(circle 1.8px, #F2B93B 98%, transparent),
    radial-gradient(circle 2.0px, #3E7BC0 98%, transparent),
    radial-gradient(circle 1.8px, #4E9159 98%, transparent),
    radial-gradient(circle 1.6px, #FFFFFF 98%, transparent),
    radial-gradient(circle 2.0px, #8A5A2E 98%, transparent);
  background-size:97px 26px,83px 26px,71px 26px,89px 26px,61px 26px,103px 26px;
  background-position:7px 5px,31px 17px,53px 9px,79px 20px,15px 21px,63px 3px;}

footer.site{background:var(--sky-soft);padding:36px 0;font-size:14px;color:var(--ink-soft)}
footer .wrap{display:grid;gap:8px}
footer a{color:var(--fern);font-weight:700}

@media (max-width:820px){
  .hero .wrap,.duo,.stepsflex,.contact-grid,form,.tiles,.igrow,.blockrow{grid-template-columns:1fr}
  .hero .wrap{padding-top:40px;padding-bottom:46px;gap:32px}
  section{padding:48px 0}
  .bar{flex-wrap:wrap}
  .block.b1,.block.b2,.block.b3{min-height:0}
  /* on phones, anchor the menu to the header bar so it can never leave the screen */
  .langsel{position:static}
  .langsel ul{left:20px;right:auto;width:max-content;min-width:200px;max-width:calc(100vw - 40px)}
}
@media (prefers-reduced-motion:reduce){
  .ticker .track{animation:none}
  .btn,.igcard{transition:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap>*{animation:rise .55s ease both}
  .hero .wrap>*:nth-child(2){animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}