/* Fybr · About: told along the thread. Loads after base.css. */

.ab-hero{padding:calc(var(--header-h) + clamp(50px,8vw,110px)) 0 clamp(70px,9vw,120px);background:radial-gradient(90% 80% at 75% 40%,#0F151C 0%,var(--deep) 65%)}
.ab-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.ab-hero h1{font-size:clamp(3rem,6vw,5.8rem);line-height:.98;letter-spacing:-.035em;margin:22px 0 24px}
.ab-hero .deck{font-size:clamp(1.05rem,1.3vw,1.2rem);color:#D6DEE7;max-width:32rem;margin-bottom:26px;line-height:1.55}
/* the accountable person, named up front (the fuller founder section follows later) */
.ab-hero__founder{display:flex;align-items:center;gap:14px;max-width:32rem;margin:0 0 28px;color:var(--ink-mid);font-size:.92rem;line-height:1.4}
.ab-hero__founder img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid var(--line)}
.ab-hero__founder b{display:block;font-weight:500;color:var(--ink)}
.ab-hero__founder:hover b{color:var(--brass)}
.ab-strands{position:relative;height:min(46vw,440px)}
.ab-strands canvas{position:absolute;inset:0;width:100%;height:100%}
.ab-strands__labels{list-style:none;margin:0;padding:0}
.ab-strands__labels li{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
.ab-strands.is-live .ab-strands__labels li{position:absolute;left:0;top:0;white-space:nowrap;color:var(--ink)}
.ab-strands:not(.is-live){height:auto}
.ab-strands:not(.is-live) .ab-strands__labels{display:flex;flex-wrap:wrap;gap:10px 18px}
.ab-strands:not(.is-live) canvas{display:none}

/* experience: four chapters on one thread */
.ab-exp{padding:clamp(90px,10vw,150px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.ab-exp__head{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,70px);margin-bottom:clamp(50px,6vw,90px)}
.ab-exp__head h2{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1;letter-spacing:-.03em;margin-bottom:20px}
.ab-exp__head p:not(.eyebrow){color:var(--ink-mid);max-width:36rem;line-height:1.6}
.ab-chapters{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,70px) clamp(40px,6vw,110px)}
.ab-chapter{position:relative;padding-left:34px}
.ab-chapter::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:#1A222B;border:1px solid rgba(234,240,246,.22);transition:background-color .6s var(--ease-out),border-color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ab-chapter::after{content:"";position:absolute;left:6px;top:22px;bottom:-10px;width:1px;background:linear-gradient(180deg,rgba(95,168,184,.5),rgba(232,184,115,.25));transform-origin:50% 0;transform:scaleY(0);transition:transform 1.1s var(--ease-out) .15s}
.ab-chapter.is-lit::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 12px rgba(95,168,184,.55)}
.ab-chapter:nth-child(3).is-lit::before{background:#C9B584;border-color:#C9B584;box-shadow:0 0 12px rgba(201,181,132,.55)}
.ab-chapter:nth-child(4).is-lit::before{background:var(--brass);border-color:var(--brass);box-shadow:0 0 12px rgba(232,184,115,.55)}
.ab-chapter.is-lit::after{transform:scaleY(1)}
.ab-chapter__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.ab-chapter h3{font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.1;margin-bottom:12px}
.ab-chapter p:last-child{color:var(--ink-mid);line-height:1.65;max-width:34rem}

/* the gap, bridged */
.ab-gap{padding:clamp(90px,10vw,150px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.ab-gap__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.ab-gap h2{font-size:clamp(2.3rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em;margin:20px 0 34px}
.ab-gap__copy p{color:var(--ink-mid);max-width:36rem;line-height:1.7;margin-bottom:20px}
.ab-gap__copy p:first-child{color:var(--ink);font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.4}
.ab-bridge{width:min(340px,100%);height:auto;overflow:visible}
.ab-bridge__gap{fill:none;stroke:rgba(234,240,246,.2);stroke-width:1.5;stroke-dasharray:3 6}
.ab-bridge__fibre{fill:none;stroke:url(#bridge-g);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.ab-bridge__node{fill:var(--teal)}.ab-bridge__node--b{fill:var(--brass)}
.ab-bridge__owner{fill:#fff;opacity:0;transition:opacity .6s var(--ease-out) 1.4s}
.ab-bridge.is-lit .ab-bridge__fibre{stroke-dashoffset:0}
.ab-bridge.is-lit .ab-bridge__owner{opacity:1}
.no-js .ab-bridge__fibre{stroke-dashoffset:0}.no-js .ab-bridge__owner{opacity:1}

/* the founder */
.ab-founder{padding:clamp(90px,10vw,150px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.ab-founder__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center}
.ab-founder__portrait{margin:0;position:relative}
.ab-founder__portrait img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line-soft);filter:saturate(.9)}
.ab-founder__portrait figcaption{margin-top:14px;font-family:var(--serif);font-size:1.15rem}
.ab-founder__portrait figcaption span{display:block;margin-top:4px;font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mid)}
.ab-founder h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.03em;margin:18px 0 22px}
.ab-founder p:not(.eyebrow){color:var(--ink-mid);max-width:36rem;line-height:1.7;margin-bottom:18px}

/* how we work */
.ab-how{padding:clamp(80px,9vw,140px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.ab-how__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:start}
.ab-how h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.03em;margin:18px 0 20px}
.ab-how p:not(.eyebrow){color:var(--ink-mid);max-width:32rem;line-height:1.6}

@media (max-width:1080px){
  .ab-hero__grid,.ab-exp__head,.ab-gap__grid,.ab-founder__grid,.ab-how__grid{grid-template-columns:1fr}
  .ab-strands{height:min(70vw,360px);order:-1}
}
@media (max-width:760px){
  .ab-hero h1{font-size:clamp(2.8rem,12.5vw,4rem)}
  .ab-chapters{grid-template-columns:1fr}
  .ab-strands__labels li{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .ab-chapter::before,.ab-chapter::after,.ab-bridge__fibre,.ab-bridge__owner{transition:none}
  .ab-chapter::after{transform:none}.ab-chapter::before{background:var(--teal);border-color:var(--teal)}
  .ab-bridge__fibre{stroke-dashoffset:0}.ab-bridge__owner{opacity:1}
}