/* YFCH, design 1B "Warm community". Tokens frozen from demo/yfch/1b.html. */
:root{
  --bg:#FAF8F3; --ink:#2b2b2b; --muted:#5c574d; --soft:#8a857b;
  --card:#fff; --line:#eee9df; --line2:#e6e0d3;
  --cyan:#45D6DC; --cyan-ink:#17393b; --cyan-soft:#DFF6F7;
  --pink:#EE6FB0; --yellow:#F5D664; --teal:#0e9aa6;
  --ph-bg:#F1EDE2; --ph-line:#CCC5B4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 'Albert Sans',system-ui,sans-serif}
h1,h2,h3{font-family:'Familjen Grotesk',sans-serif;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--teal)}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:760px){.wrap{padding:0 48px}}

/* header */
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.site-head img{height:38px;display:block}
.nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--teal)}
.nav a.cta{background:var(--cyan);color:var(--cyan-ink);padding:10px 20px;border-radius:99px;font-weight:700}
.nav a.cta:hover{background:#5FDDE2}
.nav a[aria-current="page"]{color:var(--teal);font-weight:700}
@media(max-width:640px){
  .site-head .wrap{flex-wrap:wrap;justify-content:center}
  .nav{gap:14px;font-size:14px;flex-wrap:wrap;justify-content:center}
  .nav a.cta{padding:8px 16px}
}

/* buttons */
.btn{display:inline-block;text-decoration:none;border-radius:99px;
  font:700 15px 'Albert Sans',sans-serif;padding:14px 26px}
.btn:hover{opacity:.92}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{color:var(--ink);border:2px solid #e3ddd0;padding:12px 24px}
.btn-line:hover{border-color:var(--ink);opacity:1}
.btn-deep{background:var(--cyan-ink);color:#fff}

/* hero */
.hero{display:grid;gap:36px;padding:44px 0 52px;align-items:center}
@media(min-width:860px){.hero{grid-template-columns:1.05fr 1fr;gap:48px;padding:64px 0}}
.hero h1{font-size:clamp(30px,4.6vw,46px);font-weight:700;margin-bottom:20px;text-wrap:pretty}
.hero p{font-size:17px;color:var(--muted);max-width:480px;margin-bottom:28px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art .dot-a{position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;background:var(--pink)}
.hero-art .dot-b{position:absolute;right:-8px;bottom:34px;width:20px;height:20px;border-radius:50%;background:var(--yellow)}

/* photo placeholder (visible gap by design: no photo yet) */
.ph{background:var(--ph-bg);border:1.5px dashed var(--ph-line);border-radius:24px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--soft);font:500 13px/1.5 'Albert Sans',sans-serif;padding:12px}

/* cards */
.cards3{display:grid;gap:20px;padding-bottom:56px}
@media(min-width:760px){.cards3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border-radius:20px;padding:28px}
.card .dot{width:12px;height:12px;border-radius:50%;margin-bottom:14px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted)}

/* open call panel */
.call-panel{background:var(--cyan-soft);border-radius:24px;padding:32px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
@media(min-width:760px){.call-panel{padding:40px 44px}}
.call-panel h2{font-size:28px;margin-bottom:8px}
.call-panel p{font-size:15px;color:#33555a;max-width:560px}
.call-tag{display:inline-block;background:#fff;border-radius:99px;padding:5px 14px;
  font:700 12px 'Albert Sans',sans-serif;color:var(--teal);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:12px}

/* section headings */
.section{padding:56px 0 8px}
.section>h2{font-size:30px;margin-bottom:24px}
.section-foot{padding:20px 0 0;font-size:15px}

/* project rows */
.proj-list{display:flex;flex-direction:column;gap:16px}
.proj{background:var(--card);border-radius:20px;padding:22px 24px;display:grid;gap:16px;align-items:center}
@media(min-width:760px){.proj{grid-template-columns:200px 1fr auto;gap:24px;padding:22px 28px}}
.proj .ph{height:110px;border-radius:12px;font-size:11px}
.proj h3{font-size:20px}
.proj .meta{font-size:14px;color:var(--muted);margin-top:4px}
.proj .date{font:600 14px 'Albert Sans',sans-serif;color:var(--teal);white-space:nowrap}
.proj.compact{grid-template-columns:1fr auto}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center}
@media(min-width:760px){.team{grid-template-columns:repeat(4,1fr)}}
.team .face,.team img{width:150px;height:150px;margin:0 auto;border-radius:50%;object-fit:cover;display:block}
.team .face{font-size:11px}
.team .name{font:700 16px 'Familjen Grotesk',sans-serif;margin-top:14px}
.team .role{font-size:13px;color:var(--soft)}

/* partners */
.partners{padding:52px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.partners .label{font:600 14px 'Albert Sans',sans-serif;color:var(--soft);margin-right:6px}
.partners .pill{background:var(--card);border-radius:99px;padding:9px 18px;font:600 14px 'Albert Sans',sans-serif}
.partners .more{font-size:13px;color:var(--soft)}

/* footer */
.site-foot{border-top:1px solid var(--line2);margin-top:44px}
.site-foot .cols{display:grid;gap:28px;padding:36px 0 20px;font-size:14px;line-height:1.7;color:var(--muted)}
@media(min-width:760px){.site-foot .cols{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.site-foot img{height:34px;display:block;margin-bottom:12px}
.site-foot .h{font:700 13px 'Albert Sans',sans-serif;color:var(--ink);margin-bottom:8px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--teal)}
.site-foot a.mail{color:var(--teal)}
.site-foot .fine{padding:0 0 28px;font-size:13px;color:var(--soft)}

/* inner pages */
.page-head{padding:48px 0 8px}
.page-head h1{font-size:clamp(28px,4vw,40px);margin-bottom:14px}
.page-head p{font-size:17px;color:var(--muted);max-width:620px}
.prose{max-width:640px;font-size:16px;color:var(--muted)}
.prose p{margin-bottom:16px}
.prose strong{color:var(--ink)}

/* contact cards */
.contact-grid{display:grid;gap:20px;padding:36px 0 8px}
@media(min-width:760px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--card);border-radius:20px;padding:28px}
.contact-card h3{font-size:19px;margin-bottom:10px}
.contact-card p{font-size:15px;color:var(--muted)}
.contact-card a.big{font:700 19px 'Familjen Grotesk',sans-serif;color:var(--teal);text-decoration:none;word-break:break-all}
.contact-card ul{margin:8px 0 0;padding:0;list-style:none;font-size:15px}
.contact-card li{margin-bottom:6px}

/* ============================================================
   Effects layer, added 09.09.2026. Everything above is the base
   design; everything below is motion and depth on top of it.
   All of it is switched off under prefers-reduced-motion at the
   end of this file.
   ============================================================ */

/* ambient: film grain, drifting colour, a light that follows the cursor */
.stage{position:relative;isolation:isolate}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:multiply;z-index:6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainshift 8s steps(6) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(2%,3%)}100%{transform:translate(0,0)}}
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(3px);animation:drift 15s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(20px,-30px) scale(1.14)}}
.spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(69,214,220,.20),transparent 62%)}

/* entrance */
.js .rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
.line{display:block}
.js .line{opacity:0;transform:translateY(24px);filter:blur(6px);animation:lineup .95s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lineup{to{opacity:1;transform:none;filter:blur(0)}}
.l1{animation-delay:.06s}.l2{animation-delay:.2s}.l3{animation-delay:.34s}
/* Only ever on a heading with NO animated children: a child with its own
   opacity or filter makes a new rendering context and background-clip:text
   stops clipping, which renders the whole heading invisible. */
.sheen{background:linear-gradient(100deg,#2b2b2b 0 40%,#0e9aa6 50%,#2b2b2b 60% 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 2.8s 1s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes sheen{from{background-position:120% 0}to{background-position:-40% 0}}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* header sits on frosted glass */
.site-head{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav a:not(.cta){position:relative}
.nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:not(.cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav a.cta{transition:box-shadow .35s,transform .25s cubic-bezier(.2,.7,.2,1)}
.nav a.cta:hover{box-shadow:0 0 0 7px rgba(69,214,220,.22);transform:translateY(-1px);background:var(--cyan)}

/* buttons: a shine crosses them, and they lean toward the cursor */
.btn{position:relative;overflow:hidden;min-height:44px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{left:120%}
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(4px)}
.btn-dark{box-shadow:0 10px 24px -14px rgba(43,43,43,.7)}
.btn-dark:hover{box-shadow:0 20px 34px -14px rgba(43,43,43,.78);opacity:1}
.btn-deep{box-shadow:0 12px 26px -16px rgba(23,57,59,.9)}
.btn-deep:hover{box-shadow:0 20px 36px -16px rgba(23,57,59,.95);opacity:1}
.btn-line:hover{opacity:1}

/* hero photo: gradient edge, wipes open on load */
.hero-art .ring{position:relative;border-radius:26px;padding:2px;
  background:linear-gradient(150deg,var(--cyan),var(--pink) 55%,var(--yellow));
  box-shadow:0 30px 60px -40px rgba(23,57,59,.55);transition:box-shadow .6s cubic-bezier(.2,.7,.2,1)}
.hero-art .ring:hover{box-shadow:0 40px 70px -40px rgba(23,57,59,.7)}
.hero-art .ring .ph{border-radius:24px;margin:0;height:400px;
  clip-path:inset(0 0 100% 0);animation:wipe 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* value cards tilt under the pointer and glow in their own colour */
.cards3{perspective:1000px}
.card{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover{box-shadow:0 34px 56px -34px rgba(23,57,59,.4)}
.card::before{content:"";position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),color-mix(in oklch,var(--glow,#45D6DC) 26%,transparent),transparent 70%)}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .45s;pointer-events:none;
  box-shadow:0 0 0 1px var(--glow,#45D6DC),0 0 46px -10px var(--glow,#45D6DC)}
.card:hover::after{opacity:.55}
.card>*{position:relative}
.card .dot{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover .dot{transform:scale(1.6);box-shadow:0 0 0 6px color-mix(in oklch,var(--glow,#45D6DC) 22%,transparent)}

/* open call: a still gradient edge, with light travelling across the panel */
.call-shell{position:relative;border-radius:24px;padding:2px;
  background:linear-gradient(110deg,var(--cyan),var(--cyan-soft) 40%,var(--pink) 70%,var(--yellow))}
.call-shell .call-panel{position:relative;overflow:hidden;border-radius:22px;margin:0}
.call-shell .call-panel::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);transform:skewX(-16deg);
  animation:glide 6.5s cubic-bezier(.5,0,.5,1) 1.6s infinite}
@keyframes glide{0%{left:-40%}55%,100%{left:130%}}
.call-panel>*{position:relative;z-index:1}
.call-tag::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);
  margin-left:8px;vertical-align:middle;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* section headings draw their own rule when they arrive */
.head-rule{position:relative;display:inline-block;padding-bottom:10px}
.head-rule::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--yellow));
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.reveal.in .head-rule::after,.head-rule.in::after{transform:scaleX(1)}

/* ticker of past projects */
.marq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:14px 0;font:600 14px 'Albert Sans',sans-serif;color:var(--muted);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq div{display:inline-block;animation:marq 38s linear infinite}
.marq:hover div{animation-play-state:paused}
.marq span{margin:0 28px;transition:color .3s}
.marq span:hover{color:var(--teal)}
.marq i{color:var(--cyan);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- the map: where we have been ---- */
.mapwrap{position:relative;background:var(--cyan-ink);border-radius:28px;overflow:hidden;padding:34px;
  box-shadow:0 50px 80px -50px rgba(23,57,59,.75);margin-top:52px}
.mapwrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px}
.mapwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 420px at 62% 30%,rgba(69,214,220,.20),transparent 65%)}
.maphead{position:relative;z-index:2}
.maphead h2{color:#fff;font-size:30px}
.maphead p{margin:14px 0 0;color:rgba(255,255,255,.62);font-size:14.5px;max-width:520px}
.mapscroll{position:relative;z-index:2;margin-top:10px}
.mapsvg{width:100%;height:auto;display:block}
.arc{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-width .35s,opacity .35s;opacity:.75}
.reveal.in .arc{animation:draw 1.5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.node{cursor:pointer}
.node circle.hit{fill:transparent}
.node .halo{opacity:0;transition:opacity .4s}
.node:hover .halo,.node.on .halo{opacity:.28}
.node .core{transition:r .35s cubic-bezier(.16,1,.3,1)}
.node:hover .core,.node.on .core{r:9}
.node text{fill:#fff;font:600 13px 'Albert Sans',sans-serif}
.ping{animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{r:7;opacity:.5}70%,100%{r:22;opacity:0}}
.legend{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.lg{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);
  border-radius:99px;padding:8px 16px;font:600 13px 'Albert Sans',sans-serif;cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s}
.lg:hover,.lg.on{background:rgba(69,214,220,.2);border-color:var(--cyan);transform:translateY(-2px)}
.detail{position:relative;z-index:2;margin-top:22px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:20px 24px;min-height:96px}
.detail .k{font:700 11px 'Albert Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.detail .t{font:700 21px 'Familjen Grotesk',sans-serif;color:#fff;margin-top:6px}
.detail .s{color:rgba(255,255,255,.7);font-size:14.5px;margin-top:4px}
.waiting{position:relative;z-index:2;margin-top:20px;color:rgba(255,255,255,.55);font-size:13.5px}
.waiting b{color:var(--yellow);font-weight:700}
@media(max-width:760px){
  .mapwrap{padding:22px;border-radius:22px;margin-top:36px}
  .maphead h2{font-size:24px}
  /* Europe is wider than a phone. Squeezed to ~306px the 13-unit place names
     render at 6px, and enlarging them just makes Wieleń, Gołanice and Cristuru
     Secuiesc collide. So the map keeps its real size and scrolls sideways
     inside its own box, which leaves the names readable and the page itself
     free of horizontal scroll. */
  .mapscroll{overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px}
  .mapsvg{min-width:620px}
  .legend{gap:8px}
  .lg{padding:7px 13px;font-size:12px}
}

/* project rows lift a little too */
.proj{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.proj:hover{transform:translateY(-3px);box-shadow:0 26px 44px -32px rgba(23,57,59,.4)}
.contact-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.contact-card:hover{transform:translateY(-3px);box-shadow:0 26px 44px -32px rgba(23,57,59,.35)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .rise,.line,.reveal{opacity:1 !important;transform:none !important;filter:none !important}
  .hero-art .ring .ph{clip-path:none !important}
  .arc{stroke-dashoffset:0 !important}
  .sheen{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none;
    -webkit-background-clip:border-box;background-clip:border-box}
  .head-rule::after{transform:scaleX(1) !important}
  .spot,.grain{display:none}
}

/* the credit line: present, readable, and not shouting */
.site-foot .fine a.by{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(138,133,123,.45);
  transition:color .3s,border-color .3s}
.site-foot .fine a.by:hover{color:var(--teal);border-color:var(--teal)}