:root{
  --sand:#F3E6D3;--panel:#FBF4EA;--tint:#E8D2B4;--line:#D9BF9C;--pale:#EFE0CB;
  --ink:#1F3326;--ink2:#3E4A3F;--mute:#6E5F4B;--brown:#5A2312;
  --terra:#B5482A;--rust:#9A2E14;--forest:#1F4D35;--leaf:#4F7A5E;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sand);color:var(--ink);font-family:var(--font);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--forest)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(20px,4vw,48px);border-bottom:1px solid var(--tint)}
.logo{font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.logo span{color:var(--terra)}
.top nav{display:flex;gap:28px}
.top nav a{color:var(--ink2);text-decoration:none;font-size:16px;padding:10px 2px;border-bottom:2px solid transparent}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--terra)}
.top nav a:hover{color:var(--ink)}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vh,48px) clamp(20px,4vw,48px)}
.page{width:100%;max-width:1180px}
.page[hidden]{display:none}

.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.slot-tag{height:34px}
.tag{display:inline-block;font-size:14px;background:var(--tint);color:var(--brown);padding:5px 14px;border-radius:999px}
.home h1{font-size:clamp(32px,3.6vw,54px);line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:14px 0 0;height:calc(3 * 1.1em)}
.hot{color:var(--terra)}
.good{color:var(--forest)}
.sub{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--ink2);margin:14px 0 0}
.home .sub{height:calc(3 * 1.5em)}
.cta-row{margin-top:22px}
.fade{transition:opacity .45s ease}
.fade.out{opacity:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:10px;background:var(--forest);color:var(--sand);font:600 17px/1 var(--font);text-decoration:none;cursor:pointer;transition:background .2s,transform .1s}
.btn:hover{background:#173D29}
.btn:active{transform:scale(.98)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.7;cursor:wait}

.stage-wrap{position:relative}
.stage{width:100%;height:auto;max-height:62vh;display:block}
.pause{position:absolute;right:0;bottom:-6px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.pause svg{fill:currentColor}
.pause #pb-play{display:none}
.pause.paused #pb-i1,.pause.paused #pb-i2{display:none}
.pause.paused #pb-play{display:inline}

.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.contact h1{font-size:clamp(30px,3.2vw,48px);line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:0}
.mail{margin:18px 0 0;font-size:16px}
.card{background:var(--panel);border:1px solid var(--tint);border-radius:14px;padding:clamp(18px,2vw,28px)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.field{margin-bottom:12px}
.grid .field{margin-bottom:0}
label{display:block;font-size:14px;color:var(--ink2);margin-bottom:5px}
input,select,textarea{width:100%;font:16px/1.4 var(--font);color:var(--ink);background:#FFFDF9;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
input::placeholder,textarea::placeholder{color:#8C7B64}
input:focus,select:focus,textarea:focus{outline:2px solid var(--forest);outline-offset:0;border-color:var(--forest)}
textarea{resize:vertical;min-height:72px}
.grid+.field{margin-top:12px}
.er{font-size:13px;color:var(--rust);margin-top:4px;min-height:0}
.form-er{margin-top:8px}
.fine{font-size:13px;color:var(--mute);margin:10px 0 0;text-align:center}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.done{text-align:center;padding:40px 24px}
.done[hidden]{display:none}
.done-h{font-size:20px;font-weight:600;margin:12px 0 0}
.done-s{color:var(--ink2);margin:6px 0 0}

/* svg palette */
.s-terra{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round}
.s-terra15{fill:none;stroke:var(--terra);stroke-width:1.5}
.s-ink{fill:none;stroke:var(--ink2);stroke-width:2}
.s-ink25{fill:none;stroke:var(--ink2);stroke-width:2.5;stroke-linecap:round}
.s-line{fill:none;stroke:var(--line);stroke-width:1.5}
.s-line1{fill:none;stroke:var(--line);stroke-width:1}
.s-tint{fill:none;stroke:var(--tint);stroke-width:1}
.s-rust{fill:none;stroke:var(--rust);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.s-mute{fill:none;stroke:#7A6A55;stroke-width:2;stroke-linecap:round}
.s-x{fill:none;stroke:var(--panel);stroke-width:2.5;stroke-linecap:round}
.s-tick{fill:none;stroke:var(--sand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s-forest{fill:none;stroke:var(--forest);stroke-width:2}
.f-forest{fill:var(--forest)}.f-leaf{fill:var(--leaf)}.f-terra{fill:var(--terra)}.f-rust{fill:var(--rust)}
.f-panel{fill:var(--panel)}.f-tint{fill:var(--tint)}.f-pale{fill:var(--pale)}.f-white{fill:#fff}.f-ink2{fill:var(--ink2)}
.t11{font-size:11px}.t12{font-size:12px}.t13{font-size:13px}.t14{font-size:14px}.t34{font-size:34px}
.stage text{font-family:var(--font)}
.c-ink{fill:var(--ink)}.c-ink2{fill:var(--ink2)}.c-mute{fill:#7A6A55}.c-brown{fill:var(--brown)}
.c-terra{fill:var(--terra)}.c-rust{fill:var(--rust)}.c-sand{fill:var(--sand)}.c-panel{fill:var(--panel)}

/* scenes */
.sc{opacity:0;transition:opacity .6s}
.sc.on{opacity:1}
.on .bill{animation:bl 5.1376s ease-in-out infinite}
@keyframes bl{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(78px,-34px);opacity:0}}
.on .zz{animation:zz 5.7798s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translateY(6px)}50%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.walk{opacity:0}
.on .walk{animation:wk 9.633s linear infinite}
@keyframes wk{0%{transform:translateX(0);opacity:0}10%{opacity:1}55%{transform:translateX(150px)}85%{opacity:1}100%{transform:translateX(265px);opacity:0}}
.pop{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.on .pop{animation:pp 1.44495s ease-out forwards}
@keyframes pp{to{transform:scale(1)}}
.nt{opacity:0;transform:translateY(-10px)}
.on .nt{animation:nt 1.44495s ease-out forwards}
@keyframes nt{to{opacity:1;transform:translateY(0)}}
.on .ring{animation:rg 3.211s ease-out infinite}
@keyframes rg{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.type{transform-box:fill-box;transform-origin:right;transform:scaleX(1)}
.on .type{animation:ty 3.8532s steps(14) forwards}
@keyframes ty{to{transform:scaleX(0)}}
.on .sink{animation:sk 5.1376s ease-in 4.4954s forwards}
@keyframes sk{to{transform:translateY(14px);opacity:.4}}
.cold{opacity:0}
.on .cold{animation:cd 1.6055s ease-out forwards}
@keyframes cd{to{opacity:1}}
.on .d03{animation-delay:0.9633s}.on .d04{animation-delay:1.2844s}.on .d055{animation-delay:1.76605s}.on .d06{animation-delay:1.9266s}
.on .d08{animation-delay:2.5688s}.on .d09{animation-delay:2.8899s}.on .d1{animation-delay:3.211s}.on .d11{animation-delay:3.5321s}
.on .d12{animation-delay:3.8532s}.on .d13{animation-delay:4.1743s}.on .d16{animation-delay:5.1376s}.on .d18{animation-delay:5.7798s}
.on .d19{animation-delay:6.1009s}.on .d2{animation-delay:6.422s}.on .d22{animation-delay:7.0642s}.on .d24{animation-delay:7.7064s}
.on .d25{animation-delay:8.0275s}.on .d27{animation-delay:8.6697s}.on .d29{animation-delay:9.3119s}
.paused-anim .sc *{animation-play-state:paused!important}

/* full-screen, no scroll on laptop and desktop */
@media (min-width:900px) and (min-height:560px){
  html,body{height:100%;overflow:hidden}
}
/* tablets and phones: stack and allow scrolling */
@media (max-width:899px){
  .home,.contact{grid-template-columns:1fr}
  .home .stage-wrap{order:-1;max-width:520px;margin:0 auto;width:100%}
  .stage{max-height:none}
  .home h1{font-size:clamp(28px,7.6vw,40px);height:calc(3 * 1.1em)}
  .home .sub{height:calc(3 * 1.5em)}
  main{align-items:flex-start;padding-top:16px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .top nav{gap:18px}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sc,.fade{transition:none}
  .sc *{animation:none!important}
  .pop{transform:none}.nt,.cold{opacity:1;transform:none}.type{transform:scaleX(0)}
}