/* hohcoach.com motion system (v15.00). Everything here is cosmetic: the site reads and works without it. */
@property --mk-amp{syntax:"<number>";inherits:true;initial-value:1}

/* 1. The mark is a sound wave that never stops: each bar follows a sine, a fifth of a cycle behind its neighbour, so the wave rolls across the mark. Hovering the logo, or scrolling, lifts the level. */
.mk{--mk-amp:1;transition:--mk-amp .5s ease-out;overflow:visible}
.mk .bar{transform-box:fill-box;transform-origin:center center;animation:mkWave 2.6s linear infinite;animation-delay:var(--mk-dl,0s)}
.mk .bar:nth-child(1){--mk-dl:0s}
.mk .bar:nth-child(2){--mk-dl:-.52s}
.mk .bar:nth-child(3){--mk-dl:-1.04s}
.mk .bar:nth-child(4){--mk-dl:-1.56s}
.mk .bar:nth-child(5){--mk-dl:-2.08s}
@keyframes mkWave{0%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.0000))} 8.333%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.5000))} 16.667%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.8660))} 25%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +1.0000))} 33.333%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.8660))} 41.667%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.5000))} 50%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * +0.0000))} 58.333%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -0.5000))} 66.667%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -0.8660))} 75%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -1.0000))} 83.333%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -0.8660))} 91.667%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -0.5000))} 100%{transform:scaleY(calc(1 + .15 * var(--mk-amp) * -0.0000))}}
.logo:hover .mk,.logo:focus-visible .mk{--mk-amp:2.2}
/* While listening, the bars follow the microphone instead. */
.mk.listening .bar{animation:none;transition:transform .07s linear}
.mk-listen{position:relative}
.mk-listen svg{width:17px;height:17px}
.mk-listen.on{background:var(--teal);border-color:var(--teal);color:#fff}
.mk-listen.on::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 70%,transparent);animation:mkLive 1.6s ease-out infinite}
@keyframes mkLive{to{box-shadow:0 0 0 7px transparent}}
.mk-listen.denied{outline:2px solid var(--err);outline-offset:2px}
@media (max-width:640px){.hd .mk-listen{display:none}}
.mk-404{display:flex;justify-content:center;margin:0 0 18px}
.mk-404 .mk{height:58px;width:auto;--mk-amp:2.6}
.mk-404 .mk .bar{fill:var(--teal)}
.mk-404 .mk .bar.g{fill:var(--gold)}

/* 2. A constant sound wave above the footer: the coach’s strand and the mentor’s strand, crossing. */
.wave-div{position:relative;height:34px;overflow:hidden;line-height:0;pointer-events:none;background:var(--bg);contain:strict}
.wave-div svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;will-change:transform;backface-visibility:hidden}
.wave-div .wv{fill:none;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wave-div .wv1{stroke:var(--teal);opacity:.55}
.wave-div .wv2{stroke:var(--gold);opacity:.6}
/* The whole strand moves, not the path inside it, so the browser slides a ready-drawn layer instead of redrawing the line sixty times a second. */
.wave-div .wvs-t{animation:wvFlow 18s linear infinite}
.wave-div .wvs-g{animation:wvFlow 26s linear infinite reverse}
@keyframes wvFlow{to{transform:translateX(-100%)}}

/* 3. A reading line along the top edge, filling as you read. */
.readbar{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;width:100%;z-index:95;pointer-events:none;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .15s linear}

/* 4. One orchestrated entrance per page. */
.phero .eyebrow,.phero h1,.phero .strap,.phero .ctarow,.hero .eyebrow,.hero h1,.hero .strap,.hero .ctarow,.hero .hero-link,.hero .credrow{animation:mvRise .8s var(--ease-out) both}
.phero h1,.hero h1{animation-delay:.1s}
.phero .strap,.hero .strap{animation-delay:.2s}
.phero .ctarow,.hero .ctarow{animation-delay:.3s}
.hero .hero-link{animation-delay:.38s}
.hero .credrow{animation-delay:.46s}
@keyframes mvRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 5. Section eyebrows: the two little rules grow out from the words as each section arrives. */
.eyebrow::before,.eyebrow::after{transition:transform .7s var(--ease-out) .1s}
.eyebrow.ey-wait::before{transform:scaleX(0);transform-origin:right}
.eyebrow.ey-wait::after{transform:scaleX(0);transform-origin:left}

/* 6. Buttons: a light passes over the primary button on hover; every press sends out a ring. */
.btn,.icobtn{overflow:hidden}
.sheen{position:absolute;top:0;bottom:0;left:-45%;width:40%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.34) 50%,transparent 100%);transform:skewX(-18deg);pointer-events:none;animation:btnSheen .9s ease-out forwards}
@keyframes btnSheen{0%{left:-45%;opacity:0}25%{opacity:1}100%{left:125%;opacity:0}}
.rip{position:absolute;left:var(--x);top:var(--y);width:var(--r);height:var(--r);border-radius:50%;border:2px solid currentColor;opacity:.4;pointer-events:none;transform:translate(-50%,-50%) scale(.1);animation:ripOut .75s ease-out forwards}
@keyframes ripOut{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* 7. Form fields: a teal line draws under the field you are writing in, and its label follows. */
.pg form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.pg form textarea{background-image:linear-gradient(var(--teal),var(--teal));background-size:0 2px;background-position:50% 100%;background-repeat:no-repeat;transition:background-size .45s var(--ease-out),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pg form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,.pg form textarea:focus{background-size:100% 2px}
.pg form label{transition:color .25s var(--ease)}
.pg form label:has(+ input:focus),.pg form label:has(+ textarea:focus),.pg form div:has(> input:focus) > label{color:var(--teal)}

/* 8. Cards: the gold glow in each card’s corner turns teal and drifts towards the pointer; each card’s gold rule draws in as it arrives. */
@media (hover:hover) and (pointer:fine){
  .card:not(.unl-prem):not(.rec)::after{transition:transform .5s var(--ease-out),background .5s var(--ease)}
  .card:not(.unl-prem):not(.rec).lit::after{transform:translate(var(--gx,0px),var(--gy,0px));background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 15%,transparent),transparent 70%)}
}
.js .card.rv>h3::after,.js .named .card.rv h3::after{transition:transform .6s var(--ease-out) .3s}
.js .card.rv:not(.in)>h3::after,.js .named .card.rv:not(.in) h3::after{transform:scaleX(0)}

/* 9. Pamphlets lean towards the pointer. */
@media (hover:hover) and (pointer:fine){
  .pam-open{perspective:900px}
  .pam-open .pam-thumb{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);will-change:transform}
}

/* 10. Small signs of life. */
#themeBtn svg{transition:transform .45s var(--ease-out)}
#themeBtn:hover svg{transform:rotate(22deg)}
.wa-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:waPing 7s ease-out 2s infinite}
@keyframes waPing{0%,72%{transform:scale(.5);opacity:0}78%{opacity:.75}100%{transform:scale(2.6);opacity:0}}
main p a:not(.btn),main li a:not(.btn){transition:text-decoration-thickness .2s var(--ease),text-underline-offset .2s var(--ease)}
main p a:not(.btn):hover,main li a:not(.btn):hover{text-decoration-thickness:2px;text-underline-offset:3px}

/* 11. Pages cross-fade into each other, and the header stays put. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s ease-in both}
::view-transition-new(root){animation:vtIn .28s ease-out both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
.hd{view-transition-name:hoh-header}

/* 12. The HEARD Method diagram draws itself as you scroll, then keeps a quiet sway. */
.hm-fig .hm-heads{display:none}
.hm-fig .hm-heads .hm-halo{opacity:.22}
.hm-fig .hm-heads circle{transition:opacity .2s linear}
.hm-fig .hm-ring{transition:stroke .45s ease}
.hm-fig .hm-letter{transition:fill .45s ease}
.hm-fig .hm-inner,.hm-fig .hm-lbl{transition:opacity .45s ease}
.hm-fig .hm-loop{transition:opacity .6s ease}
.hm-fig .hm-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.hm-fig.hm-anim .hm-heads{display:inline}
.hm-fig.hm-anim .hm-stage:not(.on) .hm-ring{stroke:var(--line-strong)}
.hm-fig.hm-anim .hm-stage:not(.on) .hm-inner{opacity:0}
.hm-fig.hm-anim .hm-stage:not(.on) .hm-letter{fill:var(--mut)}
.hm-fig.hm-anim .hm-stage:not(.on) .hm-lbl{opacity:.3}
.hm-fig.hm-anim .hm-stage.on .hm-pulse{animation:hm-pulse .9s ease-out 1}
.hm-fig.hm-anim .hm-loop:not(.on){opacity:0}
.hm-layer{position:relative;display:block}
.hm-layer .hm-strands{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;will-change:transform;backface-visibility:hidden}
.hm-layer .hm-stages{position:relative;display:block}
.hm-fig.hm-anim .hm-done .hm-strands{animation:hmSway 7s ease-in-out infinite alternate}
.hm-layer.thrive-tall{--sx:1.6px;--sy:0px}
.hm-layer.thrive-wide{--sx:0px;--sy:1.6px}
@keyframes hmSway{from{transform:translate(0,0)}to{transform:translate(var(--sx),var(--sy))}}
.hm-arrow,.hm-arrow-halo{transform-box:fill-box;transform-origin:center}
.hm-arrow.hit{animation:hmArrow 1s cubic-bezier(.2,.8,.2,1) 1}
@keyframes hmArrow{0%{transform:scale(1)}30%{transform:scale(1.7)}100%{transform:scale(1)}}
.hm-arrow-halo.hit{animation:hmHalo 1s ease-out 1}
@keyframes hmHalo{from{transform:scale(.18);opacity:.35}to{transform:scale(1);opacity:0}}
/* The return journey: once the diagram is complete, the two strands travel back from Decide to Hear, and Hear answers with a ring. */
.hm-ret{visibility:hidden}
.hm-ret-on .hm-ret{visibility:visible}
.hm-fig.hm-anim .hm-done .hm-retpath{animation:hmDash 1.1s linear infinite}
@keyframes hmDash{to{stroke-dashoffset:-10}}
.hm-fig .hm-pulse.hm-again,.hm-fig.hm-anim .hm-pulse.hm-again{animation:hm-pulse-b .9s ease-out 1}
@keyframes hm-pulse{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
@keyframes hm-pulse-b{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}

/* The five cards and the five stages are one thing: point at a card (or tap it) and its stage lights up in the diagram, and the other way round. */
.hm-fig .hm-stage{cursor:pointer}
.hm-fig .hm-stage .hm-ring,.hm-fig .hm-stage .hm-inner,.hm-fig .hm-stage .hm-letter,.hm-fig .hm-stage .hm-lbl text{transition:stroke .3s ease,stroke-width .3s ease,fill .3s ease,opacity .3s ease,filter .3s ease}
.hm-fig .hm-seg{opacity:0;transition:opacity .35s ease;pointer-events:none}
.hm-fig .hm-seg.sel{opacity:1}
.hm-fig .hm-seg-t.sel{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--teal) 75%,transparent))}
.hm-fig .hm-seg-g.sel{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gold) 75%,transparent))}
.hm-fig .hm-stage.sel .hm-ring,.hm-fig.hm-anim .hm-stage.sel .hm-ring{stroke:var(--gold);stroke-width:3;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--gold) 70%,transparent))}
.hm-fig .hm-stage.sel .hm-inner,.hm-fig.hm-anim .hm-stage.sel .hm-inner{opacity:1;stroke:var(--teal)}
.hm-fig .hm-stage.sel .hm-letter,.hm-fig.hm-anim .hm-stage.sel .hm-letter{fill:var(--gold-2)}
.hm-fig .hm-stage.sel .hm-lbl,.hm-fig.hm-anim .hm-stage.sel .hm-lbl{opacity:1}
.hm-fig .hm-stage.sel .hm-lbl text:nth-child(2),.hm-fig.hm-anim .hm-stage.sel .hm-lbl text:nth-child(2){fill:var(--gold-2)}
.hm-fig .hm-stage.sel .hm-lbl text:nth-child(3),.hm-fig.hm-anim .hm-stage.sel .hm-lbl text:nth-child(3){fill:var(--ink)}
.tcard2{transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease-out,ease)}
.tcard2 .t-letter{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.tcard2.is-sel{border-color:var(--gold);box-shadow:0 14px 34px -16px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 1px 0 var(--hl);transform:translateY(-3px)}
.tcard2.is-sel .t-letter{background:var(--gold);border-color:var(--gold);color:#1B1F1E;box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 22%,transparent)}
.tcard2.is-sel h3{color:var(--gold-2)}

/* If nobody has scrolled two seconds after arriving, the diagram plays itself and a small cue points the way down to it. */
.hm-cue{display:inline-flex;flex-direction:column;align-items:center;gap:3px;margin:22px auto 0;padding:6px 10px;border:0;background:none;color:var(--teal);font-family:"Figtree","Figtree Fallback",sans-serif;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease,color .3s ease;pointer-events:none}
.hm-cue.show{opacity:1;transform:none;pointer-events:auto}
.hm-cue:hover{color:var(--gold-2)}
.hm-cue svg{width:18px;height:18px;animation:hmCueBob 1.7s ease-in-out infinite}
@keyframes hmCueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* The word itself: the letters stay still, and a teal-and-gold light passes through them on the site's clock (two beats of the mark per pass). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hm-word{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 18%,var(--teal) 34%,var(--gold) 50%,var(--teal) 66%,var(--ink) 82%,var(--ink) 100%);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hmWord 5.2s linear infinite}
  @keyframes hmWord{to{background-position:-200% 0}}
}

/* ---- About: three quotes in one place. They cross-fade; the band keeps the height of the longest quote, so nothing below it moves. ---- */
.qs-track{display:grid}
.qs-slide{grid-area:1/1;align-self:center;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s linear .9s}
.qs-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1) .15s,transform .9s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.qs-slide .quote{margin:0 auto}
.qs-nav{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:22px}
.qs-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.qs-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:999px;box-sizing:border-box;border:1.5px solid color-mix(in srgb,var(--teal) 75%,transparent);transition:width .5s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background-color .3s ease}
.qs-dot.is-on{width:44px}
.qs-dot.is-on::before{width:36px;border-color:var(--gold);background-color:color-mix(in srgb,var(--gold) 16%,transparent)}
.qs-dot:hover::before{border-color:var(--gold)}
/* The progress bar inside the current dot. The script moves it from the same clock that changes the quote, so the two can never drift apart. */
.qs-fill{position:absolute;left:50%;top:50%;width:36px;height:10px;transform:translate(-50%,-50%);border-radius:999px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease}
.qs-fill i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:left center;transition:opacity .3s ease}
.qs-dot.is-on .qs-fill{opacity:1;transition:opacity .3s ease .3s}
.qs.paused .qs-fill i{opacity:.5}
.qs-play{width:28px;height:28px;margin-left:10px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--mut);cursor:pointer;transition:color .2s ease,border-color .2s ease}
.qs-play:hover{color:var(--teal);border-color:var(--teal)}
.qs-play svg{width:14px;height:14px}
.qs-play .qs-i-play{display:none}
.qs.user-paused .qs-play .qs-i-play{display:block}
.qs.user-paused .qs-play .qs-i-pause{display:none}
.qs.static .qs-play{display:none}
.qs-dot:focus-visible,.qs-play:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.qs-slide,.qs-slide.is-on{transition:none;transform:none}}

/* 14. The recommended package: a teal-to-gold light circles its edge, the pill breathes, and its three checks arrive one by one. */
@property --hoh-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .pk.rec::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2.5px;pointer-events:none;z-index:0;background:conic-gradient(from var(--hoh-ang),transparent 0deg 200deg,var(--teal) 275deg,color-mix(in srgb,var(--gold) 80%,#fff) 325deg,var(--gold) 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:hohRing 9s linear infinite}
  .pk.rec .pk-pill{z-index:1}
}
@keyframes hohRing{to{--hoh-ang:360deg}}
.pk.rec .pk-pill{animation:hohPill 4.5s ease-in-out infinite}
@keyframes hohPill{0%,100%{box-shadow:var(--sh-1)}50%{box-shadow:var(--sh-1),0 0 0 5px color-mix(in srgb,var(--gold) 20%,transparent)}}
.js .pk-inaug.rv .inc-list li::before{transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.js .pk-inaug.rv .inc-list li:nth-child(1)::before{transition-delay:.25s}
.js .pk-inaug.rv .inc-list li:nth-child(2)::before{transition-delay:.45s}
.js .pk-inaug.rv .inc-list li:nth-child(3)::before{transition-delay:.65s}
.js .pk-inaug.rv:not(.in) .inc-list li::before{transform:scale(0);opacity:0}

/* 15. Signal buttons: on the most important calls to action, a teal-and-gold light runs round the edge and the glow beneath breathes between the two. (21st.dev’s Rainbow Button, in your colours.) */
@property --hoh-glow{syntax:"<color>";inherits:false;initial-value:transparent}
.hero .btn-p,.cta-band .btn-p,.pk.rec .btn-p,.pg form button.btn-p,.btn-signal{border:1.5px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 88%,#fff),var(--teal) 55%,var(--teal-2)) padding-box,linear-gradient(90deg,var(--teal),var(--gold),color-mix(in srgb,var(--teal-2) 60%,#fff),var(--gold-2),var(--teal)) border-box;background-size:auto,200% 100%;animation:hohSignal 3.4s linear infinite,hohGlow 3.4s ease-in-out infinite;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 24px -10px var(--hoh-glow)}
.is-dark .hero .btn-p,.is-dark .cta-band .btn-p,.is-dark .pk.rec .btn-p,.is-dark .pg form button.btn-p,.is-dark .btn-signal{background:linear-gradient(180deg,var(--teal-2),var(--teal)) padding-box,linear-gradient(90deg,var(--teal),var(--gold),#fff,var(--gold-2),var(--teal)) border-box;background-size:auto,200% 100%}
.hero .btn-p:focus-visible,.cta-band .btn-p:focus-visible,.pk.rec .btn-p:focus-visible,.pg form button.btn-p:focus-visible,.btn-signal:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@keyframes hohSignal{to{background-position:0 0,200% 0}}
@keyframes hohGlow{0%,100%{--hoh-glow:color-mix(in srgb,var(--teal) 70%,transparent)}50%{--hoh-glow:color-mix(in srgb,var(--gold) 70%,transparent)}}

/* 13. Anyone who has asked their device for less motion gets the finished state of everything, instantly. */
@media (prefers-reduced-motion:reduce){
  .mk .bar,.wave-div svg,.wa-dot::after,.sheen,.hm-fig *{animation:none!important}
  .phero .eyebrow,.phero h1,.phero .strap,.phero .ctarow,.hero .eyebrow,.hero h1,.hero .strap,.hero .ctarow,.hero .hero-link,.hero .credrow{animation:none!important}
  .eyebrow.ey-wait::before,.eyebrow.ey-wait::after{transform:none!important}
  .readbar{transition:none}
  .pk.rec::after{display:none}
  .hm-cue svg{animation:none}
  .hm-word{animation:none;background-position:50% 0}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}