/* =====================================================================
   Brythonic Academy — landing page motion layer
   Loaded only by index.html (after style.css). Every rule is scoped under
   html.hm-motion, which is set in the <head> only when reduced motion is
   off and is removed again if home-motion.js does not start. Without it,
   the landing page renders exactly as before.
   No colours are introduced: every value below already exists in style.css.
   ===================================================================== */

.hm-motion {
  --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-io: cubic-bezier(0.65, 0, 0.35, 1);
  --hm-write: cubic-bezier(0.42, 0.08, 0.58, 0.95);
  --hm-spring: cubic-bezier(0.3, 1.32, 0.5, 1);
}

/* Decorative elements created by home-motion.js stay hidden without it. */
.hm-pen,
.hm-progress,
.hm-glyphs,
.hm-cover,
.hm-steps,
.hm-sketch,
.hm-flourish,
.hm-ring,
.hm-under {
  display: none;
}

/* The generic fade-up (.reveal) is replaced by the choreography below. */
.hm-motion .reveal:not(.visible) {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   Shared building blocks
   --------------------------------------------------------------------- */
.hm-motion .hm-c {
  display: inline-block;
}
.hm-motion .hm-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hm-motion .hm-li {
  display: block;
}
.hm-motion .hm-pen {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}
.hm-pen-svg {
  position: absolute;
  right: 0;
  top: -9px;
  width: 146px;
  height: 18px;
  overflow: visible;
  transform-origin: 100% 50%;
  transform: rotate(155deg);
  filter: drop-shadow(6px 10px 8px rgba(5, 2, 20, 0.45));
}
.hm-motion .hm-flourish,
.hm-motion .hm-ring,
.hm-motion .hm-under {
  display: block;
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.hm-flourish path,
.hm-ring path,
.hm-under path,
.hm-sketch rect {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

/* Eyebrows: the dot lands, the label slides in. */
.hm-motion .eyebrow {
  transition: opacity 0.7s ease var(--hm-bd, 0ms), translate 0.9s var(--hm-ease) var(--hm-bd, 0ms);
}
.hm-motion .eyebrow-dot {
  transition: scale 0.6s var(--hm-spring) calc(var(--hm-bd, 0ms) + 0.1s);
}
@keyframes hmPing {
  0% { box-shadow: 0 0 0 0 rgba(120, 146, 255, 0.65), 0 0 16px #7892ff; }
  100% { box-shadow: 0 0 0 12px rgba(120, 146, 255, 0), 0 0 16px #7892ff; }
}
@keyframes hmSheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes hmSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

/* ---------------------------------------------------------------------
   Header: slides in, pencil progress line, nav underline
   --------------------------------------------------------------------- */
.hm-motion .site-header {
  transition: background 0.3s, box-shadow 0.3s, translate 0.9s var(--hm-ease), opacity 0.6s ease;
}
.hm-motion:not(.hm-ready) .site-header {
  translate: 0 -100%;
  opacity: 0;
}
@media (min-width: 851px) {
  .hm-motion .nav-links > a {
    transition: color 0.2s, opacity 0.6s ease, translate 0.8s var(--hm-ease), background-size 0.35s var(--hm-ease), box-shadow 0.2s, border 0.2s, transform 0.2s;
  }
  .hm-motion .nav-links > a:nth-child(1) { transition-delay: 0s, 0.25s, 0.25s, 0s, 0s, 0s, 0s; }
  .hm-motion .nav-links > a:nth-child(2) { transition-delay: 0s, 0.31s, 0.31s, 0s, 0s, 0s, 0s; }
  .hm-motion .nav-links > a:nth-child(3) { transition-delay: 0s, 0.37s, 0.37s, 0s, 0s, 0s, 0s; }
  .hm-motion .nav-links > a:nth-child(4) { transition-delay: 0s, 0.43s, 0.43s, 0s, 0s, 0s, 0s; }
  .hm-motion .nav-links > a:nth-child(5) { transition-delay: 0s, 0.5s, 0.5s, 0s, 0s, 0s, 0s; }
  .hm-motion:not(.hm-ready) .nav-links > a {
    opacity: 0;
    translate: 0 -10px;
  }
}
@media (hover: hover) {
  .hm-motion .nav-link:not(.active) {
    padding-bottom: 5px;
    margin-bottom: -5px;
    background: linear-gradient(90deg, #7892ff, #885aff) no-repeat 50% 100% / 0% 1.5px;
  }
  .hm-motion .nav-link:not(.active):hover,
  .hm-motion .nav-link:not(.active):focus-visible {
    background-size: 100% 1.5px;
  }
}
/* Mobile menu: links cascade in when it opens. */
@keyframes hmNavIn {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 850px) {
  .hm-motion .nav-links.open > * {
    animation: hmNavIn 0.45s var(--hm-ease) both;
  }
  .hm-motion .nav-links.open > *:nth-child(2) { animation-delay: 0.05s; }
  .hm-motion .nav-links.open > *:nth-child(3) { animation-delay: 0.1s; }
  .hm-motion .nav-links.open > *:nth-child(4) { animation-delay: 0.15s; }
  .hm-motion .nav-links.open > *:nth-child(5) { animation-delay: 0.2s; }
}
.hm-motion .hm-progress {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.hm-progress-ink {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--hm-p, 0));
  background: linear-gradient(90deg, #456ff0, #7855e8, #bdb5ff);
  box-shadow: 0 0 10px #7855e8aa;
}
.hm-motion .hm-progress-pen {
  left: calc(var(--hm-p, 0) * 100%);
  top: 1px;
  opacity: min(1, calc(var(--hm-p, 0) * 40));
}
.hm-progress-pen .hm-pen-svg {
  width: 62px;
  height: 8px;
  top: -4px;
  transform: rotate(18deg);
  filter: drop-shadow(2px 3px 3px rgba(5, 2, 20, 0.5));
}

/* ---------------------------------------------------------------------
   Buttons and links (landing page only)
   --------------------------------------------------------------------- */
.hm-motion .btn {
  translate: var(--hm-bx, 0px) var(--hm-by, 0px);
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s, translate 0.35s var(--hm-ease), clip-path 0.9s var(--hm-ease), opacity 0.6s ease, background 0.3s;
}
.hm-motion .btn-primary,
.hm-motion .btn-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hm-motion .btn-primary::after,
.hm-motion .btn-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.34) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--hm-ease);
  pointer-events: none;
}
.hm-motion .btn-light::after {
  background: linear-gradient(105deg, transparent 35%, rgba(136, 90, 255, 0.18) 50%, transparent 65%);
}
.hm-motion .btn-primary:hover::after,
.hm-motion .btn-light:hover::after,
.hm-motion .btn-primary:focus-visible::after,
.hm-motion .btn-light:focus-visible::after {
  transform: translateX(120%);
}
.hm-motion .btn > span:last-child:not(.play-icon) {
  display: inline-block;
  transition: transform 0.35s var(--hm-ease);
}
.hm-motion .btn:hover > span:last-child:not(.play-icon),
.hm-motion .btn:focus-visible > span:last-child:not(.play-icon) {
  transform: translate(3px, -3px);
}
.hm-motion .play-icon {
  transition: transform 0.35s var(--hm-ease), background 0.3s;
}
.hm-motion .btn:hover .play-icon {
  transform: scale(1.15);
  background: #ffffff26;
}
.hm-motion .text-link {
  position: relative;
}
.hm-motion .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #7892ff, #885aff);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--hm-ease);
}
.hm-motion .text-link:hover::after,
.hm-motion .text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.hm-motion .text-link span {
  display: inline-block;
  transition: transform 0.35s var(--hm-ease);
}
.hm-motion .text-link:hover span {
  transform: translate(3px, -3px);
}

/* ---------------------------------------------------------------------
   HERO — written, not faded
   --------------------------------------------------------------------- */
.hm-motion .hero:not(.hm-split) .hero-copy,
.hm-motion .hero:not(.hm-split) .hero-visual {
  visibility: hidden;
}
.hm-motion .hero .hero-copy,
.hm-motion .hero .hero-visual {
  transition: none;
}
/* Leaving the hero: the copy rises a little faster than the portrait. */
.hm-motion .hero .hero-copy {
  translate: 0 calc(var(--hm-sy, 0) * -70px);
}

/* eyebrow types itself */
.hm-motion .hero .eyebrow .hm-c {
  transition: opacity 0.06s linear calc(0.2s + var(--i) * 26ms);
}
.hm-motion .hero:not(.hm-in) .eyebrow .hm-c {
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .hero:not(.hm-in) .eyebrow-dot {
  scale: 0;
}
.hm-motion .hero.hm-in .eyebrow-dot {
  animation: hmPing 1.6s ease-out 0.5s 2;
}

/* heading: words rise, then the pencil writes the gradient line */
.hm-motion .hero h1 {
  position: relative;
}
.hm-motion .hero .hm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.05em 0.16em;
  margin: -0.08em -0.05em -0.16em;
}
.hm-motion .hero .hm-wi {
  display: inline-block;
  transition: transform 1.1s var(--hm-ease) calc(0.25s + var(--i) * 0.09s), opacity 0.8s ease calc(0.25s + var(--i) * 0.09s);
}
.hm-motion .hero:not(.hm-in) .hm-wi {
  transform: translateY(110%) rotate(6deg);
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .hero h1 .hm-write {
  display: inline-block;
  position: relative;
  clip-path: inset(-15% -4% -45% -4%);
  transition: clip-path 1.3s var(--hm-write) 0.75s;
}
.hm-motion .hero:not(.hm-in) h1 .hm-write {
  clip-path: inset(-15% 104% -45% -4%);
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .hero h1 .hm-flourish {
  left: -2%;
  bottom: -0.3em;
  width: 104%;
  height: 0.32em;
}
.hm-flourish path:first-child {
  stroke: #9f91ff;
  stroke-width: 3;
  transition: stroke-dashoffset 0.6s var(--hm-io) 2.2s;
}
.hm-flourish path:last-child {
  stroke: #719aff;
  stroke-width: 2;
  opacity: 0.75;
  transition: stroke-dashoffset 0.45s var(--hm-io) 2.62s;
}
.hm-motion .hero:not(.hm-in) .hm-flourish path {
  stroke-dashoffset: 1.01;
  transition-delay: 0s;
  transition-duration: 0.2s;
}
.hm-motion .hero .hm-hero-pen {
  opacity: 0;
}
.hm-motion .hero.hm-in .hm-hero-pen {
  animation: hmPenWrite 2.9s linear 0.6s both;
}
@keyframes hmPenWrite {
  0% { transform: translate(calc(var(--x0) + 40px), calc(var(--y0) - 90px)); opacity: 0; }
  6% { transform: translate(var(--x0), var(--y0)); opacity: 1; }
  14% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * 0.18), calc(var(--y0) - 7px)); }
  22% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * 0.36), calc(var(--y0) + 5px)); }
  30% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * 0.53), calc(var(--y0) - 6px)); }
  38% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * 0.7), calc(var(--y0) + 4px)); }
  46% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * 0.88), calc(var(--y0) - 4px)); }
  51% { transform: translate(var(--x1), var(--y0)); }
  56% { transform: translate(var(--x1), var(--y1)); }
  76% { transform: translate(var(--x0), calc(var(--y1) + 5px)); opacity: 1; }
  100% { transform: translate(calc(var(--x0) - 50px), calc(var(--y1) + 80px)); opacity: 0; }
}

/* description inks in word by word */
.hm-motion .hero-description .hm-dw,
.hm-motion .hero-description .hm-dwi {
  display: inline-block;
}
.hm-motion .hero-description .hm-dwi {
  transition: opacity 0.7s ease calc(1.15s + var(--i) * 22ms), transform 0.9s var(--hm-ease) calc(1.15s + var(--i) * 22ms);
}
.hm-motion .hero:not(.hm-in) .hero-description .hm-dwi {
  opacity: 0;
  transform: translateY(0.6em);
  transition-delay: 0s;
}

/* buttons unfold from their centre */
.hm-motion .hero .hero-actions .btn {
  clip-path: inset(-30px -30px -30px -30px round 100px);
  transition-delay: 0s, 0s, 0s, 0s, 1.65s, 1.65s, 0s;
}
.hm-motion .hero .hero-actions .btn + .btn {
  transition-delay: 0s, 0s, 0s, 0s, 1.8s, 1.8s, 0s;
}
.hm-motion .hero:not(.hm-in) .hero-actions .btn {
  clip-path: inset(50% 50% 50% 50% round 100px);
  opacity: 0;
}
.hm-motion .hero.hm-in .hero-actions .btn-primary::after {
  animation: hmSheen 1.1s var(--hm-ease) 2.75s 1 both;
}

/* proof line */
.hm-motion .hero .proof-mark {
  transition: transform 1s var(--hm-ease) 2s, opacity 0.5s ease 2s;
}
.hm-motion .hero:not(.hm-in) .proof-mark {
  transform: rotate(-120deg) scale(0.4);
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .hero .hero-proof > span {
  transition: opacity 0.7s ease 2.15s, translate 0.9s var(--hm-ease) 2.15s;
}
.hm-motion .hero:not(.hm-in) .hero-proof > span {
  opacity: 0;
  translate: -14px 0;
  transition-delay: 0s;
}

/* portrait rises out of its glow; layers move at different depths */
.hm-motion .hero-portrait-standalone {
  clip-path: inset(-12% -25% -12% -25%);
  translate: calc(var(--hm-mx, 0) * -10px) calc(var(--hm-my, 0) * -7px + var(--hm-sy, 0) * 80px);
  transition: clip-path 1.5s var(--hm-ease) 0.35s, scale 1.8s var(--hm-ease) 0.35s;
}
.hm-motion .hero:not(.hm-in) .hero-portrait-standalone {
  clip-path: inset(100% -25% -12% -25%);
  scale: 1.06;
  transition-delay: 0s;
}
.hm-motion .hero-visual::before,
.hm-motion .hero-visual::after,
.hm-motion .hero-visual .visual-halo {
  translate: calc(var(--hm-mx, 0) * 16px) calc(var(--hm-my, 0) * 12px + var(--hm-sy, 0) * 40px);
  transition: scale 1.8s var(--hm-ease) 0.15s;
}
.hm-motion .hero:not(.hm-in) .hero-visual::before,
.hm-motion .hero:not(.hm-in) .hero-visual::after,
.hm-motion .hero:not(.hm-in) .hero-visual .visual-halo {
  scale: 0.55;
  transition-delay: 0s;
}
.hm-motion .hero .hero-particles {
  translate: calc(var(--hm-mx, 0) * 22px) calc(var(--hm-my, 0) * 16px + var(--hm-sy, 0) * -120px);
}
.hm-motion .hero .orb-one {
  translate: 0 calc(var(--hm-sy, 0) * -160px);
}
.hm-motion .hero .orb-two {
  translate: 0 calc(var(--hm-sy, 0) * -90px);
}
.hm-motion .hm-glyphs {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hm-glyphs span {
  position: absolute;
  font: italic 400 96px/1 Georgia, serif;
  color: rgba(159, 145, 255, 0.11);
  translate: calc(var(--hm-mx, 0) * var(--z) * 1px) calc(var(--hm-my, 0) * var(--z) * 1px + var(--hm-sy, 0) * var(--zs) * 1px);
  transition: opacity 1.4s ease var(--gd), scale 1.6s var(--hm-ease) var(--gd);
  user-select: none;
}
.hm-glyphs .g1 { left: 0; top: 20%; font-size: 120px; --z: 26; --zs: -170; --gd: 0.9s; }
.hm-glyphs .g2 { right: 2%; top: 9%; --z: -18; --zs: -90; --gd: 1.1s; }
.hm-glyphs .g3 { left: 6%; bottom: 10%; font-size: 170px; color: rgba(151, 134, 255, 0.12); --z: 34; --zs: -230; --gd: 1.25s; }
.hm-glyphs .g4 { right: 8%; bottom: 28%; font-size: 72px; color: rgba(113, 154, 255, 0.15); --z: -28; --zs: -130; --gd: 1.4s; }
.hm-motion .hero:not(.hm-in) .hm-glyphs span {
  opacity: 0;
  scale: 0.7;
  transition-delay: 0s;
}

/* ---------------------------------------------------------------------
   TICKER — follows the reader's scroll
   --------------------------------------------------------------------- */
.hm-motion .ticker-track.hm-js {
  animation: none;
  transform: translate3d(var(--hm-x, 0px), 0, 0) skewX(var(--hm-skew, 0deg));
  will-change: transform;
}
.hm-motion .ticker-track.hm-js b {
  display: inline-block;
  rotate: var(--hm-spin, 0deg);
}

/* ---------------------------------------------------------------------
   ABOUT — the quote card is drawn, "heard." gets circled
   --------------------------------------------------------------------- */
.hm-motion .about-visual,
.hm-motion .about-content {
  transition: none;
}
.hm-motion .about-frame {
  transform: perspective(1100px) rotateX(calc(var(--hm-fy, 0) * -4deg)) rotateY(calc(var(--hm-fx, 0) * 5deg));
  clip-path: inset(0 0 0 0 round 30px);
  transition: clip-path 1.3s var(--hm-ease);
}
.hm-motion .about-visual:not(.hm-in) .about-frame {
  clip-path: inset(0 0 100% 0 round 30px);
  transition-duration: 0.4s;
}
.hm-motion .about-gridlines {
  transition: opacity 1.2s ease 0.5s, transform 1.6s var(--hm-ease) 0.4s;
}
.hm-motion .about-visual:not(.hm-in) .about-gridlines {
  opacity: 0;
  transform: scale(1.18);
  transition-delay: 0s;
}
.hm-motion .about-small-title .hm-c {
  transition: opacity 0.06s linear calc(0.6s + var(--i) * 30ms);
}
.hm-motion .about-visual:not(.hm-in) .about-small-title .hm-c {
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .big-quote {
  transform: translateY(calc(var(--hm-ap, 0) * -46px));
  transition: scale 1.2s var(--hm-ease) 0.5s, rotate 1.2s var(--hm-ease) 0.5s, opacity 0.8s ease 0.5s;
}
.hm-motion .about-visual:not(.hm-in) .big-quote {
  scale: 0.5;
  rotate: -20deg;
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .about-art-text {
  translate: calc(var(--hm-fx, 0) * 10px) calc(var(--hm-fy, 0) * 8px);
}
.hm-motion .about-art-text .hm-line {
  overflow: visible;
  padding: 0;
  margin: 0;
}
.hm-motion .about-art-text .hm-li {
  clip-path: inset(-10% -6% -40% -6%);
  transition: clip-path 0.75s var(--hm-write) calc(0.8s + var(--li) * 0.42s);
}
.hm-motion .about-visual:not(.hm-in) .about-art-text .hm-li {
  clip-path: inset(-10% 106% -40% -6%);
  transition-delay: 0s;
  transition-duration: 0.25s;
}
.hm-motion .about-art-text i {
  position: relative;
  display: inline-block;
}
.hm-motion .about-art-text .hm-ring {
  left: -12%;
  top: -16%;
  width: 124%;
  height: 140%;
}
.hm-ring path {
  stroke: #b7aaff;
  stroke-width: 2.4;
  transition: stroke-dashoffset 1.1s var(--hm-io) 2.15s;
}
.hm-motion .about-visual:not(.hm-in) .hm-ring path {
  stroke-dashoffset: 1.01;
  transition-delay: 0s;
  transition-duration: 0.2s;
}
.hm-motion .about-corner {
  transition: opacity 0.8s ease 1.2s, translate 0.9s var(--hm-ease) 1.2s;
}
.hm-motion .about-visual:not(.hm-in) .about-corner {
  opacity: 0;
  translate: 0 12px;
  transition-delay: 0s;
}
.hm-motion .floating-label {
  transform: translateY(calc(var(--hm-ap, 0) * -26px));
  transition: opacity 0.5s ease 1.25s, translate 1.1s var(--hm-spring) 1.25s, rotate 1.1s var(--hm-spring) 1.25s;
}
.hm-motion .about-visual:not(.hm-in) .floating-label {
  opacity: 0;
  translate: 0 -34px;
  rotate: -7deg;
  transition-delay: 0s;
}
.hm-motion .floating-label .star-icon {
  display: inline-block;
  transition: rotate 1.2s var(--hm-ease) 1.5s;
}
.hm-motion .about-visual:not(.hm-in) .floating-label .star-icon {
  rotate: -180deg;
  transition-delay: 0s;
}

/* section headings: masked lines (each section moves them differently) */
.hm-motion .section-title .hm-li {
  transition: transform 1.1s var(--hm-ease) calc(0.12s + var(--li) * 0.13s), opacity 0.9s ease calc(0.12s + var(--li) * 0.13s), clip-path 1.1s var(--hm-ease) calc(0.12s + var(--li) * 0.13s);
}
.hm-motion .about-content:not(.hm-in) .section-title .hm-li,
.hm-motion .contact-section .section-heading:not(.hm-in) .section-title .hm-li {
  transform: translateY(105%);
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .about-content:not(.hm-in) .eyebrow,
.hm-motion .story-text:not(.hm-in) .eyebrow,
.hm-motion .section-heading:not(.hm-in) .eyebrow,
.hm-motion .journey-inner:not(.hm-in) .eyebrow {
  opacity: 0;
  translate: -14px 0;
  transition-delay: 0s;
}
.hm-motion .about-content:not(.hm-in) .eyebrow-dot,
.hm-motion .story-text:not(.hm-in) .eyebrow-dot,
.hm-motion .section-heading:not(.hm-in) .eyebrow-dot,
.hm-motion .journey-inner:not(.hm-in) .eyebrow-dot {
  scale: 0;
}
.hm-motion .about-content > p,
.hm-motion .about-points > div,
.hm-motion .story-text > p,
.hm-motion .section-heading > p {
  transition: opacity 0.8s ease var(--pd, 0.45s), translate 1s var(--hm-ease) var(--pd, 0.45s);
}
.hm-motion .about-content > p:nth-of-type(2) { --pd: 0.58s; }
.hm-motion .about-content:not(.hm-in) > p,
.hm-motion .story-text:not(.hm-in) > p,
.hm-motion .section-heading:not(.hm-in) > p {
  opacity: 0;
  translate: 0 22px;
  transition-delay: 0s;
}
.hm-motion .about-points > div:nth-child(1) { --pd: 0.7s; }
.hm-motion .about-points > div:nth-child(2) { --pd: 0.8s; }
.hm-motion .about-points > div:nth-child(3) { --pd: 0.9s; }
.hm-motion .about-points > div:nth-child(4) { --pd: 1s; }
.hm-motion .about-content:not(.hm-in) .about-points > div {
  opacity: 0;
  translate: -18px 0;
  transition-delay: 0s;
}
.hm-motion .about-points .point-icon {
  transition: scale 0.6s var(--hm-spring) calc(var(--pd, 0.7s) + 0.15s);
}
.hm-motion .about-content:not(.hm-in) .point-icon {
  scale: 0;
  transition-delay: 0s;
}
.hm-motion .about-content .text-link,
.hm-motion .story-text .text-link,
.hm-motion .classes-bottom .text-link {
  clip-path: inset(-6px -6px -6px -6px);
  transition: clip-path 0.9s var(--hm-write) 1.1s;
}
.hm-motion .about-content:not(.hm-in) .text-link,
.hm-motion .story-text:not(.hm-in) .text-link,
.hm-motion .classes-bottom:not(.hm-in) .text-link {
  clip-path: inset(-6px 100% -6px -6px);
  transition-delay: 0s;
  transition-duration: 0.3s;
}

/* ---------------------------------------------------------------------
   STORY — the book opens as it scrolls in, and closes as it scrolls out
   --------------------------------------------------------------------- */
.hm-motion .story-text {
  transition: none;
}
.hm-motion .story-text:not(.hm-in) .section-title .hm-li {
  transform: translateY(105%) rotate(3deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .story-text > p {
  --pd: 0.5s;
}
.hm-motion .story-pills span {
  transition: transform 0.3s, background 0.3s, opacity 0.5s ease var(--sd), scale 0.7s var(--hm-spring) var(--sd), translate 0.7s var(--hm-ease) var(--sd);
}
.hm-motion .story-pills span:nth-child(1) { --sd: 0.65s; }
.hm-motion .story-pills span:nth-child(2) { --sd: 0.75s; }
.hm-motion .story-pills span:nth-child(3) { --sd: 0.85s; }
.hm-motion .story-pills span:nth-child(4) { --sd: 0.95s; }
.hm-motion .story-text:not(.hm-in) .story-pills span {
  opacity: 0;
  scale: 0.6;
  translate: 0 12px;
  transition-delay: 0s;
}
.hm-motion .book-stage {
  transform: perspective(1600px) rotateX(calc(var(--hm-lift, 0) * 16deg + var(--hm-ky, 0) * -5deg)) rotateY(calc(var(--hm-kx, 0) * 7deg)) scale(calc(1 - var(--hm-lift, 0) * 0.08));
}
.hm-motion .book-stage .book-volume {
  translate: calc((1 - var(--hm-open, 1)) * -50%) 0;
}
.hm-motion .book-stage .book-left-page {
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc((1 - var(--hm-open, 1)) * 3px)) rotateY(calc((1 - var(--hm-open, 1)) * 180deg));
}
.hm-motion .book-stage .book-left-page-inner {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hm-motion .hm-cover {
  display: flex;
  position: absolute;
  inset: -2px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30px 15px 22px;
  border-radius: 5px 14px 14px 5px;
  background: linear-gradient(130deg, #8876dc 0%, #4a368c 38%, #231747 100%);
  border: 1px solid #b6a5ff;
  box-shadow: inset 7px 0 12px #d4c9ff29, inset -5px 0 12px #100a36;
  color: #fff;
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hm-cover::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #c8b5ff52;
  border-radius: 3px 10px 10px 3px;
  pointer-events: none;
}
.hm-motion .book-stage.hm-closed .book-tip-turning {
  visibility: hidden;
}
/* The tip on a turning sheet disappears as the sheet passes its edge, so its
   back shows blank paper instead of mirrored text. */
.hm-motion .book-stage .book-paper.book-tip-turning .paper-inside {
  animation: hmTipFace 1.8s linear forwards;
}
@keyframes hmTipFace {
  0%, 36% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
.hm-motion .book-stage .book-aura {
  scale: calc(0.7 + var(--hm-open, 1) * 0.3);
}
.hm-motion .book-stage .book-instruction {
  transition: opacity 0.6s ease, translate 0.8s var(--hm-ease);
}
.hm-motion .book-stage.hm-closed .book-instruction {
  opacity: 0;
  translate: 0 10px;
}

/* ---------------------------------------------------------------------
   SERVICES — cards are dealt like sheets of paper
   --------------------------------------------------------------------- */
.hm-motion .services-section .section-heading:not(.hm-in) .section-title .hm-li {
  transform: perspective(700px) rotateX(-80deg);
  transform-origin: 50% 100%;
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .section-heading {
  transition: none;
}
.hm-motion .service-card,
.hm-motion .service-cta {
  isolation: isolate;
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease var(--hm-bd, 0ms), translate 1.15s var(--hm-ease) var(--hm-bd, 0ms), rotate 1.15s var(--hm-ease) var(--hm-bd, 0ms) !important;
}
.hm-motion .service-card:not(.hm-in),
.hm-motion .service-cta:not(.hm-in) {
  opacity: 0;
  translate: 0 80px;
  rotate: var(--hm-rot, 0deg);
  transition-delay: 0s !important;
  transition-duration: 0.25s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s !important;
}
.hm-motion .service-card .service-head,
.hm-motion .service-card h3,
.hm-motion .service-card p,
.hm-motion .service-cta > * {
  transition: opacity 0.7s ease calc(var(--hm-bd, 0ms) + var(--cd)), translate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + var(--cd));
}
.hm-motion .service-card .service-head { --cd: 0.3s; }
.hm-motion .service-card h3 { --cd: 0.4s; }
.hm-motion .service-card p { --cd: 0.5s; }
.hm-motion .service-cta > *:nth-child(1) { --cd: 0.3s; }
.hm-motion .service-cta > *:nth-child(2) { --cd: 0.4s; }
.hm-motion .service-cta > *:nth-child(3) { --cd: 0.5s; }
.hm-motion .service-cta > *:nth-child(4) { --cd: 0.6s; }
.hm-motion .service-card:not(.hm-in) .service-head,
.hm-motion .service-card:not(.hm-in) h3,
.hm-motion .service-card:not(.hm-in) p,
.hm-motion .service-cta:not(.hm-in) > * {
  opacity: 0;
  translate: 0 18px;
  transition-delay: 0s;
}
.hm-motion .service-number .hm-c {
  transition: opacity 0.05s linear calc(var(--hm-bd, 0ms) + 0.4s + var(--i) * 18ms);
}
.hm-motion .service-card:not(.hm-in) .service-number .hm-c {
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .service-card .service-arrow {
  transition: transform 0.3s, background 0.3s, scale 0.6s var(--hm-spring) calc(var(--hm-bd, 0ms) + 0.65s);
}
.hm-motion .service-card:not(.hm-in) .service-arrow {
  scale: 0;
  transition-delay: 0s;
}
.hm-motion .service-cta .cta-spark {
  display: inline-block;
  transition: opacity 0.6s ease calc(var(--hm-bd, 0ms) + 0.3s), rotate 1.2s var(--hm-ease) calc(var(--hm-bd, 0ms) + 0.3s), translate 0.9s var(--hm-ease);
}
.hm-motion .service-cta:not(.hm-in) .cta-spark {
  rotate: -180deg;
}
/* pointer spotlight + a pencil outline that sketches itself on hover */
.hm-motion .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--hm-sx, 50%) var(--hm-sy, 0%), rgba(159, 145, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hm-motion .service-card:hover::before {
  opacity: 1;
}
.hm-motion .hm-sketch {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.hm-sketch rect {
  stroke: #bdb5ff;
  stroke-width: 1.5;
  stroke-dashoffset: 1.01;
  opacity: 0.85;
  transition: stroke-dashoffset 0.4s var(--hm-io);
}
.hm-motion .service-card:hover .hm-sketch rect,
.hm-motion .service-card:focus-within .hm-sketch rect {
  stroke-dashoffset: 0;
  transition-duration: 1s;
}

/* ---------------------------------------------------------------------
   CLASSES — panels slide in from both sides, options get highlighted
   --------------------------------------------------------------------- */
.hm-motion .classes-section .section-heading .section-title .hm-line {
  overflow: visible;
}
.hm-motion .classes-section .section-heading:not(.hm-in) .section-title .hm-li {
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.3s;
}
.hm-motion .classes-section .section-heading .section-title .hm-li {
  clip-path: inset(-10% -4% -20% -4%);
}
.hm-motion .class-panel {
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease var(--hm-bd, 0ms), translate 1.2s var(--hm-ease) var(--hm-bd, 0ms), rotate 1.2s var(--hm-ease) var(--hm-bd, 0ms) !important;
}
.hm-motion .class-panel:not(.hm-in) {
  opacity: 0;
  translate: -70px 30px;
  rotate: -2deg;
  transition-delay: 0s !important;
  transition-duration: 0.25s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s !important;
}
.hm-motion .class-panel:nth-child(2):not(.hm-in) {
  translate: 70px 30px;
  rotate: 2deg;
}
.hm-motion .class-panel::before {
  transition: opacity 1.4s ease calc(var(--hm-bd, 0ms) + 0.35s);
}
.hm-motion .class-panel:not(.hm-in)::before {
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .class-symbol {
  transition: scale 0.7s var(--hm-spring) calc(var(--hm-bd, 0ms) + 0.4s), rotate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + 0.4s);
}
.hm-motion .class-panel:not(.hm-in) .class-symbol {
  scale: 0;
  rotate: -90deg;
  transition-delay: 0s;
}
.hm-motion .class-heading h3,
.hm-motion .class-badge,
.hm-motion .class-footnote {
  transition: opacity 0.7s ease calc(var(--hm-bd, 0ms) + var(--cd)), translate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + var(--cd));
}
.hm-motion .class-heading h3 { --cd: 0.5s; }
.hm-motion .class-badge { --cd: 0.62s; }
.hm-motion .class-footnote { --cd: 1.25s; }
.hm-motion .class-panel:not(.hm-in) .class-heading h3,
.hm-motion .class-panel:not(.hm-in) .class-badge,
.hm-motion .class-panel:not(.hm-in) .class-footnote {
  opacity: 0;
  translate: 0 12px;
  transition-delay: 0s;
}
.hm-motion .class-option {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, background 0.25s, opacity 0.7s ease calc(var(--hm-bd, 0ms) + var(--od)), translate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + var(--od));
}
.hm-motion .class-option:nth-child(1) { --od: 0.65s; }
.hm-motion .class-option:nth-child(2) { --od: 0.77s; }
.hm-motion .class-option:nth-child(3) { --od: 0.89s; }
.hm-motion .class-panel:not(.hm-in) .class-option {
  opacity: 0;
  translate: 30px 0;
  transition-delay: 0s;
}
.hm-motion .class-option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(189, 181, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.hm-motion .class-panel.hm-in .class-option::after {
  animation: hmSweep 1.2s var(--hm-io) both;
  animation-delay: calc(var(--hm-bd, 0ms) + var(--od) + 0.55s);
}
.hm-motion .classes-bottom {
  transition: none;
}
.hm-motion .classes-bottom > span {
  transition: opacity 0.8s ease 0.2s, translate 1s var(--hm-ease) 0.2s;
}
.hm-motion .classes-bottom:not(.hm-in) > span {
  opacity: 0;
  translate: -16px 0;
  transition-delay: 0s;
}
.hm-motion .classes-bottom .text-link {
  transition-delay: 0.45s;
}

/* ---------------------------------------------------------------------
   JOURNEY — opens out of the "GO BEYOND" circle; small steps lead to it
   --------------------------------------------------------------------- */
.hm-motion .journey-inner {
  clip-path: circle(150% at 80% 50%);
  transition: clip-path 1.5s var(--hm-io);
}
.hm-motion .journey-inner:not(.hm-in) {
  clip-path: circle(0% at 80% 50%);
  transition-duration: 0.5s;
}
.hm-motion .journey-circle {
  rotate: calc(var(--hm-jp, 0) * 14deg);
  transition: scale 1.3s var(--hm-ease) 0.2s;
}
.hm-motion .journey-inner:not(.hm-in) .journey-circle {
  scale: 0.3;
  transition-delay: 0s;
}
.hm-motion .journey-copy h2 .hm-line:last-child {
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}
.hm-motion .journey-copy h2 .hm-li {
  transition: transform 1.1s var(--hm-ease) calc(0.55s + var(--li) * 0.13s), opacity 0.9s ease calc(0.55s + var(--li) * 0.13s);
}
.hm-motion .journey-inner:not(.hm-in) .journey-copy h2 .hm-li {
  transform: translateY(105%);
  opacity: 0;
  transition-delay: 0s;
}
.hm-motion .journey-copy em {
  position: relative;
  display: inline-block;
}
.hm-motion .journey-copy .hm-under {
  left: -2%;
  bottom: -0.32em;
  width: 104%;
  height: 0.34em;
}
.hm-under path:first-child {
  stroke: #cfc6ff;
  stroke-width: 3;
  transition: stroke-dashoffset 0.7s var(--hm-io) 1.5s;
}
.hm-under path:last-child {
  stroke: #ede8ff;
  stroke-width: 2;
  opacity: 0.6;
  transition: stroke-dashoffset 0.5s var(--hm-io) 1.95s;
}
.hm-motion .journey-inner:not(.hm-in) .hm-under path {
  stroke-dashoffset: 1.01;
  transition-delay: 0s;
  transition-duration: 0.2s;
}
.hm-motion .journey-inner .eyebrow {
  transition-delay: 0.45s;
}
.hm-motion .journey-copy p,
.hm-motion .journey-copy .btn {
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s, translate 0.35s var(--hm-ease), opacity 0.8s ease var(--jd), clip-path 0.9s var(--hm-ease) var(--jd), background 0.3s;
}
.hm-motion .journey-copy p {
  --jd: 0.95s;
  transition: opacity 0.8s ease var(--jd), translate 1s var(--hm-ease) var(--jd);
}
.hm-motion .journey-copy .btn {
  --jd: 1.15s;
  clip-path: inset(-30px -30px -30px -30px round 100px);
}
.hm-motion .journey-inner:not(.hm-in) .journey-copy p {
  opacity: 0;
  translate: 0 18px;
  transition-delay: 0s;
}
.hm-motion .journey-inner:not(.hm-in) .journey-copy .btn {
  opacity: 0;
  clip-path: inset(50% 50% 50% 50% round 100px);
  transition-delay: 0s;
}
.hm-motion .hm-steps {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hm-steps span {
  position: absolute;
  width: 7px;
  height: 11px;
  margin: -6px 0 0 -4px;
  border-radius: 50% 50% 45% 45%;
  background: rgba(207, 198, 255, 0.55);
  rotate: 58deg;
  translate: calc(var(--side) * 5px) calc(var(--side) * 8px);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.35s ease, scale 0.45s var(--hm-spring);
}
.hm-steps span::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: inherit;
}
.hm-motion .journey-inner.hm-in .hm-steps span {
  opacity: 0.5;
  scale: 1;
  transition-delay: calc(1.3s + var(--k) * 0.16s);
}

/* ---------------------------------------------------------------------
   CONTACT + FOOTER — the form slides onto the desk, the map unfolds
   --------------------------------------------------------------------- */
.hm-motion .contact-form-card {
  transform-origin: 50% 100%;
  transition: opacity 0.8s ease var(--hm-bd, 0ms), transform 1.2s var(--hm-ease) var(--hm-bd, 0ms);
}
.hm-motion .contact-form-card:not(.hm-in) {
  opacity: 0;
  transform: perspective(1400px) rotateX(12deg) translateY(28px);
  transition-delay: 0s;
}
.hm-motion .contact-form-card form > *,
.hm-motion .contact-form-card form .field-row > label {
  transition: opacity 0.7s ease calc(var(--hm-bd, 0ms) + var(--fd, 0.4s)), translate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + var(--fd, 0.4s));
}
.hm-motion .contact-form-card form > :nth-child(1) > label:nth-child(1) { --fd: 0.35s; }
.hm-motion .contact-form-card form > :nth-child(1) > label:nth-child(2) { --fd: 0.43s; }
.hm-motion .contact-form-card form > :nth-child(2) > label:nth-child(1) { --fd: 0.51s; }
.hm-motion .contact-form-card form > :nth-child(2) > label:nth-child(2) { --fd: 0.59s; }
.hm-motion .contact-form-card form > :nth-child(3) { --fd: 0.67s; }
.hm-motion .contact-form-card form > :nth-child(4) { --fd: 0.78s; }
.hm-motion .contact-form-card:not(.hm-in) form .field-row > label,
.hm-motion .contact-form-card:not(.hm-in) form > label,
.hm-motion .contact-form-card:not(.hm-in) form > button {
  opacity: 0;
  translate: 0 16px;
  transition-delay: 0s;
}
.hm-motion .contact-form-card h3 span {
  display: inline-block;
  transition: transform 0.4s var(--hm-ease);
}
.hm-motion .contact-form-card:focus-within h3 span {
  transform: translate(4px, -4px);
}
.hm-motion .contact-form-card label {
  transition: color 0.25s;
}
.hm-motion .contact-form-card label:focus-within {
  color: #fff;
}
.hm-motion .contact-details {
  transition: opacity 0.8s ease var(--hm-bd, 0ms), translate 1.1s var(--hm-ease) var(--hm-bd, 0ms);
}
.hm-motion .contact-details:not(.hm-in) {
  opacity: 0;
  translate: 40px 0;
  transition-delay: 0s;
}
.hm-motion .contact-item {
  transition: opacity 0.7s ease calc(var(--hm-bd, 0ms) + var(--id)), translate 0.9s var(--hm-ease) calc(var(--hm-bd, 0ms) + var(--id));
}
.hm-motion .contact-item:nth-of-type(1) { --id: 0.4s; }
.hm-motion .contact-item:nth-of-type(2) { --id: 0.52s; }
.hm-motion .contact-item:nth-of-type(3) { --id: 0.64s; }
.hm-motion .contact-details:not(.hm-in) .contact-item {
  opacity: 0;
  translate: 18px 0;
  transition-delay: 0s;
}
.hm-motion .contact-item-icon {
  transition: scale 0.6s var(--hm-spring) calc(var(--hm-bd, 0ms) + var(--id, 0.4s) + 0.12s), background 0.3s;
}
.hm-motion .contact-details:not(.hm-in) .contact-item-icon {
  scale: 0;
  transition-delay: 0s;
}
.hm-motion .contact-item:hover .contact-item-icon {
  background: #8273da40;
}
.hm-motion .map-wrap {
  transform-origin: 50% 0;
  transition: opacity 0.6s ease calc(var(--hm-bd, 0ms) + 0.7s), transform 1.3s var(--hm-ease) calc(var(--hm-bd, 0ms) + 0.7s);
}
.hm-motion .contact-details:not(.hm-in) .map-wrap {
  opacity: 0;
  transform: perspective(1000px) rotateX(-72deg);
  transition-delay: 0s;
}
.hm-motion .footer-top > * {
  transition: opacity 0.8s ease var(--ft), translate 1s var(--hm-ease) var(--ft);
}
.hm-motion .footer-top > :nth-child(1) { --ft: 0s; }
.hm-motion .footer-top > :nth-child(2) { --ft: 0.08s; }
.hm-motion .footer-top > :nth-child(3) { --ft: 0.16s; }
.hm-motion .footer-top > :nth-child(4) { --ft: 0.24s; }
.hm-motion .footer-top:not(.hm-in) > * {
  opacity: 0;
  translate: 0 24px;
  transition-delay: 0s;
}
.hm-motion .footer-col a {
  transition: color 0.2s, translate 0.35s var(--hm-ease);
}
.hm-motion .footer-col a:hover {
  translate: 4px 0;
}

/* ---------------------------------------------------------------------
   Smaller screens: lighter, shorter, no decorative overlap
   --------------------------------------------------------------------- */
@media (max-width: 850px) {
  .hm-motion .hm-steps {
    display: none;
  }
  .hm-motion .hero .hero-copy {
    translate: 0 calc(var(--hm-sy, 0) * -36px);
  }
  .hm-motion .contact-details:not(.hm-in) {
    translate: 0 30px;
  }
  .hm-motion .class-panel:not(.hm-in),
  .hm-motion .class-panel:nth-child(2):not(.hm-in) {
    translate: 0 40px;
    rotate: 0deg;
  }
  .hm-pen-svg {
    width: 110px;
    height: 14px;
    top: -7px;
  }
}
@media (max-width: 600px) {
  .hm-motion .hm-glyphs {
    display: none;
  }
  .hm-motion .service-card:not(.hm-in),
  .hm-motion .service-cta:not(.hm-in) {
    translate: 0 50px;
    rotate: 0deg;
  }
  .hm-motion .journey-inner {
    clip-path: circle(150% at 50% 100%);
  }
  .hm-motion .journey-inner:not(.hm-in) {
    clip-path: circle(0% at 50% 100%);
  }
  .hm-progress-pen .hm-pen-svg {
    width: 44px;
    height: 6px;
    top: -3px;
  }
}

/* Hidden states slide in from the sides; keep them from widening the page. */
.hm-motion .about-section,
.hm-motion .classes-section,
.hm-motion .contact-section {
  overflow-x: clip;
}