/* Hi Puppy — hipuppy.com
   Brand: Puppy Blue #007FB8 (Pantone 640 C) + black, typeface Nunito.
   Supporting colours sampled from the Hi Puppy style guide spreads. */

@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito-semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito-extrabold.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito-black.woff) format("woff");font-weight:900;font-display:swap}

:root{
  --blue:#007fb8; --blue-d:#00679a; --blue-dd:#004f78;
  --sky:#c3e2f4; --sky-l:#e9f5fc; --soft:#6eb6e6;
  --sun:#e8d86e; --sun-d:#cdb93c; --sun-l:#fbf6d6;
  --red:#c93d3c; --red-d:#a52e2e;
  --orange:#fac06e; --green:#8cc63f;
  --ink:#1f1d1e; --ink-2:#4a4f57; --line:#dbe9f2;
  --paper:#ffffff; --cloud:#f6fbfe;
  /* surfaces and accent text, so a dark palette can be swapped in below */
  --surface:#ffffff; --header-bg:rgba(255,255,255,.92);
  --accent:#007fb8; --accent-h:#00679a;
  --r-xl:36px; --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 18px 40px -18px rgba(0,79,120,.35);
  --shadow-s:0 8px 22px -10px rgba(0,79,120,.35);
  --wrap:1200px;
  --font:"Nunito",ui-rounded,"Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  color-scheme:light dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word;margin:0;font-family:var(--font);font-size:18px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--accent-h)}
h1,h2,h3,h4{overflow-wrap:break-word;font-weight:900;line-height:1.05;letter-spacing:-.01em;margin:0 0 .4em;color:var(--ink)}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1em}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink-2);font-weight:600}
.eyebrow{display:inline-block;font-weight:900;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.8em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sun-d);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{--c:var(--blue);--cd:var(--blue-dd);display:inline-flex;align-items:center;gap:.5em;font:inherit;font-weight:900;font-size:1.02rem;line-height:1;
  padding:.95em 1.5em;border-radius:999px;border:0;cursor:pointer;text-decoration:none;color:#fff;background:var(--c);
  box-shadow:0 5px 0 var(--cd),0 12px 20px -10px rgba(0,0,0,.35);transform:translateY(0);transition:transform .15s ease,box-shadow .15s ease,background .2s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 var(--cd),0 16px 24px -10px rgba(0,0,0,.35)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--cd),0 6px 10px -8px rgba(0,0,0,.35)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--sun{--c:var(--sun);--cd:var(--sun-d);color:#1f1d1e} .btn--sun:hover{color:#1f1d1e}
.btn--red{--c:var(--red);--cd:var(--red-d)}
.btn--white{--c:#fff;--cd:#c9dde9;color:#007fb8} .btn--white:hover{color:#00679a}
.btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent)} .btn--ghost:hover{color:#fff;background:var(--accent);box-shadow:inset 0 0 0 3px var(--accent)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.4em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -18px rgba(0,79,120,.45)}
.site-header .bar{display:flex;align-items:center;gap:20px;max-width:1320px;margin:0 auto;padding:10px 24px;min-height:78px;transition:min-height .3s}
.site-header.scrolled .bar{min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand .sym{width:58px;height:auto;transition:width .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.site-header.scrolled .brand .sym{width:48px}
.brand:hover .sym{transform:rotate(-8deg) scale(1.06)}
.brand picture{display:block}
.brand .word{width:118px;height:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-weight:800;font-size:1rem;color:var(--ink);text-decoration:none;padding:.55em .9em;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover{background:var(--sky-l);color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);background:var(--sky-l)}
.nav a.nav-play{background:var(--sun);color:#1f1d1e;display:inline-flex;align-items:center;gap:.35em}
.nav a.nav-play:hover{background:#f0e389}
.nav a.nav-play svg{width:1em;height:1em}
.nav a.btn{margin-left:10px;padding:.8em 1.25em;font-size:.95rem;color:#fff;background:var(--blue)}
.nav a.btn:hover{background:var(--blue);color:#fff}
.nav-toggle{display:none;background:var(--sky-l);border:0;border-radius:14px;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;color:var(--accent)}
.nav-toggle svg{width:26px;height:26px}
@media (max-width:1020px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:78px 12px auto 12px;flex-direction:column;align-items:stretch;gap:6px;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:.85em 1em;font-size:1.1rem}
  .nav a.btn{margin:6px 0 0;justify-content:center}
  .brand .word{width:100px}
}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec--sky{background:var(--sky-l)}
.sec--sun{background:var(--sun-l)}
.sec--blue{background:var(--blue);color:#fff}
.sec--blue h2,.sec--blue h3{color:#fff}
.sec--blue .eyebrow{color:var(--sun)}
.sec--blue .sec-head p{color:#dff0fa}
.sec-head{max-width:760px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.sec-head p{color:var(--ink-2);font-weight:600;font-size:1.12rem}

/* Wavy edges */
.wave{position:absolute;left:0;right:0;height:clamp(28px,4vw,60px);pointer-events:none;z-index:2}
.wave svg{display:block;width:100%;height:100%}
.wave--top{top:-1px} .wave--bottom{bottom:-1px}
/* a wave is painted in the colour of the section it joins on to */
.wave{color:var(--paper)}
.wave--f-paper{color:var(--paper)} .wave--f-sky-l{color:var(--sky-l)}
.wave--f-blue{color:var(--blue)} .wave--f-sky{color:var(--sky)} .wave--f-sun{color:var(--sun)}

/* A section whose own picture forms the wavy bottom edge (the next block shows through the dips) */
.wave-cut{z-index:2;margin-bottom:-54px;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 52px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V24 C1350,12 1260,5 1080,30 C900,55 720,51 540,28 C360,5 180,5 0,40 Z'/%3E%3C/svg%3E") bottom/100% 54px no-repeat;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 52px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V24 C1350,12 1260,5 1080,30 C900,55 720,51 540,28 C360,5 180,5 0,40 Z'/%3E%3C/svg%3E") bottom/100% 54px no-repeat}
.wave-cut + section{padding-top:calc(clamp(64px,9vw,120px) + 54px)}
.wave-cut + .theme{padding-top:calc(clamp(90px,10vw,140px) + 54px)}
@media (max-width:760px){
  .wave-cut + .theme{padding-top:calc(min(60vw,380px) + 54px)}
  .wave-cut + .theme .scene-bg{background-position:50% 54px !important}
  .theme{padding-bottom:70px}
}
.cutline{position:absolute;left:0;right:0;bottom:0;height:54px;pointer-events:none;z-index:3}
.cutline svg{display:block;width:100%;height:100%;overflow:visible}
/* Blocks with style-guide spreads as backgrounds */
.scene{position:relative;overflow:hidden;background:var(--sky) center/cover no-repeat;isolation:isolate}
.scene > .scene-bg{position:absolute;inset:-8% 0;z-index:-1;background:center/cover no-repeat;will-change:transform}

/* ---------- Home hero ---------- */
.hero{min-height:min(92vh,900px);display:flex;align-items:center;padding-block:120px 110px}
.hero .scene-bg{background-position:50% 50%}
.hero-wrap{display:flex;justify-content:flex-end}
.hero .bubble{margin-right:-2%}
.hero .bubble::after{right:auto;left:-22px;bottom:70px;border-radius:0 6px 0 44px;transform:rotate(12deg);box-shadow:-10px 10px 18px -14px rgba(0,79,120,.4)}
.bubble{position:relative;background:var(--surface);border-radius:var(--r-xl);padding:clamp(26px,3.5vw,44px);max-width:500px;box-shadow:var(--shadow)}
.bubble::after{content:"";position:absolute;right:-22px;bottom:54px;width:44px;height:44px;background:var(--surface);border-radius:6px 0 44px 0;transform:rotate(-12deg);box-shadow:10px 10px 18px -14px rgba(0,79,120,.4)}
.bubble .hello{font-weight:900;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--accent);margin-bottom:.35em}
.bubble h1{margin:0 0 .35em}
.bubble h1 img{width:100%;max-width:420px}
.bubble p{font-weight:600;color:var(--ink-2)}
.hero-cue{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-s);color:var(--accent)}
.hero-cue svg{width:26px;height:26px}
@media (max-width:1100px) and (min-width:761px){.hero .bubble{max-width:420px}}
@media (max-width:760px){
  .hero-wrap{justify-content:flex-start}
  .hero{min-height:auto;align-items:flex-end;padding-top:min(62vw,420px);padding-bottom:90px}
  .hero .scene-bg{background-position:48% 0;background-size:auto 70%;background-color:var(--sky);inset:0}
  .bubble::after{display:none}
  .hero-cue{display:none}
}

/* Page heroes */
.page-hero{padding-block:clamp(110px,14vw,190px) clamp(90px,11vw,150px)}
.page-hero .bubble{max-width:620px}
.page-hero .bubble::after{left:54px;right:auto;bottom:-20px;border-radius:0 0 44px 6px;transform:rotate(12deg)}
.page-hero--right .wrap{display:flex;justify-content:flex-end}
@media (max-width:760px){.page-hero--right .wrap{justify-content:flex-start}.page-hero .bubble::after{display:none}}

/* ---------- Parade ---------- */
.parade{background:var(--sky-l);padding:26px 0 18px;overflow:hidden}
.parade-track{display:flex;gap:34px;width:max-content;will-change:transform}
.parade-track img{height:clamp(96px,11vw,140px);width:auto;flex:none}
.parade-track a{display:block}
.parade-track a:hover img{animation:hop .6s ease}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-18px) rotate(-5deg)}70%{transform:translateY(-4px) rotate(3deg)}}

/* ---------- Meet ---------- */
.meet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,80px);align-items:center}
.meet-figure{position:relative;display:flex;justify-content:center}
.meet-figure::before{content:"";position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:var(--sky);top:8%;z-index:0}
.meet-figure img{position:relative;width:min(380px,80%);z-index:1;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0 0;padding:0;list-style:none}
.facts li{background:var(--sky-l);border-radius:999px;padding:.55em 1.05em;font-weight:700;font-size:.98rem}
.facts li b{color:var(--accent);font-weight:900}
@media (max-width:820px){.meet{grid-template-columns:1fr}}

/* ---------- World cards ---------- */
.worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.world{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-s);transform:translateZ(0);transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.world .bg{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.world:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow)}
.world:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.world:hover .bg{transform:scale(1.08)}
.world .label{position:absolute;left:16px;bottom:16px;background:var(--surface);color:var(--ink);font-weight:900;font-size:1.15rem;border-radius:999px;padding:.5em 1em .5em 1.1em;display:inline-flex;align-items:center;gap:.4em;box-shadow:var(--shadow-s)}
.world .label svg{width:1em;height:1em;color:var(--accent);transition:transform .3s}
.world:hover .label svg{transform:translateX(4px)}
@media (max-width:900px){.worlds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.worlds{grid-template-columns:1fr}}

/* ---------- Billboard slider (spreads with phrases) ---------- */
.bb-strip-wrap{overflow:hidden;padding:10px 0 34px}
.bb-strip{display:flex;gap:clamp(16px,2vw,28px);width:max-content;will-change:transform}
.bb-card{flex:none;margin:0;width:clamp(290px,52vw,760px);aspect-ratio:1.5;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);background:var(--sky);transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.bb-card:nth-child(odd){transform:rotate(-1.2deg)}
.bb-card:nth-child(even){transform:rotate(1.2deg) translateY(10px)}
.bb-card:hover{transform:scale(1.03) rotate(0);box-shadow:0 26px 50px -20px rgba(0,79,120,.45)}
.bb-card{outline:2px solid rgba(0,127,184,.08);outline-offset:-2px}
.bb-card img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}

/* ---------- Play teaser ---------- */
.play-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.play-card{background:var(--surface);border-radius:var(--r-lg);padding:22px 22px 26px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.play-card:hover{transform:translateY(-8px) rotate(-1.2deg);color:var(--ink)}
.play-card:nth-child(2):hover{transform:translateY(-8px) rotate(1.2deg)}
.play-card .pic{aspect-ratio:4/3;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
.play-card .pic img{max-height:86%;max-width:86%;width:auto;object-fit:contain;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.play-card:hover .pic img{transform:scale(1.08) rotate(-4deg)}
.play-card h3{margin-bottom:.25em}
.play-card p{color:var(--ink-2);font-weight:600;margin:0 0 1em}
.play-card .go{margin-top:auto;font-weight:900;color:var(--accent);display:inline-flex;gap:.4em;align-items:center}
.play-card .go svg{width:1em;height:1em}
@media (max-width:860px){.play-cards{grid-template-columns:1fr}}

.plate{display:inline-block;background:var(--blue);border-radius:var(--r-lg);padding:22px 34px 18px;box-shadow:var(--shadow)}
.plate h2{color:#fff;margin:0 0 .2em}
.plate p{color:#e6f4fb;margin:0}
/* ---------- Grown-ups panel ---------- */
.panel{background:var(--surface);border-radius:var(--r-xl);padding:clamp(28px,4.5vw,60px);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.panel .tag{display:inline-block;background:var(--ink);color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:.5em 1em;margin-bottom:1em}
@media (max-width:860px){.panel{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1.4em 0 0}
.stat{background:var(--sky-l);border-radius:var(--r-md);padding:16px 18px}
.stat b{overflow-wrap:normal;display:block;font-size:2rem;font-weight:900;color:var(--accent);line-height:1}
.stat span{font-weight:700;font-size:.95rem;color:var(--ink-2)}
.prod-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prod-stack figure{margin:0;overflow:hidden;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);aspect-ratio:1;display:grid;place-items:center;padding:10px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.prod-stack figure:hover{transform:scale(1.06) rotate(-2deg)}
.prod-stack img{width:100%;height:100%;object-fit:contain}

/* ---------- Theme blocks (brand page) ---------- */
.theme{min-height:min(84vh,760px);display:flex;align-items:center;padding-block:clamp(90px,10vw,140px)}
.theme .wrap{display:flex}
.theme--right .wrap{justify-content:flex-end}
.card{background:var(--surface);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);max-width:480px;box-shadow:var(--shadow)}
.card p{color:var(--ink-2);font-weight:600}
.card .mini{display:flex;gap:10px;margin:1em 0 1.3em}
.card .mini img{height:84px;width:auto;flex:none;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card .mini img:hover{transform:translateY(-8px) rotate(-6deg)}
.card .num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sun);color:#1f1d1e;font-weight:900;margin-bottom:.8em}
@media (max-width:760px){
  .theme{min-height:auto;padding-top:min(60vw,380px);padding-bottom:60px;align-items:flex-end}
  .theme .scene-bg{inset:0;background-size:auto min(66vw,420px);background-position:50% 0 !important}
  .theme--right .wrap{justify-content:flex-start}
}

/* Phrase tiles */
.phrases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.phrases figure{margin:0;border-radius:var(--r-md);aspect-ratio:1;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.phrases figure:hover{transform:rotate(-2deg) scale(1.03)}
/* centre the artwork whatever its shape, inside a 14% margin, without stretching the tile */
.phrases figure img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:72%;max-height:72%}
@media (max-width:820px){.phrases{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tile colours as in the style guide */
.t-sky{background:var(--sky)} .t-sun{background:var(--sun)} .t-blue{background:var(--blue)} .t-red{background:var(--red)} .t-white{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)} .t-orange{background:var(--orange)}

/* ---------- Gallery: drifting rows of big, playfully tilted blocks ---------- */
.row-head{margin:clamp(26px,4vw,48px) 0 clamp(12px,1.6vw,20px)}
.row-head h2{margin:0;font-size:clamp(1.6rem,3vw,2.4rem)}
.cat-row{overflow:hidden;padding:18px 0 26px}
.tile-row{display:flex;gap:clamp(16px,2vw,30px);width:max-content;will-change:transform}
.tile{flex:none;border:0;padding:0;margin:0;width:clamp(230px,26vw,380px);aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;
  cursor:zoom-in;display:grid;place-items:center;box-shadow:var(--shadow-s);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.tile img{width:84%;height:84%;object-fit:contain;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.tile.cover img{width:100%;height:100%;object-fit:cover}
.tile:hover{transform:rotate(0) scale(1.04)!important;box-shadow:0 26px 50px -20px rgba(0,79,120,.45);z-index:2}
.tile:hover img{transform:scale(1.05)}
.grid-note{text-align:center;color:var(--ink-2);font-weight:600;margin-top:34px;font-size:.98rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,40,62,.82);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lb-stage{position:relative;background:var(--surface);border-radius:var(--r-xl);width:min(760px,100%);padding:clamp(18px,3vw,34px);text-align:center;transform:scale(.92);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.lightbox.open .lb-stage{transform:scale(1)}
.lb-pic{border-radius:var(--r-lg);aspect-ratio:1.25;display:grid;place-items:center;overflow:hidden}
.lb-pic img{max-width:84%;max-height:84%;object-fit:contain}
.lb-pic.cover img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}
.lb-cap{margin-top:14px;font-weight:900;letter-spacing:.06em}
.lb-cap small{display:block;font-weight:600;letter-spacing:0;color:var(--ink-2);margin-top:2px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;background:var(--sun);color:#1f1d1e;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-s)}
.lb-btn svg{width:26px;height:26px}
.lb-prev{left:-27px} .lb-next{right:-27px}
.lb-close{position:absolute;top:-18px;right:-18px;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-close svg{width:22px;height:22px}
@media (max-width:640px){.lb-prev{left:6px}.lb-next{right:6px}.lb-close{top:8px;right:8px}.lb-btn{top:auto;bottom:-24px;transform:none}}

/* ---------- Play page ---------- */
.game{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:clamp(18px,3vw,36px)}
.game-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:22px}
.game-head h2{margin:0}
.game-head p{margin:0;color:var(--ink-2);font-weight:600}
.colour-wrap{display:grid;grid-template-columns:170px minmax(0,1fr) 150px;gap:22px;align-items:start}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:640px;overflow:auto;padding:4px}
.pics button{min-width:0;border:3px solid var(--line);background:var(--surface);border-radius:14px;padding:4px;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.pics button:hover{transform:scale(1.05)}
.pics button[aria-pressed="true"]{border-color:var(--accent)}
.pics img{width:100%;height:100%;object-fit:contain}
.canvas-box{background:var(--surface);border:3px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative;touch-action:none}
.canvas-box{display:flex;justify-content:center}
.c-msg{position:absolute;left:16px;right:16px;bottom:16px;margin:0;background:var(--sun-l);border-radius:12px;padding:10px 14px;font-weight:700;text-align:center}
.canvas-box canvas{display:block;width:auto;max-width:100%;height:auto;max-height:min(76vh,760px);cursor:crosshair}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.palette button{aspect-ratio:1;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--line);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.palette button:hover{transform:scale(1.12)}
.palette button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink);transform:scale(1.14)}
.tools{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tools .btn{justify-content:center;padding:.8em 1em;font-size:.95rem}
@media (max-width:980px){
  .colour-wrap{grid-template-columns:1fr}
  .pics{grid-template-columns:repeat(7,minmax(64px,1fr));max-height:none;overflow-x:auto;grid-auto-flow:column}
  .palette{grid-template-columns:repeat(7,1fr)}
  .tools{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){.pics{grid-template-columns:repeat(14,64px)}.palette{grid-template-columns:repeat(7,1fr);gap:6px}}

.memory-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{background:var(--sky-l);border-radius:999px;padding:.5em 1em;font-weight:800}
.memory{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;perspective:900px}
.memory.m8{grid-template-columns:repeat(8,minmax(0,1fr))}
.mcard{position:relative;aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.mcard .face{position:absolute;inset:0;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:grid;place-items:center;box-shadow:var(--shadow-s)}
.mcard .back{background:var(--blue) url(../assets/spreads/s143-sm.webp) center/220% auto;}
.mcard .back img{width:52%;background:#fff;border-radius:50%;padding:10%}
.mcard .front{transform:rotateY(180deg);background:var(--sky)}
.mcard .front img{width:84%;height:84%;object-fit:contain}
.mcard.flip{transform:rotateY(180deg)}
.mcard.done .front{background:var(--sun)}
.mcard.done{animation:pop .5s ease}
@keyframes pop{50%{transform:rotateY(180deg) scale(1.08)}}
@media (max-width:760px){.memory,.memory.m8{grid-template-columns:repeat(4,minmax(0,1fr))}}

.grow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,50px);align-items:center}
.grow-stage{aspect-ratio:1;border-radius:var(--r-xl);background:var(--sun);display:grid;place-items:center;position:relative;overflow:hidden}
.grow-stage::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 10deg,transparent 10deg 20deg);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grow-stage img{position:relative;width:72%;height:72%;object-fit:contain}
.grow-stage.spinning img{filter:blur(.5px)}
.grow-result{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:900;line-height:1.1;min-height:2.3em;color:var(--ink)}
.grow-result em{font-style:normal;color:var(--accent);display:block}
@media (max-width:820px){.grow{grid-template-columns:1fr}}

.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.downloads a{display:block;background:var(--surface);border:3px solid var(--line);border-radius:var(--r-md);padding:12px;text-align:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:.9rem;transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.downloads a:hover{transform:translateY(-5px) rotate(-1.5deg);border-color:var(--accent);color:var(--accent)}
.downloads img{aspect-ratio:1;object-fit:contain;margin:0 auto 8px;width:100%}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:300}

/* ---------- Cartoons: a little cinema on Puppy Blue ---------- */
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.film{display:block;color:#fff;text-decoration:none;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.film:hover,.film:focus-visible{color:#fff;transform:translateY(-6px) rotate(-1deg)}
.film:nth-child(2):hover,.film:nth-child(2):focus-visible{transform:translateY(-6px) rotate(1deg)}
.film-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0b3b57;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.14)}
.film-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.film:hover .film-pic img{transform:scale(1.05)}
.film-play{position:absolute;left:14px;bottom:14px;width:58px;height:58px;border-radius:50%;background:var(--sun);color:#1f1d1e;
  display:grid;place-items:center;box-shadow:0 5px 0 var(--sun-d),0 12px 20px -10px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.film-play svg{width:24px;height:24px;margin-left:3px}
.film:hover .film-play{transform:scale(1.12)}
.film-time{position:absolute;right:12px;top:12px;background:rgba(7,34,53,.78);color:#fff;font-weight:800;font-size:.82rem;
  border-radius:999px;padding:.3em .75em;letter-spacing:.03em}
.film h3{color:#fff;margin:16px 0 .25em;font-size:clamp(1.25rem,2vw,1.55rem)}
.film p{color:#dff0fa;font-weight:600;font-size:1rem;margin:0}
@media (max-width:860px){.films{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* the player: the gallery's lightbox overlay, with a 16:9 stage */
.film-frame{position:relative;width:min(1040px,100%)}
.film-frame .lb-close{z-index:2}
.film-stage{aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  transform:scale(.94);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.film-box.open .film-stage{transform:scale(1)}
.film-stage video{display:block;width:100%;height:100%;background:#000}
.film-cap{color:#fff;text-align:center;font-weight:900;font-size:1.15rem;letter-spacing:.02em;margin:16px 0 0}
@media (max-width:640px){.film-box{padding:12px}.film-stage{border-radius:var(--r-md)}.film-frame .lb-close{top:-60px;right:0}}

/* ---------- Licensing ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.step{background:var(--surface);border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--shadow-s);position:relative}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:1.2rem;margin-bottom:14px}
.step:nth-child(2)::before{background:var(--sun);color:#1f1d1e} .step:nth-child(3)::before{background:var(--red)} .step:nth-child(4)::before{background:var(--green);color:#1f1d1e}
.step h3{font-size:1.25rem}
.step p{color:var(--ink-2);font-weight:600;font-size:1rem;margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.products figure{margin:0;background:var(--surface);border-radius:var(--r-md);padding:12px 12px 10px;box-shadow:var(--shadow-s);text-align:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.products figure:hover{transform:translateY(-6px) rotate(-1.5deg)}
.products img{aspect-ratio:1;object-fit:contain;width:100%}
.products figcaption{font-weight:800;font-size:.9rem;margin-top:6px}
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sg-box{background:var(--surface);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-s)}
.sg-box h3{font-size:1.2rem;color:var(--ink)}
.sg-box p,.sg-box li{color:var(--ink-2);font-weight:600;font-size:.98rem}
.sg-box ul{padding-left:1.1em;margin:0}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.sw{flex:1;min-width:120px}
.sw i{display:block;height:84px;border-radius:14px;margin-bottom:8px}
.sw small{display:block;font-weight:700;color:var(--ink-2);line-height:1.35}
.notice{background:var(--sky-l);border-radius:var(--r-md);padding:14px 16px;font-weight:700;font-size:.95rem;color:var(--accent-h)}
.sg--one{grid-template-columns:minmax(0,440px);justify-content:center;text-align:center}
@media (max-width:900px){.sg{grid-template-columns:1fr}}
.kids-note{display:flex;gap:12px;align-items:center;background:var(--sun-l);border-radius:var(--r-md);padding:12px 16px;font-weight:700;margin-bottom:18px}
.kids-note img{width:46px;flex:none}

/* ---------- Forms ---------- */
.form-card{background:var(--surface);border-radius:var(--r-xl);padding:clamp(24px,4vw,48px);box-shadow:var(--shadow);max-width:820px;margin:0 auto}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-weight:800;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-weight:600;font-size:1rem;color:var(--ink);background:var(--cloud);border:2px solid var(--line);border-radius:14px;padding:.8em 1em;width:100%;transition:border-color .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.form textarea{min-height:140px;resize:vertical}
.form small{color:var(--ink-2);font-weight:600}
.form .hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start}
.contact-grid .form-card{margin:0;max-width:none}
.addr{background:var(--surface);border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow)}
.addr h3{font-size:1.2rem;margin-top:1em}
.addr h3:first-child{margin-top:0}
.addr p{font-weight:600;color:var(--ink-2);margin:0}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}

/* ---------- News ---------- */
.news{display:grid;gap:26px;max-width:980px;margin:0 auto}
.news article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.news .pic{background:center/cover no-repeat;min-height:260px}
.news .body{padding:clamp(22px,3vw,36px)}
.news time{font-weight:900;color:var(--accent);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.news h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:.3em 0 .5em}
.news p{color:var(--ink-2);font-weight:600}
@media (max-width:760px){.news article{grid-template-columns:1fr}.news .pic{min-height:220px}}

/* ---------- Legal ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:1.4rem;margin-top:1.8em}
.legal p,.legal li{color:var(--ink-2);font-weight:500}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--blue);color:#fff;padding:clamp(80px,9vw,120px) 0 28px;margin-top:0;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:url(../assets/spreads/s143-sm.webp) center/760px auto repeat;opacity:.09}
.site-footer .wrap{position:relative}
.site-footer--flush{padding-top:clamp(40px,5vw,64px);margin-top:-1px}
.foot-walk{position:absolute;top:-6px;left:0;right:0;height:0}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,3fr));gap:30px}
.footer-top h4{color:#fff;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1em}
.footer-top ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-top a{color:#fff;text-decoration:none;font-weight:700}
.footer-top a:hover{color:var(--sun)}
.footer-top li{font-weight:600;color:#dff0fa}
.foot-brand img.w{width:150px;margin-bottom:14px}
.foot-brand img.t{width:230px;opacity:.95}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;border-top:2px solid rgba(255,255,255,.2);margin-top:44px;padding-top:22px;font-size:.9rem;font-weight:600;color:#dff0fa}
.footer-bottom a{color:#fff}
.langs{display:flex;gap:6px;align-items:center;font-weight:800;font-size:.85rem;letter-spacing:.06em}
.langs a,.langs span{color:#dff0fa;text-decoration:none;padding:.35em .55em;border-radius:999px}
.langs a:hover{background:rgba(255,255,255,.18);color:#fff}
.langs span[aria-current]{background:rgba(255,255,255,.22);color:#fff}
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:background .2s,transform .2s}
.social a:hover{background:rgba(255,255,255,.28);transform:translateY(-3px)}
.social svg{width:18px;height:18px;fill:#fff}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr}}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s ease,transform .9s cubic-bezier(.2,1.2,.4,1)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="pop"]{transform:scale(.8) rotate(-3deg)}
.js [data-reveal="pop"].in{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- Dark mode ----------
   Follows the visitor's device setting; there is no switch on the page.
   The palette goes to a deep navy mixed from Puppy Blue, and the brand colours
   (Puppy Blue, sky, sun, red, orange) stay exactly as they are, because the
   artwork is drawn in them. The artwork itself is never dimmed.

   Hi Puppy's drawings are black outlines on a transparent background and the
   product photographs have a white background of their own, so any box that
   carries one keeps the light palette — see the list at the end. Those read as
   lit cards and pictures on a dark page, which is what the style guide does
   anyway: bright artwork on a coloured field. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#072235; --surface:#0e3550; --header-bg:rgba(7,34,53,.9);
    --cloud:#0b2c44; --sky-l:#103550; --sun-l:#2b2714;
    --ink:#eaf4fb; --ink-2:#a6c3d6; --line:#1d4a6b;
    --accent:#66c3ea; --accent-h:#8fd4f1;
    --shadow:0 18px 40px -18px rgba(0,0,0,.62);
    --shadow-s:0 8px 22px -10px rgba(0,0,0,.55);
  }
  .site-header.scrolled{box-shadow:0 8px 24px -14px rgba(0,0,0,.7)}
  /* these two carry a white glyph, so they cannot follow --ink into the light */
  .skip,.lb-close{background:var(--blue)}
  .bb-card{outline-color:rgba(255,255,255,.10)}
  .lightbox{background:rgba(2,14,24,.88)}
  .tile:hover,.bb-card:hover{box-shadow:0 26px 50px -20px rgba(0,0,0,.7)}
  /* the logo is drawn in black and Puppy Blue, so it is shown on its own white sheet */
  .sg-box img{background:#fff;border-radius:14px;padding:16px 18px;box-sizing:content-box}
  /* the standing Hi Puppy and the drifting characters need something light behind them */
  .parade{background:var(--sky-l)}
  .form input::placeholder,.form textarea::placeholder{color:var(--ink-2)}

  /* Boxes that carry artwork, a photograph or the logo keep the light palette.
     Redeclaring the tokens here is enough: everything inside inherits them. */
  .bubble,.card,.panel,.play-card,.world .label,
  .products figure,.prod-stack figure,.downloads a,
  .pics button,.canvas-box,.kids-note,.t-white{
    --paper:#ffffff; --surface:#ffffff; --cloud:#f6fbfe;
    --sky-l:#e9f5fc; --sun-l:#fbf6d6;
    --ink:#1f1d1e; --ink-2:#4a4f57; --line:#dbe9f2;
    --accent:#007fb8; --accent-h:#00679a;
    --shadow:0 18px 40px -18px rgba(0,79,120,.35);
    --shadow-s:0 8px 22px -10px rgba(0,79,120,.35);
    color:var(--ink);
  }
}

/* Print: colouring page only */
@media print{
  :root{color-scheme:light}
  body.printing > *:not(#print-area){display:none!important}
  #print-area{display:block!important}
  #print-area img{width:100%;height:auto}
}
#print-area{display:none}

/* ---------- Opening intro (home page, first visit of a session) ----------
   A light-sky curtain with the first seconds of the Hi Puppy ident. The film's own
   background is #e4f2fd; its edges are feathered so a slightly different colour decoding
   in some browser can never show as a rectangle. The dog and the wordmark then fly into
   the header (site.js) while the curtain fades and the page's first reveals play. */
#intro{position:fixed;inset:0;z-index:1000;background:#e4f2fd;display:none;overflow:hidden;cursor:pointer;transition:opacity .7s ease}
html.hp-intro #intro,#intro.out{display:block}
#intro.out{opacity:0;pointer-events:none}
/* The stage has an explicit height rather than aspect-ratio, and the film carries no CSS
   mask: Safari can stop painting a <video> that is masked. The soft edge is a frame of the
   curtain colour drawn over the film instead. */
.intro-stage{position:absolute;left:50%;top:46%;width:min(1180px,100vw);height:calc(min(1180px,100vw) * .3125);transform:translate(-50%,-50%)}
.intro-stage::after{content:"";position:absolute;inset:-2px;box-shadow:inset 0 0 36px 30px #e4f2fd;pointer-events:none}
.intro-film,.intro-still{position:absolute;inset:0;display:block;width:100%;height:100%;background:#e4f2fd;object-fit:contain}
.intro-still{opacity:0}
@media (max-aspect-ratio:1/1){.intro-stage{width:150vw;height:calc(150vw * .3125)}}
.intro-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));font:800 .92rem/1 var(--font);letter-spacing:.02em;color:#0a5d86;background:rgba(255,255,255,.75);border:0;border-radius:999px;padding:.7em 1.2em;cursor:pointer;opacity:0;animation:introIn .5s 1.2s forwards}
.intro-skip:hover{background:#fff}
.intro-skip:focus-visible{outline:3px solid #007fb8;outline-offset:3px}
@keyframes introIn{to{opacity:1}}
/* the header logo waits for the flying one to land */
html.hp-intro-logo .brand .sym,html.hp-intro-logo .brand picture{opacity:0}
/* reveals already triggered under the curtain are held back, then play as it lifts */
html.js.hp-intro [data-reveal].in{opacity:0;transform:translateY(34px) scale(.98)}
html.js.hp-intro [data-reveal="pop"].in{transform:scale(.8) rotate(-3deg)}
.intro-fly{position:fixed;z-index:1001;pointer-events:none;transform-origin:0 0;will-change:transform}
.intro-fly span,.intro-fly img{position:absolute;inset:0;display:block;width:100%;height:100%}