/* =====================================================================
   home.css — the homepage layer (26 September 2026)
   Loaded only by index.html, after style.css and components.css. It adds
   layout and motion on top of the shared theme; it does not redefine the
   theme. Tokens, type, buttons, eyebrows, section heads, the edu-hero,
   the product-screen frame (.tscr-frame), the snapshot flag (.snap-flag),
   the principles band and the CTA band all come from the shared sheets,
   so the homepage reads as the same site as Education, Software and
   Consultancy.
   Motion hooks are written by assets/js/motion.js. Without it (or with
   reduced motion) every section is a still, complete page.
   ===================================================================== */

/* generic hook: [data-parallax] moves by --py via the independent
   `translate` property, so it never fights a reveal's `transform` */
[data-parallax]{translate:0 var(--py,0px);}

/* =====================================================================
   1. HERO
   ===================================================================== */
.hm-hero{isolation:isolate;}
.hm-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 30% 42%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 70% at 30% 42%,#000 0%,transparent 75%);}
@media (min-width:1080px) and (min-height:680px){
  .hm-hero{min-height:min(100svh,1020px);display:flex;align-items:center;}
  .hm-hero > .container-wide{width:100%;}
}

/* slow aurora behind everything */
.hm-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.hm-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  animation:hmAurora 22s ease-in-out infinite alternate;}
.hm-aurora i:nth-child(1){width:46vw;height:46vw;max-width:700px;max-height:700px;right:-10%;top:-22%;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-brand-violet) 42%,transparent),transparent 66%);}
.hm-aurora i:nth-child(2){width:38vw;height:38vw;max-width:560px;max-height:560px;left:-12%;top:18%;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-accent-bright) 30%,transparent),transparent 66%);
  animation-duration:26s;animation-delay:-8s;}
.hm-aurora i:nth-child(3){width:34vw;height:34vw;max-width:520px;max-height:520px;left:38%;bottom:-30%;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-indigo-bright) 30%,transparent),transparent 66%);
  animation-duration:30s;animation-delay:-14s;}
[data-theme="dark"] .hm-aurora i{opacity:.35;}
@keyframes hmAurora{0%{transform:translate(0,0) scale(1);}50%{transform:translate(4%,6%) scale(1.08);}100%{transform:translate(-5%,-3%) scale(.96);}}

/* copy */
.hm-hero-copy{position:relative;}
.hm-h1{font-size:clamp(2.5rem,1.3rem + 3.5vw,4.5rem);line-height:1;letter-spacing:-.038em;
  margin:var(--space-6) 0 var(--space-6);max-width:15ch;}
.hm-h1 .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-hero .lead{max-width:52ch;}
.hm-hero .hero-cta{margin-top:var(--space-8);align-items:center;gap:var(--space-5);}
.hm-cta-alt{margin-left:var(--space-2);}

/* the three doors */
.hm-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
  margin-top:var(--space-10);padding-top:var(--space-6);
  border-top:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);max-width:640px;}
.hm-door{display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;border-radius:var(--radius-lg);
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);}
.hm-door:hover{background:color-mix(in srgb,var(--color-surface) 82%,transparent);transform:translateY(-2px);
  box-shadow:0 10px 26px color-mix(in srgb,var(--color-text) 8%,transparent);}
.hm-door-ico{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--color-primary) 26%,transparent);}
.hm-door:nth-child(1) .hm-door-ico{background:linear-gradient(140deg,var(--color-primary),var(--color-indigo-bright));}
.hm-door:nth-child(2) .hm-door-ico{background:linear-gradient(140deg,var(--color-indigo),var(--color-teal));}
.hm-door:nth-child(3) .hm-door-ico{background:linear-gradient(140deg,var(--color-teal),#08a7a0);}
.hm-door-ico [data-lucide]{width:1.15rem;height:1.15rem;}
.hm-door b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);letter-spacing:-.01em;line-height:1.15;}
.hm-door small{display:block;font-size:.72rem;line-height:1.3;color:var(--color-text-muted);margin-top:.12rem;}

/* ---- the composition ---- */
/* product-screen labels truncate instead of widening the frame on phones */
.hm-hero .tscr-bar,.hm-journey .tscr-bar{min-width:0;}
.hm-hero .tscr-name,.hm-journey .tscr-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.hm-stage{position:relative;width:100%;max-width:640px;aspect-ratio:1/.96;margin:var(--space-12) auto 0;}
@media (min-width:1080px){ .hm-stage{margin-top:0;} }
/* tablets: the stage sits under the doors; leave room for the BreedForward
   card, which rises a little above the stage */
@media (min-width:700px) and (max-width:1079px){
  .hm-stage{margin-top:var(--space-20);}
  /* the doors sit directly above: the BreedForward card follows the pointer
     but does not rise on scroll, so it never climbs into them */
  .hm-stage .hm-l-bf{translate:calc(var(--mx,0) * var(--d,0) * 22px) calc(var(--my,0) * var(--d,0) * 16px);}
}
.hm-layer{position:absolute;margin:0;
  translate:calc(var(--mx,0) * var(--d,0) * 22px) calc(var(--my,0) * var(--d,0) * 16px + var(--sy,0) * var(--d,0) * -0.16px);
  transform:rotate(var(--r,0deg));}
.hm-l-win{left:0;top:4%;width:80%;z-index:1;}
.hm-l-win .tscr-frame{box-shadow:0 40px 90px color-mix(in srgb,var(--color-text) 22%,transparent);}
.hm-l-fig{right:0;top:31%;width:45%;z-index:2;--r:4deg;background:#fff;padding:9px 9px 8px;border-radius:20px;
  border:1px solid rgba(15,17,21,.07);box-shadow:0 34px 70px rgba(18,18,40,.24),0 6px 16px rgba(18,18,40,.08);}
.hm-l-fig img{border-radius:12px;width:100%;height:auto;}
.hm-l-fig figcaption,.hm-m-figcard figcaption{font-size:.7rem;color:#55575f;padding:.45rem .2rem 0;line-height:1.2;}
.hm-l-fig figcaption b,.hm-m-figcard figcaption b{color:#6d3be8;font-weight:800;margin-right:.3rem;}
.hm-l-prog{left:4%;bottom:1%;width:58%;z-index:3;--r:-2deg;display:flex;flex-direction:column;gap:.6rem;
  padding:1.1rem 1.25rem 1.15rem;border-radius:1.25rem;color:var(--color-text);
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);
  box-shadow:0 28px 64px color-mix(in srgb,var(--color-text) 17%,transparent);}
.hm-l-prog .snap-flag{margin:0;}
.hm-prog-t{font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,.85rem + .45vw,1.2rem);line-height:1.15;letter-spacing:-.02em;}
.hm-prog-f{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.76rem;color:var(--color-text-muted);}
.hm-prog-f b{font-family:var(--font-display);font-weight:800;color:var(--color-primary);font-size:.95rem;}
.hm-l-prog .snap-go{font-size:.8rem;}
.hm-l-prog:hover{border-color:color-mix(in srgb,var(--color-primary) 40%,transparent);}
.hm-l-prog:hover .snap-go [data-lucide]{transform:translateX(4px);}
.hm-l-chip{right:2%;bottom:3%;z-index:4;display:flex;align-items:center;gap:.55rem;
  padding:.45rem .95rem .45rem .45rem;border-radius:var(--radius-full);font-size:.78rem;line-height:1.2;
  background:color-mix(in srgb,var(--color-surface) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);
  box-shadow:0 14px 34px color-mix(in srgb,var(--color-text) 12%,transparent);}
.hm-l-chip > [data-lucide]{width:30px;height:30px;padding:6px;border-radius:50%;color:#fff;flex:none;
  background:linear-gradient(140deg,var(--color-teal),var(--color-indigo));}
.hm-l-chip b{font-weight:800;margin-right:.2rem;}

/* BreedForward — breeding modernisation: a dark card in the product-screen
   gradient, echoing the gain chart on the BreedForward page. The curve draws
   itself once the hero has arrived. No numbers: the shape is illustrative. */
.hm-l-bf{right:-1%;top:-7%;width:44%;z-index:3;--r:-3deg;display:flex;flex-direction:column;gap:.5rem;
  padding:.8rem .9rem .75rem;border-radius:1.1rem;color:#fff;
  background:linear-gradient(160deg,#1B1046 0%,#3A1C96 52%,#07535B 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 64px rgba(18,18,40,.3),0 6px 16px rgba(18,18,40,.12);}
.hm-l-bf:hover{border-color:rgba(3,247,235,.5);}
.hm-bf-head{display:flex;align-items:center;gap:.55rem;line-height:1.15;}
.hm-bf-ico{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--color-brand-violet),#03f7eb);box-shadow:0 6px 16px rgba(3,247,235,.25);}
.hm-bf-ico [data-lucide]{width:.95rem;height:.95rem;color:#fff;}
.hm-bf-head b{display:block;font-family:var(--font-display);font-weight:800;font-size:.86rem;letter-spacing:-.01em;}
.hm-bf-head small{display:block;font-size:.66rem;color:rgba(255,255,255,.7);margin-top:.1rem;}
.hm-bf-svg{display:block;width:100%;height:auto;aspect-ratio:240/92;}
.hm-bf-grid{stroke:rgba(255,255,255,.08);stroke-width:1;fill:none;}
.hm-bf-axis{stroke:rgba(255,255,255,.28);stroke-width:1.2;fill:none;}
.hm-bf-area{fill:url(#hmBfFill);}
.hm-bf-cur{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:.02 .02;stroke-linecap:round;}
.hm-bf-mod{fill:none;stroke:url(#hmBfLine);stroke-width:3;stroke-linecap:round;}
.hm-bf-dot{fill:#03f7eb;stroke:#fff;stroke-width:1.5;}
.hm-bf-t{font:700 11px var(--font-body);fill:rgba(255,255,255,.62);}
.hm-bf-t-ill{font-size:7.5px;letter-spacing:.12em;fill:rgba(255,255,255,.42);}
.hm-bf-t-mod{fill:#5cfaf2;}
.hm-bf-foot{display:flex;align-items:center;gap:.35rem;font-size:.74rem;white-space:nowrap;}
.hm-bf-foot b{font-weight:800;}
.hm-bf-foot [data-lucide]{width:.9rem;height:.9rem;color:#5cfaf2;transition:transform var(--transition);}
.hm-l-bf:hover .hm-bf-foot [data-lucide]{transform:translateX(4px);}
/* the curve draws in after the card lands */
html.m-on .hm-hero .hm-bf-mod{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) 1.3s;}
html.m-on .hm-hero .hm-bf-area,html.m-on .hm-hero .hm-bf-dot,html.m-on .hm-hero .hm-bf-t-mod{opacity:0;transition:opacity .8s ease 2.6s;}
html.m-on .hm-hero.is-in .hm-bf-mod{stroke-dashoffset:0;}
html.m-on .hm-hero.is-in .hm-bf-area,html.m-on .hm-hero.is-in .hm-bf-dot,html.m-on .hm-hero.is-in .hm-bf-t-mod{opacity:1;}

/* phones: the window, the figure over its corner, the programme card and
   the BreedForward card below */
@media (max-width:699px){
  .hm-stage{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--space-10);}
  .hm-l-win{position:relative;left:auto;top:auto;width:100%;}
  .hm-l-fig{top:auto;bottom:calc(100% - 64vw);right:-2%;width:44%;}
  .hm-l-prog{position:relative;left:auto;bottom:auto;width:100%;margin-top:22vw;--r:0deg;}
  .hm-l-chip{display:none;}
  .hm-l-bf{position:relative;right:auto;top:auto;width:100%;margin-top:var(--space-3);--r:0deg;}
  .hm-doors{grid-template-columns:1fr;}
}

/* scroll cue */
.hm-cue{position:absolute;left:50%;bottom:1.5rem;width:24px;height:40px;translate:-50% 0;
  border:2px solid color-mix(in srgb,var(--color-text) 22%,transparent);border-radius:14px;display:none;}
.hm-cue span{position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:2px;translate:-50% 0;
  background:var(--color-primary);animation:hmCue 1.9s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes hmCue{0%{opacity:0;transform:translateY(0);}25%{opacity:1;}80%{opacity:0;transform:translateY(14px);}100%{opacity:0;}}
@media (min-width:1080px) and (min-height:760px){ .hm-cue{display:block;} }

/* ---- entrance (only with motion.js; the hero never waits on it) ---- */
.is-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em;}
.is-split .wi{display:inline-block;will-change:transform;}
html.m-on .hm-hero .is-split .wi{transform:translateY(112%) rotate(4deg);opacity:0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .7s ease;
  transition-delay:calc(var(--wi) * 60ms + .12s);}
html.m-on .hm-hero.is-in .is-split .wi{transform:none;opacity:1;}
html.m-on .hm-hero .hm-in{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);}
html.m-on .hm-hero.is-in .hm-in{opacity:1;transform:none;}
html.m-on .hm-hero .tagline-chip.hm-in{transition-delay:.02s;}
html.m-on .hm-hero .lead.hm-in{transition-delay:.62s;}
html.m-on .hm-hero .hero-cta.hm-in{transition-delay:.76s;}
html.m-on .hm-hero .hm-doors.hm-in{transition-delay:.9s;}
html.m-on .hm-hero .hm-layer{opacity:0;transform:translateY(48px) scale(.93) rotate(var(--r,0deg));
  transition:opacity .9s ease,transform 1.3s cubic-bezier(.16,1,.3,1);}
html.m-on .hm-hero.is-in .hm-layer{opacity:1;transform:rotate(var(--r,0deg));}
html.m-on .hm-hero .hm-l-win{transition-delay:.3s;}
html.m-on .hm-hero .hm-l-fig{transition-delay:.5s;}
html.m-on .hm-hero .hm-l-prog{transition-delay:.7s;}
html.m-on .hm-hero .hm-l-bf{transition-delay:.8s;}
html.m-on .hm-hero .hm-l-chip{transition-delay:.9s;}
/* safety net: html.m-on is set in <head>; if motion.js never arrives the
   hero shows itself anyway */
html.m-on:not(.m-live) .hm-hero:not(.is-in) .hm-in,
html.m-on:not(.m-live) .hm-hero:not(.is-in) .hm-layer{animation:hmSafe .01s 2.4s forwards;}
@keyframes hmSafe{to{opacity:1;transform:rotate(var(--r,0deg));}}

/* =====================================================================
   2. THE FAMILY — registered marks on light plates, never recoloured
   ===================================================================== */
.hm-brands{padding-block:var(--space-8);border-block:1px solid var(--color-divider);
  background:color-mix(in srgb,var(--color-surface) 60%,transparent);}
.hm-brands-in{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--space-8);align-items:center;}
.hm-brands-label{margin:0;}
.hm-brands-label b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base);letter-spacing:-.01em;}
.hm-brands-label span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.2rem;}
.hm-marquee{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
.hm-mq-track{--gap:1rem;display:flex;gap:var(--gap);width:max-content;padding-block:.35rem;
  animation:hmMarquee 46s linear infinite;}
.hm-marquee:hover .hm-mq-track,.hm-marquee:focus-within .hm-mq-track,.hm-marquee.is-off .hm-mq-track{animation-play-state:paused;}
@keyframes hmMarquee{to{transform:translateX(calc(-50% - var(--gap) / 2));}}
.hm-mq-logo{flex:none;height:64px;padding:10px 20px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(15,17,21,.08);border-radius:var(--radius-xl);
  box-shadow:0 2px 8px rgba(18,18,40,.05);transition:transform var(--transition),box-shadow var(--transition);}
.hm-mq-logo img{height:42px;width:auto;}
a.hm-mq-logo:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,18,40,.12);}
@media (max-width:760px){
  .hm-brands-in{grid-template-columns:1fr;gap:var(--space-4);text-align:center;}
}

/* =====================================================================
   3. WHAT WE DO — stacked by default, pinned on wide screens
   ===================================================================== */
.hm-journey{overflow-x:clip;} /* clip (not hidden) keeps position:sticky working */
.hm-journey .sec-head{margin-bottom:clamp(var(--space-10),5vw,var(--space-16));}
.hm-journey .sec-head h2 .grad,.hm-output .sec-head h2 .grad{
  background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-scene-grid{display:grid;gap:clamp(var(--space-16),8vw,var(--space-24));}
.hm-rail{display:none;}
.hm-chap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center;}
/* chapter lockup: gradient icon tile + the pillar in gradient display type +
   its registered marks on one light plate (marks are never recoloured) */
.hm-chap-kick{display:flex;align-items:center;gap:1rem;}
.hm-kick-ico{position:relative;flex:none;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:1.1rem;color:#fff;
  background:linear-gradient(140deg,#6d3be8 0%,#3d53e0 55%,#0b767c 100%);
  box-shadow:0 14px 30px rgba(109,59,232,.3),inset 0 1px 0 rgba(255,255,255,.35);}
.hm-kick-ico [data-lucide]{width:1.65rem;height:1.65rem;}
.hm-kick-ico::after{content:"";position:absolute;inset:-5px;border-radius:1.35rem;
  border:2px solid rgba(109,59,232,.45);opacity:0;pointer-events:none;}
.hm-kick-body{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .95rem;min-width:0;}
.hm-kick-t{font-family:var(--font-display);font-weight:800;font-size:clamp(1.55rem,1.1rem + 1vw,2.1rem);line-height:1;letter-spacing:-.028em;
  padding-bottom:.06em;
  background:linear-gradient(100deg,var(--color-primary) 0%,var(--color-indigo) 35%,var(--color-teal) 60%,var(--color-primary) 100%);
  background-size:220% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-kick-marks{display:inline-flex;align-items:center;gap:.7rem;max-width:100%;
  background:#fff;border:1px solid rgba(15,17,21,.08);border-radius:.75rem;padding:5px 12px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--color-text) 8%,transparent);}
.hm-kick-marks{--mh:28px;}
.hm-kick-marks img{display:block;height:var(--mh);width:auto;min-width:0;}
.hm-kick-marks > i{flex:none;width:1px;height:20px;background:rgba(15,17,21,.12);}
/* square marks (icon over name) read at a larger size; they overhang the plate's padding */
.hm-kick-marks img.is-sq{height:calc(var(--mh) + 8px);margin:-4px 0;}
.hm-chap h3{font-size:clamp(1.8rem,1.1rem + 2vw,2.85rem);letter-spacing:-.032em;line-height:1.05;margin:var(--space-4) 0 var(--space-4);}
.hm-chap-txt > p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:50ch;margin:0;}
.hm-chap-list{margin:var(--space-6) 0 var(--space-8);display:grid;gap:.7rem;}
.hm-chap-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-muted);}
.hm-chap-list li > [data-lucide]{flex:none;color:var(--color-teal);margin-top:.15rem;}
.hm-chap-list li > span{flex:1;min-width:0;}
.hm-chap-list b{color:var(--color-text);font-weight:700;}

/* media compositions */
.hm-chap-media{position:relative;width:100%;aspect-ratio:5/4;}
.hm-m-card{background:color-mix(in srgb,var(--color-surface) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent);border-radius:1.25rem;
  padding:1rem 1.2rem;box-shadow:0 26px 56px color-mix(in srgb,var(--color-text) 16%,transparent);}
.hm-m-card-k{font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);}
.hm-m-pill{position:absolute;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.5rem .95rem;border-radius:var(--radius-full);font-size:.78rem;font-weight:700;
  background:color-mix(in srgb,var(--color-surface) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);
  box-shadow:0 14px 34px color-mix(in srgb,var(--color-text) 12%,transparent);}
.hm-m-pill [data-lucide]{color:var(--color-primary);width:1.05rem;height:1.05rem;}

/* education: the six-day programme as a product screen, its numbers, and
   the Internship Academy photograph. Sized in container units so the
   composition scales like a picture. */
.hm-m-edu{container-type:inline-size;}
.hm-m-course{position:absolute;left:0;top:0;width:74%;z-index:1;}
.hm-m-course .tscr-frame{padding:.7rem .7rem 0;}
.hm-m-course .tscr-bar{padding:0 .1rem .5rem;}
.hm-m-course .tscr-name{font-size:.62rem;}
.hm-crs{--rh:max(20px,5.9cqi);--nc:max(14px,3.6cqi);--dc:max(38px,8.2cqi);position:relative;background:#fff;color:#16132d;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid rgba(255,255,255,.18);border-bottom:0;
  box-shadow:0 -12px 40px rgba(0,0,0,.35);padding:3.1cqi 3.1cqi 5.4cqi;}
.hm-crs-open{display:flex;align-items:center;gap:1.1cqi;font-size:max(8.5px,1.85cqi);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#6d3be8;white-space:nowrap;}
.hm-crs-open i{flex:none;width:max(6px,1.25cqi);height:max(6px,1.25cqi);border-radius:50%;background:#6d3be8;
  animation:snapPulse 2.4s ease-out infinite;}
.hm-crs-title{display:block;font-family:var(--font-display);font-weight:800;font-size:max(12.5px,3.95cqi);line-height:1.12;
  letter-spacing:-.02em;margin:1.5cqi 0 .5cqi;color:#16132d;}
.hm-crs-sub{display:block;font-size:max(9px,2cqi);color:#6b6880;}
.hm-crs-track{position:relative;margin-top:2.4cqi;}
.hm-crs-days{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:var(--rh);}
/* the spine, and its gradient fill (full unless the page is scrolling it) */
.hm-crs-days::before,.hm-crs-days::after{content:"";position:absolute;left:calc(var(--nc) / 2);width:2px;margin-left:-1px;
  top:calc(var(--rh) / 2);bottom:calc(var(--rh) / 2);border-radius:2px;}
.hm-crs-days::before{background:#ebe7f7;}
.hm-crs-days::after{background:linear-gradient(#6d3be8,#3d53e0 55%,#0b767c);transform-origin:50% 0;
  transform:scaleY(calc(var(--cur,5) / 5));}
.hm-crs-days li{--r:clamp(0,calc((var(--cur,5) - var(--i) + .5) * 2),1);
  position:relative;z-index:1;display:grid;grid-template-columns:var(--nc) var(--dc) minmax(0,1fr);align-items:center;
  font-size:max(10px,2.75cqi);}
.hm-crs-node{position:relative;justify-self:center;width:max(7px,1.5cqi);height:max(7px,1.5cqi);border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px #d9d2f5;}
.hm-crs-node::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:linear-gradient(140deg,#6d3be8,#0b767c);opacity:var(--r);transform:scale(calc(.35 + var(--r) * .65));}
.hm-crs-d{font-weight:800;font-size:max(8px,1.75cqi);letter-spacing:.09em;text-transform:uppercase;color:#6d3be8;white-space:nowrap;
  opacity:calc(.45 + var(--r) * .55);}
.hm-crs-m{font-weight:700;color:#16132d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:calc(.38 + var(--r) * .62);}
/* the cursor that walks the days (only while the chapter is pinned) */
.hm-crs-cursor{display:none;position:absolute;left:-1.3cqi;right:-1.3cqi;top:0;height:var(--rh);z-index:0;
  border-radius:1.3cqi;border:1px solid rgba(109,59,232,.2);
  background:linear-gradient(90deg,rgba(109,59,232,.11),rgba(3,247,235,.09));
  box-shadow:0 6px 16px rgba(109,59,232,.12);
  transform:translateY(calc(var(--cur,0) * var(--rh)));}

.hm-m-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.65rem;}
.hm-m-nums b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);line-height:1;
  background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-m-nums small{display:block;font-size:.7rem;color:var(--color-text-muted);margin-top:.25rem;line-height:1.25;}
/* the course in numbers: one slim glass bar on the screen's lower-right corner */
.hm-crs-nums{position:absolute;right:-17%;bottom:0;transform:translateY(66%);z-index:3;display:flex;align-items:center;
  padding:1.7cqi 1.2cqi;border-radius:2.4cqi;}
.hm-crs-nums > span{display:flex;align-items:center;gap:1cqi;padding:0 1.7cqi;}
.hm-crs-nums > span + span{border-left:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);}
.hm-crs-nums b{font-family:var(--font-display);font-weight:800;font-size:max(15px,4.1cqi);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-crs-nums small{font-size:max(8px,1.5cqi);line-height:1.2;color:var(--color-text-muted);font-weight:600;}

.hm-m-intern{position:absolute;right:0;top:8%;width:36%;margin:0;z-index:2;transform:rotate(3deg);
  background:#fff;padding:1.3cqi 1.3cqi 1.1cqi;border-radius:2.6cqi;border:1px solid rgba(15,17,21,.07);
  box-shadow:0 30px 64px rgba(18,18,40,.24),0 6px 16px rgba(18,18,40,.08);}
.hm-m-intern img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:1.6cqi;}
.hm-m-intern figcaption{display:flex;flex-direction:column;gap:.35cqi;padding:1.3cqi .5cqi .2cqi;
  font-size:max(8.5px,1.7cqi);line-height:1.3;color:#5d5a73;}
.hm-m-intern figcaption b{font-family:var(--font-display);font-weight:800;font-size:max(11px,2.45cqi);color:#16132d;letter-spacing:-.01em;}

/* software: the three tools — the KropAnalytix workspace, a BreedPilot card and a
   DataViz Pro figure — plus a number */
.hm-m-win{position:absolute;left:6%;top:1%;width:88%;}
.hm-m-figcard{position:absolute;right:0;bottom:0;width:33%;margin:0;transform:rotate(3deg);z-index:2;background:#fff;
  padding:9px 9px 8px;border-radius:18px;border:1px solid rgba(15,17,21,.07);
  box-shadow:0 30px 64px rgba(18,18,40,.24),0 6px 16px rgba(18,18,40,.08);}
.hm-m-figcard img{border-radius:10px;width:100%;height:auto;}
.hm-m-stat{position:absolute;right:-1%;top:6%;z-index:3;display:flex;flex-direction:column;}
.hm-m-stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem + 1.4vw,2.8rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(140deg,var(--color-primary),var(--color-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hm-m-stat small{font-size:.74rem;color:var(--color-text-muted);margin-top:.2rem;}
/* BreedPilot: its drawn art takes the brand duotone, like every product illustration */
.hm-m-bpcard{position:absolute;left:0;bottom:3%;width:37%;margin:0;z-index:2;transform:rotate(-4deg);background:#fff;
  padding:8px 8px 7px;border-radius:18px;border:1px solid rgba(15,17,21,.07);
  box-shadow:0 30px 64px rgba(18,18,40,.24),0 6px 16px rgba(18,18,40,.08);}
.hm-m-bpart{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:10px;background:#140B35;isolation:isolate;}
.hm-m-bpart img{display:block;width:100%;height:100%;object-fit:cover;}
.hm-m-bpart.is-duo img{filter:grayscale(1) contrast(1.03);}
.hm-m-bpart.is-duo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);mix-blend-mode:color;opacity:.85;}
.hm-m-bpcard figcaption{font-size:.7rem;color:#55575f;padding:.45rem .2rem 0;line-height:1.2;}
.hm-m-bpcard figcaption b{color:#6d3be8;font-weight:800;margin-right:.3rem;}
/* the second line of a chapter headline in the brand gradient */
.hm-h3-grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* consultancy: BreedForward's gain panel in front, BioMetriK's report pages
   fanned behind it on the right. Sized in container units. */
.hm-m-co{container-type:inline-size;}
.hm-bfs{position:absolute;left:0;top:3%;width:70%;margin:0;z-index:3;border-radius:2.8cqi;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#120A33 0%,#1B1046 55%,#062F38 100%);
  border:1px solid rgba(109,59,232,.35);box-shadow:0 30px 70px rgba(18,18,40,.3);}
.hm-bfs-head{display:flex;align-items:center;justify-content:space-between;gap:2cqi;padding:2.6cqi 3cqi 0;white-space:nowrap;}
.hm-bfs-kick{display:inline-flex;align-items:center;gap:1cqi;font-size:max(8.5px,1.75cqi);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#03f7eb;}
.hm-bfs-kick [data-lucide]{width:max(11px,2.2cqi);height:max(11px,2.2cqi);}
.hm-bfs-tag{font-size:max(8px,1.55cqi);color:rgba(255,255,255,.6);}
.hm-bfs-svg{display:block;width:100%;height:auto;aspect-ratio:640/312;margin-top:.4cqi;}
.hm-bfs-grid line{stroke:rgba(255,255,255,.1);stroke-width:1.5;}
.hm-bfs-plot{position:relative;}
/* labels and ticks are HTML over the SVG (SVG text can keep stale positions
   when the web font arrives late); positions are in the SVG's 640x360 units */
.hm-bfs-ticks{position:relative;height:max(12px,2.6cqi);}
.hm-bfs-ticks span{position:absolute;top:0;left:calc(var(--x) / 640 * 100%);transform:translateX(-50%);
  font-size:max(8.5px,1.7cqi);font-weight:600;line-height:1;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}
.hm-bfs-axis{fill:none;stroke:rgba(255,255,255,.32);stroke-width:2;}
.hm-bfs-area{fill:url(#hmBfsFill);}
.hm-bfs-a{fill:none;stroke:rgba(255,255,255,.6);stroke-width:4;stroke-dasharray:10 9;stroke-linecap:round;}
.hm-bfs-b{fill:none;stroke:url(#hmBfsLine);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;}
/* --bfp: how far the projection has run (1 = all ten cycles). Full unless the
   chapter is pinned, when the scroll drives it. */
.hm-bfs-draw{clip-path:inset(-4% calc((1 - var(--bfp,1)) * 100%) -4% 0);}
.hm-bfs-dot{opacity:clamp(0,calc((var(--bfp,1) - .94) * 20),1);}
.hm-bfs-dot-a{fill:#fff;}
.hm-bfs-dot-b{fill:#03f7eb;filter:drop-shadow(0 0 8px #03f7eb);}
.hm-bfs-lab{position:absolute;right:calc(100% - var(--x) / 640 * 100%);top:calc(var(--y) / 312 * 100%);transform:translateY(-78%);
  font-size:max(9px,1.95cqi);font-weight:700;line-height:1;white-space:nowrap;opacity:clamp(0,calc((var(--bfp,1) - .9) * 12),1);}
.hm-bfs-lab-a{color:rgba(255,255,255,.75);}
.hm-bfs-lab-b{color:#5cfaf2;}
.hm-bfs-foot{display:flex;justify-content:space-between;gap:2cqi;padding:0 3cqi;font-size:max(8px,1.5cqi);color:rgba(255,255,255,.55);}
.hm-bfs-ill{letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
/* the levers BreedForward works on, lit in turn as the projection runs */
.hm-bfs-chips{display:flex;flex-wrap:wrap;gap:.9cqi;padding:1.7cqi 3cqi 2.6cqi;}
.hm-bfs-chips span{--on:clamp(0,calc((var(--bfp,1) * 5.6 - var(--i) - .3) * 3),1);
  position:relative;isolation:isolate;overflow:hidden;padding:.55cqi 1.5cqi;border-radius:999px;
  font-size:max(8px,1.5cqi);font-weight:700;white-space:nowrap;color:#fff;
  border:1px solid rgba(255,255,255,.16);opacity:calc(.55 + var(--on) * .45);}
.hm-bfs-chips span::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#6d3be8,#3d53e0);opacity:var(--on);}

.hm-m-pages{position:absolute;right:0;top:7%;width:42%;height:66%;z-index:1;}
.hm-m-page{position:absolute;top:0;left:50%;width:66%;height:auto;border-radius:10px;background:#fff;
  border:1px solid rgba(15,17,21,.07);transform-origin:50% 100%;
  box-shadow:0 26px 56px rgba(18,18,40,.2),0 4px 12px rgba(18,18,40,.07);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.hm-m-page.p1{z-index:3;transform:translateX(-50%);}
.hm-m-page.p2{z-index:2;transform:translateX(-98%) rotate(-9deg);}
.hm-m-page.p3{z-index:1;transform:translateX(-2%) rotate(9deg);}
.hm-m-co .hm-m-pill{font-size:max(9.5px,1.8cqi);}
.hm-m-pill-a{right:0;bottom:1%;z-index:4;}

@media (max-width:899px){
  .hm-chap{grid-template-columns:1fr;}
  .hm-chap-media{order:-1;}
}
@media (max-width:560px){
  .hm-m-pill{font-size:.7rem;padding:.4rem .75rem;}
  /* education stacks: the course screen, then its numbers beside the photograph */
  .hm-m-edu{aspect-ratio:auto;display:flex;flex-direction:column;}
  .hm-m-course{position:relative;top:auto;width:100%;}
  .hm-crs-nums{position:relative;right:auto;bottom:auto;transform:none;align-self:flex-end;width:max-content;
    margin:-5cqi 3cqi 0 auto;padding:2.6cqi 2cqi;}
  .hm-m-intern{position:relative;right:auto;top:auto;width:66%;align-self:flex-end;margin-top:5cqi;transform:rotate(2deg);}
  /* consultancy stacks: the BreedForward panel, then the report pages */
  .hm-m-co{aspect-ratio:auto;display:flex;flex-direction:column;}
  .hm-bfs{position:relative;top:auto;width:100%;}
  .hm-m-co .hm-m-pages{position:relative;right:auto;top:auto;width:100%;height:auto;aspect-ratio:2/1;margin-top:6cqi;}
  .hm-m-co .hm-m-page{width:38%;}
  .hm-m-co .hm-m-pill{display:none;}
}

/* ---- pinned mode: wide screens with motion.js and motion allowed ---- */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  html.m-live .hm-scene{--pinned:1;height:calc(3 * 95vh + 10vh);}
  html.m-live .hm-scene-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
    display:flex;align-items:center;overflow:hidden;}
  html.m-live .hm-scene-grid{width:100%;grid-template-columns:150px minmax(0,1fr);gap:clamp(var(--space-8),4vw,var(--space-16));align-items:center;}
  html.m-live .hm-rail{display:grid;gap:.25rem;grid-column:1;grid-row:1;align-self:center;margin:0;padding:0;list-style:none;}
  html.m-live .hm-chap{grid-column:2;grid-row:1;}
  html.m-live .hm-chap h3{font-size:clamp(1.8rem,1rem + 1.85vw,2.7rem);}
  html.m-live .hm-chap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
  /* the media keeps 5:4 and never outgrows the stage height */
  html.m-live .hm-chap-media{width:min(100%,calc((100vh - var(--header-h) - 6rem) * 1.25));aspect-ratio:5/4;height:auto;justify-self:center;}

  /* chapter states */
  html.m-live .hm-chap:not(.is-active){pointer-events:none;}
  html.m-live .hm-chap-txt > *{opacity:0;transform:translateY(30px);
    transition:opacity .55s ease,transform .9s cubic-bezier(.16,1,.3,1);}
  html.m-live .hm-chap.is-past .hm-chap-txt > *{transform:translateY(-30px);}
  html.m-live .hm-chap.is-active .hm-chap-txt > *{opacity:1;transform:none;}
  html.m-live .hm-chap.is-active .hm-chap-txt > :nth-child(1){transition-delay:.1s;}
  html.m-live .hm-chap.is-active .hm-chap-txt > :nth-child(2){transition-delay:.16s;}
  html.m-live .hm-chap.is-active .hm-chap-txt > :nth-child(3){transition-delay:.22s;}
  html.m-live .hm-chap.is-active .hm-chap-txt > :nth-child(4){transition-delay:.28s;}
  html.m-live .hm-chap.is-active .hm-chap-txt > :nth-child(5){transition-delay:.34s;}
  html.m-live .hm-chap-media{opacity:0;transform:translateY(40px) scale(.94);
    clip-path:inset(12% 8% 12% 8% round 28px);
    transition:opacity .7s ease,transform 1.2s cubic-bezier(.16,1,.3,1),clip-path 1.2s cubic-bezier(.16,1,.3,1);}
  html.m-live .hm-chap.is-past .hm-chap-media{transform:translateY(-40px) scale(1.02);}
  html.m-live .hm-chap.is-active .hm-chap-media{opacity:1;transform:none;clip-path:inset(-20% -20% -20% -20% round 0);}
  /* layers drift with the chapter's own progress (--lp, 0 -> 1) */
  html.m-live .hm-chap [style*="--k"]{translate:0 calc((var(--lp,.5) - .5) * var(--k,0) * 2px);}
  /* report pages close up when the chapter is not in view */
  html.m-live .hm-chap:not(.is-active) .hm-m-page.p2,
  html.m-live .hm-chap:not(.is-active) .hm-m-page.p3{transform:translateX(-50%) rotate(0deg);}
  /* education: a cursor walks the six days as the chapter scrolls (--lp 0 -> 1),
     lighting each day as it passes */
  html.m-live .hm-m-edu{--cur:clamp(0,calc(var(--lp,0) * 6 - .5),5);}
  /* consultancy: the BreedForward projection runs with the chapter's scroll */
  html.m-live .hm-m-co{--bfp:clamp(0,calc(var(--lp,0) * 1.45 - .05),1);}
  html.m-live .hm-crs-cursor{display:block;}
  html.m-live .hm-crs-days li{opacity:0;transform:translateX(-10px);
    transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1);}
  html.m-live .hm-chap.is-active .hm-crs-days li{opacity:1;transform:none;transition-delay:calc(.45s + var(--i) * 70ms);}
  /* the chapter lockup: a ring from the icon and a light sweep across the name */
  html.m-live .hm-chap.is-active .hm-kick-ico::after{animation:hmKickRing 1.5s .3s cubic-bezier(.16,1,.3,1) both;}
  html.m-live .hm-chap.is-active .hm-kick-t{animation:hmKickSweep 1.7s .2s cubic-bezier(.65,0,.35,1) both;}

  /* the rail */
  .hm-rail button{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.2rem .7rem;width:100%;
    padding:.75rem 0;text-align:left;color:var(--color-text-faint);transition:color var(--transition);}
  .hm-rail button:hover{color:var(--color-text);}
  .hm-rail-n{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);letter-spacing:.1em;}
  .hm-rail-t{font-weight:700;font-size:var(--text-sm);}
  .hm-rail-bar{grid-column:1 / -1;display:block;height:2px;border-radius:2px;margin-top:.55rem;overflow:hidden;
    background:color-mix(in srgb,var(--color-text) 10%,transparent);}
  .hm-rail-bar i{display:block;height:100%;transform:scaleX(var(--fill,0));transform-origin:left;
    background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
  .hm-rail button.is-on{color:var(--color-text);}
  .hm-rail button.is-on .hm-rail-n{color:var(--color-primary);}
}

@keyframes hmKickRing{0%{opacity:.9;transform:scale(.8);}100%{opacity:0;transform:scale(1.45);}}
@keyframes hmKickSweep{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* short laptop screens: tighten the chapter copy so it fits the stage */
@media (min-width:1024px) and (min-height:640px) and (max-height:860px) and (prefers-reduced-motion:no-preference){
  html.m-live .hm-kick-ico{width:3.1rem;height:3.1rem;border-radius:.95rem;}
  html.m-live .hm-kick-ico [data-lucide]{width:1.4rem;height:1.4rem;}
  html.m-live .hm-kick-t{font-size:clamp(1.45rem,1rem + .8vw,1.8rem);}
  html.m-live .hm-kick-marks{padding:4px 10px;}
  html.m-live .hm-kick-marks{--mh:24px;}
  html.m-live .hm-chap h3{font-size:clamp(1.6rem,.9rem + 1.5vw,2.25rem);margin:var(--space-3) 0;}
  html.m-live .hm-chap-txt > p{font-size:var(--text-base);}
  html.m-live .hm-chap-list{margin:var(--space-4) 0 var(--space-5);gap:.45rem;}
  html.m-live .hm-chap-list li{font-size:.84rem;}
}
/* short laptop screens (up to 700 px tall): one step tighter, so the longest
   chapter (Education) fits between the header and the fold */
@media (min-width:1024px) and (min-height:640px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
  html.m-live .hm-chap h3{font-size:clamp(1.45rem,.8rem + 1.25vw,1.95rem);margin:var(--space-2) 0 var(--space-3);}
  html.m-live .hm-chap-kick{gap:.75rem;}
  html.m-live .hm-kick-ico{width:2.6rem;height:2.6rem;border-radius:.8rem;}
  html.m-live .hm-kick-ico [data-lucide]{width:1.15rem;height:1.15rem;}
  html.m-live .hm-kick-body{gap:.35rem;}
  html.m-live .hm-kick-t{font-size:1.35rem;}
  html.m-live .hm-kick-marks{padding:3px 8px;}
  html.m-live .hm-kick-marks{--mh:20px;}
  html.m-live .hm-chap-txt > p{font-size:.93rem;line-height:1.55;}
  html.m-live .hm-chap-list{margin:var(--space-3) 0 var(--space-4);gap:.35rem;}
}

/* =====================================================================
   4. EVERYTHING WE OFFER — bento
   ===================================================================== */
.hm-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.hm-card{display:block;position:relative;border-radius:var(--radius-2xl);color:inherit;}
.hm-card-in{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--color-surface);border:1px solid var(--color-divider);border-radius:inherit;overflow:hidden;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;}
.hm-card:hover .hm-card-in,.hm-card:focus-visible .hm-card-in{
  border-color:color-mix(in srgb,var(--color-primary) 28%,transparent);
  box-shadow:0 28px 60px color-mix(in srgb,var(--color-primary) 16%,transparent),0 6px 16px color-mix(in srgb,var(--color-text) 6%,transparent);}
.hm-card:focus-visible{outline-offset:4px;border-radius:var(--radius-2xl);}
/* pointer spotlight (main.js initSpotlight writes --spot-x/--spot-y) */
.hm-card-in::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,50%),color-mix(in srgb,var(--color-primary) 11%,transparent),transparent 62%);}
.hm-card.is-lit .hm-card-in::after{opacity:1;}
.hm-card-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#140B35;isolation:isolate;flex:none;}
.hm-card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.hm-card:hover .hm-card-art img{transform:scale(1.06);}
/* the same brand duotone as the brand carousel and the product screens */
.hm-card-art.is-duo img{filter:grayscale(1) contrast(1.03);}
.hm-card-art.is-duo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);mix-blend-mode:color;opacity:.85;}
.hm-card-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,6,30,.4) 0%,transparent 45%);}
.hm-card-body{display:flex;flex-direction:column;gap:.55rem;padding:var(--space-5) var(--space-6) var(--space-6);flex:1;}
.hm-card-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:44px;}
.hm-card-kick{font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);}
.hm-card-logo{display:grid;place-items:center;background:#fff;border:1px solid rgba(15,17,21,.08);border-radius:.8rem;padding:5px 10px;}
.hm-card-logo img{height:30px;width:auto;}
.hm-card-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--color-primary-soft);color:var(--color-primary);}
.hm-card-ico [data-lucide]{width:1.25rem;height:1.25rem;}
.hm-card-h{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.022em;line-height:1.1;}
.hm-card-p{display:block;color:var(--color-text-muted);font-size:var(--text-sm);}
.hm-card-p em{font-style:normal;font-weight:700;color:var(--color-text);}
.hm-card-es{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem;}
.hm-card-es i{font-style:normal;font-size:.72rem;font-weight:700;padding:.28rem .65rem;border-radius:var(--radius-full);
  background:var(--color-gold-soft);color:var(--color-gold-hover);}
[data-theme="dark"] .hm-card-es i{color:var(--color-gold);}
.hm-card-go{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:var(--text-sm);color:var(--color-primary);}
.hm-card-go [data-lucide]{width:1.05rem;height:1.05rem;transition:transform var(--transition);}
.hm-card:hover .hm-card-go [data-lucide]{transform:translateX(5px);}
.hm-card-lg{grid-column:span 2;}
.hm-card-lg .hm-card-in{flex-direction:row;}
.hm-card-lg .hm-card-art{aspect-ratio:auto;width:50%;}
.hm-card-lg .hm-card-body{padding:var(--space-8);justify-content:center;}
.hm-card-lg .hm-card-h{font-size:var(--text-2xl);}
.hm-card-lg .hm-card-p{font-size:var(--text-base);}
@media (max-width:1023px){
  .hm-bento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hm-card-lg:last-child{grid-column:auto;}
  .hm-card-lg:last-child .hm-card-in{flex-direction:column;}
  .hm-card-lg:last-child .hm-card-art{width:auto;aspect-ratio:16/9;}
  .hm-card-lg:last-child .hm-card-body{padding:var(--space-5) var(--space-6) var(--space-6);}
  .hm-card-lg:last-child .hm-card-h{font-size:var(--text-xl);}
}
@media (max-width:640px){
  .hm-bento{grid-template-columns:1fr;}
  .hm-card-lg{grid-column:auto;}
  .hm-card-lg .hm-card-in{flex-direction:column;}
  .hm-card-lg .hm-card-art{width:auto;aspect-ratio:16/9;}
  .hm-card-lg .hm-card-body{padding:var(--space-5) var(--space-6) var(--space-6);}
  .hm-card-lg .hm-card-h{font-size:var(--text-xl);}
}

/* =====================================================================
   5. REAL OUTPUT — the work, on a laptop
   Three reels, one per pillar (Education, Software, Consultancy), and a
   segmented control that shows one pillar at a time.
   · Phones and tablets: the reels swipe sideways; no device.
   · Laptops and desktops (>=1024 px wide, >=640 px tall): the reels sit on
     the screen of a laptop drawn in CSS (glass bezel, aluminium base), so
     the work has a clean frame and even margins. With motion allowed the
     section pins: the lid opens as it arrives, the screen wakes, and the
     reels run in opposite directions with the scroll. Reduced motion shows
     the laptop open, with reels you can swipe.
   Tiles open in a lightbox (work.js); without JavaScript they are links.
   ===================================================================== */
.hm-work{--th:clamp(170px,26vw,230px);--gut:max(var(--space-6),calc((100vw - var(--content-wide)) / 2 + var(--space-6)));
  overflow-x:clip;} /* clip, not hidden: hidden would break position:sticky */
.hm-work .sec-head{margin-bottom:var(--space-8);}
.hm-work .sec-head h2 .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* the device is dropped on small screens: its boxes step aside */
.wk-device,.wk-lid,.wk-screen{display:contents;}
.wk-cam,.wk-base,.wk-dots,.wk-title{display:none;}
.wk-bar{padding:0 var(--gut);margin-bottom:var(--space-8);}

/* segmented control (shown only with JavaScript) */
.wk-seg{position:relative;display:none;align-items:center;padding:5px;border-radius:999px;
  background:color-mix(in srgb,var(--color-surface) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--color-text) 7%,transparent);}
html.js .wk-seg{display:inline-flex;}
.wk-seg button{position:relative;z-index:1;padding:.62rem 1.15rem;border:0;background:none;border-radius:999px;cursor:pointer;
  font:inherit;font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);white-space:nowrap;transition:color .35s ease;}
.wk-seg button:hover{color:var(--color-text);}
.wk-seg button.is-on{color:#fff;}
.wk-seg button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
@media (max-width:480px){
  .wk-seg{max-width:100%;overflow-x:auto;scrollbar-width:none;}
  .wk-seg button{padding:.55rem .78rem;font-size:.8rem;}
}
.wk-seg-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--seg-w,0);border-radius:999px;
  transform:translateX(var(--seg-x,0));background:linear-gradient(135deg,#6d3be8,#3d53e0);
  box-shadow:0 8px 20px rgba(109,59,232,.35);transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1);}

/* the reels */
.wk-wall{display:flex;flex-direction:column;gap:var(--space-10);}
.wk-row{position:relative;min-width:0;}
.wk-row[hidden]{display:none;}
.wk-row[data-group="education"]{view-transition-name:wk-edu;}
.wk-row[data-group="software"]{view-transition-name:wk-sw;}
.wk-row[data-group="consultancy"]{view-transition-name:wk-co;}
.wk-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;padding:0 var(--gut);margin-bottom:var(--space-4);}
.wk-n{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);letter-spacing:.12em;color:var(--color-primary);}
.wk-head b{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.02em;}
.wk-head small{font-size:var(--text-sm);color:var(--color-text-muted);}
.wk-head em{font-style:normal;font-size:var(--text-xs);font-weight:700;color:var(--color-text-faint);margin-left:auto;}
.wk-view{min-width:0;}
.wk-track{display:flex;align-items:center;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:6px var(--gut) 18px;scroll-padding-inline:var(--gut);scrollbar-width:none;}
.wk-track::-webkit-scrollbar,.wk-view::-webkit-scrollbar{display:none;}

/* a tile: the piece itself, captioned on hover */
.wk-tile{--h:var(--th);position:relative;flex:none;display:block;height:var(--h);width:calc(var(--h) * var(--ar,1));
  border-radius:14px;overflow:hidden;background:#fff;scroll-snap-align:start;isolation:isolate;
  border:1px solid rgba(15,17,21,.07);box-shadow:0 18px 40px color-mix(in srgb,var(--color-text) 12%,transparent);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,width .7s cubic-bezier(.16,1,.3,1),height .7s cubic-bezier(.16,1,.3,1);}
.wk-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.wk-cap{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;gap:.15rem;padding:2rem .85rem .7rem;
  background:linear-gradient(0deg,rgba(9,6,28,.88) 0%,rgba(9,6,28,.55) 55%,transparent 100%);color:#fff;
  transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1);}
.wk-cap b{font-family:var(--font-display);font-weight:800;font-size:.86rem;line-height:1.2;letter-spacing:-.01em;}
.wk-cap i{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5cfaf2;}
.wk-tile:hover,.wk-tile:focus-visible{transform:translateY(-5px);box-shadow:0 26px 54px color-mix(in srgb,var(--color-primary) 22%,transparent);}
.wk-tile:hover img,.wk-tile:focus-visible img{transform:scale(1.05);}
.wk-tile:hover .wk-cap,.wk-tile:focus-visible .wk-cap{transform:none;}
.wk-tile:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;}
@media (hover:none){ .wk-cap{transform:none;padding-top:1.5rem;} }
/* one pillar at a time: the chosen reel grows */
.wk-wall:not([data-show="all"]) .wk-tile{--h:min(calc(var(--th) * 1.75),calc(100vh - var(--header-h) - 12rem));}

.wk-foot{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);justify-content:center;margin-top:var(--space-10);}
.wk-foot a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:var(--text-sm);color:var(--color-primary);}
.wk-foot a [data-lucide]{width:1rem;height:1rem;transition:transform .3s ease;}
.wk-foot a:hover [data-lucide]{transform:translateX(4px);}

/* the "View" cursor (fine pointers only; moved to <body> by work.js) */
.wk-cursor{position:fixed;left:0;top:0;z-index:60;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(135deg,rgba(109,59,232,.92),rgba(61,83,224,.92));box-shadow:0 14px 34px rgba(109,59,232,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(var(--cs,0));transition:transform .08s linear;}
.wk-cursor.is-on{--cs:1;}
@media (hover:none),(pointer:coarse){ .wk-cursor{display:none;} }
html.wk-cur-on .wk-tile{cursor:none;}

/* lightbox */
.wk-lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-4);
  padding:clamp(1rem,3vw,2.5rem);background:rgba(8,5,24,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .35s ease;}
.wk-lb[hidden]{display:none;}
.wk-lb.is-open{opacity:1;}
.wk-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);min-width:0;max-height:100%;}
.wk-lb-fig img{max-width:100%;max-height:calc(100vh - 11rem);width:auto;height:auto;border-radius:14px;background:#fff;
  box-shadow:0 40px 90px rgba(0,0,0,.5);transform:scale(.96);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease;}
.wk-lb.is-open .wk-lb-fig img.is-in{transform:none;opacity:1;}
.wk-lb figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.3rem .8rem;color:#fff;text-align:center;}
.wk-lb-g{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a97bff;}
.wk-lb-t{font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,.9rem + .4vw,1.25rem);}
.wk-lb-s{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5cfaf2;}
.wk-lb-n{font-size:.75rem;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}
.wk-lb-nav,.wk-lb-x{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:background .25s ease,border-color .25s ease;}
.wk-lb-nav:hover,.wk-lb-x:hover{background:rgba(255,255,255,.16);border-color:#5cfaf2;}
.wk-lb-nav:focus-visible,.wk-lb-x:focus-visible{outline:2px solid #5cfaf2;outline-offset:2px;}
.wk-lb-x{position:absolute;top:clamp(.8rem,2vw,1.5rem);right:clamp(.8rem,2vw,1.5rem);}
html.wk-lb-open{overflow:hidden;}
@media (max-width:640px){
  .wk-lb{grid-template-columns:1fr;padding:3.5rem .8rem 1rem;}
  .wk-lb-nav{position:absolute;bottom:1rem;}
  .wk-lb-prev{left:1rem;} .wk-lb-next{right:1rem;}
  .wk-lb-fig img{max-height:calc(100vh - 12rem);}
}

/* ---- laptops and desktops: the laptop ---- */
@media (min-width:1024px) and (min-height:640px){
  /* the lid's width: never wider than the page or taller than the view */
  .hm-work{--lidw:min(1120px,86vw,calc((100vh - var(--header-h) - 9.5rem) * 1.6));
    --th:calc((var(--lidw) / 1.6 * .955 - 3rem - 3.4rem) / 3.18);--lab:clamp(9.5rem,15%,12rem);}
  .wk-sticky{display:flex;flex-direction:column;align-items:center;padding:var(--space-2) 0 var(--space-12);}
  .wk-device{display:block;position:relative;width:var(--lidw);}
  .wk-lid{display:block;position:relative;aspect-ratio:16/10;padding:1.1% 1.1% 1.5%;border-radius:22px 22px 12px 12px;
    background:linear-gradient(180deg,#16161c 0%,#0a0a0f 100%);transform-origin:50% 100%;
    box-shadow:0 0 0 1.5px #3b3d46,0 0 0 3px rgba(255,255,255,.06),0 50px 90px rgba(24,16,60,.28),0 12px 30px rgba(24,16,60,.18);}
  /* the glass: a soft reflection across the whole lid */
  .wk-lid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
    background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 32%,transparent 46%);}
  .wk-cam{display:block;position:absolute;z-index:5;top:.5%;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#3f4452,#15171e 70%);}
  .wk-screen{display:flex;flex-direction:column;height:100%;border-radius:9px;overflow:hidden;position:relative;color:#fff;
    background:radial-gradient(120% 90% at 15% 0%,#241456 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#06343b 0%,transparent 60%),#0c0822;}
  .wk-base{display:block;position:relative;left:-7%;width:114%;height:clamp(12px,1.35vw,19px);border-radius:0 0 50% 50%/0 0 100% 100%;
    background:linear-gradient(180deg,#f1f2f5 0%,#d4d6dc 38%,#a7abb4 100%);
    box-shadow:0 22px 36px rgba(24,16,60,.2),inset 0 1px 0 rgba(255,255,255,.9);}
  .wk-base i{position:absolute;top:0;left:50%;width:14%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;
    background:linear-gradient(180deg,#a9adb6,#cfd2d8);}
  [data-theme="dark"] .wk-base{background:linear-gradient(180deg,#5b5e68 0%,#3b3d45 45%,#24252b 100%);box-shadow:0 22px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);}
  [data-theme="dark"] .wk-base i{background:linear-gradient(180deg,#26272d,#3a3c44);}
  [data-theme="dark"] .wk-lid{box-shadow:0 0 0 1.5px #4a4c56,0 0 0 3px rgba(255,255,255,.05),0 50px 90px rgba(0,0,0,.5);}

  /* the window bar: traffic lights, title, the segmented control */
  .wk-bar{flex:none;display:flex;align-items:center;gap:1rem;height:3rem;margin:0;padding:0 1rem;
    background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.07);}
  .wk-dots{display:flex;gap:7px;flex:none;}
  .wk-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57;}
  .wk-dots i:nth-child(2){background:#febc2e;} .wk-dots i:nth-child(3){background:#28c840;}
  .wk-title{display:block;flex:1;text-align:center;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.5);}
  .wk-bar .wk-seg{padding:3px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none;}
  .wk-bar .wk-seg button{padding:.36rem .82rem;font-size:.74rem;color:rgba(255,255,255,.62);}
  .wk-bar .wk-seg button:hover{color:#fff;}
  .wk-bar .wk-seg button.is-on{color:#fff;}
  .wk-bar .wk-seg-ind{top:3px;bottom:3px;}
  .wk-bar .wk-seg button:focus-visible{outline-color:#5cfaf2;}

  /* reels on the screen: label on the left, the reel fading at both edges */
  .wk-wall{flex:1;justify-content:center;gap:clamp(.8rem,2.2vh,1.4rem);padding:1.1rem 0 1.2rem;min-height:0;}
  .wk-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;}
  .wk-head{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:.18rem;margin:0;padding:0 .6rem 0 1.3rem;}
  .wk-n{color:#5cfaf2;}
  .wk-head b{font-size:clamp(.95rem,.7rem + .5vw,1.2rem);color:#fff;}
  .wk-head small{font-size:.7rem;line-height:1.35;color:rgba(255,255,255,.58);}
  .wk-head em{margin:.25rem 0 0;font-size:.66rem;color:rgba(255,255,255,.4);}
  .wk-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 94%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 94%,transparent 100%);}
  .wk-track{overflow:visible;scroll-snap-type:none;width:max-content;gap:14px;padding:9px 5% 11px 3%;}
  .wk-tile{border-radius:10px;border-color:rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.4);}
  .wk-tile:hover,.wk-tile:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(92,250,242,.35);}
  .wk-cap{padding:1.6rem .7rem .55rem;}
  .wk-cap b{font-size:.78rem;}
  .wk-cap i{font-size:.58rem;}
  .wk-wall:not([data-show="all"]) .wk-tile{--h:calc(var(--th) * 2.9);}
  .wk-foot{margin-top:0;}
}

/* ---- pinned (motion allowed): the lid opens, then the reels run ---- */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  html.m-live .wk-stage{--pinned:1;height:245vh;}
  html.m-live .wk-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
    justify-content:center;padding:0 0 1.2rem;perspective:2400px;perspective-origin:50% 8%;}
  /* --p: -0.45 approaching, 0 pinned, 1 leaving. --open: the lid, 0 -> 1 */
  html.m-live .wk-device{--open:clamp(0,calc((var(--p,-.45) + .3) / .4),1);
    transform:translateY(calc((1 - var(--open)) * 12vh)) scale(calc(.86 + var(--open) * .14));transform-style:preserve-3d;}
  /* the laptop rises and settles (leaning back a little at first), then the screen wakes */
  html.m-live .wk-lid{transform:rotateX(calc((1 - var(--open)) * 30deg));}
  html.m-live .wk-screen > *{opacity:clamp(0,calc((var(--open) - .5) / .4),1);}
  html.m-live .wk-screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(60% 55% at 50% 45%,rgba(169,123,255,.42),rgba(3,247,235,.12) 45%,transparent 70%);
    opacity:clamp(0,min(calc((var(--open) - .55) * 5),calc((1 - var(--open)) * 5)),1);}
  html.m-live .wk-view{overflow:hidden;scroll-snap-type:none;container-type:inline-size;}
  html.m-live .wk-track{will-change:transform;
    transform:translateX(calc(50cqw - 50% + (var(--p,0) - .5) * var(--dir,1) * -58cqw));}
}

/* =====================================================================
   6. PRINCIPLES — a line draws down the list as it passes
   ===================================================================== */
.hm-principles .principle-list{position:relative;}
.hm-principles .principle-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:linear-gradient(180deg,var(--color-accent-bright),var(--color-magenta-bright));
  transform:scaleY(var(--p,1));transform-origin:top;opacity:.9;}
html.m-live .hm-principles .principle-list::before{transform:scaleY(var(--p,0));}

/* =====================================================================
   7. CTA — a drifting glow
   ===================================================================== */
.cta-band .hm-cta-glow{position:absolute;width:560px;height:560px;right:-160px;top:-240px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(3,247,235,.32),transparent 62%);}

/* =====================================================================
   Magnetic buttons ease back when released
   ===================================================================== */
[data-magnetic]{transition:all var(--transition),translate .5s cubic-bezier(.16,1,.3,1);}

/* =====================================================================
   Reduced motion: a still page
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .hm-aurora i,.hm-cue span,.hm-mq-track,.hm-crs-open i{animation:none;}
  .hm-mq-track{flex-wrap:wrap;justify-content:center;width:auto;}
  .hm-mq-track [aria-hidden="true"]{display:none;}
  .hm-marquee{mask-image:none;-webkit-mask-image:none;}
  .hm-layer{translate:none;}
  .hm-card-in{transform:none;}
}
html.m-reduce .hm-layer,html.m-reduce [data-parallax]{translate:none;}


/* the vision sentence in the dark principles band: one bright gradient phrase (29 Sept 2026) */
.hm-principles .principles-head h2{font-size:clamp(1.55rem,1rem + 1.6vw,2.35rem);letter-spacing:-.03em;line-height:1.12;text-wrap:pretty;}
.hm-pr-grad{background:linear-gradient(95deg,#5cfaf2,#b893ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}