:root{
  --ink:#1A1718; --brown:#6E5D4E; --text:#3A322D; --beige:#DECCBE; --sand:#F5EEE7; --line:#7A6656;
  --green:#55693F; --green-d:#465933; --sage:#E3EAD9; --sage-d:#5F6E52; --mist:#E2E9EE; --orange:#E07A2E; --orange-d:#C9661D;
  /* Depth: every photo and card sits on the page with a soft, deep shadow */
  --depth:0 26px 50px -18px rgba(70,52,36,.42),0 10px 20px -8px rgba(70,52,36,.16);
  /* Photos sit deeper than cards: a longer, darker shadow underneath */
  --depth-photo:0 60px 80px -28px rgba(58,40,26,.66),0 26px 40px -16px rgba(58,40,26,.38),0 6px 12px rgba(58,40,26,.1);
  --depth-s:0 16px 32px -14px rgba(70,52,36,.36),0 6px 12px -6px rgba(70,52,36,.14);
  --serif:'Cormorant Garamond', Georgia, serif;
  --num:'Playfair Display', Georgia, serif;
  --script:'Marck Script', cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;font-family:var(--serif);color:var(--ink);font-size:20px;line-height:1.45}
a{color:var(--ink)}a:hover{color:var(--brown)}
img,video{display:block;height:auto;max-width:100%}
input,textarea,select,button{font-family:inherit}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3,p,figure,blockquote{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
.wrap{max-width:1200px;margin:0 auto}
.num{font-family:var(--num)}
.script{font-family:var(--script);font-weight:400;line-height:1.05;color:var(--brown);font-size:32px}
.muted{color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-only{display:none!important}
html[lang=en] .ua-only{display:none!important}
html:not([lang=en]) .en-only{display:none!important}
[hidden]{display:none!important}
section{padding:88px 24px}
.sand{background:var(--sand)}
h2{font-size:46px;line-height:1.08;font-weight:700;text-wrap:balance}
h3{font-weight:700;line-height:1.15}
.head{display:flex;flex-direction:column;gap:8px}
.head.center{align-items:center;text-align:center}
.stack{display:flex;flex-direction:column;gap:40px}
.pill-tag{background:#fff;border-radius:999px;padding:6px 16px;font-size:18px;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--green);color:#fff;padding:16px 30px;border-radius:999px;font-weight:700;font-size:20px;border:none;cursor:pointer;text-align:center}
.btn:hover{color:#fff;background:var(--green-d)}
.btn:disabled{opacity:.6;cursor:default}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1.5px solid var(--green);padding:15px 28px;border-radius:999px;font-weight:700;font-size:20px;background:rgba(255,255,255,.85);text-align:center}
.btn-orange{background:var(--orange)}
.btn-orange:hover{background:var(--orange-d)}

/* Open frame from the studio's logo file: the dark line sits right on the
   beige stroke, the bottom-left corner doesn't close, and the left side and
   the bottom taper off like a brush stroke */
.frame{--bw:12px;--gap:-1px;--lw:3px;--lc:var(--ink);--r:40px;--ri:29px;position:relative;width:100%;padding:calc(var(--bw) + var(--gap) + var(--lw))}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none;z-index:1;
  clip-path:polygon(0 0,100% 0,100% 100%,62% 100%,11% calc(100% - var(--w)),var(--w) 82%,0 22%)}
.frame::before{--w:var(--bw);inset:0;border:var(--bw) solid var(--beige);border-radius:var(--r)}
.frame::after{--w:var(--lw);inset:calc(var(--bw) + var(--gap));border:var(--lw) solid var(--lc);border-radius:var(--ri)}
.frame-inner{position:relative}

/* ---------- 1. Loading screen ---------- */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:100;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .75s ease}
.intro video{width:min(86vw,760px,calc(112vh - 160px));aspect-ratio:4/3;object-fit:contain;background:#fff;
  /* Some browsers (Windows hardware decoding) render the video's white slightly off-white, which shows as a box:
     cut the outer pixels, feather the edges and multiply onto the white page so the box disappears */
  clip-path:inset(3px);mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.intro-btns{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:12px}
.intro-btn{border:1.5px solid var(--beige);background:#fff;color:var(--brown);border-radius:999px;padding:10px 20px;font-size:17px;font-weight:600;cursor:pointer}
.intro-btn:hover{border-color:var(--line);color:var(--ink)}
.intro-btn.sound{display:inline-flex;align-items:center;gap:10px;background:var(--green);border-color:var(--green);color:#fff;font-size:20px;padding:14px 26px;animation:soundPulse 2s ease-in-out infinite}
.intro-btn.sound:hover{background:var(--green-d);color:#fff}
@keyframes soundPulse{0%,100%{box-shadow:0 0 0 0 rgba(26,23,24,.35)}50%{box-shadow:0 0 0 14px rgba(26,23,24,0)}}
html.intro-out .intro{opacity:0;pointer-events:none}

/* ---------- 2. Header ---------- */
.site-header{position:fixed;left:0;right:0;top:0;z-index:20;border-bottom:1px solid transparent;background:rgba(255,255,255,0);
  transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.site-header.scrolled,.site-header.menu-open{background:#fff;border-bottom-color:var(--beige);box-shadow:0 8px 24px rgba(26,23,24,.08)}
.site-header .brand img,.site-header .site-nav > a:not(.btn),.site-header .lang button,.site-header .brand-en,.site-header .burger{transition:color .4s ease,filter .4s ease,background-color .4s ease,border-color .4s ease,text-shadow .4s ease}
.site-header:not(.scrolled):not(.menu-open) .brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.45))}
.site-header:not(.scrolled):not(.menu-open) .brand > img{filter:brightness(0) invert(1) drop-shadow(2px 2px 0 rgba(232,132,63,.8)) drop-shadow(0 1px 4px rgba(0,0,0,.4))}
/* Over the painting: white wordmark on an orange brush stroke; on the white header the original wordmark, no orange */
.brand-word{position:relative;isolation:isolate;display:inline-flex;align-items:center}
.site-header:is(.scrolled,.menu-open) .wm-hero,.site-header:not(.scrolled):not(.menu-open) .wm-plain{display:none}
.site-header:is(.scrolled,.menu-open) .brand-word::before{display:none}
.brand-word::before{content:"";position:absolute;left:-10px;right:-12px;top:50%;height:115%;transform:translateY(-46%) rotate(-2deg);z-index:-1;pointer-events:none;
  background:url('assets/stroke-orange-bold.webp') center/100% 100% no-repeat,url('assets/stroke-orange-bold.webp') 45% 55%/96% 90% no-repeat}
.site-header:not(.scrolled):not(.menu-open) :is(.site-nav > a:not(.btn),.lang button,.lang,.brand-en){color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.site-header:not(.scrolled):not(.menu-open) .burger{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.8)}
.site-header:not(.scrolled):not(.menu-open) .site-nav .btn{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.site-header .wrap{padding:14px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;font-size:19px;font-weight:600}
.site-nav a{text-decoration:none;padding:10px 0}
.site-nav > a:not(.btn){position:relative}
.site-nav > a:not(.btn)::after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1.5px;background:var(--orange);transition:width .3s ease}
.site-nav > a:not(.btn):hover::after,.site-nav > a:not(.btn):focus-visible::after{width:100%}
.site-nav .btn{padding:11px 24px;font-size:19px;letter-spacing:.02em}
.lang{display:flex;align-items:center;gap:4px;font-weight:700;font-size:17px;color:var(--beige)}
.lang button{border:0;background:none;padding:8px 4px;cursor:pointer;color:var(--line);font-weight:700;font-size:17px;letter-spacing:.04em}
.lang button.on{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.brand-en{font-size:26px;color:var(--ink);line-height:1;white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--beige);border-radius:50%;background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}
.burger .i-close{display:none}
.menu-open .burger .i-open{display:none}
.menu-open .burger .i-close{display:block}

/* ---------- 3. Hero ---------- */
.hero{position:relative;padding:76px 0 0;min-height:600px;height:min(100svh,860px);overflow:hidden;background:#EEE6DA;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse 46% 50% at 50% 47%,rgba(38,26,16,.46),rgba(38,26,16,.18) 60%,rgba(38,26,16,0) 80%),linear-gradient(180deg,rgba(20,16,12,.42),rgba(20,16,12,0) 22%,rgba(20,16,12,0) 72%,rgba(20,16,12,.24))}
.logo-clip{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:0;top:0}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;padding:30px 24px;width:100%}
/* Ilona's lockup: rules stretch out, captions write themselves, the logo draws in milk-white with a soft orange glow */
.lockup{--k:.78px;display:flex;flex-direction:column;align-items:center;will-change:opacity,filter}
.rule{height:2px;width:calc(560 * var(--k));background:linear-gradient(90deg,transparent,#F2A266 20%,#F7C08E 50%,#F2A266 80%,transparent);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)) drop-shadow(0 0 6px rgba(240,150,80,.45))}
.lk-text{font-family:var(--script);color:#FFFAF0;white-space:nowrap;line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.3),0 0 22px rgba(236,140,70,.55)}
.lk-top{font-size:calc(70 * var(--k));margin-top:calc(18 * var(--k))}
.lk-bottom{font-size:calc(50 * var(--k));margin-bottom:calc(18 * var(--k))}
.lk-logo{position:relative;width:calc(440 * var(--k));height:calc(358 * var(--k));margin:calc(10 * var(--k)) 0}
#logoCanvas{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 6px rgba(240,128,50,.75)) drop-shadow(0 0 18px rgba(236,120,40,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* Still version (no motion, or the browser can't read the video): the logo file turned milk-white */
.lk-still{display:none;position:absolute;inset:8% 18%;width:64%;height:auto;margin:auto;filter:invert(1) sepia(.25) brightness(1.05) drop-shadow(0 0 8px rgba(240,128,50,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.lockup.still #logoCanvas{display:none}
.lockup.still .lk-still{display:block}
.motion .lockup:not(.still) .rule{transform:scaleX(0);opacity:0}
.motion .lockup:not(.still) .lk-text{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,0) * 118% - 18%),transparent calc(var(--p,0) * 118%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p,0) * 118% - 18%),transparent calc(var(--p,0) * 118%))}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero .btn{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hero .btn:hover{background:#FFF8EE;color:var(--ink)}
.hero .btn-outline{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero .btn-outline:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------- 4. «Яє» у Рівному ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.about-text{display:flex;flex-direction:column;gap:18px}
.about-text p{font-size:22px;color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.studio-card{display:flex;flex-direction:column;gap:22px;max-width:420px;justify-self:center;width:100%}
.studio-card img{width:100%;aspect-ratio:3/4.1;object-fit:cover;object-position:50% 34%;border-radius:32px;box-shadow:var(--depth-photo)}
.studio-info{display:flex;flex-direction:column;gap:10px;font-size:20px;font-weight:600;margin-top:10px;padding-top:22px;border-top:1px solid var(--beige)}
.studio-info a{display:flex;align-items:center;gap:12px;text-decoration:none}
.studio-info svg{flex-shrink:0;color:var(--brown)}

/* ---------- 5. Наша історія ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-photo{position:relative}
/* Full original photo, cropped only at the bottom: heads stay whole */
.story-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 42%;border-radius:30px;box-shadow:var(--depth-photo)}
.story-text{display:flex;flex-direction:column;gap:18px}
.story-text p{font-size:21px;color:var(--text)}
.motto{font-family:var(--script);font-size:30px;line-height:1.2;margin-top:4px}

/* ---------- Landscape sections ---------- */
.land{position:relative;background:var(--bg) center/cover no-repeat #6E7F72;isolation:isolate}
.land::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,26,22,.20),rgba(20,26,22,.04) 40%,rgba(20,26,22,.18))}
.values-land{background-position:22% 6%}
.land .head .script{color:#FFF8EE;font-size:44px;text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* ---------- 6. Values ---------- */
.values-land{padding:110px 24px}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.value{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:26px;padding:28px;display:flex;gap:16px;align-items:flex-start;box-shadow:0 26px 50px -16px rgba(10,20,15,.5),0 8px 18px -6px rgba(10,20,15,.2)}
.value svg{flex-shrink:0}
.value div{display:flex;flex-direction:column;gap:4px}
.value h3{font-size:25px}
.value p{color:var(--text);font-size:18px}

/* ---------- 7. Team ---------- */
.team-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.emblem{width:240px;margin-bottom:2px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.chips span{font-family:var(--script);font-size:24px;line-height:1.1;background:#fff;border-radius:999px;padding:8px 20px;color:var(--brown)}
.psy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.person{background:#fff;border-radius:28px;padding:30px;box-shadow:var(--depth);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.avatar{width:170px;height:170px;border-radius:50%;border:4px solid var(--beige);padding:5px;flex-shrink:0;box-shadow:var(--depth-s)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.person h3{font-size:30px;margin-top:8px;letter-spacing:.01em}
.person .role{font-style:italic;color:var(--brown);font-weight:600;line-height:1.3}
.person .bio{color:var(--text);font-size:19px}
.person .aud{background:var(--sand);border-radius:999px;padding:6px 16px;font-size:17px;font-weight:600;margin-top:6px}
.person .cta{font-weight:700;padding:10px 0;margin-top:auto}
.person .badge{font-family:var(--script);font-size:30px;line-height:1;color:var(--brown)}
.person.founder{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:40px;text-align:left;padding:38px;border-radius:32px}
.founder .avatar{width:230px;height:230px;border-width:5px;padding:6px}
.founder .info{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.founder h3{font-size:36px;margin:0}
.founder .cta{margin-top:0}
.crew{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.crew h3{font-size:36px;text-align:center;color:var(--ink)}
.crew-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.crew-item{background:#fff;border-radius:26px;padding:28px 24px;box-shadow:var(--depth);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.crew-item img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--beige);padding:4px;margin-bottom:6px;box-shadow:var(--depth-s)}
.crew-item b{font-size:25px;line-height:1.15}
.crew-role{font-family:var(--script);font-size:24px;line-height:1.1;color:var(--brown)}
.crew-item p{font-size:18px;color:var(--text);line-height:1.35}
.crew-scope{background:var(--sand);border-radius:999px;padding:6px 16px;font-size:16px;font-weight:600;line-height:1.3;margin-top:auto}

/* ---------- 8. Хто ми ---------- */
/* Same composition as the lake block: a band of the studio's paintings, the ribbon through the middle */
.who-land{--bg:url('assets/who-band.webp?v=202611061221');padding:34px 24px 132px}
.who-land .head .script{font-size:40px}
.who-land .stack{gap:26px}
/* Longest text in the middle, the two short ones at the sides, each card only as tall as its text */
.who-values{grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr) minmax(0,.82fr);align-items:center}
.who-values .value:nth-child(1){order:2}
.who-values .value:nth-child(2){order:1}
.who-values .value:nth-child(3){order:3}
.who-values .value:not(:nth-child(1)){padding:22px 22px}
.who-values .value:not(:nth-child(1)) p{font-size:17px}

/* ---------- 9. Founder ---------- */
.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.founder-sec{position:relative;overflow:hidden;isolation:isolate}
.watermark{position:absolute;right:-60px;bottom:-40px;width:520px;opacity:.13;z-index:-1;pointer-events:none}
.founder-photo{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:8px}
.founder-img{width:100%;max-width:420px;border-radius:30px;box-shadow:var(--depth-photo)}
.founder-copy{display:flex;flex-direction:column;gap:18px}
.founder-copy > p{font-size:21px;color:var(--text)}
.hello{font-family:var(--script);font-weight:400;font-size:52px;line-height:1.1}
.more{border-top:1px solid var(--beige)}
.more:last-of-type{border-bottom:1px solid var(--beige)}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:24px;font-weight:700}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s ease;flex-shrink:0}
.more[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.more-body{display:flex;flex-direction:column;gap:12px;padding:0 0 22px;color:var(--text);font-size:19px}
.more-body ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.principles{margin:0;padding:0;list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:14px}
.principles li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;column-gap:12px}
.principles li::before{content:counter(p);grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--sand);box-shadow:var(--depth-s);display:flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:700;font-size:18px;color:var(--ink)}
.principles b{color:var(--ink);font-size:21px}
.studio-why{font-size:20px!important}
.quote{background:var(--sand);border-radius:26px;padding:28px 30px;box-shadow:var(--depth);display:flex;flex-direction:column;gap:10px;margin-top:6px}
.quote figcaption{font-size:28px}
.quote blockquote{font-size:28px;line-height:1.3;font-weight:600;font-style:italic}
.quote cite{font-style:italic;color:var(--brown);font-weight:600}

/* ---------- 10. Services ---------- */
.services-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.services-head img{width:240px;margin-top:6px}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.svc{display:flex}
.svc .frame-inner{width:100%;height:100%;background:#fff;border-radius:26px;box-shadow:var(--depth);padding:28px 26px 24px;display:flex;flex-direction:column;gap:10px}
.svc-label{font-family:var(--script);font-size:22px;color:var(--brown);line-height:1}
.svc h3{font-size:27px}
.svc details{margin-top:auto}
.svc summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 0}
.svc summary::-webkit-details-marker{display:none}
.svc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.svc details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.svc details p{font-size:18px;color:var(--text);padding:6px 0 4px}
.audience{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.audience .script{font-size:26px;margin-right:4px}
.audience .pill-tag{background:#fff}
.svc-book{font-weight:700;text-decoration:none;border-top:1px solid var(--beige);padding-top:12px;margin-top:6px}
.svc details + .svc-book{margin-top:6px}


/* ---------- 12. Booking ---------- */
.booking .frame{--r:44px;--ri:33px}
.booking .frame-inner{padding:48px 40px;display:flex;flex-direction:column;gap:34px}
.steps-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.step .n{width:64px;height:64px;border-radius:50%;background:var(--sand);box-shadow:var(--depth-s);display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:28px;font-weight:700;flex-shrink:0}
.step div{display:flex;flex-direction:column;gap:6px}
.step h3{font-size:25px}
.quick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.quick .muted{font-style:italic}
.quick .btn-outline{padding:11px 22px;font-size:18px;background:#fff}
.book-form{background:#FBF8F4;border-radius:26px;padding:32px;box-shadow:var(--depth)}
.book-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.book-fields .wide{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field legend{font-weight:700;padding:0}
.field legend{margin-bottom:8px}
.opt-note{font-weight:500;color:var(--brown)}
.field input,.field textarea,.field select{border:1.5px solid var(--line);border-radius:14px;padding:0 16px;font-size:19px;color:var(--ink);background:#fff;width:100%}
.field input,.field select{height:52px}
.field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1718' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:40px}
.field textarea{padding:12px 16px;resize:vertical}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{position:relative;cursor:pointer;display:flex}
.opt input,.chan input,.co-colors input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{flex:1;border:1.5px solid var(--beige);border-radius:16px;padding:12px 16px;font-weight:600;line-height:1.25;transition:border-color .2s,background-color .2s}
.opt:hover span{border-color:var(--line)}
.opt input:checked + span{border-color:var(--ink);background:var(--sand);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible + span,.chan input:focus-visible + span,.co-colors input:focus-visible + .sw{outline:2px solid var(--ink);outline-offset:2px}
.chan{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chan label{cursor:pointer;position:relative}
.chan span{display:inline-flex;align-items:center;height:44px;padding:0 20px;border:1.5px solid var(--beige);border-radius:999px;font-weight:700;transition:all .2s}
.chan input:checked + span{background:var(--green);border-color:var(--green);color:#fff}
.check{display:flex;align-items:flex-start;gap:10px;font-size:17px;color:var(--text);cursor:pointer;font-weight:500}
.check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green);flex-shrink:0}
.book-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.book-submit .muted{font-size:18px;font-style:italic}
.form-ok{background:var(--sand);border-radius:14px;padding:16px 18px;font-weight:600;display:flex;align-items:center;gap:10px}
.form-ok svg{flex-shrink:0}

/* ---------- 13. Anonymous ---------- */
.two{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.two > *{min-width:0}
.ask-text{flex:1 1 340px;display:flex;flex-direction:column;gap:14px}
.ask-text > p{font-size:22px}
.privacy-note{display:flex;align-items:flex-start;gap:12px;background:#fff;box-shadow:var(--depth-s);border-radius:18px;padding:16px 18px;font-size:18px;color:var(--text)}
.privacy-note svg{flex-shrink:0;margin-top:2px}
.ask-frame{flex:1 1 480px}
.ask-heart{width:190px;margin-bottom:-4px}
.ask-card{background:#fff;border-radius:30px;padding:32px 30px;box-shadow:var(--depth)}
.ask-fields{display:flex;flex-direction:column;gap:18px}
form.ask .btn{height:56px}

/* ---------- 14. Gift certificate ---------- */
.gift{background:linear-gradient(180deg,rgba(250,247,240,.5),rgba(250,247,240,.3)),url('assets/gift-paint.webp') center/cover no-repeat #C9D3BD}
.gift .wrap{display:flex;flex-direction:column;gap:56px}
.gift-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.gift-cards{position:relative;height:420px;max-width:520px;width:100%;margin:0 auto}
.gift-cards img{position:absolute;top:50%;width:44%;border-radius:12px;box-shadow:0 26px 46px -12px rgba(45,60,35,.45),0 8px 16px -6px rgba(45,60,35,.2);transition:transform .5s ease}
.gift-cards img:nth-child(1){left:0;transform:translateY(-50%) rotate(-8deg);z-index:1}
.gift-cards img:nth-child(2){left:28%;transform:translateY(-53%);z-index:3}
.gift-cards img:nth-child(3){right:0;transform:translateY(-50%) rotate(8deg);z-index:2}
.gift-text{display:flex;flex-direction:column;gap:18px}
.gift-text > p{font-size:22px;color:var(--text)}
.co-frame{--r:42px;--ri:31px;filter:drop-shadow(0 26px 34px rgba(45,60,35,.32))}
.cert-order{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;background:#fff;border-radius:calc(var(--ri) - var(--lw));padding:36px;align-items:start}
.co-preview{display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:110px}
.co-prev{width:100%;max-width:300px;border-radius:12px;box-shadow:var(--depth)}
.co-cap{font-size:24px;text-align:center}
.co-fields{display:flex;flex-direction:column;gap:18px}
.co-fields h3{font-size:32px}
.co-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-colors{display:flex;flex-wrap:wrap;gap:8px 18px}
.co-colors label{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;font-weight:600}
.sw{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(26,23,24,.15);flex-shrink:0;transition:box-shadow .2s}
.co-colors input:checked + .sw{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.co-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.co-fields .btn{align-self:flex-start}

/* ---------- 15. Contacts ---------- */
.contacts-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.contact-card,.social-wall{background:var(--sand);border-radius:28px;padding:30px;box-shadow:var(--depth)}
.contact-card{display:flex;flex-direction:column;gap:20px}
.c-row{display:flex;align-items:flex-start;gap:14px}
.c-row svg{flex-shrink:0;color:var(--brown);margin-top:2px}
.c-row div{display:flex;flex-direction:column;gap:2px}
.c-row b{font-size:17px;color:var(--brown);font-weight:700;letter-spacing:.02em}
.c-row a,.c-row span{font-size:21px;font-weight:600;text-decoration:none}
.c-row .c-link{font-size:18px;text-decoration:underline;text-underline-offset:3px;margin-top:2px}
.c-row div > span:only-of-type{font-weight:500;color:var(--text)}
.social-wall{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.social-wall .script{font-size:36px}
.social-wall p{color:var(--text)}
.sw-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;margin-top:10px}
.sw-badge{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;font-weight:700;font-size:16px;width:84px}
.sw-badge img{width:76px;height:76px;object-fit:contain;transition:transform .3s ease}
.map{border-radius:28px;overflow:hidden;background:#fff;box-shadow:var(--depth)}
.map iframe{border:0;width:100%;height:340px;display:block}

/* ---------- 16. Footer ---------- */
.site-footer{border-top:1px solid var(--beige);padding:34px 24px}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;font-size:17px;color:var(--brown);font-weight:600}
.brand-line{display:flex;align-items:center;gap:16px}
.brand-line div{display:flex;flex-direction:column;line-height:1.15}
.brand-line b{font-size:22px;color:var(--ink)}
.brand-line .script{font-size:24px}
.site-footer .links{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer .links a{padding:10px 0}
.copy{flex-basis:100%;font-size:15px;color:var(--line)}
.credit{flex-basis:100%;font-size:14px;color:var(--line);opacity:.85;margin-top:-6px;letter-spacing:.02em}

/* Privacy dialog */
.privacy{border:0;border-radius:26px;padding:34px 32px;max-width:620px;width:calc(100% - 32px);color:var(--ink);font-family:var(--serif)}
.privacy::backdrop{background:rgba(26,23,24,.45)}
.privacy h2{font-size:34px;margin-bottom:14px;padding-right:40px}
.privacy-body{display:flex;flex-direction:column;gap:12px;font-size:19px;color:var(--text)}
.privacy .x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--beige);background:#fff;font-size:26px;line-height:1;cursor:pointer}

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values{grid-template-columns:1fr;max-width:620px;margin:0 auto;width:100%}
  .who-values{grid-template-columns:1fr}
  .who-values .value{order:0!important}
}
@media (max-width:980px){
  .site-nav{gap:6px 18px;font-size:18px}
}

/* ---------- Phone & small tablet ---------- */
@media (max-width:860px){
  html{scroll-padding-top:72px}
  body{font-size:19px;line-height:1.42}
  .m-only{display:revert!important}
  section{padding:56px 16px}
  h2{font-size:36px;line-height:1.06}
  .script{font-size:27px}
  .stack{gap:24px}
  .frame{--bw:9px;--gap:-1px;--lw:2.5px;--r:30px;--ri:22px}

  .site-header .wrap{padding:10px 16px;gap:10px}
  .brand{gap:8px}
  .brand > img{width:40px}
  .brand-word img{width:112px}
  .brand-en{font-size:20px}
  .quick .btn-outline{flex:1 1 140px}
  .lang,.lang button{font-size:16px}
  .burger{display:flex!important}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--beige);padding:8px 16px 20px;flex-direction:column;align-items:stretch;gap:0;font-size:24px;font-weight:700;box-shadow:0 18px 30px rgba(26,23,24,.12)}
  .menu-open .site-nav{display:flex}
  .site-nav a{padding:12px 0;border-bottom:1px solid var(--sand)}
  .site-nav .btn{margin-top:14px;border:0;height:54px}
  .site-nav .insta{border:none;margin-top:10px;font-size:18px;font-weight:600;color:var(--brown);padding:8px 0}

  .hero{height:auto;min-height:100svh;padding-top:64px}
  .hero-bg{object-position:70% 50%}
  .hero-in{gap:20px;padding:36px 16px}
  .lockup{--k:.5px}
  .hero .actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px;gap:10px}
  .hero .actions a{height:54px;padding:0 20px;font-size:19px}

  .about-grid,.story-grid,.founder-grid,.gift-grid,.contacts-grid{grid-template-columns:1fr;gap:28px}
  .about-text p,.story-text p,.founder-copy > p{font-size:19px}
  .pill-tag{font-size:16px;padding:5px 13px}
  .studio-card img{border-radius:26px}
  .studio-card{max-width:360px}
  .studio-info{font-size:18px}
  .story-photo img{border-radius:24px}
  .story-text{order:-1}
  .motto{font-size:26px}

  .land .head .script{font-size:36px}
  .values-land{padding:64px 16px}
  .value{padding:18px;border-radius:20px;gap:14px}
  .value svg{width:28px;height:28px}
  .value h3{font-size:22px}
  .value p{font-size:17px}

  .team{padding-left:0;padding-right:0}
  .team-head,.crew{padding:0 16px}
  .emblem{width:190px}
  .chips span{font-size:21px;padding:6px 14px}
  .psy-list{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .psy-list::-webkit-scrollbar{display:none}
  .person,.person.founder{flex:0 0 min(310px,84vw);scroll-snap-align:center;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 20px;border-radius:26px}
  .avatar,.founder .avatar{width:140px;height:140px;border-width:4px;padding:5px}
  .founder .info{flex:none;align-items:center;gap:6px}
  .person .badge{font-size:24px}
  .person h3,.founder h3{font-size:27px;line-height:1.1;margin:0}
  .person .role{font-size:17px}
  .person .bio{display:none}
  .person .aud{font-size:15px;padding:5px 12px}
  .crew h3{font-size:28px}
  .crew-list{grid-template-columns:1fr;gap:12px}
  .crew-item{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;column-gap:16px;padding:18px;border-radius:22px}
  .crew-item img{width:110px;height:110px;margin:0}
  .crew-item > b,.crew-item > .crew-role{flex:1 1 calc(100% - 140px)}
  .crew-item b{font-size:23px}
  .crew-item{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto auto auto;row-gap:2px}
  .crew-item img{grid-row:1/3}
  .crew-item b{align-self:end}
  .crew-item .crew-role{align-self:start}
  .crew-item p{grid-column:1/-1;font-size:17px;margin-top:10px}
  .crew-scope{grid-column:1/-1;justify-self:start;font-size:15px;padding:5px 12px;margin-top:6px}

  .who-land{--bg:url('assets/who-band-sm.webp?v=202611061221');padding:36px 16px 56px}

  .founder-photo{position:relative;top:0}
  .founder-img{max-width:340px;border-radius:24px}
  .watermark{width:300px;right:-50px;bottom:-30px}
  .hello{font-size:40px}
  .more summary{font-size:21px}
  .more-body{font-size:18px}
  .principles b{font-size:19px}
  .quote{padding:22px}
  .quote blockquote{font-size:22px}

  .svc-grid{grid-template-columns:1fr;gap:18px}
  .svc h3{font-size:24px}
  .svc .frame-inner{padding:22px 20px 18px}


  .booking .frame-inner{padding:28px 16px;gap:22px}
  .steps-list{grid-template-columns:1fr;gap:16px}
  .step{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
  .step .n{width:44px;height:44px;font-size:20px}
  .step div{gap:0}
  .step h3{font-size:21px}
  .step p{font-size:17px}
  .book-form{padding:20px 16px;border-radius:20px}
  .book-fields{grid-template-columns:1fr;gap:16px}
  .opts,.co-types,.co-row{grid-template-columns:1fr}
  .field input,.field select{height:50px;font-size:18px}
  .book-submit .btn{width:100%;height:54px}

  .two{flex-direction:column;align-items:stretch;gap:20px}
  .ask-text > p{font-size:19px}
  .ask-frame{flex:none}
  .ask-card{padding:22px 16px;border-radius:24px}
  .ask-heart{width:150px}

  .gift .wrap{gap:32px}
  .gift-cards{height:300px}
  .gift-text > p{font-size:19px}
  .cert-order{grid-template-columns:1fr;padding:20px 16px;gap:20px}
  .co-preview{position:relative;top:0}
  .co-prev{max-width:200px}
  .co-fields h3{font-size:27px}
  .co-fields .btn{width:100%;height:54px}

  .contact-card,.social-wall{padding:22px 18px;border-radius:22px}
  .c-row a,.c-row span{font-size:19px}
  .sw-row{gap:10px 6px}
  .sw-badge{width:56px;font-size:13px}
  .sw-badge img{width:52px;height:52px}
  .map iframe{height:260px}

  .site-footer{padding:28px 16px 32px}
  .site-footer .wrap{flex-direction:column;text-align:center;gap:10px}
  .brand-line{flex-direction:column;gap:8px}
  .site-footer .links{justify-content:center;gap:0 18px}
  .privacy{padding:26px 20px}
}

/* ---------- Motion ----------
   Everything below only runs when html has .motion, which the page sets
   unless the visitor asked the OS for reduced motion. */
@property --a1{syntax:'<angle>';inherits:true;initial-value:370deg}
@property --a2{syntax:'<angle>';inherits:true;initial-value:370deg}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:none}50%{transform:scale(1.045)}}
@keyframes write{from{clip-path:inset(-30% 100% -30% -5%)}to{clip-path:inset(-30% -5% -30% -5%)}}
@keyframes drift{0%,100%{translate:0 0;box-shadow:0 26px 50px -18px rgba(70,52,36,.42),0 10px 20px -8px rgba(70,52,36,.16)}
  50%{translate:0 -10px;box-shadow:0 40px 60px -22px rgba(70,52,36,.32),0 12px 22px -10px rgba(70,52,36,.12)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* The frame draws itself like a brush stroke: beige first, then the line.
   --fs (start angle, set by JS) points into the open corner. */
.motion .frame{--a1:0deg;--a2:0deg;
  transition:--a1 1.7s cubic-bezier(.55,.1,.3,1) var(--fd,0s),--a2 1.7s cubic-bezier(.55,.1,.3,1) calc(var(--fd,0s) + .35s)}
.motion .frame.drawn{--a1:370deg;--a2:370deg}
.motion .frame::before{-webkit-mask-image:conic-gradient(from var(--fs,235deg),#000 calc(var(--a1) - 12deg),#0000 var(--a1));mask-image:conic-gradient(from var(--fs,235deg),#000 calc(var(--a1) - 12deg),#0000 var(--a1))}
.motion .frame::after{-webkit-mask-image:conic-gradient(from var(--fs,235deg),#000 calc(var(--a2) - 12deg),#0000 var(--a2));mask-image:conic-gradient(from var(--fs,235deg),#000 calc(var(--a2) - 12deg),#0000 var(--a2))}

/* Hero, once the loading screen is gone */
.motion .hero .actions{opacity:0}
.motion.ready .hero .actions{animation:fadeUp .9s .4s both}

/* Reveal on scroll */
.motion .rv{opacity:0;translate:0 26px;
  transition:opacity .9s ease var(--d,0s),translate .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.motion .rv.in{opacity:1;translate:none}
/* A mask, not clip-path: a clipped caption looks invisible to IntersectionObserver.
   Padding gives the script flourishes room inside the masked box. */
.motion .script.w{padding:.2em .15em .3em;margin:-.2em -.15em -.3em;
  -webkit-mask:linear-gradient(90deg,#000 75%,transparent) 0 0/0% 100% no-repeat;mask:linear-gradient(90deg,#000 75%,transparent) 0 0/0% 100% no-repeat;
  transition:-webkit-mask-size 1.4s ease-out .1s,mask-size 1.4s ease-out .1s}
.motion .script.w.in{-webkit-mask-size:135% 100%;mask-size:135% 100%}
.motion .step.rv .n{opacity:0;transform:scale(.4);transition:transform .7s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .25s),opacity .4s calc(var(--d,0s) + .25s)}
.motion .step.in .n{opacity:1;transform:none}


.motion .gift-cards.in img:nth-child(2){animation:none}
.motion .form-ok:not([hidden]){animation:fadeUp .6s both}
.motion .form-ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .6s .35s ease-out forwards}
.motion .intro-btns{animation:fadeUp .6s 1.2s both}

.btn,.btn-outline{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
@media (hover:hover){
  .btn:hover,.btn-outline:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(26,23,24,.16)}
  .value:hover,.crew-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(110,93,78,.16)}
  .avatar{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
  .person:hover .avatar{transform:rotate(-5deg) scale(1.04)}
  .step .n{transition:transform .35s ease,background .35s ease}
  .step:hover .n{transform:scale(1.1);background:var(--beige)}
  .gift-cards img:hover{transform:translateY(-54%) rotate(0) scale(1.05);z-index:5}
  .sw-badge:hover img{transform:translateY(-4px) rotate(-4deg)}
}
@media (hover:hover) and (min-width:861px){
  .svc{transition:transform .35s ease}
  .svc:hover{transform:translateY(-5px)}
}
@media (max-width:860px){
  .motion .menu-open .site-nav{animation:menuIn .35s ease both}
}

/* ---------- Painted masks behind headings (studio brush strokes) ---------- */
.mt{position:relative;isolation:isolate;width:fit-content;max-width:100%}
.mt::before{content:"";position:absolute;left:-.4em;right:-.6em;top:50%;height:1.9em;transform:translateY(-46%) rotate(-1.5deg);z-index:-1;
  background:var(--stroke) center/100% 100% no-repeat,var(--stroke) 45% 55%/96% 90% no-repeat;pointer-events:none}
.mt-green{--stroke:url('assets/stroke-green.webp')}
.mt-orange{--stroke:url('assets/stroke-orange.webp')}
.mt-blue{--stroke:url('assets/stroke-blue.webp')}
.mt-beige{--stroke:url('assets/stroke-beige.webp')}
.mt-white{--stroke:url('assets/stroke-white.png')}
.motion .mt::before{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.5,.1,.3,1) .25s}
.motion .mt.in::before,.motion .rv.in .mt::before{clip-path:inset(0 0 0 0)}