/* BALANSIKI 2.0: a living illustrated garden, within the established identity. */
:root {
  --motion-quick: 160ms;
  --motion-card: 260ms;
  --motion-arrive: 600ms;
  --elevation-card: 0 10px 28px -18px rgb(62 81 72 / 30%);
  --elevation-hover: 0 18px 34px -20px rgb(62 81 72 / 34%);
}
/* Metric-matched display fallback keeps the two-line title stable while Baloo loads. */
@font-face { font-family: BalooFallback; src: local('Arial'); size-adjust: 95%; ascent-override: 105%; descent-override: 30%; line-gap-override: 0%; }
h1,h2,h3 { font-family: Baloo,BalooFallback,sans-serif; }
.hero { padding-top: 58px; column-gap: 38px; }
.hero-copy { padding-bottom: 26px; }
.hero h1 { line-height: 1.06; }
.hero-lead { max-width: 38ch; }
.hero-art { padding: 20px 0 6px; min-height: 0; }
.hero-ground { inset: 0 3% 15% 8%; width: auto; height: auto; border-radius: 53% 47% 25% 34% / 46% 44% 29% 32%; }
.living-scene { display: block; overflow: visible; aspect-ratio: 640 / 420; width: 113%; max-width: 113%; }
.scene-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; margin-top: 18px; }
.scene-footer .art-caption { margin: 0; }
.scene-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; min-height: 44px; background: transparent; border-radius: 8px; color: var(--secondary); font-size: 12px; }
.scene-toggle:hover { background: var(--mist); color: var(--ink); }
.scene-toggle .play-icon { display: none; }
.scene-toggle[aria-pressed=true] .pause-icon { display: none; }
.scene-toggle[aria-pressed=true] .play-icon { display: block; }
.hero-values { margin-top: 34px; padding-block: 24px; }
.hero-values img { transition: transform var(--motion-card) var(--ease); }
.scene-plant { transform-box: view-box; }
.scene-plant-left { transform-origin: 59px 353px; animation: garden-balance 12s ease-in-out infinite alternate; }
.scene-plant-right { transform-origin: 581px 353px; animation: garden-balance 15s -5s ease-in-out infinite alternate-reverse; }
.scene-cloud-left { animation: garden-cloud 18s ease-in-out infinite alternate; }
.scene-cloud-right { animation: garden-cloud 16s -7s ease-in-out infinite alternate-reverse; }
.scene-heart { transform-box: fill-box; transform-origin: center; animation: garden-heart 9s ease-in-out infinite; }
.living-scene g[class] { animation-play-state: paused; }
.hero-art.scene-playing g[class] { animation-play-state: running; }
@keyframes garden-balance { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes garden-cloud { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes garden-heart { 0%,68%,100% { transform: scale(1); } 82% { transform: scale(1.07); } }
@keyframes garden-arrive { from { opacity: .75; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes garden-open { from { opacity: .7; transform: scale(.98); } to { opacity: 1; transform: none; } }
.motion-ready .hero h1 { animation: garden-arrive 500ms var(--ease) both; }
.motion-ready .hero .living-scene { animation: garden-open var(--motion-arrive) var(--ease) both; }
.motion-ready .hero-actions { animation: garden-arrive 500ms 80ms var(--ease) both; }
.button { transition-duration: var(--motion-quick); }
.button:active { transform: translateY(0) scale(.985); }
.button:focus-visible { outline-offset: 5px; }
.text-link:focus-visible { border-bottom-color: transparent; }
.main-nav a:focus-visible::after { transform: scaleX(1); }
.intro { padding-top: 112px; padding-bottom: 112px; }
.intro-body { max-width: 52ch; }
.intro-heading h2 { max-width: 15ch; }
.classes,.gallery,.quiet-section,.contact-section { position: relative; }
.classes::before,.gallery::before { content: ''; position: absolute; top: -25px; left: 0; right: 0; height: 26px; background: url('../images/mountain-divider.svg') center bottom / 100% 100% no-repeat; pointer-events: none; }
.gallery::before { background-image: url('../images/garden-divider.svg'); }
.class-card { box-shadow: var(--elevation-card); transition: transform var(--motion-card) var(--ease),box-shadow var(--motion-card) var(--ease); }
.class-icon { transition: transform 320ms var(--ease); }
.class-card h3 { max-width: 17ch; }
.class-card:focus-within { box-shadow: var(--elevation-hover); }
.class-card .text-link { min-height: 44px; }
.class-filters button { transition-timing-function: var(--ease); }
.process-list { position: relative; gap: 36px; }
.process-list li { padding-top: 23px; }
.process-list li::after { content: ''; position: absolute; right: -9px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.process-list li:last-child::after { background: var(--rose); }
.quiet-section { padding-block: 94px; border-radius: 0 64px 0 0; }
.calm-art>span { z-index: 1; }
.about-copy { max-width: 51ch; }
.patrycja-poster { border-radius: 47% 47% 24px 24px; }
.poster-branch { transform-origin: center; }
.gallery-grid { align-items: start; gap: 28px; }
.gallery-link { transition: box-shadow var(--motion-card) var(--ease); }
.gallery-image { overflow: hidden; }
.gallery-image>img { transition: transform 500ms var(--ease); }
.gallery-open { width: 44px; height: 44px; transition: transform var(--motion-card) var(--ease),background var(--motion-card); }
.gallery-link:focus-visible { outline-offset: 5px; }
.gallery-dialog { border: 0; border-radius: 16px; box-shadow: 0 24px 80px rgb(20 35 25 / 22%); }
.gallery-dialog[open] { animation: garden-arrive 240ms var(--ease); }
.gallery-dialog::backdrop { background: rgb(35 51 42 / 76%); }
.dialog-close { min-height: 44px; }
.faq-list details { transition: background var(--motion-card); }
.faq-list details[open] { background: rgb(233 237 226 / 42%); }
.faq-list summary { transition: color var(--motion-quick); }
.faq-list summary:after { content: '+'; transition: transform var(--motion-card) var(--ease); transform-origin: center; }
.faq-list details[open] summary:after { content: '+'; transform: rotate(45deg); }
.faq-list summary:hover { color: var(--plum); }
.faq-answer { overflow: hidden; }
.faq-answer>p { font-size: 16px; line-height: 1.75; padding: 0 35px 25px 0; color: var(--secondary); }
.contact-section { overflow: clip; border-radius: 64px 0 0 0; }
.contact-copy { position: relative; isolation: isolate; }
.contact-branch { position: absolute; bottom: -32px; right: 26px; width: 112px; height: 215px; opacity: .3; transform: rotate(14deg); z-index: -1; pointer-events: none; }
.contact-copy .proposal-note { max-width: 44ch; padding-right: 20px; }
.message-composer { box-shadow: 0 14px 40px -26px rgb(62 81 72 / 25%); }
.field input,.field select,.field textarea { transition: background var(--motion-quick),box-shadow var(--motion-quick); }
.field input:focus,.field select:focus,.field textarea:focus { background: #fffdf8; box-shadow: 0 0 0 3px rgb(188 172 203 / 20%); }
.motion-ready .art-reveal.arrived { animation: garden-arrive 500ms var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .class-card:hover { transform: translateY(-4px); box-shadow: var(--elevation-hover); }
  .class-card:hover .class-icon { transform: rotate(-4deg) translateY(-2px); }
  .hero-values span:hover img { transform: rotate(-5deg); }
  .gallery-link:hover .gallery-image>img { transform: scale(1.025); }
  .gallery-link:hover .gallery-open { transform: rotate(5deg); background: var(--mist); }
}
@media (min-width:1600px) { .hero { padding-top: 70px; } .hero-art { min-height: 480px; } }
@media (min-width:701px) and (max-width:1180px) {
  .hero { padding-top: 54px; column-gap: 16px; }
  .hero h1 { font-size: clamp(52px,6.4vw,72px); }
  .hero-art { padding-bottom: 22px; }
  .scene-footer .art-caption { max-width: 210px; font-size: 12px; text-align: center; }
}
@media (max-width:700px) {
  .hero { padding-top: 31px; }
  .hero h1 { font-size: clamp(48px,14.6vw,58px); line-height: 1.06; min-height: 2.12em; }
  .hero-lead { margin-top: 16px; font-size: 17px; max-width: 33ch; }
  .hero-actions { gap: 14px 20px; margin-top: 23px; }
  .hero-actions .button { min-height: 52px; }
  .location { margin-top: 17px; }
  .hero-art { padding: 22px 0 0; margin-top: 25px; }
  .hero-ground { inset: 0 5% 17% 6%; }
  .living-scene { width: 100%; max-width: 100%; }
  .scene-footer { margin-top: 9px; gap: 0; }
  .scene-footer .art-caption { font-size: 12px; max-width: none; }
  .scene-plant-left,.scene-plant-right { animation-duration: 18s; }
  .scene-cloud-left,.scene-cloud-right { animation-name: garden-cloud-mobile; }
  .scene-heart { animation: none; }
  .hero-values { margin-top: 21px; }
  .intro { padding-block: 76px; }
  .classes::before,.gallery::before { height: 17px; top: -16px; }
  .class-card { padding: 26px; }
  .class-card h3 { font-size: 30px; max-width: 18ch; }
  .class-card .text-link { min-height: 46px; font-size: 14px; }
  .process-list { gap: 30px 24px; }
  .process-list li::after { right: 0; }
  .quiet-section { border-top-right-radius: 38px; padding-block: 66px; }
  .gallery-grid { gap: 25px 14px; }
  .gallery-image:not(.gallery-world) { aspect-ratio: 1.05; }
  .gallery-world { aspect-ratio: 1.2; }
  .gallery-open { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .faq-answer>p { font-size: 15px; padding: 0 20px 22px 0; }
  .contact-section { border-top-left-radius: 38px; }
  .contact-branch { width: 88px; height: 170px; right: 24px; bottom: 0; opacity: .22; }
  .message-composer { margin-top: 34px; }
}
@keyframes garden-cloud-mobile { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.calm-art:not(.calm-visible) .calm-ring,.calm-art:not(.calm-visible)>img { animation-play-state: paused; }
@media (max-width:365px) { .hero-lead { font-size: 16px; } .hero-actions { gap: 12px; } .class-card { padding: 23px; } }
@media (prefers-reduced-motion:reduce) {
  .living-scene g[class] { animation: none!important; transform: none!important; }
  .scene-toggle { display: none!important; }
  .class-card:hover,.class-icon,.gallery-image>img,.gallery-open { transform: none!important; }
  .motion-ready .hero h1,.motion-ready .hero .living-scene,.motion-ready .hero-actions,.motion-ready .art-reveal.arrived { animation: none!important; }
}
@media print { .scene-toggle,.contact-branch { display: none!important; } }