/* Motion uses the existing Canvas ink and paper, with no layout reservation. */
@import url('./brand-tokens.css');
:root{--hm-paper:var(--canvas,#f2ead8);--hm-soft:var(--canvas-soft,#f7f1e3);--hm-blue:var(--schmitdy-cobalt);--hm-deep:var(--schmitdy-cobalt-deep);--hm-powder:var(--powder,#b7d2e8);--hm-butter:var(--butter,#f3d079);--hm-coral:var(--coral,#ee8c6a)}

/* Three physical ink plates, separate landings and a short press thump. */
.hm-print{position:relative;isolation:isolate;animation:hm-press .9s linear both}
.hm-plate{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;line-height:inherit;letter-spacing:inherit;z-index:1}
.hm-plate::before{content:attr(data-text)}
.hm-plate-cobalt{color:var(--hm-blue);animation:hm-cobalt .9s steps(2,end) both}
.hm-plate-coral{color:var(--hm-coral);animation:hm-coral .9s steps(2,end) both}
.hm-plate-butter{color:var(--hm-butter);animation:hm-butter .9s steps(2,end) both}
@keyframes hm-cobalt{0%{opacity:0;transform:translate(-14px,-10px)}12%,70%{opacity:1;transform:translate(-10px,-8px)}88%,100%{opacity:0;transform:none}}
@keyframes hm-coral{0%,20%{opacity:0;transform:translate(14px,-10px)}28%,70%{opacity:1;transform:translate(12px,-8px)}88%,100%{opacity:0;transform:none}}
@keyframes hm-butter{0%,40%{opacity:0;transform:translate(10px,14px)}48%,70%{opacity:1;transform:translate(8px,12px)}88%,100%{opacity:0;transform:none}}
@keyframes hm-press{0%,58%,78%,100%{transform:none}64%{transform:translateY(5px) scale(.985)}70%{transform:translateY(-2px) scale(1.005)}}
.hm-dolphin{display:block;object-fit:contain;max-width:none;height:auto;pointer-events:none}
.hm-tide{position:fixed;inset:0;z-index:10000;pointer-events:none;visibility:hidden;overflow:hidden}
.hm-water{position:absolute;inset:-15% -10%;background:repeating-linear-gradient(0deg,var(--hm-deep) 0 45px,var(--hm-blue) 45px 92px,var(--hm-powder) 92px 108px,var(--hm-paper) 108px 114px);border-radius:46% 48% 0 0;transform:translateY(105%)}
.hm-tide-dolphin{position:absolute;width:clamp(95px,16vw,230px);left:12%;top:50%;transform:translate(-160%,80vh) rotate(-25deg)}
.hm-depart,.hm-arrive{visibility:visible}
.hm-depart .hm-water{animation:hm-tide-up .32s ease-in both}
.hm-depart .hm-tide-dolphin{animation:hm-leap .4s ease-out both}
.hm-arrive .hm-water{animation:hm-tide-down .42s ease-out both}
.hm-arrive .hm-tide-dolphin{animation:hm-return .42s ease-out both}
@keyframes hm-tide-up{to{transform:translateY(-5%) rotate(-3deg)}}
@keyframes hm-tide-down{from{transform:translateY(-5%) rotate(-3deg)}to{transform:translateY(105%)}}
@keyframes hm-leap{to{transform:translate(65vw,-22vh) rotate(20deg)}}
@keyframes hm-return{from{transform:translate(65vw,-22vh) rotate(20deg)}to{transform:translate(100vw,70vh) rotate(65deg)}}
.hm-gauge{position:fixed;right:5px;top:calc(50% - 78px);width:25px;height:155px;z-index:55;pointer-events:none;border-right:1px solid var(--hm-blue);background:repeating-linear-gradient(0deg,transparent 0 14px,var(--hm-blue) 14px 15px) right/5px 100% no-repeat;opacity:.8}
.hm-gauge .hm-dolphin{position:absolute;left:-7px;top:-3px;width:29px}

/* Real anchors become labelled pins on a drawn coast, never replacement links. */
.hm-enabled .hm-chart-toggle{display:flex}
.hm-enabled .hm-chart{position:absolute;top:100%;left:0;right:0;display:block;height:min(760px,calc(100dvh - 84px));max-height:none!important;overflow:hidden!important;padding:0;background:var(--hm-powder);border-bottom:2px solid var(--hm-blue);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s;isolation:isolate}
.hm-enabled:has(.hm-chart-open) .schmitdy-consent{visibility:hidden}
.hm-enabled .hm-chart-open{visibility:visible;opacity:1;pointer-events:auto}
.hm-chart>a:not([href]),.hm-chart>span:not(:last-of-type){display:none}
.hm-enabled .hm-chart a.hm-map-place{position:absolute!important;left:var(--map-x);top:var(--map-y);width:41%;min-height:48px;padding:6px 12px 6px 35px!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--hm-deep)!important;font-family:var(--font-outfit,var(--body,Outfit)),sans-serif!important;font-size:clamp(12px,1.1vw,16px)!important;font-weight:600!important;line-height:1.15!important;letter-spacing:0!important;text-transform:none!important;display:flex;align-items:center;z-index:2;text-decoration:none!important}
.hm-map-place::before{content:'';position:absolute;left:3px;top:12px;width:19px;height:22px;background:repeating-linear-gradient(90deg,var(--hm-coral) 0 5px,var(--hm-butter) 5px 10px);border:2px solid var(--hm-blue);border-radius:10px 10px 3px 3px;box-shadow:3px 3px 0 var(--hm-powder)}
.hm-enabled .hm-chart a.hm-map-place:hover,.hm-enabled .hm-chart a.hm-map-place:focus-visible{background:var(--hm-soft)!important;outline:2px solid var(--hm-blue);outline-offset:0;border-radius:10px!important}
.hm-chart>.lang-switch-mobile,.hm-chart>span:last-of-type{position:absolute;bottom:8px;left:37%;right:25%;z-index:3;display:flex;gap:12px;justify-content:center;padding:5px;background:var(--hm-paper);border:1px solid var(--hm-blue);border-radius:30px}
.hm-chart>.lang-switch-mobile a,.hm-chart>span:last-of-type a{padding:7px!important;min-width:44px;min-height:44px;display:grid;place-items:center}
.hm-map{position:absolute;inset:0;pointer-events:none;z-index:1}
.hm-map svg{width:100%;height:100%;display:block;overflow:visible}
.hm-coast{fill:var(--hm-paper);stroke:var(--hm-blue);stroke-width:3;stroke-linejoin:round}
.hm-route{fill:none;stroke:var(--hm-blue);stroke-width:3;stroke-dasharray:4 9;stroke-linecap:round;opacity:.5}
.hm-map-sun{position:absolute;left:44%;top:3%;width:70px;height:70px;border-radius:50%;border:2px solid var(--hm-blue);background:repeating-conic-gradient(var(--hm-coral) 0 25deg,var(--hm-butter) 25deg 50deg,var(--hm-paper) 50deg 75deg)}
.hm-map-tower{position:absolute;bottom:8%;left:46%;width:55px;height:auto!important;max-width:none}
.hm-map-dolphin{position:absolute;top:0;left:0;width:62px;z-index:4;filter:drop-shadow(0 2px var(--hm-soft))}
/* Original hero paints normally. All stage layers are absolute. */
.hm-home-art{position:relative;isolation:isolate;overflow:hidden}
.hm-lights{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.hm-dusk{position:absolute;inset:0;background:var(--hm-deep);mix-blend-mode:multiply;opacity:0}
.hm-lighthouse{position:absolute;bottom:11%;left:1%;width:24%!important;height:88%!important;object-fit:contain;object-position:left bottom;max-width:none;filter:drop-shadow(2px 0 var(--hm-paper))}
.hm-beam{position:absolute;top:19%;left:16%;width:110%;height:52%;background:repeating-linear-gradient(0deg,var(--hm-butter) 0 15%,var(--hm-coral) 15% 22%,var(--hm-paper) 22% 35%);clip-path:polygon(0 49%,100% 0,100% 100%,0 51%);transform-origin:0 50%;opacity:0;mix-blend-mode:screen}
.hm-window,.hm-awning{position:absolute;opacity:0;pointer-events:none}
.hm-window{background:var(--hm-butter);border:2px solid var(--hm-coral);box-shadow:0 0 16px 7px var(--hm-butter);mix-blend-mode:screen;clip-path:polygon(0 10%,100% 0,100% 100%,0 90%)}
.hm-awning{background:repeating-linear-gradient(90deg,var(--hm-butter) 0 15%,var(--hm-coral) 15% 30%);mix-blend-mode:screen;transform:rotate(-13deg);border-radius:0 0 12px 12px;box-shadow:0 9px 12px var(--hm-butter)}
.hm-harbour-water{position:absolute;bottom:0;left:0;right:0;height:18%;background:repeating-linear-gradient(0deg,var(--hm-deep) 0 7px,var(--hm-blue) 7px 18px,var(--hm-powder) 18px 21px);clip-path:polygon(0 12%,10% 20%,20% 5%,30% 16%,45% 0,60% 20%,75% 8%,90% 18%,100% 0,100% 100%,0 100%)}
.hm-engine-boat{position:absolute;bottom:1%;left:calc(24% + var(--boat)*15%);width:16%;transform:translateX(800%)}
.hm-engine-boat .hm-hull{width:100%;height:auto}
.hm-engine-boat .hm-engine-flag{position:absolute;width:35%;height:38%;object-fit:contain;left:28%;top:2%;background:var(--hm-paper);padding:2px;border:1px solid var(--hm-blue);border-radius:3px}
.hm-playing .hm-dusk{animation:hm-dawn 4.8s linear both}
.hm-playing .hm-beam{animation:hm-sweep 2.8s .15s ease-in-out both}
.hm-playing .hm-engine-boat{animation:hm-dock .75s calc(.7s + var(--boat)*.38s) cubic-bezier(.2,.7,.3,1) both}
.hm-playing .hm-window{animation:hm-lamp .35s calc(2.5s + var(--lamp)*.2s) steps(2,end) both}
.hm-playing .hm-awning{animation:hm-awning-on .3s calc(3.2s + var(--lamp)*.2s) steps(2,end) both}
@keyframes hm-dawn{0%{opacity:0}12%,62%{opacity:.85}100%{opacity:0}}
@keyframes hm-lamp{from{opacity:0}to{opacity:.62}}
@keyframes hm-awning-on{from{opacity:0}to{opacity:.6}}
@keyframes hm-sweep{0%{transform:rotate(-30deg);opacity:0}15%{opacity:.85}55%{transform:rotate(25deg);opacity:.9}85%{opacity:.8}100%{transform:rotate(-20deg);opacity:0}}
@keyframes hm-dock{0%{transform:translate(800%,0) rotate(-8deg)}65%{transform:translate(-8%,-8%) rotate(5deg)}100%{transform:none}}
.hm-replay{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--hm-blue);border-radius:50%;background:var(--hm-paper);color:var(--hm-blue);font:26px var(--font-outfit,Outfit),sans-serif;cursor:pointer;z-index:2}
.hm-replay:focus-visible{outline:3px solid var(--hm-blue);outline-offset:3px}
/* Arrival paints on the server. The wash runs behind the readable, usable page. */
.hm-shore{position:relative;width:min(360px,100%);height:154px;margin:12px auto 0;isolation:isolate}
.hm-arrival-tide{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;animation:hm-arrival-clear 1.3s linear both}
.hm-shore-wave{position:absolute;inset:-15% -10%;border-radius:48% 42% 0 0;background:repeating-linear-gradient(0deg,var(--hm-blue) 0 42px,var(--hm-powder) 42px 76px,var(--hm-paper) 76px 85px,var(--hm-coral) 85px 100px);animation:hm-shore 1.3s cubic-bezier(.4,0,.2,1) both;opacity:.65}
.geo-audit-page .ga-intro>h1,.geo-audit-page .ga-intro>p,.geo-audit-page .ga-reviewer{position:relative;z-index:1}
.hm-letter{display:block;background:var(--hm-soft);border:3px solid var(--hm-blue);border-radius:4px;box-shadow:6px 6px 0 var(--hm-powder);transform:rotate(-8deg)}
.hm-letter::after{content:'';position:absolute;inset:18% 15%;background:repeating-linear-gradient(0deg,transparent 0 10px,var(--hm-blue) 10px 12px);opacity:.65}
.hm-shore .hm-letter{position:absolute;left:7%;top:18px;width:98px;height:118px;animation:hm-letter-land 1.3s ease-out both}
.hm-bottle{position:absolute;width:54px;height:96px;border:3px solid var(--hm-blue);border-radius:16px 16px 22px 22px;background:color-mix(in srgb,var(--hm-powder) 32%,transparent);box-shadow:inset 9px 0 0 var(--hm-soft);transform:rotate(12deg)}
.hm-bottle::before{content:'';position:absolute;width:24px;height:30px;left:12px;top:-28px;border:3px solid var(--hm-blue);border-bottom:0;background:color-mix(in srgb,var(--hm-powder) 50%,var(--hm-soft))}
.hm-cork{position:absolute;left:14px;top:-36px;width:26px;height:15px;background:var(--hm-butter);border:2px solid var(--hm-blue);border-radius:3px}
.hm-shore .hm-bottle{left:43%;top:49px;animation:hm-bottle-arrive 1.3s ease-out both}
.hm-shore-dolphin{position:absolute;bottom:2px;right:-5px;width:165px;animation:hm-offer 1.3s ease-out both}
.hm-pen{position:absolute;right:82px;top:30px;display:block;width:15px;height:68px;min-width:44px;transform:rotate(26deg);animation:hm-pen-offer 1.3s ease-out both}
.hm-pen::before{content:'';position:absolute;left:16px;top:0;width:12px;height:60px;background:linear-gradient(0deg,var(--hm-blue) 0 12%,var(--hm-butter) 12% 75%,var(--hm-coral) 75%);border:2px solid var(--hm-blue);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.hm-shore a:focus-visible{outline:3px solid var(--hm-blue);outline-offset:6px}
@keyframes hm-arrival-clear{0%,99%{visibility:visible}100%{visibility:hidden}}
@keyframes hm-shore{0%{transform:translateY(105%) rotate(-4deg)}36%{transform:translateY(-4%) rotate(3deg)}100%{transform:translateY(105%) rotate(-4deg)}}
@keyframes hm-letter-land{0%,35%{transform:translate(-70px,80px) rotate(-24deg);opacity:0}70%,100%{transform:rotate(-8deg);opacity:1}}
@keyframes hm-bottle-arrive{0%,35%{transform:translate(90px,40px) rotate(65deg);opacity:0}75%,100%{transform:rotate(12deg);opacity:1}}
@keyframes hm-offer{0%,35%{transform:translateY(90px) rotate(-20deg);opacity:0}67%{transform:translateY(-18px) rotate(-8deg);opacity:1}84%{transform:translateY(6px)}100%{transform:none;opacity:1}}
@keyframes hm-pen-offer{0%,40%{transform:translateY(90px) rotate(0deg);opacity:0}70%{transform:translateY(-16px) rotate(32deg);opacity:1}100%{transform:rotate(26deg);opacity:1}}
/* An accepted request gets a viewport stage: roll, insert, cork, leap, sail. */
.hm-send{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;background:var(--hm-paper);animation:hm-send-stage 2.75s linear both}
.hm-send::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,var(--hm-powder) 3px 4px);opacity:.15}
.hm-send-water{position:absolute;inset:63% -15% -25%;border-radius:45% 48% 0 0;background:repeating-linear-gradient(0deg,var(--hm-blue) 0 44px,var(--hm-powder) 44px 70px,var(--hm-paper) 70px 79px,var(--hm-deep) 79px 110px);animation:hm-send-water 2.75s ease-in-out both}
.hm-parcel{position:absolute;left:50%;top:50%;width:min(680px,94vw);height:min(500px,65vh);transform:translate(-50%,-50%);animation:hm-carry 2.75s ease-in-out both}
.hm-send .hm-letter{position:absolute;left:14%;top:4%;width:24%;height:43%;animation:hm-roll 2.75s linear both;z-index:2}
.hm-send .hm-bottle{left:49%;top:42%;width:15%;height:31%;animation:hm-bottle-catch 2.75s linear both}
.hm-send .hm-bottle::before{left:25%;width:47%;height:28%;top:-27%}
.hm-send .hm-cork{left:28%;width:45%;height:14%;top:-35%;animation:hm-cork 2.75s ease-in both}
.hm-courier{position:absolute;left:5%;top:50%;width:49%;animation:hm-courier-leap 2.75s ease-in-out both}
@keyframes hm-send-stage{0%{opacity:0}8%,94%{opacity:1}100%{opacity:0}}
@keyframes hm-roll{0%,12%{transform:rotate(-8deg)}27%{transform:translate(90%,0) scaleX(.18);opacity:1}40%{transform:translate(144%,76%) scale(.18,.35);opacity:1}43%,100%{transform:translate(144%,90%) scale(.18,.3);opacity:0}}
@keyframes hm-cork{0%,38%{transform:translateY(-180%);opacity:0}42%{transform:translateY(-180%);opacity:1}49%{transform:translateY(15%);opacity:1}53%,100%{transform:none;opacity:1}}
@keyframes hm-courier-leap{0%,45%{transform:translate(-90%,90%) rotate(-30deg)}61%{transform:translate(5%,-45%) rotate(-18deg)}71%,100%{transform:translate(25%,8%) rotate(12deg)}}
@keyframes hm-bottle-catch{0%,60%{transform:rotate(12deg)}72%,100%{transform:translateY(-25%) rotate(35deg)}}
@keyframes hm-carry{0%,68%{transform:translate(-50%,-50%)}82%{transform:translate(-20%,-65%) rotate(-4deg)}100%{transform:translate(120vw,-20%) rotate(10deg)}}
@keyframes hm-send-water{0%,52%{transform:translateY(30%) rotate(-4deg)}75%{transform:translateY(-15%) rotate(3deg)}100%{transform:translate(12%,-25%) rotate(-3deg)}}
.hm-enabled .ga-thanks .ga-grid>div:first-child{padding:28px;border:2px solid var(--hm-blue);border-radius:8px;background:repeating-linear-gradient(0deg,transparent 0 39px,var(--hm-powder) 39px 40px),var(--hm-paper);box-shadow:8px 8px 0 var(--hm-powder)}

/* Layout is declared in the initial stylesheet, so making the hero visible on
   touch does not depend on a late JS class or shift the page after first paint. */
@media(max-width:880px){
 .hero{padding-top:24px!important}
 .hero-grid{display:flex!important;flex-direction:column;gap:22px!important}
 .hero-grid>.art{order:-1;width:min(100%,420px);max-height:none}
 .hero-grid>.art>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
 .hm-enabled .hm-chart a.hm-map-place{font-size:10.5px!important;line-height:1.05!important;width:42%;height:54px;min-height:54px;overflow-wrap:anywhere;padding:4px 3px 4px 27px!important}
 .hm-map-place::before{width:15px;height:20px;left:0}
 .hm-map-sun{width:38px;height:38px;left:44%}
 .hm-map-tower{width:32px;left:46%}
 .hm-map-dolphin{width:44px}
 .hm-chart>.lang-switch-mobile,.hm-chart>span:last-of-type{left:22%;right:22%;bottom:0}
 .hm-gauge{right:2px;width:15px;opacity:.6}.hm-gauge .hm-dolphin{left:-10px;width:24px}
 .hm-replay{right:8px;top:8px}
}
@media(prefers-reduced-motion:reduce){
 .hm-print,.hm-plate{animation:none}.hm-plate,.hm-tide,.hm-gauge,.hm-lights,.hm-replay,.hm-shore,.hm-arrival-tide,.hm-send,.hm-map{display:none!important}
 .hm-enabled .hm-chart{transition:none}
}
.ga-tide-table{list-style:none;padding:0;counter-reset:tide-step}
.ga-tide-table li{position:relative;padding:18px 0 18px 40px;border-top:1px solid var(--hm-blue);counter-increment:tide-step}
.ga-tide-table li::before{content:'0' counter(tide-step);position:absolute;left:0;top:20px;color:var(--hm-blue);font-size:.8rem;font-weight:700}