/* craft skin: Rock Painting — slate, pebble grey, ocean teal, coral, moss; chunky Fredoka storybook + Nunito body. Pebble-shaped corners, pebble-row section edges, no hard offset shadows.
   Tokens come from theme_config.tokens; these are fallbacks. Motion here = transform/opacity roll-in reveals only (shared engine IO). */
.cfs-rock-painting{--bg:#F4F1EA;--bg2:#E7E1D5;--paper:#FBF9F4;--deep:#2F3A41;--ink:#2F3A41;--mute:#56626A;--line:#2F3A41;--accent:#2A8FA8;--accent-ink:#1E6F85;--pop:#F26B4F;--pop2:#6E8B5E;--pop3:#E9B44C;--sig-bg:#DCE8E6;
  --f-disp:'Fredoka','Nunito',system-ui,sans-serif;--f-hand:'Fredoka','Nunito',system-ui,sans-serif;--pb:46% 54% 52% 48%/54% 46% 54% 46%;--soft:0 14px 28px -12px rgba(47,58,65,.28)}
.cfs-rock-painting :is(h1,h2,h3){font-family:var(--f-disp);font-weight:600;letter-spacing:-.005em}
.cfs-rock-painting .cf-h1{font-weight:600;line-height:1.02;letter-spacing:-.015em;max-width:16ch}
.cfs-rock-painting .cf-h2{font-weight:600;max-width:18ch}
.cfs-rock-painting .cf-ac{font-family:var(--f-disp);font-weight:700;color:var(--pop);margin-inline:.05em}
.cfs-rock-painting .cf-ul path{stroke:var(--pop3);stroke-width:6}
.cfs-rock-painting .cf-kicker{display:inline-flex;align-items:center;gap:10px;font:600 14px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.cfs-rock-painting .cf-kicker::before{content:"";width:18px;height:13px;border-radius:var(--pb);background:var(--pop);flex:none}
.cfs-rock-painting .cf-btn{background:var(--accent-ink);border-color:var(--ink);box-shadow:0 5px 0 var(--ink);font-family:var(--f-disp);font-weight:600;letter-spacing:.01em}
.cfs-rock-painting .cf-btn-ghost{background:var(--paper);color:var(--ink)!important}
.cfs-rock-painting .cf-sticker{background:var(--pop3);color:var(--ink);border-radius:22px 28px 20px 30px;padding:9px 22px;transform:rotate(-2deg);font-family:var(--f-disp);font-weight:600;letter-spacing:.06em}
.cfs-rock-painting .cf-badge{background:var(--pop3)}
.cfs-rock-painting .cf-tag{color:var(--accent-ink)}
.cfs-rock-painting .cf-chip{border:0;background:var(--paper);border-radius:16px 22px 18px 24px;padding:9px 16px;box-shadow:0 3px 0 rgba(47,58,65,.18)}
.cfs-rock-painting .cf-chip:nth-child(2n){background:var(--bg2)}
.cfs-rock-painting .cf-nav a{white-space:nowrap;font-size:14px;padding:10px 9px}
.cfs-rock-painting .cf-head{background:var(--paper);border-bottom:0;box-shadow:0 3px 0 var(--bg2)}
.cfs-rock-painting .cf-mark{border-radius:var(--pb);background:var(--pop);border-color:var(--ink);font-family:var(--f-disp)}
/* hero: pond-ripple rings + a row of pebbles along the bottom; collage sits LEFT on desktop */
.cfs-rock-painting .cf-hero{background:var(--bg2);padding-bottom:clamp(90px,10vw,130px)}
.cfs-rock-painting .cf-hero::before{content:"";position:absolute;z-index:-1;width:min(120vw,820px);aspect-ratio:1;left:-12%;top:-26%;border-radius:50%;border:2px solid rgba(42,143,168,.2);box-shadow:inset 0 0 0 46px rgba(42,143,168,.05),inset 0 0 0 48px rgba(42,143,168,.16),inset 0 0 0 100px rgba(42,143,168,.04),inset 0 0 0 102px rgba(42,143,168,.13)}
.cfs-rock-painting .cf-hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:46px;background:
  radial-gradient(ellipse 34px 20px at 38px 100%,var(--bg) 97%,transparent) 0 0/190px 46px repeat-x,
  radial-gradient(ellipse 22px 13px at 104px 100%,var(--bg) 97%,transparent) 0 0/190px 46px repeat-x,
  radial-gradient(ellipse 44px 25px at 160px 100%,var(--bg) 97%,transparent) 0 0/190px 46px repeat-x}
.cfs-rock-painting .cf-hero-in{align-items:center}
@media (min-width:900px){.cfs-rock-painting .cf-hero-in{grid-template-columns:.95fr 1.05fr}.cfs-rock-painting .cf-collage{order:-1}.cfs-rock-painting .cf-hero-copy{padding-left:12px}}
.cfs-rock-painting .cf-collage figure{border:5px solid var(--paper);box-shadow:var(--soft);border-radius:var(--pb)}
.cfs-rock-painting .cf-c1{left:0;top:2%;width:84%;aspect-ratio:1/.96;border-radius:48% 52% 46% 54%/56% 44% 56% 44%}
.cfs-rock-painting .cf-c2{left:auto;right:-3%;top:-4%;bottom:auto;width:36%;aspect-ratio:1;rotate:0deg;--rr:0deg;border-radius:50%}
.cfs-rock-painting .cf-c3{right:2%;bottom:2%;width:42%;aspect-ratio:1;rotate:0deg;--rr:0deg;border-radius:52% 48% 50% 50%/46% 54% 46% 54%}
.cfs-rock-painting .cf-c2.cf-hp,.cfs-rock-painting .cf-c3.cf-hp{animation-name:cf-hp}
.cfs-rock-painting .cf-ill{bottom:-52px}
@media (min-width:900px){.cfs-rock-painting .cf-ill{bottom:-48px}}
/* section edges: a row of pebbles resting on the previous section colour */
.cfs-rock-painting .cf-sec{padding-top:calc(clamp(56px,8vw,104px) + 14px)}
.cfs-rock-painting .cf-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none;background:
  radial-gradient(ellipse 30px 17px at 36px 0,var(--prev,var(--bg)) 97%,transparent) 0 0/210px 30px repeat-x,
  radial-gradient(ellipse 19px 11px at 96px 0,var(--prev,var(--bg)) 97%,transparent) 0 0/210px 30px repeat-x,
  radial-gradient(ellipse 40px 22px at 158px 0,var(--prev,var(--bg)) 97%,transparent) 0 0/210px 30px repeat-x}
.cfs-rock-painting #make{--prev:var(--bg2)}.cfs-rock-painting #perch{--prev:var(--bg2)}.cfs-rock-painting #story{--prev:var(--paper)}.cfs-rock-painting #flow{--prev:var(--bg)}
.cfs-rock-painting #materials{--prev:var(--bg2)}.cfs-rock-painting #before-after{--prev:var(--paper)}.cfs-rock-painting #moments{--prev:var(--bg)}.cfs-rock-painting #faq{--prev:var(--bg2)}.cfs-rock-painting #join{--prev:var(--paper)}
.cfs-rock-painting .cf-bg-deep{background:var(--deep)}
.cfs-rock-painting .cf-bg-deep :is(h2,.cf-kicker,.cf-lead,.cf-note,p,li,legend,label){color:#F4F1EA}
.cfs-rock-painting .cf-bg-deep .cf-kicker::before{background:var(--pop3)}
.cfs-rock-painting .cf-bg-deep .cf-ac{color:var(--pop3)}.cfs-rock-painting .cf-bg-deep .cf-ul path{stroke:var(--pop)}
.cfs-rock-painting .cf-bg-deep .cf-formcard :is(p,li,legend,label,span){color:var(--ink)}
.cfs-rock-painting .cf-bg-deep .cf-formcard .cf-consent,.cfs-rock-painting .cf-bg-deep .cf-formcard .cf-msg{color:var(--mute)!important}
.cfs-rock-painting .cf-bg-deep .cf-formcard .cf-msg.err{color:var(--err)!important}
.cfs-rock-painting .cf-bg-deep .cf-formcard .cf-btn,.cfs-rock-painting .cf-bg-deep .cf-formcard .cf-btn span{color:#fff!important}
.cfs-rock-painting .cf-bg-deep .cf-facts li,.cfs-rock-painting .cf-bg-deep .cf-contact{color:#F4F1EA}
.cfs-rock-painting .cf-bg-deep .cf-contact{opacity:.9}
.cfs-rock-painting .cf-bg-deep a{color:var(--pop3)}.cfs-rock-painting .cf-bg-deep .cf-formcard a{color:var(--accent-ink)}
/* "what you could make": stone-shaped cards in a 3x2 grid */
@media (min-width:1000px){.cfs-rock-painting .cf-cards{grid-template-columns:repeat(3,1fr);gap:28px}}
.cfs-rock-painting .cf-card{border:0;border-radius:34px 34px 70px 34px;box-shadow:var(--soft)}
.cfs-rock-painting .cf-card:nth-child(2n){border-radius:34px 70px 34px 34px}
.cfs-rock-painting .cf-card:nth-child(3n){border-radius:70px 34px 34px 34px}
.cfs-rock-painting .cf-card-img{border-bottom:0;aspect-ratio:5/4}
.cfs-rock-painting .cf-card h3{font-size:25px}
.cfs-rock-painting .cf-card-mo{border:0;background:var(--bg2);border-radius:var(--pb);top:-30px;width:56px;height:56px;box-shadow:0 3px 0 rgba(47,58,65,.15)}
.cfs-rock-painting .cf-card-mo svg{--m1:var(--accent);--m2:var(--pop2);--m3:var(--pop3);--mi:var(--ink)}
.cfs-rock-painting .cf-card:nth-child(3n+2) .cf-tag{color:#B2432C}.cfs-rock-painting .cf-card:nth-child(3n) .cf-tag{color:#4F6A43}
/* signature stage */
.cfs-rock-painting .cf-sigsec{overflow:hidden}
/* story */
.cfs-rock-painting .cf-pull{border-left:0;padding:18px 26px;background:var(--bg2);border-radius:34px 46px 36px 48px;font:600 clamp(22px,2.8vw,30px)/1.3 var(--f-disp);font-style:normal;color:var(--accent-ink);text-align:center}
.cfs-rock-painting .cf-media{gap:22px}
.cfs-rock-painting .cf-media figure{border:5px solid var(--paper);box-shadow:var(--soft)}
.cfs-rock-painting .cf-m1{border-radius:40px 72px 40px 72px;width:88%}
.cfs-rock-painting .cf-m2{border-radius:72px 40px 72px 40px;width:68%;margin:0 0 0 auto}
.cfs-rock-painting .cf-media figcaption{text-align:center}
/* steps */
.cfs-rock-painting .cf-step{border:0;border-radius:30px 60px 30px 60px;box-shadow:var(--soft)}
.cfs-rock-painting .cf-step:nth-child(even){border-radius:60px 30px 60px 30px}
.cfs-rock-painting .cf-no{background:var(--accent);border:0;color:#fff;border-radius:var(--pb);font-family:var(--f-disp)}
.cfs-rock-painting .cf-step-img{border:0;border-radius:var(--pb)}
.cfs-rock-painting .cf-rail{background:var(--bg2);border-bottom:0}
.cfs-rock-painting .cf-rail a[aria-current=step] b{background:var(--pop);border-color:var(--pop)}
.cfs-rock-painting .cf-rail a b{border-radius:var(--pb)}
/* materials: round pebbles */
.cfs-rock-painting .cf-mat{border:0;border-radius:26px 34px 28px 36px;padding:16px 22px;background:var(--bg);box-shadow:none}
.cfs-rock-painting .cf-mat-mo{--m1:#8C9399;--m2:var(--accent);--m3:var(--pop3);--mi:var(--ink)}
/* before / after + gallery */
.cfs-rock-painting .cf-ba{--ba-r:1/1;max-width:540px;margin-inline:auto;width:100%;border:6px solid var(--paper);border-radius:48% 52% 46% 54%/50% 46% 54% 50%;box-shadow:var(--soft)}
.cfs-rock-painting .cf-ba figcaption{left:50%;top:auto;bottom:14px;translate:-50% 0;border-radius:999px;padding:5px 14px;background:var(--paper);text-align:center}
.cfs-rock-painting .cf-ba-l{bottom:auto;top:16%}.cfs-rock-painting .cf-ba-l1{left:12%}.cfs-rock-painting .cf-ba-l2{right:12%}
.cfs-rock-painting .cf-ba-l,.cfs-rock-painting .cf-ba-rp{border-color:var(--ink);border-radius:var(--pb)}
.cfs-rock-painting .cf-ba-rp{right:14%;top:auto;bottom:16%}
.cfs-rock-painting .cf-cell{border:0;box-shadow:var(--soft);padding:0;border-radius:30px 30px 56px 30px;overflow:hidden;rotate:0deg;background:var(--paper)}
.cfs-rock-painting .cf-cell:nth-child(2n){border-radius:30px 56px 30px 30px}.cfs-rock-painting .cf-cell:nth-child(3n){border-radius:56px 30px 30px 30px}
.cfs-rock-painting .cf-cell img{border-radius:0;aspect-ratio:1}
.cfs-rock-painting .cf-cell figcaption{font:600 17px/1.25 var(--f-disp);padding:12px 16px 14px;text-transform:none;letter-spacing:0}
.cfs-rock-painting details.cf-acc{border:0;border-radius:26px 44px 26px 44px;box-shadow:0 5px 0 rgba(47,58,65,.12)}
.cfs-rock-painting .cf-acc summary{font-family:var(--f-disp);font-weight:600;font-size:19px}
.cfs-rock-painting .cf-formcard{border:0;border-radius:30px 60px 30px 60px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.cfs-rock-painting .cf-fld input{border-radius:18px}
.cfs-rock-painting .cf-opt span{border-radius:16px 22px 18px 24px}
.cfs-rock-painting .cf-opt input:checked+span{background:var(--pop3)}
.cfs-rock-painting .cf-end{background:var(--bg2)}
.cfs-rock-painting .cf-bar{border-top:0;box-shadow:0 -3px 0 var(--bg2)}
/* ROLL-IN reveals: cards, steps and pebbles roll in from the side and settle (transform/opacity only; shared IO adds .in; engine reduced-motion rules still win) */
.cf-js .cfs-rock-painting .cf-pop:not(.in){opacity:0;transform:translateX(-46px) rotate(-12deg) scale(.94)}
.cf-js .cfs-rock-painting .cf-pop:nth-child(2n):not(.in){transform:translateX(46px) rotate(12deg) scale(.94)}
.cf-js .cfs-rock-painting .cf-pop{transition:opacity .45s var(--ease) calc(var(--i,0)*90ms),transform .85s var(--bounce) calc(var(--i,0)*90ms)}
.cf-js .cfs-rock-painting .cf-step.rv:not(.in){transform:translateX(-36px) rotate(-1.5deg)}
.cf-js .cfs-rock-painting .cf-step.rv:nth-child(even):not(.in){transform:translateX(36px) rotate(1.5deg)}
.cf-js .cfs-rock-painting .cf-step.rv{transition:opacity .6s var(--ease),transform .9s var(--bounce)}
/* tiny decor loop: the hero ripple rings breathe (one element, transform only, paused offscreen via [data-live]) */
@keyframes rp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.cfs-rock-painting .cf-hero[data-live].on::before{animation:rp-breathe 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cfs-rock-painting .cf-hero[data-live].on::before{animation:none}}

.cfs-rock-painting .cf-g-grid .cf-gal{grid-template-columns:repeat(2,1fr);gap:16px;padding-inline:var(--gut)}
@media (min-width:640px){.cfs-rock-painting .cf-g-grid .cf-gal{grid-template-columns:repeat(3,1fr);gap:22px}}
@media (min-width:1000px){.cfs-rock-painting .cf-g-grid .cf-gal{grid-template-columns:repeat(4,1fr)}}
.cfs-rock-painting .cf-g-grid .cf-cell{flex:none}
@media (max-width:640px){.cfs-rock-painting .cf-cell figcaption{font-size:15px;padding:10px 12px 12px}}
.cfs-rock-painting .cf-sec{overflow-x:clip}