/* Findlings public site. Palette D (Berry and plum) from docs/design/landing-film-mockups.html.
   Nunito is self-hosted (SIL Open Font License, fonts/OFL.txt): the site loads nothing from third parties. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#EADFF9;--blob:#F6D3E6;--desk:#8665CC;--deskEdge:#6B4DAE;--rule:#E3D8F5;
  --book:#0C7869;--bookDark:#08584C;--band:#2ECBB8;--label:#F07FB7;
  --print:#523A89;--pagePrint:#EADFF9;--lines:#C9B2E0;
  --lamp:#3B2A63;--lampDark:#2A1B44;--joint:#E0559B;--pot:#C13D80;--potRim:#9C2E66;
  --dino:#3570C4;--dinoDark:#24539A;--plate:#5CDCCB;--spot:#6AA3EE;
  --ink:#2A1B44;--stripe:#E86AA9;--c1:#C13D80;--c2:#109887;--c3:#3570C4;--c4:#BFA2EC;
  --wu:#C13D80;--wut:#521333;--wus:#F5A3CC;--wlo:#3570C4;--wlos:#D9E9FF;
  --awu:#109887;--awut:#04382F;--awus:#B8F0E9;--awlo:#8665CC;--awlos:#EADFF9;
  --nzA:#FF9A1F;--nzB:#FF5A45;--nzC:#FFE326;--nzInk:#3A2410;--nzPale:#FFF2D9;
  --heroL:#EADFF9;--heroR:#F6D3E6;--vbA:#D7C4F2;--vbB:#F5A3CC;--spotA:#EADFF9;--spotB:#F9DDEB;
  --pillBg:#EADFF9;--pillInk:#3B2A63;--foot:#2A1B44;--footInk:#D7C4F2;
  --case:#109887;--caseD:#0C7869;}
:root{--rose:#E0559B;--teal:#14B8A6;--teal50:#E6FAF7;--teal700:#0C7869;--navy100:#D2E1EE;--navy200:#A9C4DA;--navy400:#5589B1;--navy500:#2F6C96;--navy700:#1C455F;--navy800:#16324A}

/* illustration colour roles */
.f-bg{fill:var(--bg)}.f-blob{fill:var(--blob)}.f-desk{fill:var(--desk)}.f-deskE{fill:var(--deskEdge)}
.f-book{fill:var(--book)}.f-bookD{fill:var(--bookDark)}.f-band{fill:var(--band)}.f-label{fill:var(--label)}.s-label{stroke:var(--label)}
.f-print{fill:var(--print)}.f-pprint{fill:var(--pagePrint)}.s-pprint{stroke:var(--pagePrint)}.s-lines{stroke:var(--lines)}.s-rule{stroke:var(--rule)}.f-rule{fill:var(--rule)}
.f-lamp{fill:var(--lamp);stroke:var(--lamp)}.f-lampD{fill:var(--lampDark)}.f-joint{fill:var(--joint)}.f-pot{fill:var(--pot)}.f-potR{fill:var(--potRim)}
.f-dino{fill:var(--dino)}.s-dino{stroke:var(--dino)}.f-dinoD{fill:var(--dinoDark)}.s-dinoD{stroke:var(--dinoDark)}.f-plate{fill:var(--plate);stroke:var(--plate)}.f-spot{fill:var(--spot)}
.f-ink{fill:var(--ink)}.s-ink{stroke:var(--ink)}.f-stripe{fill:var(--stripe)}
.f-c1{fill:var(--c1)}.f-c2{fill:var(--c2)}.f-c3{fill:var(--c3)}.f-c4{fill:var(--c4)}.fs-c1{fill:var(--c1);stroke:var(--c1)}.fs-c4{fill:var(--c4);stroke:var(--c4)}
.s-c1{stroke:var(--c1)}.s-c2{stroke:var(--c2)}.s-c4{stroke:var(--c4)}
/* frame 4 noise: hot alert colours that clash with every palette on purpose (same values in all five) */
.f-nzA{fill:var(--nzA)}.f-nzB{fill:var(--nzB)}.f-nzC{fill:var(--nzC)}.f-nzInk{fill:var(--nzInk)}.f-nzPale{fill:var(--nzPale)}.s-nzA{stroke:var(--nzA)}.s-nzC{stroke:var(--nzC)}
.f-heroL{fill:var(--heroL)}.f-heroR{fill:var(--heroR)}.f-spotA{fill:var(--spotA)}.f-spotB{fill:var(--spotB)}
.wu{fill:var(--wu)}.wut{fill:var(--wut)}.wus{fill:var(--wus)}.wusS{stroke:var(--wus)}.wlo{fill:var(--wlo)}.wlos{fill:var(--wlos)}
.alt{--wu:var(--awu);--wut:var(--awut);--wus:var(--awus);--wlo:var(--awlo);--wlos:var(--awlos)}
.f-case{fill:var(--case)}.f-caseD{fill:var(--caseD)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Nunito',system-ui,sans-serif;color:var(--navy800);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* svg motion */
.flapR{transform-box:fill-box;transform-origin:left center;animation:flap 1.15s ease-in-out infinite}
.flapL{transform-box:fill-box;transform-origin:right center;animation:flap 1.15s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.42)}}
.float{animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bob{animation:float 4s ease-in-out infinite}
.tw{animation:tw 2.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.3}}
.steam{animation:steam 3s ease-in-out infinite}
@keyframes steam{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
.sway{transform-box:view-box;animation:sway 3.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.pop{transform-box:fill-box;transform-origin:center;animation:pop 2.2s ease-in-out infinite}
@keyframes pop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}
.spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.22) rotate(12deg)}}
.d1{--d:-.4s}.d2{--d:-1.1s}.d3{--d:-1.8s}.d4{--d:-2.5s}.d5{--d:-3.1s}
/* Loop timing. Every loop reads two inherited custom properties, so it also works inside <use> copies:
   --ft moves the loop to a given second, --play pauses it. The film pauses all loops and sets --ft from
   its own clock, so a film frame depends only on the film time. Reduced motion pauses the page loops. */
.flapR,.flapL,.float,.bob,.tw,.steam,.sway,.pop,.spark{animation-play-state:var(--play,running);animation-delay:calc(var(--d,0s) - var(--ft,0) * 1s)}
/* legs of the long-necked dinosaur swing with --step (degrees); the pop-up museum doors close with --door (1 shut, 0 open) */
.legA,.legB,.legC,.legD{transform-box:fill-box;transform-origin:50% 0}
.legA,.legD{transform:rotate(calc(var(--step,0) * 1deg))}.legB,.legC{transform:rotate(calc(var(--step,0) * -1deg))}
.doorL{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(var(--door,1))}
.doorR{transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(var(--door,1))}

.stage{position:relative;overflow:hidden}
.stage-deco{position:absolute;inset:0;width:100%;height:100%}
.hero{position:relative;padding:104px 24px 60px;text-align:center}
.hero-logo{position:relative;display:block;margin:0 auto;width:clamp(300px,38vw,520px);max-width:100%;height:auto}
.oneliner{position:relative;margin:30px auto 0;max-width:680px;font-size:clamp(20px,2.1vw,28px);line-height:1.35;font-weight:700;color:var(--navy700)}
.film{position:relative;padding:16px 24px 104px}
.video-wrap{position:relative;max-width:980px;margin:0 auto}
.video-wrap::before{content:'';position:absolute;right:-30px;bottom:-34px;width:260px;height:220px;border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;background:var(--vbA)}
.video-wrap::after{content:'';position:absolute;left:-26px;top:-26px;width:130px;height:130px;border-radius:50%;background:var(--vbB)}
.video{position:relative;z-index:1;border-radius:26px;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
.video svg{display:block;width:100%;height:100%}
.play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:0;background:var(--teal);box-shadow:0 0 0 10px rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chip{position:absolute;left:22px;bottom:20px;background:#fff;color:var(--navy700);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:800}
.features{max-width:1120px;margin:0 auto;padding:0 32px 96px}
.features h2{text-align:center;font-size:clamp(26px,2.6vw,36px);font-weight:900;margin:0 0 40px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#fff;border:1.5px solid #E6E6EE;border-radius:22px;padding:28px 26px 30px}
.card svg{width:76px;height:76px;display:block}
.card h3{font-size:20px;font-weight:900;margin:16px 0 6px}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--navy700)}
.promises{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.promises span{display:inline-flex;align-items:center;gap:10px;background:var(--pillBg);color:var(--pillInk);border-radius:999px;padding:11px 20px;font-weight:800;font-size:15.5px}
.promises span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c1)}
.foot{background:var(--foot);color:var(--footInk);padding:30px 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-weight:700;font-size:15px}
.foot svg{width:132px;height:auto;display:block}
.foot nav{display:flex;gap:26px}
.hero h1{margin:0}
.video video{display:block;width:100%;height:100%;background:#000}
.watch{display:block;text-align:center;margin-top:12px;font-weight:700}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ethos page */
.page-head{padding:28px 24px 0;max-width:880px;margin:0 auto}
.page-head svg{width:150px;height:auto;display:block}
.ethos{max-width:880px;margin:0 auto;padding:40px 24px 88px}
.ethos h1{font-size:clamp(30px,4vw,44px);font-weight:900;margin:0 0 28px}
.ethos section{background:#fff;border:1.5px solid #E6E6EE;border-radius:22px;padding:24px 26px 18px;margin:0 0 18px}
.ethos h2{font-size:21px;font-weight:900;margin:0 0 10px}
.ethos ul{margin:0;padding-left:20px}
.ethos li{font-size:16.5px;line-height:1.6;color:var(--navy700);margin:0 0 8px}

@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .foot{flex-direction:column;align-items:flex-start;padding:28px 16px}
  .stage-deco .side{display:none}
  .video-wrap::before{right:-12px;bottom:-22px;width:150px;height:120px}
  .video-wrap::after{left:-12px;top:-12px;width:76px;height:76px}
  .hero{padding:64px 16px 40px}
  .film{padding:8px 16px 72px}
  .features{padding:0 16px 72px}
  .play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .ethos{padding:28px 16px 64px}
  .page-head{padding:20px 16px 0}
}
@media (prefers-reduced-motion:reduce){:root{--play:paused}}