/* ===== Diorama hero ===== */
.dio{position:absolute;inset:0;overflow:hidden;z-index:0}
.dio-bg,.dio-fx,.dio-stage{position:absolute;inset:-24px;will-change:transform}
.dio-stage{inset:0}
.sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 60%;transition:opacity .6s}
.sc-night{opacity:0}
[data-theme=night] .sc-night{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
 linear-gradient(0deg,rgba(6,4,3,.86) 0,rgba(6,4,3,.5) 34%,rgba(6,4,3,0) 62%),
 linear-gradient(90deg,rgba(6,4,3,.72) 0,rgba(6,4,3,.35) 38%,rgba(6,4,3,0) 58%)}
[data-theme=day] .hero-shade{background:linear-gradient(0deg,rgba(28,16,8,.82) 0,rgba(28,16,8,.45) 34%,rgba(28,16,8,0) 62%),linear-gradient(90deg,rgba(28,16,8,.66) 0,rgba(28,16,8,.3) 38%,rgba(28,16,8,0) 58%)}
.v-a4 .hero-in{z-index:3;top:auto!important;bottom:clamp(2rem,7vh,4.5rem)!important;transform:none!important;max-width:min(38rem,44%)}
.v-a4 .hero-title{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.v-a4 .frame-hero .lead{color:#f1ece6}
.v-a4 .frame-hero .eyebrow{color:#ff8a5c}
.dio-stage{z-index:2}
/* actors */
.actor{position:absolute;bottom:6%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.actor:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:8px}
.dog{left:47%;height:44%;aspect-ratio:589/674}
.scout{left:71%;height:42%;aspect-ratio:509/650}
.a-in{position:absolute;inset:0;display:block;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.l{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
.l+.l{filter:none}
.dog .body{clip-path:polygon(22% 0,56% 0,60% 46%,100% 42%,100% 100%,0 100%,0 70%,22% 70%)}
.dog .tail{clip-path:polygon(0 50%,27% 50%,27% 73%,0 75%);transform-origin:24% 56%;animation:wag .55s ease-in-out infinite alternate}
.dog .scarf{clip-path:polygon(0 0,23% 0,23% 50%,0 50%);transform-origin:23% 30%;animation:flutter 1.4s ease-in-out infinite alternate}
.dog .head{clip-path:polygon(54% 0,100% 0,100% 45%,60% 50%);transform-origin:68% 44%;animation:look 5s ease-in-out infinite;transition:transform .3s}
.scout .body{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 62%,22% 62%,22% 28%,0 28%)}
.scout .lens{clip-path:polygon(0 28%,24% 28%,24% 64%,0 64%);transform-origin:19% 64%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.scout .a-in{animation-duration:2.7s;animation-delay:-1s}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.018) translateY(-1px)}}
@keyframes wag{from{transform:rotate(-9deg)}to{transform:rotate(10deg)}}
@keyframes flutter{from{transform:rotate(-3deg) skewY(-2deg)}to{transform:rotate(4deg) skewY(2deg)}}
@keyframes look{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-4deg)}90%{transform:rotate(2deg)}}
/* interactions */
.scout.inspect .lens{transform:rotate(-16deg) translate(-4%,-3%)}
.scout.inspect .a-in{animation:lean 1.3s ease-in-out}
@keyframes lean{0%,100%{transform:none}40%,70%{transform:rotate(-4deg) translateX(-2%)}}
.dog.react .a-in{animation:hop .9s cubic-bezier(.3,.7,.4,1)}
.dog.react .head{animation:none;transform:rotate(11deg)}
.dog.react .tail,.dog.bark .tail{animation-duration:.22s}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.03,.95)}45%{transform:translateY(-16%) scale(.98,1.03)}75%{transform:translateY(0) scale(1.03,.96)}}
.bubble{position:absolute;left:auto;right:30%;bottom:98%;white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:clamp(.72rem,1vw,.9rem);letter-spacing:.04em;text-transform:uppercase;color:#1b1410;background:#fff7ec;border:2px solid #1b1410;padding:.45em .8em;border-radius:14px;opacity:0;transform:translateY(8px) scale(.8);transform-origin:80% 100%;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bubble::after{content:"";position:absolute;right:16%;top:100%;border:8px solid transparent;border-top-color:#1b1410;border-bottom:0}
.dog.bark .bubble{opacity:1;transform:none}
.dog.bark .head{transform:rotate(-6deg) translateY(-2%)}
.spirit{position:absolute;left:62%;bottom:46%;height:16%;aspect-ratio:497/559;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,150,60,.55))}
.spirit img{width:100%;height:100%;object-fit:contain;animation:glowb 2.4s ease-in-out infinite}
@keyframes glowb{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.scroll{position:absolute;left:0;top:0;width:34px;height:13px;margin:-6px 0 0 -17px;border-radius:7px;background:linear-gradient(90deg,#8a5a2b 0 4px,#f3e2c2 4px calc(100% - 4px),#8a5a2b calc(100% - 4px));box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:3}
/* particles: fireflies at night, pollen + leaves by day */
.dio-fx{z-index:1;pointer-events:none}
.p{position:absolute;left:var(--x);top:var(--y);width:calc(5px*var(--s));height:calc(5px*var(--s));border-radius:50%;background:#ffd27a;box-shadow:0 0 10px 3px rgba(255,190,90,.55);animation:fly var(--d) ease-in-out infinite,blink calc(var(--d)/3) ease-in-out infinite;animation-delay:var(--dl)}
.p.leaf{display:none}
[data-theme=day] .p{background:rgba(255,248,220,.9);box-shadow:0 0 4px rgba(255,255,230,.6);animation:drift var(--d) linear infinite;animation-delay:var(--dl)}
[data-theme=day] .p.leaf{display:block;width:calc(11px*var(--s));height:calc(6px*var(--s));border-radius:70% 0;background:#9ab45a;box-shadow:none;opacity:.85}
@keyframes fly{0%,100%{transform:translate(0,0)}25%{transform:translate(18px,-22px)}50%{transform:translate(-12px,-34px)}75%{transform:translate(-20px,-8px)}}
@keyframes blink{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes drift{0%{transform:translate(-30px,-40px) rotate(0);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translate(120px,140px) rotate(320deg);opacity:0}}
/* static pose (reduced motion) */
.dio.static *,.dio.static{animation:none!important;transition:none!important}
.dio.static .bubble{opacity:0}
@media (prefers-reduced-motion:reduce){.dio *{animation:none!important;transition:none!important}}
/* header theme toggle */
.theme-tg{position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.55);background:transparent;cursor:pointer;margin-left:1rem;flex:none;color:#fff}
.theme-tg:hover{border-color:var(--acc)}
.tg-ic{position:absolute;inset:0;display:grid;place-items:center}
.tg-ic .sun,.tg-ic .moon{grid-area:1/1;transition:transform .4s,opacity .4s}
.tg-ic .moon{width:16px;height:16px;border-radius:50%;box-shadow:inset -5px -3px 0 0 currentColor}
.tg-ic .sun{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 -9px 0 -3px currentColor,0 9px 0 -3px currentColor,9px 0 0 -3px currentColor,-9px 0 0 -3px currentColor,6px 6px 0 -3px currentColor,-6px -6px 0 -3px currentColor,6px -6px 0 -3px currentColor,-6px 6px 0 -3px currentColor;opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme=day] .tg-ic .sun{opacity:1;transform:none}
[data-theme=day] .tg-ic .moon{opacity:0;transform:rotate(90deg) scale(.5)}
.logo-day{display:none!important}
[data-theme=day] .logo-day{display:block!important}[data-theme=day] .logo-night{display:none!important}
.aan .logo-day{display:none!important}[data-theme=day] .aan .logo-day{display:inline-block!important}
/* why-a-dog sprite card */
.why-sprite{background:radial-gradient(60% 55% at 50% 60%,rgba(243,108,64,.22),transparent 70%),linear-gradient(180deg,#0b0907,#140d09)!important;display:grid;place-items:end center}
.why-sprite .why-dog{position:relative!important;inset:auto!important;width:82%!important;height:auto!important;margin:0 auto 6%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
/* mobile hero */
@media (max-width:900px){
 .dio{position:relative;inset:auto;height:clamp(300px,62vw,460px);flex:none}
 .sc{object-position:55% 70%}
 .hero-shade{background:linear-gradient(0deg,rgba(6,4,3,.55),rgba(6,4,3,0) 45%)!important}
 .dog{left:24%;height:52%;bottom:5%}.scout{left:58%;height:50%;bottom:5%}
 .spirit{height:18%;bottom:58%}
 .v-a4 .hero-in{max-width:none;position:relative!important;bottom:auto!important;padding:2rem var(--gut) 2.25rem!important}
 .v-a4 .hero-frame{background:#0b0807}
}

/* ===== Day theme (site-wide) ===== */
[data-theme=day]{--bg:#F7F1E7;--tx:#3a332d;--hi:#211c18;--ln:rgba(40,30,22,.22);--acc:#D4522A;--acct:#A8411A;color-scheme:light}
html[data-theme=day],[data-theme=day] body{background:#F7F1E7}
[data-theme=day] body{color:#3a332d}
[data-theme=day].v-a4 .sec,[data-theme=day].v-a4 .strip,[data-theme=day].v-a4 .contact,[data-theme=day].v-a4 .frame-hero,[data-theme=day].v-a4 .site-footer{background:#F7F1E7}
[data-theme=day].v-a4 .sec:nth-of-type(even){background:#F1E8DA}
[data-theme=day].v-a4 .sec,[data-theme=day].v-a4 .strip{border-top-color:rgba(40,30,22,.1)}
[data-theme=day].v-a4 h2,[data-theme=day].v-a4 h3,[data-theme=day].v-a4 .h2{color:#211c18}
[data-theme=day].v-a4 .hero-title{color:#fff}
[data-theme=day].v-a4 .eyebrow,[data-theme=day].v-a4 .disc .num,[data-theme=day].v-a4 .svc-n,[data-theme=day].v-a4 .step-n,[data-theme=day] .tabs .tn,[data-theme=day] .fb-n{color:#A8411A}
[data-theme=day].v-a4 .eyebrow::before{border-left-color:#A8411A}
[data-theme=day].v-a4 .lead,[data-theme=day].v-a4 .intro,[data-theme=day].v-a4 p,[data-theme=day].v-a4 li{color:#3a332d}
[data-theme=day].v-a4 .strip-copy,[data-theme=day].v-a4 .xp-loc,[data-theme=day].v-a4 .role,[data-theme=day].v-a4 .tm,[data-theme=day].v-a4 .roles li{color:#5a5047}
[data-theme=day].v-a4 .site-header{background:rgba(247,241,231,.9);border-bottom-color:rgba(40,30,22,.15)}
[data-theme=day].v-a4 .nav a{color:#2a241f}
[data-theme=day] .theme-tg,[data-theme=day] .menu-btn{border-color:rgba(40,30,22,.45);color:#211c18}
[data-theme=day] .menu-btn span{background:#211c18}
[data-theme=day].v-a4 .btn{border-color:rgba(33,28,24,.75);color:#211c18}
[data-theme=day].v-a4 .btn::after{background:#211c18}
[data-theme=day].v-a4 .btn:hover,[data-theme=day].v-a4 .btn:focus-visible{color:#fff}
[data-theme=day].v-a4 .btn-acc{border-color:#D4522A}[data-theme=day].v-a4 .btn-acc::after{background:#D4522A}
[data-theme=day].v-a4 .frame-hero .btn{border-color:rgba(255,255,255,.8);color:#fff}
[data-theme=day].v-a4 .frame-hero .btn::after{background:#fff}
[data-theme=day].v-a4 .frame-hero .btn:hover{color:#211c18}
[data-theme=day].v-a4 .frame-hero .btn-acc{border-color:#F36C40}[data-theme=day].v-a4 .frame-hero .btn-acc::after{background:#F36C40}
[data-theme=day] .framed::before{border-color:rgba(33,28,24,.7)}
[data-theme=day] .framed::after{border-color:#D4522A}
[data-theme=day].v-a4 .logo-tile,[data-theme=day].v-a4 .disc,[data-theme=day].v-a4 .step,[data-theme=day].v-a4 .xp,[data-theme=day].v-a4 .traits li,[data-theme=day].v-a4 .member,[data-theme=day].v-a4 .form{background:#FBF7F0}
[data-theme=day].v-a4 .disc:hover{background:#fff}
[data-theme=day].v-a4 .logo-tile img,[data-theme=day].v-a4 .xp-logo img{filter:brightness(0);opacity:.78}
[data-theme=day].v-a4 .logo-tile:hover img{opacity:1}
[data-theme=day] .tabs [role=tab]{color:#5a5047}[data-theme=day] .tabs [role=tab][aria-selected=true]{color:#211c18}
[data-theme=day].v-a4 .step-dot{background:#F7F1E7}
[data-theme=day].v-a4 .form input,[data-theme=day].v-a4 .form select,[data-theme=day].v-a4 .form textarea{background:#fff;border-color:rgba(40,30,22,.4);color:#211c18}
[data-theme=day].v-a4 .form label{color:#3a332d}
[data-theme=day].v-a4 a{color:inherit}
[data-theme=day].v-a4 .site-footer .foot p,[data-theme=day].v-a4 .site-footer .copy,[data-theme=day].v-a4 .site-footer .aan{color:#4a4139}
[data-theme=day].v-a4 .site-footer nav a{color:#211c18}
[data-theme=day].v-a4 .site-footer .copy{border-top-color:rgba(40,30,22,.14)!important}
[data-theme=day] .side-txt{color:rgba(255,255,255,.8)}
[data-theme=day] .to-top{background:#F7F1E7;border-color:rgba(40,30,22,.5)}[data-theme=day] .to-top::before{border-bottom-color:#211c18}
[data-theme=day] .xp-img img,[data-theme=day] .svc-img img{filter:none}
/* portraits on black become framed dark "screens" by day */
[data-theme=day] .portrait,[data-theme=day].v-a4 .photo.char,[data-theme=day] .why-sprite{background:#15110e!important;border:6px solid #2a221c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px rgba(60,40,20,.18);border-radius:6px}
[data-theme=day] .portrait img,[data-theme=day] .photo.char img{border-radius:2px}
[data-theme=day] .fallback{background:#15110e}
/* smooth theme change */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,opacity .4s ease!important}
@media (prefers-reduced-motion:reduce){html.theme-anim *{transition:none!important}}
[data-theme=day] body{background:#F7F1E7;color:#3a332d}
html:not([data-theme=day]) body{background:#000}
[data-theme=day].v-a4 .site-header.compact,[data-theme=day].v-a4 .site-header.open{background:rgba(247,241,231,.92)}
[data-theme=day].v-a4 .mobile-menu{background:#F7F1E7;color:#211c18}
@media (max-width:900px){[data-theme=day].v-a4 .hero-frame{background:#1c130d}}
[data-theme=day].v-a4 .frame-hero .eyebrow{color:#ff9a6e}
[data-theme=day].v-a4 .frame-hero .eyebrow::before{border-left-color:#ff9a6e}
[data-theme=day].v-a4 .frame-hero .lead{color:#f6efe6}
[data-theme=day].v-a4 img.xp-logo{filter:brightness(0);opacity:.8}
[data-theme=day].v-a4 strong{color:#211c18}
[data-theme=day].v-a4 .site-header,[data-theme=day].v-a4 .site-header.compact{background:rgba(255,255,255,.96)}
[data-theme=day].v-a4 .site-footer{background:#fff}
[data-theme=day] .svc-img,[data-theme=day] .xp-img{background:#15110e!important;border:6px solid #2a221c!important;border-radius:6px}
.v-a4 .site-footer .aan img.logo-day{height:20px;width:auto}
/* polish round 2 */
.v-a4 .hero-in{left:max(1.75rem,calc(var(--edge) - var(--frame) - 1px))!important;max-width:min(48rem,46%)}
.v-a4 .hero-title{font-size:clamp(2.4rem,4.6vw,5rem)}
@media (max-width:1200px) and (min-width:901px){.v-a4 .hero-in{max-width:50%}.dog{left:52%;height:38%}.scout{left:74%;height:36%}.spirit{height:13%}}
@media (max-width:900px){.v-a4 .logos{grid-template-columns:repeat(5,1fr)}.v-a4 .logo-tile{padding:.9rem}}
@media (max-width:600px){.v-a4 .logos{grid-template-columns:repeat(2,1fr)}.v-a4 .logo-tile:last-child{grid-column:span 2;aspect-ratio:auto;min-height:5.5rem}}
.v-a4 .logo-tile{min-width:0}.v-a4 .logos{min-width:0}@media (max-width:900px){.v-a4 .strip .wrap>*{min-width:0}}
html.v-a4,.v-a4 body{overflow-x:clip}.dio{contain:paint}
/* Artorias-style motion only: parallax (JS) + gentle idle float */
.actor{cursor:default;pointer-events:none}
.actor img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
.actor .a-in{animation:idle 5.5s ease-in-out infinite}
.scout .a-in{animation-duration:6.2s;animation-delay:-2s}
.spirit .a-in{animation:idlef 4.8s ease-in-out infinite}
.spirit{left:62%;transform:none}
@keyframes idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.006)}}
@keyframes idlef{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.actor .a-in{animation:none}}
/* day: header/footer on the same sand as the page (no white strip, no logo plate) */
[data-theme=day].v-a4 .site-header,[data-theme=day].v-a4 .site-header.compact,[data-theme=day].v-a4 .site-header.open{background:rgba(247,241,231,.96)!important}
[data-theme=day].v-a4 .site-footer{background:#F7F1E7!important}
@media (max-width:900px){.v-a4 .hero-in{max-width:none!important;left:auto!important;right:auto!important;width:auto!important}}