/* =====================================================================
   about.css — the About page layer (28 September 2026)
   Loaded by about.html after style.css, components.css and home.css.
   It reuses the shared theme and the homepage motion layer (hero
   entrance, aurora, doors, magnetic buttons, CTA band) and adds:
     1. Hero      the PlantNura family in orbit around the company
     2. Why       a dark band that grows to full width, pins, and lights
                  its words one by one as you scroll ([data-words])
     3. Founder   the portrait opens as it arrives; selected publications
     4. Path      four stations on a sideways track ([data-hscroll])
     5. How       four commitments that stack as you scroll
     6. People    the team and where we are
   Motion hooks come from assets/js/motion.js. Without it, or with reduced
   motion, every section is a still, complete page.
   ===================================================================== */

/* gradient display type, as on the homepage */
.ab-path .sec-head h2 .grad,.ab-how .sec-head h2 .grad,.ab-people .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;}

/* registered custom properties, so the orbit can travel (browsers without
   @property simply show the finished state) */
@property --ab-in{syntax:"<number>";inherits:true;initial-value:1;}
@property --ab-draw{syntax:"<number>";inherits:true;initial-value:0;}

/* =====================================================================
   1. HERO — the family in orbit
   ===================================================================== */
.ab-hero .ab-h1{font-size:clamp(2.25rem,.8rem + 2.35vw,3.1rem);line-height:1.06;max-width:none;}
.ab-orbit{--R:39.5cqi;position:relative;width:min(100%,540px);aspect-ratio:1;container-type:inline-size;
  margin:var(--space-12) auto calc(var(--space-12) + 1.5rem);justify-self:center;}
@media (min-width:1080px){ .ab-orbit{margin:0 auto 2.5rem;} }

.ab-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 6px);}
.ab-ring{fill:none;stroke:color-mix(in srgb,var(--color-text) 12%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;}
.ab-ring-1{stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:abSpin 120s linear infinite;}
.ab-ring-3{stroke:color-mix(in srgb,var(--color-primary) 16%,transparent);stroke-dasharray:1 5;}
.ab-arc{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:var(--ab-draw,0);
  opacity:.8;transition:stroke-width .35s ease,opacity .35s ease;}
.ab-arc-ed{stroke:var(--color-primary);}
.ab-arc-sw{stroke:var(--color-indigo);}
.ab-arc-co{stroke:var(--color-teal);}
[data-theme="dark"] .ab-arc-co{stroke:var(--color-accent-bright);}
@keyframes abSpin{to{transform:rotate(360deg);}}

/* two points of light travelling the rings */
.ab-sat{position:absolute;inset:0;pointer-events:none;animation:abSpin 34s linear infinite;}
.ab-sat::before{content:"";position:absolute;left:50%;top:5.5%;width:1.7cqi;height:1.7cqi;min-width:6px;min-height:6px;
  border-radius:50%;translate:-50% -50%;background:var(--color-accent-bright);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent-bright) 22%,transparent),0 0 18px 4px color-mix(in srgb,var(--color-accent-bright) 55%,transparent);}
.ab-sat-2{inset:15.5%;animation-duration:52s;animation-direction:reverse;}
.ab-sat-2::before{top:0;background:var(--color-brand-violet);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand-violet) 22%,transparent),0 0 18px 4px color-mix(in srgb,var(--color-brand-violet) 55%,transparent);}

/* the company at the centre */
.ab-core{position:absolute;left:50%;top:50%;z-index:2;display:grid;justify-items:center;gap:.9cqi;
  padding:3.2cqi 4.4cqi 2.6cqi;border-radius:5cqi;background:#fff;border:1px solid rgba(15,17,21,.08);
  box-shadow:0 30px 60px -18px rgba(76,40,190,.35),0 8px 20px rgba(18,18,40,.08);
  transform:translate(-50%,-50%);
  translate:calc(var(--mx,0) * var(--d) * 16px) calc(var(--my,0) * var(--d) * 16px);}
.ab-core img{height:8.4cqi;width:auto;max-width:none;display:block;}
.ab-core small{font-size:max(9px,2.1cqi);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#6d3be8;line-height:1;}
/* a slow conic halo behind the plate */
.ab-core::before{content:"";position:absolute;inset:-5cqi -3cqi;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,#8c52ff,#3d53e0,#03f7eb,#8c52ff);filter:blur(28px);opacity:.36;
  animation:abSpin 16s linear infinite;}
[data-theme="dark"] .ab-core::before{opacity:.5;}

/* the six marks, placed round the circle by --a and pulled out by --ab-in */
.ab-marks{list-style:none;margin:0;padding:0;position:absolute;inset:0;}
.ab-mark{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;
  transform:rotate(var(--a)) translateX(calc(var(--R) * var(--ab-in,1))) rotate(calc(var(--a) * -1));
  translate:calc(var(--mx,0) * var(--d) * 18px) calc(var(--my,0) * var(--d) * 18px - var(--sy,0) * var(--d) * .05px);}
.ab-mark a{position:absolute;left:0;top:0;display:grid;place-items:center;width:max-content;
  padding:1.7cqi 2.5cqi;border-radius:3.4cqi;background:#fff;border:1px solid rgba(15,17,21,.08);
  box-shadow:0 14px 30px -12px rgba(18,18,40,.28),0 2px 6px rgba(18,18,40,.06);
  transform:translate(-50%,-50%);
  animation:abBob 6.5s ease-in-out infinite;animation-delay:calc(var(--d) * -4s);
  transition:scale .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,opacity .35s ease;}
.ab-mark img{height:6.4cqi;width:auto;max-width:none;display:block;}
.ab-mark.is-sq a{padding:1.4cqi 1.8cqi;}
.ab-mark.is-sq img{height:12.5cqi;}
.ab-mark a:hover,.ab-mark a:focus-visible{scale:1.08;
  box-shadow:0 26px 50px -14px rgba(76,40,190,.42),0 4px 10px rgba(18,18,40,.08);}
@keyframes abBob{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 5px));}}
.ab-mark-tip{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 4px;white-space:nowrap;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;line-height:1;padding:.42rem .7rem;border-radius:999px;
  background:var(--color-text);color:var(--color-bg);opacity:0;pointer-events:none;
  transition:opacity .25s ease,translate .35s cubic-bezier(.16,1,.3,1);}
.ab-mark a:hover .ab-mark-tip,.ab-mark a:focus-visible .ab-mark-tip{opacity:1;translate:-50% 0;}
.ab-mark:has(a:hover),.ab-mark:has(a:focus-visible){z-index:5;}

/* the legend under the orbit */
.ab-legend{position:absolute;left:50%;top:calc(100% + .4rem);translate:-50% 0;display:flex;gap:.35rem;white-space:nowrap;}
.ab-legend span{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .75rem;border-radius:999px;cursor:default;
  font-size:.74rem;font-weight:700;color:var(--color-text-muted);
  background:color-mix(in srgb,var(--color-surface) 72%,transparent);border:1px solid var(--color-divider);
  transition:color .3s ease,border-color .3s ease,background .3s ease;}
.ab-legend i{width:.55rem;height:.55rem;border-radius:50%;}
.ab-legend [data-leg="education"] i{background:var(--color-primary);}
.ab-legend [data-leg="software"] i{background:var(--color-indigo);}
.ab-legend [data-leg="consultancy"] i{background:var(--color-teal);}
[data-theme="dark"] .ab-legend [data-leg="consultancy"] i{background:var(--color-accent-bright);}

/* pointing at a mark or a legend item lights its pillar */
.ab-orbit:has(.ab-mark a:hover,.ab-legend span:hover) .ab-mark a{opacity:.3;}
.ab-orbit:has(.ab-mark a:hover,.ab-legend span:hover) .ab-arc{opacity:.25;}
.ab-orbit:has([data-group="education"] a:hover,[data-leg="education"]:hover) [data-group="education"] a,
.ab-orbit:has([data-group="software"] a:hover,[data-leg="software"]:hover) [data-group="software"] a,
.ab-orbit:has([data-group="consultancy"] a:hover,[data-leg="consultancy"]:hover) [data-group="consultancy"] a{opacity:1;}
.ab-orbit:has([data-group="education"] a:hover,[data-leg="education"]:hover) .ab-arc-ed,
.ab-orbit:has([data-group="software"] a:hover,[data-leg="software"]:hover) .ab-arc-sw,
.ab-orbit:has([data-group="consultancy"] a:hover,[data-leg="consultancy"]:hover) .ab-arc-co{opacity:1;stroke-width:4.4;}
.ab-orbit:has([data-group="education"] a:hover) [data-leg="education"],
.ab-orbit:has([data-group="software"] a:hover) [data-leg="software"],
.ab-orbit:has([data-group="consultancy"] a:hover) [data-leg="consultancy"],
.ab-legend span:hover{color:var(--color-text);border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);background:var(--color-surface);}

@media (max-width:560px){
  .ab-mark img{height:7.2cqi;}
  .ab-mark.is-sq img{height:13.5cqi;}
  .ab-mark a{padding:1.6cqi 2.1cqi;}
  .ab-legend span{padding:.34rem .6rem;font-size:.7rem;}
}
@media (hover:none){ .ab-mark-tip{display:none;} }

/* entrance: rings draw, the core lands, the marks fly out from the centre */
html.m-on .ab-hero .ab-mark{--ab-in:0;opacity:0;scale:.6;
  transition:--ab-in 1.5s cubic-bezier(.16,1,.3,1),opacity .8s ease,scale 1.3s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.55s + var(--d) * .35s);}
html.m-on .ab-hero.is-in .ab-mark{--ab-in:1;opacity:1;scale:1;}
html.m-on .ab-hero .ab-arc{--ab-draw:1;transition:--ab-draw 1.8s cubic-bezier(.65,0,.35,1) .9s,stroke-width .35s ease,opacity .35s ease;}
html.m-on .ab-hero.is-in .ab-arc{--ab-draw:0;}
html.m-on .ab-hero .ab-rings,html.m-on .ab-hero .ab-core,html.m-on .ab-hero .ab-legend,html.m-on .ab-hero .ab-sat{opacity:0;scale:.9;
  transition:opacity 1s ease .25s,scale 1.4s cubic-bezier(.16,1,.3,1) .25s;}
html.m-on .ab-hero .ab-core{transition-delay:.4s;}
html.m-on .ab-hero .ab-legend{scale:1;transition-delay:1.6s;}
html.m-on .ab-hero .ab-sat{transition-delay:1.4s;}
html.m-on .ab-hero.is-in .ab-rings,html.m-on .ab-hero.is-in .ab-core,html.m-on .ab-hero.is-in .ab-legend,html.m-on .ab-hero.is-in .ab-sat{opacity:1;scale:1;}
/* safety net, as on the homepage: if motion.js never arrives, show everything */
html.m-on:not(.m-live) .ab-hero:not(.is-in) :is(.ab-mark,.ab-arc,.ab-rings,.ab-core,.ab-legend){animation:abSafe .01s 2.4s forwards;}
html.m-on:not(.m-live) .ab-hero:not(.is-in) .ab-sat{opacity:1;scale:1;}
@keyframes abSafe{to{--ab-in:1;--ab-draw:0;opacity:1;scale:1;}}

/* =====================================================================
   2. WHY WE EXIST — dark band, pinned, words light as you scroll
   ===================================================================== */
.ab-why{position:relative;isolation:isolate;color:#fff;
  /* --e: 1 = an inset rounded card, 0 = full width. It opens as the band
     arrives and closes a little as it leaves (only while pinned). */
  --e:max(clamp(0,calc(var(--p,0) / -.45),1),clamp(0,calc((var(--p,0) - .86) / .14),1));
  /* --q: how far the words have lit, 0 -> 1 (1 when not pinned) */
  --q:clamp(0,calc(var(--p,1) / .78),1);}
.ab-why::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 85% 10%,rgba(140,82,255,.30),transparent 62%),
    radial-gradient(50% 45% at 8% 90%,rgba(3,247,235,.16),transparent 60%),
    var(--color-band-deep);
  clip-path:inset(0 calc(var(--e) * 4vw) round calc(var(--e) * 40px));}
.ab-why-sticky{padding-block:clamp(var(--space-20),12vw,var(--space-32));}
.ab-why .eyebrow{color:var(--color-accent-bright);}
.ab-why-t{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;line-height:1.1;
  font-size:clamp(1.75rem,.95rem + 2.9vw,3.5rem);max-width:24ch;margin-top:var(--space-6);text-wrap:pretty;}
.ab-why-hl{background:linear-gradient(95deg,#5cfaf2,#b893ff);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
/* split into words: each word lights as the band is scrolled */
.ab-why-t.is-words .ab-why-hl{background:none;color:inherit;-webkit-text-fill-color:currentColor;}
.ab-why-t.is-words .ab-why-hl .sw{color:#5cfaf2;}
.ab-why-t.is-words .sw{opacity:clamp(.16,calc((var(--q) * (var(--n) + 6) - var(--i)) / 6),1);}
/* a progress hairline along the bottom of the pinned band */
.ab-why-sticky::after{content:none;}

@media (min-height:560px) and (prefers-reduced-motion:no-preference){
  html.m-live .ab-why{--pinned:1;height:240vh;}
  html.m-live .ab-why-sticky{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));
    display:flex;align-items:center;padding-block:var(--space-8);}
  html.m-live .ab-why-sticky > .container-wide{width:100%;}
  html.m-live .ab-why-sticky::after{content:"";position:absolute;left:50%;bottom:clamp(1.25rem,4vh,2.5rem);
    width:min(240px,40vw);height:2px;translate:-50% 0;border-radius:2px;
    background:linear-gradient(90deg,#03f7eb,#a97bff) left/calc(var(--q) * 100%) 100% no-repeat,rgba(255,255,255,.14);}
  /* the copy drifts up a touch as the band is scrolled */
  html.m-live .ab-why-t{translate:0 calc((.5 - clamp(0,var(--p,0),1)) * 3vh);}
}
@media (max-width:640px){ html.m-live .ab-why{height:210vh;} }

/* =====================================================================
   2b. VISION AND MISSION — the vision as one sentence, the mission as the
   three words of the tagline, each with its marks (29 September 2026)
   ===================================================================== */
.ab-vm{position:relative;overflow-x:clip;}
.ab-vm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(var(--space-10),6vw,var(--space-20));align-items:start;}
.ab-vm-vision{position:sticky;top:calc(var(--header-h) + var(--space-8));}
.ab-vm-h{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;line-height:1.08;text-wrap:pretty;
  font-size:clamp(1.9rem,1rem + 2.6vw,3.25rem);max-width:19ch;margin:var(--space-5) 0 0;}
.ab-vm-h .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;}
.ab-vm-sub{margin:var(--space-6) 0 0;color:var(--color-text-muted);font-size:var(--text-lg);max-width:46ch;}
/* the vision's own mark: three dots in the pillar colours, joined by a hairline */
.ab-vm-dots{display:inline-flex;align-items:center;gap:.55rem;margin-top:var(--space-7);}
.ab-vm-dots i{width:.7rem;height:.7rem;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);}
.ab-vm-dots i:nth-of-type(1){color:var(--color-primary);background:var(--color-primary);}
.ab-vm-dots i:nth-of-type(2){color:var(--color-indigo);background:var(--color-indigo);}
.ab-vm-dots i:nth-of-type(3){color:var(--color-teal);background:var(--color-teal);}
.ab-vm-dots s{width:2.4rem;height:1px;background:linear-gradient(90deg,var(--color-primary),var(--color-teal));text-decoration:none;opacity:.55;}
.ab-vm-lead{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.15rem,.95rem + .8vw,1.5rem);max-width:34ch;margin:var(--space-5) 0 var(--space-8);}
.ab-vm-lead b{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 three mission cards, on a rail that fills as you scroll */
.ab-vm-list{list-style:none;margin:0;padding:0 0 0 2.1rem;display:grid;gap:var(--space-5);position:relative;--p:0;}
.ab-vm-list::before{content:"";position:absolute;left:.55rem;top:1.4rem;bottom:1.4rem;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-indigo),var(--color-teal)) top/100% calc(var(--p) * 100%) no-repeat,
             color-mix(in srgb,var(--color-text) 12%,transparent);}
.ab-vm-card{position:relative;padding:var(--space-6) var(--space-6) var(--space-5);border-radius:1.35rem;
  background:var(--color-surface);border:1px solid var(--color-border);
  box-shadow:0 18px 44px color-mix(in srgb,var(--color-text) 7%,transparent);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-5);align-items:start;}
.ab-vm-card::before{content:"";position:absolute;left:calc(-2.1rem + .55rem + 1px - .38rem);top:1.55rem;width:.8rem;height:.8rem;border-radius:50%;
  background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);}
.ab-vm-card[data-pillar="innovate"]{--c:var(--color-primary);}
.ab-vm-card[data-pillar="educate"]{--c:var(--color-indigo);}
.ab-vm-card[data-pillar="transform"]{--c:var(--color-teal);}
.ab-vm-ico{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:1.05rem;color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 92%,#fff) 0%,var(--c) 60%,color-mix(in srgb,var(--c) 70%,#08162c) 100%);
  box-shadow:0 12px 26px color-mix(in srgb,var(--c) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.35);}
.ab-vm-ico [data-lucide]{width:1.55rem;height:1.55rem;}
.ab-vm-card h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.028em;line-height:1;
  font-size:clamp(1.55rem,1.2rem + 1vw,2.05rem);color:var(--c);margin:.35rem 0 .55rem;}
.ab-vm-card p{margin:0;color:var(--color-text-muted);max-width:44ch;}
.ab-vm-foot{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:var(--space-2);}
.ab-vm-foot .hm-kick-marks{--mh:24px;}
.ab-vm-foot .link-arrow{font-size:var(--text-sm);}
/* dark mode keeps the marks on a light plate (the marks are never restyled) */
[data-theme="dark"] .ab-vm-foot .hm-kick-marks{background:#fff;border-color:transparent;}
@media (max-width:900px){
  .ab-vm-grid{grid-template-columns:1fr;}
  .ab-vm-vision{position:static;}
  .ab-vm-h{max-width:none;}
}
@media (max-width:560px){
  .ab-vm-card{grid-template-columns:1fr;padding:var(--space-5);}
  .ab-vm-foot{grid-column:1;}
  .ab-vm-list{padding-left:1.6rem;}
  .ab-vm-card::before{left:calc(-1.6rem + .55rem + 1px - .38rem);}
}
/* the cards arrive one after another (studio reveal), the rail fills with --p from data-lineprog */
html.js .ab-vm-card.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 110ms),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 110ms),box-shadow .35s,border-color .35s;}
html.js .ab-vm-card.reveal.in{opacity:1;transform:none;}

/* =====================================================================
   3. THE FOUNDER
   ===================================================================== */
.ab-founder{overflow-x:clip;}
.ab-f-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center;}
.ab-f-portrait{position:relative;margin:0;
  /* --rv: the portrait opening, 0 -> 1 (1 without motion) */
  --rv:clamp(0,calc(var(--p,1) * 2.1),1);}
.ab-f-halo{position:absolute;inset:8% -6% -4% 6%;z-index:-1;border-radius:40px;pointer-events:none;
  background:linear-gradient(140deg,#8c52ff 0%,#3d53e0 45%,#03f7eb 100%);filter:blur(46px);
  opacity:calc(.18 + var(--rv) * .24);translate:0 calc((1 - var(--rv)) * 40px);}
.ab-f-frame{display:block;position:relative;overflow:hidden;border-radius:32px;aspect-ratio:1200/1383;
  background:#e9e7f3;box-shadow:0 40px 80px -30px rgba(40,20,110,.45),0 10px 24px rgba(18,18,40,.08);
  clip-path:inset(calc((1 - var(--rv)) * 16%) calc((1 - var(--rv)) * 10%) round 32px);}
.ab-f-frame img{width:100%;height:100%;object-fit:cover;display:block;
  scale:calc(1.1 + (1 - var(--rv)) * .12);filter:saturate(calc(.55 + var(--rv) * .45));}
.ab-f-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  background:linear-gradient(0deg,rgba(10,6,30,.28),transparent 32%);}
.ab-f-tag{position:absolute;left:clamp(-1.5rem,-2vw,-.75rem);bottom:9%;display:grid;gap:.15rem;
  padding:.85rem 1.15rem;border-radius:18px;
  background:color-mix(in srgb,var(--color-surface) 78%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);
  box-shadow:0 18px 40px -14px rgba(18,18,40,.3);
  opacity:clamp(0,calc(var(--rv) * 2 - 1),1);translate:calc((1 - var(--rv)) * -24px) 0;}
.ab-f-tag b{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);letter-spacing:-.01em;line-height:1.1;}
.ab-f-tag span{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);}

.ab-f-name{font-size:clamp(2.2rem,1.2rem + 3vw,4rem);letter-spacing:-.04em;line-height:1;margin:var(--space-4) 0 var(--space-3);}
.ab-f-role{font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:var(--space-8);}
.ab-f-bio{display:grid;gap:var(--space-4);max-width:62ch;}
.ab-f-bio p{color:var(--color-text-muted);}
.ab-f-bio p:first-child{color:var(--color-text);font-size:var(--text-lg);line-height:1.5;}
.ab-f-bio em{font-style:normal;font-weight:700;color:var(--color-text);}
.ab-f-creds{list-style:none;margin:var(--space-8) 0 0;padding:var(--space-6) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  border-top:1px solid var(--color-divider);}
.ab-f-creds li{display:flex;gap:.7rem;align-items:flex-start;}
.ab-f-creds b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);letter-spacing:-.01em;line-height:1.2;}
.ab-f-creds small{display:block;font-size:.76rem;line-height:1.35;color:var(--color-text-muted);margin-top:.2rem;}
.ab-cred-ico{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--color-primary),var(--color-indigo-bright));
  box-shadow:0 8px 18px color-mix(in srgb,var(--color-primary) 24%,transparent);}
.ab-f-creds li:nth-child(2) .ab-cred-ico{background:linear-gradient(140deg,var(--color-indigo),var(--color-teal));}
.ab-f-creds li:nth-child(3) .ab-cred-ico{background:linear-gradient(140deg,var(--color-teal),#08a7a0);}
.ab-cred-ico [data-lucide]{width:1.05rem;height:1.05rem;}
.ab-f-links{margin-top:var(--space-6);}

@media (max-width:1023px){
  .ab-f-grid{grid-template-columns:1fr;}
  .ab-f-portrait{max-width:460px;width:100%;margin-inline:auto;}
  .ab-f-tag{left:.9rem;}
}
@media (max-width:640px){
  .ab-f-creds{grid-template-columns:1fr;}
}

/* ---- selected publications ---- */
.ab-pubs{margin-top:clamp(var(--space-20),9vw,var(--space-32));}
.ab-pubs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding-bottom:var(--space-5);border-bottom:1px solid var(--color-divider);}
.ab-pubs-head h3{font-size:var(--text-xl);letter-spacing:-.025em;}
.ab-pub-list{list-style:none;margin:0;padding:0;}
.ab-pub{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr) 2.75rem;gap:var(--space-6);align-items:center;
  padding:var(--space-6) var(--space-4);border-bottom:1px solid var(--color-divider);isolation:isolate;}
.ab-pub::before{content:"";position:absolute;inset:4px 0;z-index:-1;border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface));opacity:0;scale:.985;
  transition:opacity .35s ease,scale .5s cubic-bezier(.16,1,.3,1);}
.ab-pub:hover::before,.ab-pub:focus-within::before{opacity:1;scale:1;}
.ab-pub-y{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1vw,2.1rem);letter-spacing:-.03em;line-height:1;
  color:color-mix(in srgb,var(--color-text) 26%,transparent);transition:color .35s ease;}
.ab-pub:hover .ab-pub-y,.ab-pub:focus-within .ab-pub-y{color:var(--color-primary);}
.ab-pub-b{display:grid;gap:.35rem;min-width:0;}
.ab-pub-t{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);letter-spacing:-.012em;line-height:1.3;color:var(--color-text);}
.ab-pub-t::after{content:"";position:absolute;inset:0;z-index:1;} /* the whole row opens the paper */
.ab-pub-t:focus-visible{outline:none;}
.ab-pub:has(.ab-pub-t:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xl);}
.ab-pub-a{font-size:var(--text-sm);color:var(--color-text-muted);}
.ab-pub-a b{color:var(--color-text);font-weight:700;}
.ab-pub-j{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;font-size:var(--text-xs);color:var(--color-text-muted);}
.ab-pub-j em{font-style:normal;font-weight:700;letter-spacing:.02em;padding:.22rem .6rem;border-radius:999px;
  background:var(--color-primary-soft);color:var(--color-primary);}
.ab-pub-go{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--color-divider);color:var(--color-text-muted);
  transition:background .35s ease,color .35s ease,border-color .35s ease,rotate .5s cubic-bezier(.16,1,.3,1);}
.ab-pub-go [data-lucide]{width:1.1rem;height:1.1rem;}
.ab-pub:hover .ab-pub-go,.ab-pub:focus-within .ab-pub-go{background:var(--color-primary);border-color:var(--color-primary);color:#fff;rotate:45deg;}
@media (max-width:640px){
  .ab-pub{grid-template-columns:minmax(0,1fr) 2.4rem;gap:var(--space-3) var(--space-4);padding:var(--space-5) var(--space-2);}
  .ab-pub-y{grid-column:1 / -1;font-size:1.15rem;}
  .ab-pub-go{width:2.4rem;height:2.4rem;align-self:start;}
}

/* =====================================================================
   4. HOW WE GOT HERE — four stations on a sideways track
   Phones, tablets and reduced motion: the track swipes (scroll-snap).
   Laptops and desktops with motion: the track pins and scroll moves it.
   ===================================================================== */
.ab-path{--gut:max(var(--space-6),calc((100vw - var(--content-wide)) / 2 + var(--space-6)));overflow-x:clip;padding-bottom:var(--space-16);}
.ab-path .sec-head{margin-bottom:var(--space-10);}
.ab-path .hm-hs-sticky{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  padding-bottom:var(--space-6);scrollbar-width:thin;}
.ab-path-track{list-style:none;margin:0;display:flex;gap:clamp(var(--space-5),2.4vw,var(--space-8));
  padding:var(--space-2) var(--gut);width:max-content;counter-reset:st;}
.ab-path-track:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
.ab-st{position:relative;flex:none;width:min(84vw,1000px);scroll-snap-align:start;counter-increment:st;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:stretch;
  border-radius:32px;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-divider);
  box-shadow:0 30px 60px -32px rgba(40,20,110,.28);}
/* a large numeral behind the words */
.ab-st::after{content:"0" counter(st);position:absolute;right:clamp(1rem,2vw,2rem);top:clamp(.25rem,1vw,1rem);z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(4.5rem,3rem + 5vw,9rem);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--color-primary) 22%,transparent);}
.ab-st-art{position:relative;overflow:hidden;background:#140B35;min-height:280px;}
.ab-st-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  scale:1.1;translate:calc((var(--p,.5) - .5) * 70px) 0;}
/* the site's own figures (drawn on their own dark ground) fill the panel */
.ab-st-fig{background:#0f0a2a;}
.ab-st-fig > img{scale:1.08;translate:calc((var(--p,.5) - .5) * 40px) 0;}
.ab-st-txt{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-3);
  padding:clamp(var(--space-6),3vw,var(--space-10));}
.ab-st-n{font-size:var(--text-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary);}
.ab-st-txt h3{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);letter-spacing:-.035em;line-height:1.02;}
.ab-st-txt p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6;}
.ab-st-txt p em{font-style:normal;font-weight:700;color:var(--color-text);}
.ab-st-txt .link-arrow{margin-top:var(--space-2);}
/* today: the six marks on light plates */
.ab-st-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;align-content:center;padding:clamp(1.25rem,3vw,2.5rem);
  background:radial-gradient(90% 80% at 20% 0%,rgba(140,82,255,.5),transparent 60%),radial-gradient(80% 70% at 100% 100%,rgba(3,247,235,.3),transparent 60%),#140B35;}
.ab-st-marks a{display:grid;place-items:center;height:clamp(64px,8vw,92px);padding:.6rem 1rem;border-radius:18px;background:#fff;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5);transition:translate .45s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;}
.ab-st-marks a:hover{translate:0 -4px;box-shadow:0 22px 40px -14px rgba(0,0,0,.6);}
.ab-st-marks img{height:clamp(26px,3.1vw,40px);width:auto;max-width:100%;object-fit:contain;}
.ab-st-marks a.is-sq img{height:clamp(46px,5.8vw,74px);}
@media (max-width:760px){
  .ab-st{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .ab-st-art{min-height:0;aspect-ratio:4/3;}
  .ab-st-marks{aspect-ratio:auto;}
  .ab-st-txt{justify-content:flex-start;}
}

@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  html.m-live .ab-path .hm-hs{--pinned:1;}
  html.m-live .ab-path .hm-hs-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
    overflow:hidden;scroll-snap-type:none;display:flex;flex-direction:column;justify-content:center;padding:0 0 3.5rem;}
  html.m-live .ab-path-track{will-change:transform;padding-block:0;}
  html.m-live .ab-st{height:min(calc(100vh - var(--header-h) - 8.5rem),560px);width:min(calc((100vh - var(--header-h) - 8.5rem) * 1.9),1000px,78vw);}
  /* the stations on a rail under the track */
  html.m-live .ab-path .hm-hs-sticky::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:1.6rem;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal)) left/calc(var(--p,0) * 100%) 100% no-repeat,
      var(--color-divider);}
}

/* =====================================================================
   5. HOW WE WORK — four commitments that stack as you scroll
   ===================================================================== */
.ab-stack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);}
.ab-card{--c1:var(--color-primary);--c2:var(--color-indigo-bright);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n ico" "b b";gap:var(--space-5) var(--space-6);align-items:start;
  padding:clamp(var(--space-6),3vw,var(--space-10));border-radius:28px;background:var(--color-surface);
  border:1px solid var(--color-divider);overflow:hidden;isolation:isolate;
  box-shadow:0 1px 2px rgba(18,18,40,.04),0 24px 50px -30px rgba(40,20,110,.3);}
.ab-card:nth-child(2){--c1:var(--color-indigo);--c2:var(--color-teal);}
.ab-card:nth-child(3){--c1:var(--color-teal);--c2:#08a7a0;}
.ab-card:nth-child(4){--c1:var(--color-magenta);--c2:var(--color-primary);}
.ab-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c1),var(--c2));}
.ab-card::after{content:"";position:absolute;right:-20%;top:-60%;width:70%;height:140%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c1) 12%,transparent),transparent 65%);}
.ab-card-n{grid-area:n;font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,1.6rem + 1.6vw,3.4rem);line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(160deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.ab-card-b{grid-area:b;}
.ab-card-b h3{font-size:var(--text-xl);letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-3);}
.ab-card-b p{color:var(--color-text-muted);max-width:52ch;}
.ab-card-ico{grid-area:ico;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:0 10px 22px -8px var(--c1);}
.ab-card-ico [data-lucide]{width:1.3rem;height:1.3rem;}
@media (max-width:760px){
  .ab-stack{grid-template-columns:1fr;}
  .ab-card-ico{width:42px;height:42px;}
}

/* laptops and desktops: the heading holds on the left while the cards
   slide up and stack on the right */
@media (min-width:1024px) and (min-height:700px){
  .ab-how > .container-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(var(--space-10),5vw,var(--space-20));align-items:start;}
  .ab-how .sec-head{position:sticky;top:calc(var(--header-h) + 5rem);margin-bottom:0;}
  .ab-stack{grid-template-columns:1fr;gap:0;}
  /* room for the finished stack to hold before it leaves */
  .ab-stack::after{content:"";display:block;height:16vh;}
  .ab-card{position:sticky;top:calc(var(--header-h) + 4rem + var(--i) * 1.5rem);min-height:15.5rem;margin-bottom:clamp(6rem,22vh,11rem);
    grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n b ico";align-items:center;}
  .ab-card:last-child{margin-bottom:0;}
  .ab-card-b p{font-size:var(--text-base);}
}

/* =====================================================================
   6. THE PEOPLE, AND WHERE WE ARE
   ===================================================================== */
.ab-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,.9fr)) minmax(0,1.2fr);gap:var(--space-5);align-items:stretch;}
.ab-person{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--color-surface);
  border:1px solid var(--color-divider);transition:translate .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;}
.ab-person:hover{translate:0 -4px;border-color:color-mix(in srgb,var(--color-primary) 26%,transparent);
  box-shadow:0 30px 60px -26px rgba(40,20,110,.35);}
.ab-person-ph{display:block;position:relative;overflow:hidden;aspect-ratio:1/1.02;background:#e9e7f3;}
.ab-person-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;
  transition:scale .9s cubic-bezier(.16,1,.3,1);}
.ab-person:hover .ab-person-ph img{scale:1.04;}
.ab-person-ini{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,2.5rem + 3vw,5.5rem);
  letter-spacing:-.04em;color:#fff;
  background:radial-gradient(80% 70% at 20% 10%,rgba(255,255,255,.18),transparent 60%),linear-gradient(140deg,#3d53e0,#6d3be8 50%,#0b767c);}
.ab-person-b{display:flex;flex-direction:column;gap:.35rem;padding:var(--space-6);flex:1;}
.ab-person-b h3{font-size:var(--text-lg);letter-spacing:-.02em;}
.ab-person-r{font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);}
.ab-person-b p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:.35rem;}
.ab-person-b .tutor-links{margin-top:auto;padding-top:var(--space-4);}

.ab-where{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;color:#fff;
  background:radial-gradient(70% 60% at 100% 0%,rgba(140,82,255,.32),transparent 60%),var(--color-band-deep);
  border:1px solid rgba(255,255,255,.06);}
.ab-where-map{position:relative;flex:1;min-height:220px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 52%,rgba(3,247,235,.14),transparent 42%),
    radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.4px) 0 0/16px 16px;
  mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);}
.ab-where-map::before,.ab-where-map::after{content:"";position:absolute;background:rgba(3,247,235,.28);}
.ab-where-map::before{left:0;right:0;top:52%;height:1px;}
.ab-where-map::after{top:0;bottom:0;left:50%;width:1px;}
.ab-dot{position:absolute;left:50%;top:52%;width:12px;height:12px;border-radius:50%;translate:-50% -50%;z-index:2;
  background:#03f7eb;box-shadow:0 0 0 4px rgba(3,247,235,.25),0 0 22px 6px rgba(3,247,235,.6);}
.ab-ping{position:absolute;left:50%;top:52%;width:34px;height:34px;border-radius:50%;translate:-50% -50%;
  border:1.5px solid rgba(3,247,235,.7);opacity:0;animation:abPing 3.6s cubic-bezier(.16,1,.3,1) infinite;}
.ab-ping-2{animation-delay:1.2s;}
.ab-ping-3{animation-delay:2.4s;}
@keyframes abPing{0%{opacity:.9;scale:.3;}100%{opacity:0;scale:6;}}
.ab-coord{position:absolute;left:calc(50% + 14px);top:calc(52% + 12px);z-index:2;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ab-where-b{padding:0 var(--space-6) var(--space-6);display:grid;gap:.5rem;}
.ab-where-b .eyebrow{color:var(--color-accent-bright);}
.ab-where-b h3{font-size:var(--text-lg);letter-spacing:-.02em;color:#fff;}
.ab-where-b address{font-style:normal;font-size:var(--text-sm);color:rgba(255,255,255,.7);line-height:1.5;}
.ab-where-l{list-style:none;margin:.6rem 0 0;padding:.9rem 0 0;display:grid;gap:.5rem;border-top:1px solid rgba(255,255,255,.1);}
.ab-where-l li{display:flex;align-items:center;gap:.6rem;font-size:var(--text-sm);color:rgba(255,255,255,.86);}
.ab-where-l [data-lucide]{width:1rem;height:1rem;flex:none;color:var(--color-accent-bright);}
.ab-where-l a{color:#fff;text-decoration:underline;text-decoration-color:rgba(3,247,235,.6);text-underline-offset:3px;}
.ab-where-l a:hover{color:var(--color-accent-bright);}
@media (max-width:1023px){
  .ab-people-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ab-where{grid-column:1 / -1;}
  .ab-where-map{min-height:180px;}
}
@media (max-width:600px){
  .ab-people-grid{grid-template-columns:1fr;}
}

/* =====================================================================
   Reduced motion: a still page
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ab-ring-1,.ab-sat,.ab-core::before,.ab-mark a,.ab-ping{animation:none;}
  .ab-sat{display:none;}
  .ab-ping{opacity:.35;scale:2;}
  .ab-ping-2{scale:3.4;opacity:.2;}
  .ab-ping-3{scale:4.8;opacity:.1;}
  .ab-st-art > img{translate:none;}
}
html.m-reduce .ab-mark,html.m-reduce .ab-core,html.m-reduce .ab-rings{translate:none;}