/* Dot takes centre stage; the words sit around him like an open poster. */
.hero{position:relative;isolation:isolate;padding-top:clamp(118px,14svh,155px);padding-bottom:18px;justify-content:flex-start}
.hero-content{display:contents}
/* A quiet pool of colour gives Dot a stage, fading back into the paper. */
.hero:before{content:'';position:absolute;inset:70px 0 6%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 48% 59% at 50% 44%,#dde2fc99 0%,#e9eaf66b 40%,#f1f0f62b 66%,transparent 87%);transform-origin:50% 44%;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity 1.2s ease}
.hero:has(.dot-reaction-wink):before,.hero:has(.dot-reaction-delight):before{transform:scale(1.045);opacity:.82}
.js-motion .hero:before{animation:hero-atmosphere-in 1.5s ease both}
@keyframes hero-atmosphere-in{from{opacity:0}to{opacity:1}}
.hero-title-wrap{position:relative;display:block;min-height:clamp(390px,43vw,580px);margin:0}
.hero-heading{position:absolute;inset:0;pointer-events:none;z-index:2}
h1{font-size:clamp(58px,6.8vw,108px);font-weight:600;line-height:1.05;letter-spacing:-.065em}
h1 .title-row{position:absolute;display:block;overflow:visible;padding:0;margin:0;white-space:nowrap}
h1 .title-start{left:0;top:18%}
h1 .title-end{right:0;bottom:12%}
h1 .title-end .title-word{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
h1 em{font-size:1.06em;font-weight:450;letter-spacing:-.06em;line-height:1;padding:0}
.hero-bottom{margin-top:22px;margin-bottom:48px}
.hero-bottom p{font-size:clamp(17px,1.45vw,21px);max-width:550px}
.hero-footer{margin-top:auto}
.brand-stage{position:absolute;inset:0;isolation:isolate}
.brand-cast{position:absolute;top:50%;left:50%;width:clamp(300px,39vw,570px);aspect-ratio:1;translate:-50% -50%}
.brand-cast:after{content:'';position:absolute;left:22%;right:22%;bottom:1%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#363b6226 0,transparent 70%);filter:blur(7px);pointer-events:none;scale:var(--shadow-scale,1)}
.cast-dot{display:block;position:relative;width:100%;padding:0;background:none;border:0;border-radius:50%;touch-action:manipulation;z-index:1;cursor:pointer}
.cast-dot:focus-visible{outline-offset:-32px}
.cast-dot img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.dot-body{display:block;position:relative;transform-origin:50% 80%;will-change:transform}
.dot-face{position:absolute;inset:0;pointer-events:none;translate:var(--look-x,0px) var(--look-y,0px);rotate:var(--face-turn,0deg);transition:translate .65s var(--ease),rotate .8s var(--ease)}
.dot-eyes{position:absolute;inset:0;transform-origin:50% 47%}
.dot-eyes i{position:absolute;left:39%;top:40%;width:5.2%;height:13%;border-radius:999px;background:#fffdf0;box-shadow:0 1px 2px #25295c15;transform-origin:center}
.dot-eyes i+i{left:56%}
.dot-mouth{position:absolute;left:39%;top:56%;width:23%;height:12%;stroke:#fffdf0;stroke-width:3.6;stroke-linecap:round;transform-origin:50% 30%;overflow:visible}
.mouth-open{opacity:0;fill:#fffdf0;stroke:none;transform-origin:25px 12px}
.is-cast-visible .dot-body{animation:dot-float 7s ease-in-out infinite}
.is-cast-visible .dot-eyes i{animation:dot-blink 5.8s infinite}
.is-cast-visible .dot-eyes i+i{animation-delay:.04s}
.cast-dot.is-speaking .mouth-smile{animation:smile-speaking .38s ease-in-out 5}
.cast-dot.is-speaking .mouth-open{animation:mouth-speaking .38s ease-in-out 5}
.cast-dot.is-hopping .dot-body{animation:dot-hop 1.1s var(--ease)}
.cast-dot.is-winking .dot-eyes i:last-child{animation:dot-wink .55s ease-in-out}
.dot-remark{position:absolute;top:5%;left:52%;max-width:190px;padding:12px 19px;border-radius:21px 21px 21px 5px;background:var(--lilac);font-size:13px;line-height:1.5;color:var(--ink);rotate:5deg;opacity:0;translate:0 8px;scale:.94;transition:opacity .25s,translate .45s var(--ease),scale .45s var(--ease);pointer-events:none;z-index:3}
.has-remark .dot-remark{opacity:1;translate:0 0;scale:1}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.helpers-heading h2{font-size:clamp(46px,6vw,88px);line-height:1.04}
.helpers-hint{visibility:visible;font-size:14px;line-height:1.6;color:var(--muted)}
.helpers-stage{height:580px}
.helpers-heading{align-items:flex-end}
.work-section .section-heading{grid-template-columns:1fr auto;position:relative}
.work-section .work-companion{position:relative;inset:auto;width:108px;height:108px;margin:0 8px 0 24px;align-self:center}
.js-motion .brand-cast{animation:dot-arrive 1.15s var(--ease) both}
.js-motion .title-word{animation:quiet-type-in .85s var(--ease) both}
.js-motion .title-end .title-word{animation-delay:.15s}
@keyframes dot-arrive{from{opacity:0;transform:translateY(-28px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes quiet-type-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes dot-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes dot-blink{0%,46%,50%,100%{scale:1 1}48%{scale:1 .08}}
@keyframes dot-wink{0%,100%{scale:1 1}40%,65%{scale:1 .08}}
@keyframes smile-speaking{0%,100%{opacity:1;scale:1 1}45%,60%{opacity:0;scale:.78 .4}}
@keyframes mouth-speaking{0%,100%{opacity:0;scale:.7 .3}45%,60%{opacity:1;scale:1 1}}
@keyframes dot-hop{0%{transform:translateY(0) scale(1)}12%{transform:translateY(8px) scale(1.07,.92)}43%{transform:translateY(var(--dot-jump,-52px)) scale(.96,1.04) rotate(-7deg)}68%{transform:translateY(2px) scale(1.05,.95) rotate(2deg)}84%{transform:translateY(-10px) scale(1) rotate(-2deg)}100%{transform:translateY(0) scale(1)}}
body.is-background .dot-body,body.is-background .dot-eyes i,body.is-background .dot-mouth>*{animation-play-state:paused}
@media(min-width:761px) and (max-width:1100px){
 .hero-title-wrap{min-height:380px}h1{font-size:6.6vw}.brand-cast{width:39vw;min-width:290px}
 .hero-bottom{margin-top:28px;margin-bottom:36px}.helpers-stage{height:560px}
}
@media(min-width:761px) and (max-height:800px){
 .hero{padding-top:112px;padding-bottom:14px}.hero-title-wrap{min-height:360px;height:48svh}
 .brand-cast{width:min(38vw,410px)}h1{font-size:clamp(58px,6.8vw,98px)}
 .hero-bottom{margin-top:14px;margin-bottom:28px}.dot-remark{top:0}
}
@media(max-width:760px){
 :root{--mobile-header-height:calc(98px + env(safe-area-inset-top))}
 .site-header{height:var(--mobile-header-height);padding-top:calc(18px + env(safe-area-inset-top))}
 .hero{padding-top:var(--mobile-header-height);padding-bottom:env(safe-area-inset-bottom);min-height:100svh}
 /* Centre the complete introduction below the navigation. Small viewports can
    grow naturally, while svh keeps browser-toolbar changes from shifting it. */
 .hero-content{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--mobile-header-height) - env(safe-area-inset-bottom));padding-block:24px}
 .hero-content>*{flex:none}
 .hero:before{inset:108px 0 14%;background:radial-gradient(ellipse 75% 45% at 50% 43%,#dde2fc99 0%,#e9eaf65c 43%,transparent 84%)}
 .hero-title-wrap{min-height:422px;height:calc(48svh + 32px);max-height:492px;margin:0}
 h1{font-size:clamp(48px,13.9vw,78px);line-height:1.06;letter-spacing:-.06em}
 h1 .title-start{top:0;left:0}h1 .title-end{bottom:0;right:0}
 h1 .title-end .title-word{display:block}h1 em{font-size:1.01em;letter-spacing:-.065em;margin-left:.06em}
 .brand-cast{width:clamp(240px,70vw,340px);top:49%;left:50%}.cast-dot{--dot-jump:-24px}
 .dot-remark{left:auto;right:0;top:22%;max-width:135px;padding:9px 13px;font-size:11px;rotate:7deg;z-index:3}
 .hero-bottom{margin-top:30px;margin-bottom:0;gap:22px}.hero-bottom p{font-size:16px;line-height:1.55;max-width:340px}
 .hero-bottom .pill-button{min-height:44px;gap:16px;padding:6px 6px 6px 18px;font-size:12px}
 .hero-bottom .button-icon{width:30px;height:30px}
 .hero-bottom .button-icon .icon{width:17px;height:17px}
 .hero-footer{margin-top:0;padding-top:15px;padding-bottom:5px}
 .helpers-heading h2{font-size:clamp(42px,10vw,66px)}.helpers-hint{font-size:12px}.helpers-stage{height:440px}
 .work-section .section-heading{display:grid;gap:20px}.work-section .section-heading h2{font-size:clamp(37px,9.5vw,62px);margin:0;max-width:7.5em}
 .work-section .section-heading>.section-index{grid-column:1/-1}.work-section .work-companion{width:68px;height:68px;margin:0;align-self:end}
 /* Three destinations, with one small brand character below. */
 .mobile-nav:not([hidden]){inset:var(--mobile-header-height) 0 0;justify-content:flex-start;padding:0 var(--gutter) max(24px,env(safe-area-inset-bottom))}
 .menu-content{display:flex;flex:1;align-items:center;width:100%;max-width:410px;margin:0 auto;padding:30px 0}
 .menu-links{width:100%;border:0}
 .menu-links a{display:block;border:0;padding:11px 0;font-size:clamp(44px,13vw,68px);line-height:1.2;letter-spacing:-.05em}
 .menu-links a:hover{padding-left:6px}
 .menu-signature{display:flex;flex:none;flex-direction:column;align-items:center;gap:9px;width:100%;margin:0;padding-bottom:4px}
 .menu-helper{width:65px;height:65px}.menu-signature>.helper-portrait{position:relative;transform:rotate(-12deg)}.menu-signature>span:not(.helper-portrait){font:14px/1.4 var(--brand-sans);transform:none;color:var(--muted)}
 body.menu-open .site-header{border-bottom-color:transparent}
}
@media(max-width:370px){
 .hero-title-wrap{min-height:362px;height:calc(47svh + 32px)}h1{font-size:13.8vw}
 .brand-cast{width:240px}.hero-bottom{margin-top:25px;gap:18px}.hero-bottom p{font-size:15px}
 .work-section .section-heading h2{font-size:34px}.work-section .work-companion{width:58px;height:58px}
}
@media(max-width:760px) and (max-height:700px){
 :root{--mobile-header-height:calc(92px + env(safe-area-inset-top))}
 .site-header{padding-top:calc(14px + env(safe-area-inset-top))}
 .hero-title-wrap{min-height:319px;height:calc(46svh + 24px)}
 .brand-cast{width:220px}.cast-dot{--dot-jump:-12px}.hero-bottom{margin-top:20px;gap:16px}
 .hero-footer{display:none}.menu-links a{font-size:43px;padding-block:9px}.menu-helper{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){.dot-face,.dot-remark{transition:none}.brand-cast,.dot-body,.dot-eyes i,.dot-mouth>*{animation:none!important}.hero:before{animation:none!important;transition:none;transform:none!important;opacity:1}.helpers-hint{visibility:hidden}}