/* =====================================================================================================
   Meterknot About v0.7 (2026-10-04, MTKN-MC · Website Main Builder): the page's own CSS, built to Sotiris's rulings of 2026-10-04
   (06:26) on the About proposal. The seven inner-page rules (ruled 2026-10-03), the inner-page kit v1.4. One lime moment per view:
   the hero's owner point, the light's rest on an eyebrow diamond, the decision in 02 ("Decision-led reporting." and its diamond).
   Scoped under the section ids.
   ===================================================================================================== */

/* ---------- the kit: the travelling light and the intro's pre-state ---------- */
#sys-light{position:fixed;top:0;left:0;width:130px;height:130px;margin:-65px 0 0 -65px;z-index:40;pointer-events:none;opacity:0;will-change:transform}
#sys-light .lw,#sys-light .ll{position:absolute;inset:0;border-radius:50%;transition:opacity .8s var(--ease)}
#sys-light .lw{background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,rgba(233,240,246,0.28) 14%,rgba(183,197,208,0.1) 34%,rgba(183,197,208,0.03) 58%,rgba(183,197,208,0) 85%);filter:blur(3px)}
#sys-light .ll{background:radial-gradient(circle,rgba(226,246,190,0.9) 0%,rgba(163,217,78,0.32) 13%,rgba(163,217,78,0.1) 33%,rgba(163,217,78,0.03) 56%,rgba(163,217,78,0) 82%);filter:blur(3px);opacity:0}
#sys-light.rest .lw{opacity:0}
#sys-light.rest .ll{opacity:1}
@media (max-width:900px){ #sys-light{display:none} }
.mk-pre #ahero .ah-grid > *{opacity:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.eyed.lit.mute{transform:rotate(45deg);border-color:var(--blue-100);background:transparent;opacity:0.75;box-shadow:none}
.eyed.lit.mute::after{display:none}

/* labels placed on an object (HTML, positioned in % of the object's box, so they keep their size whatever its scale) */
.ab-lab{position:absolute;white-space:nowrap;font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.2;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-2);pointer-events:none;transition:color .45s var(--ease),opacity .45s var(--ease)}@media (min-width:2561px){.ab-lab{font-size:max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px))}}
.ab-lab.on{color:#fff}

/* ---------- rhythm ---------- */
#ahero .wrap,#awork .wrap,#abehave .wrap,#ateam .wrap,#afounder .wrap,#anext .wrap{max-width:none}
#awork,#abehave,#ateam,#afounder{padding:clamp(100px,13vh,180px) 0}
#awork{padding-bottom:clamp(170px,24vh,260px)} /* the light's runway from the rhythm's end to the 02 eyebrow */
#awork .eyebrow,#abehave .eyebrow,#ateam .eyebrow,#afounder .eyebrow{margin:0}
#awork h2.stmt,#abehave h2.stmt,#ateam h2.stmt,#afounder h2.stmt{margin-top:clamp(18px,2vw,30px);font-size:clamp(40px,6vw,190px);line-height:1.02;letter-spacing:-0.03em}
/* the founder's name and title each keep to one line across the page */
#afounder h2.af-h2{font-size:clamp(40px,5.85vw,180px);letter-spacing:-0.035em}
@media (max-width:959px){ #ateam .at-br{display:none} }
.body{font-size:clamp(18px,1.4vw,24px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){.body{font-size:max(clamp(18px,1.4vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}

/* ---------- A1 · hero: the H1 across, the paragraph left, the tie right at the hero's height ---------- */
#ahero{--h1:clamp(52px,min(9.6vw,15.5vh),240px);--objtop:calc(clamp(120px,15vh,180px) + 26px + clamp(18px,2.2vw,32px) + var(--h1) * 0.97 + 8px);min-height:100vh;min-height:100svh;padding:clamp(120px,15vh,180px) 0 clamp(50px,7vh,90px)}
#ahero .ah-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);column-gap:clamp(40px,5vw,120px);align-items:start}
#ahero .ah-eb{grid-column:1 / -1;grid-row:1}
#ahero h1.ah-h1{grid-column:1 / -1;grid-row:2;margin-top:clamp(18px,2.2vw,32px);font-size:var(--h1);line-height:0.97;letter-spacing:-0.035em;font-weight:700;color:#fff;max-width:9.6em} /* always "One accountable / team.": the tie sits beside the second line */
#ahero .ah-dek{grid-column:1;grid-row:3;margin-top:clamp(24px,3.4vh,44px);max-width:58ch;font-size:clamp(18px,1.36vw,24px);line-height:1.6;color:var(--blue-100);font-weight:300}@media (min-width:2561px){#ahero .ah-dek{font-size:max(clamp(18px,1.36vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
/* the tie starts beside the H1's second line ("team." leaves the right of that line empty) and runs to the right gutter */
#ahero .ah-obj{grid-column:2;grid-row:2 / span 2;align-self:start;margin-top:calc(clamp(18px,2.2vw,32px) + var(--h1) * 0.97 + 8px);margin-right:calc(26px - var(--pad));display:flex;justify-content:flex-end}
.ab-tie{position:relative;width:min(100%,calc((100svh - var(--objtop) - 36px) * 1.4286));aspect-ratio:800/560;container-type:inline-size}
.ab-tie .tie-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-tie .ab-lab{font-size: max(12px, clamp(12.5px,1.95cqi,15.5px));letter-spacing:0.12em}@media (min-width:2561px){.ab-tie .ab-lab{font-size: max(12px, max(clamp(12.5px,1.95cqi,15.5px), min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px)))}}
.ab-tie-p{display:none}
.tie-str{fill:none;stroke:var(--blue-100);stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(183,197,208,0.35))}
.tie-str[data-k="0"]{stroke-width:2.1;opacity:0.7}
.tie-str[data-k="1"]{stroke-width:2.9;opacity:0.88}
.tie-str[data-k="2"]{stroke-width:2.3;opacity:0.76}
.tie-str[data-k="3"]{stroke-width:3.4;opacity:0.92}
.tie-str[data-k="4"]{stroke-width:2.5;opacity:0.8}
.tie-sdot{fill:var(--blue-100);r:4.5px}
.tie-own{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:var(--od,0);filter:drop-shadow(0 0 8px rgba(255,255,255,0.4))}
.tie-tick line{stroke:#fff;stroke-width:2.2}
.tie-lead{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,0.9))}
.tie-node{fill:var(--lime);stroke:var(--lime);stroke-width:1}
.tie-halo{fill:rgba(163,217,78,0.06);stroke:rgba(163,217,78,0.6);stroke-width:1.6}
.tie-knot{filter:drop-shadow(0 0 14px rgba(163,217,78,0.6))}
.tie-sl{transform:translateY(-100%);color:var(--blue-100)}
.tie-slb{transform:none}
.tie-ol{color:#fff;transition:none} /* its opacity is set by the intro, frame by frame */
.tie-oa{transform:translate(0,calc(-100% - 16px))}
.tie-ob{transform:translate(0,16px)}
.tie-oa.tie-xc{transform:translate(-50%,calc(-100% - 16px))}
.tie-ob.tie-xc{transform:translate(-50%,16px)}
.tie-ob.tie-xr{transform:translate(-100%,16px)}
.tie-op{transform:translateY(-50%)}
.ab-tie.pre .tie-ol,.ab-tie.pre .tie-tick{opacity:0}
.ab-tie.pre .tie-knot{opacity:0}

/* ---------- 01 · how we work: the heading left, the paragraph right; the rhythm across the page ---------- */
#awork .aw-head{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,120px);align-items:start}
#awork .aw-copy{padding-top:calc(clamp(18px,2vw,30px) + 0.6vw)}
#awork .aw-p{max-width:56ch}
#awork .aw-link{margin-top:clamp(18px,2.4vh,28px)}
#awork .aw-track{position:relative;margin-top:clamp(48px,8vh,110px);padding:0 var(--pad);overflow:hidden}
.ab-rh{position:relative;width:100%;aspect-ratio:1400/300}
.ab-rh .rh-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-rh-p{display:none}
.rh-ghost{fill:none;stroke:rgba(183,197,208,0.16);stroke-width:1.2}
.rh-path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3))}
.rh-tail{fill:none;stroke:rgba(255,255,255,0.55);stroke-width:1.4;stroke-dasharray:4 6;opacity:var(--to,1)}
.rh-guide{fill:none;stroke:rgba(183,197,208,0.18);stroke-width:1;stroke-dasharray:3 7}
.rh-ap line{stroke:var(--blue-300);stroke-width:1.6;transition:stroke .4s var(--ease)}
.rh-ap.on line{stroke:#fff}
.rh-start rect,.rh-end rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1.4;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.rh-start.on rect,.rh-end.on rect{fill:#fff;stroke:#fff}
.rh-l{transform:translateY(0)}
.rh-l1{transform:translateX(-100%)}

/* ---------- 02 · how we behave: the heading held left, the ledger on its spine right ---------- */
#abehave .ab-grid{display:grid;grid-template-columns:minmax(0,0.5fr) minmax(0,0.55fr);column-gap:clamp(40px,5vw,120px);align-items:start}
#abehave .ab-head{position:sticky;top:clamp(110px,16vh,170px)}
.ab-lg{--spx:118px;--rail:150px;position:relative;margin-top:clamp(210px,27vh,260px)} /* the ledger starts beside the heading's last line: an offset split, and the light's runway from the eyebrow to the spine */
.ab-lg .lg-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline-2)}
.ab-lg .lg-row{position:relative;border-bottom:1px solid var(--hairline-2);padding:clamp(26px,3.6vh,40px) 0 clamp(26px,3.6vh,40px) var(--rail)}
.ab-lg .lg-in{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;align-items:baseline}
.ab-lg .lg-ix{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--meta-3)}@media (min-width:2561px){.ab-lg .lg-ix{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.ab-lg .lg-t{margin:0;font-size:clamp(21px,1.75vw,30px);font-weight:600;line-height:1.2;letter-spacing:-0.01em;color:var(--blue-100);transition:color .5s var(--ease)}@media (min-width:2561px){.ab-lg .lg-t{font-size:max(clamp(21px,1.75vw,30px), min(calc(30.00px + (100vw - 2560px) * 0.00234), 33.00px))}}
.ab-lg .lg-p{grid-column:2;margin-top:12px;max-width:52ch;font-size:clamp(16.5px,1.2vw,20px);line-height:1.6;color:var(--meta-2);transition:color .5s var(--ease)}@media (min-width:2561px){.ab-lg .lg-p{font-size:max(clamp(16.5px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
.ab-lg .lg-link{grid-column:2;margin-top:16px;justify-self:start}
.ab-lg .lg-row.on .lg-t{color:#fff}
.ab-lg .lg-row.on .lg-p{color:var(--blue-100)}
.ab-lg .lg-dec.lime .lg-tt{color:var(--lime)}
/* the spine: from the first node to the decision; the client's lane beside it from row 01 */
.ab-lg .lg-line{position:absolute;left:var(--spx);top:var(--l0,40px);height:var(--lh,100px);width:1px;margin-left:-0.5px;background:var(--rule)}
.ab-lg .lg-fill{position:absolute;inset:0;background:#fff;box-shadow:0 0 8px rgba(255,255,255,0.45);transform-origin:top center;transform:scaleY(var(--lp,1))}
.ab-lg .lg-lane{position:absolute;left:calc(var(--spx) + 11px);top:var(--l0,40px);height:var(--lh,100px);width:0;border-left:1px dashed rgba(183,197,208,0.28)}
.ab-lg .lg-lfill{position:absolute;left:-1px;top:0;width:1px;height:100%;background:repeating-linear-gradient(180deg,rgba(255,255,255,0.75) 0 4px,transparent 4px 8px);transform-origin:top center;transform:scaleY(var(--lp,1))}
.ab-lg .lg-head{position:absolute;left:var(--spx);top:var(--l0,40px);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,0.85);transform:translateY(calc(var(--lp,1) * var(--lh,100px)));opacity:var(--lho,0)}
.ab-lg .lg-sp{position:absolute;left:var(--spx);top:var(--ny,48px);width:0;height:0}
.ab-lg .lg-d{position:absolute;left:-6.5px;top:-6.5px;width:13px;height:13px;transform:rotate(45deg);border:1px solid var(--blue-300);background:var(--blue-900);transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.ab-lg .lg-row.on .lg-d{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,0.5)}
.ab-lg .lg-dec .lg-d{width:17px;height:17px;left:-8.5px;top:-8.5px}
.ab-lg .lg-dec.lime .lg-d{background:var(--lime);border-color:var(--lime);box-shadow:0 0 16px rgba(163,217,78,0.7),0 0 46px rgba(163,217,78,0.3)}
/* marks on the spine (labels to its left) */
.ab-lg .lg-mk{position:absolute;left:0;top:0;width:var(--rail);height:100%;pointer-events:none}
.ab-lg .lg-ml{position:absolute;right:calc(var(--rail) - var(--spx) + 24px);top:0;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--meta-3);transition:color .45s var(--ease),opacity .45s var(--ease)}@media (min-width:2561px){.ab-lg .lg-ml{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.ab-lg .lg-mk.on .lg-ml,.ab-lg .lg-gate.on .lg-ml{color:#fff}
.ab-lg .lg-lanein i{position:absolute;left:var(--spx);top:var(--ny,48px);width:11px;height:1px;background:rgba(183,197,208,0.45)}
.ab-lg .lg-base > i{position:absolute;left:calc(var(--spx) - 12px);top:16px;width:24px;height:1px;background:var(--blue-300);transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.ab-lg .lg-base .lg-ml{top:16px}
.ab-lg .lg-base.on > i{background:#fff;box-shadow:0 0 8px rgba(255,255,255,0.6)}
.ab-lg .lg-gate{position:absolute;left:0;top:var(--gy,50%);width:100%;height:0}
.ab-lg .lg-gate > i{position:absolute;left:calc(var(--spx) - 9px);top:-0.5px;width:18px;height:1px;background:var(--blue-300);transition:background .45s var(--ease)}
.ab-lg .lg-gate > b{position:absolute;left:calc(var(--spx) - 17px);top:0;width:16px;height:1px;background:rgba(183,197,208,0.5);transform-origin:right center;transform:rotate(-35deg) scaleX(var(--gx,1));transition:background .45s var(--ease)}
.ab-lg .lg-gate .lg-ml{right:calc(var(--rail) - var(--spx) + 24px)}
.ab-lg .lg-gate.on > i{background:#fff}
.ab-lg .lg-gate.on > b{background:rgba(255,255,255,0.75)}
.ab-lg .lg-gate[data-g="0"]{--gy:28%}
.ab-lg .lg-gate[data-g="1"]{--gy:52%}
.ab-lg .lg-gate[data-g="2"]{--gy:76%}
.ab-lg.pre .lg-ml{opacity:0.35}

/* ---------- 03 · the team: the scene held in place from 960 px ---------- */
#ateam .at-track{position:relative;margin-top:clamp(40px,6vh,80px)}
#ateam .at-track.pin .at-stick{position:sticky}
#ateam .at-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr);column-gap:clamp(40px,4vw,96px);align-items:center}
#ateam .at-p{max-width:40ch}
.ab-tm{position:relative;width:min(100%,calc((100svh - 164px) * 1.4286));aspect-ratio:800/560;container-type:inline-size}
.ab-tm .tm-l{font-size:clamp(13px,1.56cqi,15px)}@media (min-width:2561px){.ab-tm .tm-l{font-size:max(clamp(13px,1.56cqi,15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
.ab-tm .tm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-tm-p{display:none}
.tm-gov{fill:none;stroke:rgba(255,255,255,0.7);stroke-width:1;stroke-dasharray:var(--gd,1) 1;vector-effect:non-scaling-stroke}
.tm-arc{fill:none;stroke:rgba(183,197,208,0.35);stroke-width:1.2;stroke-dasharray:var(--ad,1) 1}
.tm-wsg{fill:none;stroke:rgba(183,197,208,0.1);stroke-width:1.2}
.tm-ws{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:var(--wd,1) 1;filter:drop-shadow(0 0 4px rgba(255,255,255,0.35))}
.tm-wsd{fill:var(--blue-300);transition:fill .4s var(--ease)}
.tm-wsd.on{fill:#fff}
.tm-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1.3;transition:fill .45s var(--ease),stroke .45s var(--ease)}
.tm-node.on rect{fill:#fff;stroke:#fff}
.tm-ok circle{fill:none;stroke:#fff;stroke-width:1.3;stroke-dasharray:var(--kd,1) 1}
.tm-cr{fill:rgba(0,22,39,0.6);stroke:#fff;stroke-width:1.6;stroke-dasharray:var(--cd,1) 1}
.tm-cc{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,0.7));opacity:var(--co,1)}
.tm-l{color:var(--meta-2)}
.tm-lcore{transform:translate(-50%,0)}
.tm-lbench{transform:translate(-100%,-50%)}
.tm-lgov{transform:none}
.tm-lp{transform:translateY(-50%);font-family:var(--sans);font-size:clamp(13.5px,1.95cqi,18px);font-weight:500;letter-spacing:0;text-transform:none;color:var(--meta-3)}@media (min-width:2561px){.tm-lp{font-size:max(clamp(13.5px,1.95cqi,18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
.tm-lp.on{color:#fff}
.tm-lw{transform:translateY(-100%);font-family:var(--sans);font-size:clamp(13px,1.85cqi,17.5px);font-weight:500;letter-spacing:0;text-transform:none;color:var(--meta-3)}@media (min-width:2561px){.tm-lw{font-size:max(clamp(13px,1.85cqi,17.5px), min(calc(17.50px + (100vw - 2560px) * 0.00342), 21.88px))}}
.tm-lw.on{color:#fff}
.tm-lwb{transform:none}
.ab-tm .tm-lacc{transform:translateY(-50%);font-size:clamp(12px,1.4cqi,13.5px);letter-spacing:0.1em}@media (min-width:2561px){.ab-tm .tm-lacc{font-size:max(clamp(12px,1.4cqi,13.5px), min(calc(13.50px + (100vw - 2560px) * 0.00264), 16.88px))}}

/* ---------- 04 · the founder: the photograph left, the name, quote, bio and practice line right ---------- */
#afounder .af-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,120px);align-items:center;margin-top:clamp(40px,6vh,72px)}
#afounder .af-ph{position:relative;align-self:start}
#afounder .af-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:brightness(var(--pb,1)) saturate(var(--ps,1)) contrast(var(--pc,1));transform:scale(var(--pz,1));transform-origin:50% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 76%,transparent 100%);mask-composite:intersect}
#afounder .af-h2{max-width:none}
#afounder .af-q{margin:0;padding:0}
#afounder .af-q p{font-size:clamp(22px,1.9vw,34px);font-weight:500;line-height:1.35;letter-spacing:-0.01em;color:#fff;max-width:30ch}@media (min-width:2561px){#afounder .af-q p{font-size:max(clamp(22px,1.9vw,34px), min(calc(34.00px + (100vw - 2560px) * 0.00266), 37.40px))}}
#afounder .af-bio{margin-top:clamp(20px,2.8vh,32px);max-width:58ch;font-size:clamp(16.5px,1.2vw,20px)}@media (min-width:2561px){#afounder .af-bio{font-size:max(clamp(16.5px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
#afounder .af-link{margin-top:clamp(26px,3.4vh,40px)}
#afounder .af-link .tlink{font-size:clamp(16px,1.15vw,19px)}@media (min-width:2561px){#afounder .af-link .tlink{font-size:max(clamp(16px,1.15vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
/* the practice line: the bio's own words in three rows, lit as the line reaches them, ending at Meterknot */
.ab-pr{position:relative;margin-top:clamp(28px,4vh,48px);padding-left:34px}
.ab-pr .pr-line{position:absolute;left:5px;top:10px;bottom:12px;width:1px;background:var(--rule)}
.ab-pr .pr-fill{position:absolute;inset:0;background:#fff;box-shadow:0 0 8px rgba(255,255,255,0.45);transform-origin:top center;transform:scaleY(var(--rp,1))}
.ab-pr .pr-head{position:absolute;left:5px;top:10px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,0.85);transform:translateY(var(--rh,0px));opacity:var(--rho,0)}
.ab-pr .pr-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ab-pr .pr-row{position:relative;display:flex;flex-wrap:wrap;column-gap:16px;row-gap:4px}
.ab-pr .pr-row::before{content:"";position:absolute;left:-33px;top:10px;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--blue-300);background:var(--blue-900);transition:background .4s var(--ease),border-color .4s var(--ease)}
.ab-pr .pr-row.on::before{background:#fff;border-color:#fff}
.ab-pr .pr-w{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;line-height:1.8;color:var(--meta-2);transition:color .45s var(--ease)}@media (min-width:2561px){.ab-pr .pr-w{font-size:max(14px, min(calc(14.00px + (100vw - 2560px) * 0.00273), 17.50px))}}
.ab-pr .pr-w i{display:none}
.ab-pr .pr-w:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.55;margin-left:16px}
.ab-pr .pr-row.on .pr-w{color:#fff}
.ab-pr .pr-end{position:relative;margin-top:16px;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;line-height:1.8;color:var(--meta-3);transition:color .45s var(--ease)}@media (min-width:2561px){.ab-pr .pr-end{font-size:max(14px, min(calc(14.00px + (100vw - 2560px) * 0.00273), 17.50px))}}
.ab-pr .pr-end i{position:absolute;left:-34px;top:7px;width:11px;height:11px;transform:rotate(45deg);border:1px solid var(--blue-300);background:var(--blue-900);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.ab-pr .pr-end.on{color:#fff}
.ab-pr .pr-end.on i{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,0.6)}

/* ---------- 05 · next step: the held statement left; the ring and the button right ---------- */
#anext .moment{--hold:70vh}
#anext .an-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(max-content,0.62fr);column-gap:clamp(40px,5vw,120px);align-items:center}
#anext .an-fit{margin-top:clamp(18px,2.4vh,30px);font-size:clamp(17px,1.25vw,21px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){#anext .an-fit{font-size:max(clamp(17px,1.25vw,21px), min(calc(21.00px + (100vw - 2560px) * 0.00164), 23.10px))}}
#anext .an-fit a{color:#fff;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--rule);transition:border-color .3s var(--ease)}
#anext .an-fit a:hover{border-color:#fff}
#anext .an-fit .arr{font-family:var(--mono);font-size:13px;margin-left:4px}@media (min-width:2561px){#anext .an-fit .arr{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
#anext h2.stmt.mstmt{margin-top:clamp(20px,2.6vh,36px);font-size:clamp(44px,6.2vw,190px);line-height:1;letter-spacing:-0.035em;font-weight:700}
#anext .an-right{display:flex;flex-direction:column;align-items:flex-start}
#anext .an-ctas{margin-top:clamp(22px,3.4vh,40px)}
#anext .talk{font-size:15px;color:var(--meta-2);margin-top:18px;padding-left:21px;line-height:1.5;max-width:34ch}@media (min-width:2561px){#anext .talk{font-size:max(15px, min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
#anext .talk a{color:#fff;font-weight:500;border-bottom:1px solid var(--rule)}
#anext .talk a:hover{border-color:#fff}
#anext{padding-bottom:clamp(60px,9vh,120px)}
.ab-ring{width:min(100%,clamp(280px,min(22vw,34vh),340px))}
.ab-ring .rg-box{position:relative;aspect-ratio:1/1}
.ab-ring .rg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-ring .rg-base{fill:none;stroke:rgba(183,197,208,0.22);stroke-width:1.6}
.ab-ring .rg-arc{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:1 1;stroke-dashoffset:var(--ro,0);opacity:0.9}
.ab-ring .rg-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:2;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.ab-ring .rg-node.on rect{fill:#fff;stroke:#fff}
.ab-ring .rg-hand{transform-origin:240px 240px;transform:rotate(var(--rr,0deg))}
.ab-ring .rg-hand line{stroke:rgba(255,255,255,0.5);stroke-width:2}
.ab-ring .rg-hand circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,0.8))}
.ab-ring .rg-l{font-size:12px;letter-spacing:0.12em}@media (min-width:2561px){.ab-ring .rg-l{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.ab-ring .rg-l0,.ab-ring .rg-l2{transform:translate(-50%,-50%)}
.ab-ring .rg-l1{transform:translate(-100%,-50%)}
.ab-ring .rg-l3{transform:translate(0,-50%)}
.ab-ring .rg-cap{margin-top:14px;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.ab-ring .rg-cap{font-size:max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px))}}

#awork a,#abehave a,#afounder a,#anext a{scroll-margin-block:22vh}

#abehave a:focus-visible,#anext a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* short laptops (under 700 px tall): the tie is sized by the window's width and may run a little past the fold */
@media (min-width:901px) and (max-height:700px){
  #ahero .ah-grid{grid-template-columns:minmax(0,1fr) 40vw}
  .ab-tie-d{width:min(100%,40vw,calc((100svh - var(--objtop) - 4px) * 1.4286))} /* all five labels inside the first screen */
  #ahero .ah-dek{margin-top:16px}
}

/* ---------- large screens ---------- */
@media (min-width:1441px){
  .ab-lab{font-size:max(12.5px, min(calc(8.2px + 0.29vw), 15px))}@media (min-width:2561px){.ab-lab{font-size:max(max(12.5px, min(calc(8.2px + 0.29vw), 15px)), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
  .ab-pr .pr-w,.ab-pr .pr-end{font-size:max(14px, min(calc(9.4px + 0.32vw), 16px))}@media (min-width:2561px){.ab-pr .pr-w,.ab-pr .pr-end{font-size:max(max(14px, min(calc(9.4px + 0.32vw), 16px)), min(calc(16.00px + (100vw - 2560px) * 0.00313), 20.00px))}}
}

/* ---------- narrow desktops and tablets ---------- */
@media (max-width:1199px){
  #ahero .ah-grid{grid-template-columns:minmax(0,0.78fr) minmax(0,1fr)}
  #ateam .at-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,0.5fr)}
  #anext .an-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vh,48px)}
  #anext .an-right{flex-direction:row;align-items:center;column-gap:clamp(32px,5vw,64px)}
  #anext .an-ctas{margin-top:0}
  #anext .ab-ring{width:clamp(200px,24vw,260px)}
  .ab-lg{--spx:104px;--rail:132px}
}
@media (max-width:959px){
  #abehave .ab-grid{grid-template-columns:minmax(0,1fr)}
  #abehave .ab-head{position:static;margin-bottom:36px}
  .ab-lg{margin-top:0}
  #ateam .at-grid{grid-template-columns:minmax(0,1fr);row-gap:36px}
  #afounder .af-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  #afounder .af-ph{max-width:520px}
  #awork .aw-head{grid-template-columns:minmax(0,1fr);row-gap:24px}
}

/* ---------- phones ---------- */
@media (max-width:900px){
  #awork,#abehave,#ateam,#afounder{padding:clamp(56px,10vw,80px) 0}
  #awork{padding-bottom:clamp(56px,10vw,80px)}
  #ahero{--h1:clamp(44px,13vw,72px);min-height:0;padding:clamp(110px,26vw,140px) 0 48px}
  #ahero .ah-grid{grid-template-columns:minmax(0,1fr)}
  #ahero .ah-dek{grid-column:1;grid-row:4;font-size:17px;margin-top:28px}
  #ahero .ah-obj{grid-column:1;grid-row:3;margin:30px 0 0 0;justify-content:flex-start}
  .ab-tie-d{display:none}
  .ab-tie-p{display:block;width:min(100%,360px);aspect-ratio:340/380}
  .ab-tie .ab-lab{font-size:12px;letter-spacing:0.1em}
  #awork h2.stmt,#abehave h2.stmt,#ateam h2.stmt,#afounder h2.stmt{font-size:clamp(34px,10vw,56px)}
  .body{font-size:17px}
  #awork .aw-track{margin-top:36px}
  .ab-rh-d{display:none}
  .ab-rh-p{display:block;aspect-ratio:360/300}
  .ab-rh .ab-lab{font-size:12px;letter-spacing:0.1em}
  /* the ledger: the spine at the left edge; the marks under their row's text */
  .ab-lg{--spx:12px;--rail:40px}
  .ab-lg .lg-in{grid-template-columns:34px minmax(0,1fr)}
  .ab-lg .lg-t{font-size:20px}
  .ab-lg .lg-p{font-size:16.5px}
  .ab-lg .lg-mk{position:static;width:auto;height:auto;display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0 42px}
  .ab-lg .lg-row{display:flex;flex-direction:column}
  .ab-lg .lg-row .lg-in{order:1}
  .ab-lg .lg-row .lg-mk{order:2}
  .ab-lg .lg-lanein{display:none}
  .ab-lg .lg-ml{position:static;transform:none;font-size:12px;letter-spacing:0.1em}
  .ab-lg .lg-base > i,.ab-lg .lg-gate > i{position:static;display:inline-block;width:12px;margin-right:8px;vertical-align:middle}
  .ab-lg .lg-gate > b{display:none}
  .ab-lg .lg-gate{position:static;width:auto;height:auto;display:inline-flex;align-items:center}
  .ab-lg .lg-base{display:inline-flex;align-items:center}
  /* the team: the bench as a list on phones */
  .ab-tm{display:none}
  .ab-tm-p{display:block}
  #ateam .at-p{max-width:none}
  #afounder .af-ph{max-width:none;margin:0 calc(var(--pad) * -1)}
  #afounder .af-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 72%,transparent 100%)}
  #afounder .af-grid{margin-top:28px}
  #afounder .af-q p{font-size:22px}
  #afounder .af-bio{font-size:16.5px}
  .ab-pr .pr-w,.ab-pr .pr-end{font-size:12.5px;letter-spacing:0.08em}
  #anext h2.stmt.mstmt{font-size:clamp(40px,11.5vw,88px)}
  #anext .an-right{flex-direction:column;align-items:flex-start}
  #anext .an-ctas{margin-top:28px}
  #anext .ab-ring{width:min(100%,300px)}
}
/* the team list (phones) */
.ab-tm-p .tp-core{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#fff}@media (min-width:2561px){.ab-tm-p .tp-core{font-size:max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px))}}
.ab-tm-p .tp-core i{width:22px;height:22px;border-radius:50%;border:1.5px solid #fff;position:relative}
.ab-tm-p .tp-core i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.ab-tm-p .tp-bench{margin-top:22px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.ab-tm-p .tp-bench{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.ab-tm-p .tp-rows{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hairline)}
.ab-tm-p .tp-row{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:10px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.ab-tm-p .tp-d{width:11px;height:11px;transform:rotate(45deg);border:1px solid var(--blue-300);background:var(--blue-900);transition:background .4s var(--ease),border-color .4s var(--ease)}
.ab-tm-p .tp-nm{font-size:16.5px;font-weight:500;color:var(--meta-2);transition:color .4s var(--ease)}@media (min-width:2561px){.ab-tm-p .tp-nm{font-size:max(16.5px, min(calc(16.50px + (100vw - 2560px) * 0.00322), 20.62px))}}
.ab-tm-p .tp-ws{grid-column:2;margin-top:4px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#fff;opacity:0;transform:translateX(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}@media (min-width:2561px){.ab-tm-p .tp-ws{font-size: max(12px, max(11.5px, min(calc(11.50px + (100vw - 2560px) * 0.00225), 14.38px)))}}
.ab-tm-p .tp-row.on .tp-d{background:#fff;border-color:#fff}
.ab-tm-p .tp-row.on .tp-nm{color:#fff}
.ab-tm-p .tp-row.on .tp-ws{opacity:1;transform:none}
.ab-tm-p .tp-gov{margin-top:18px;padding:12px 14px;border:1px solid rgba(255,255,255,0.0);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-2);transition:border-color .6s var(--ease),color .6s var(--ease)}@media (min-width:2561px){.ab-tm-p .tp-gov{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.ab-tm-p.done .tp-gov{border-color:rgba(255,255,255,0.7);color:#fff}
@media (prefers-reduced-motion: reduce){
  .ab-tm-p .tp-ws{opacity:1;transform:none}
}

/* (2026-10-09, A6): running text on phones at 16 px or more */
@media (max-width:900px){#anext .talk{font-size:16px}}

/* v0.10 (Sotiris 2026-10-10, screen 2): the rhythm's end in lime once drawn (one lime moment in the view) */
.rh-end.lime rect{fill:var(--lime);stroke:var(--lime);stroke-width:4;stroke-linejoin:miter;filter:drop-shadow(0 0 8px rgba(163,217,78,0.75)) drop-shadow(0 0 22px rgba(163,217,78,0.3))}

/* B8 (2026-10-10, ruled "option A 10%"): from 2560 px wide, text under 16 px 10% larger; each line repeats a rule above with its own context */
@media (min-width:2560px){.ab-tie .ab-lab{font-size:calc(max(12px, clamp(12.5px,1.95cqi,15.5px)) * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tie .ab-lab{font-size:calc(max(12px, max(clamp(12.5px,1.95cqi,15.5px), min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px))) * 1.1)}}}
@media (min-width:2560px){.ab-lg .lg-ix{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-lg .lg-ix{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}
@media (min-width:2560px){.ab-lg .lg-ml{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-lg .lg-ml{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){.ab-tm .tm-l{font-size:calc(clamp(13px,1.56cqi,15px) * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm .tm-l{font-size:calc(max(clamp(13px,1.56cqi,15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}
@media (min-width:2560px){.ab-tm .tm-lacc{font-size:calc(clamp(12px,1.4cqi,13.5px) * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm .tm-lacc{font-size:calc(max(clamp(12px,1.4cqi,13.5px), min(calc(13.50px + (100vw - 2560px) * 0.00264), 16.88px)) * 1.1)}}}
@media (min-width:2560px){#anext .talk{font-size:calc(15px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#anext .talk{font-size:calc(max(15px, min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}
@media (min-width:2560px){.ab-ring .rg-l{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-ring .rg-l{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){.ab-ring .rg-cap{font-size:calc(12.5px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-ring .rg-cap{font-size:calc(max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px)) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){.ab-lab{font-size:calc(max(12.5px, min(calc(8.2px + 0.29vw), 15px)) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){.ab-lab{font-size:calc(max(max(12.5px, min(calc(8.2px + 0.29vw), 15px)), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){.ab-tm-p .tp-core{font-size:calc(12.5px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm-p .tp-core{font-size:calc(max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px)) * 1.1)}}}
@media (min-width:2560px){.ab-tm-p .tp-bench{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm-p .tp-bench{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){.ab-tm-p .tp-ws{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm-p .tp-ws{font-size:calc(max(12px, max(11.5px, min(calc(11.50px + (100vw - 2560px) * 0.00225), 14.38px))) * 1.1)}}}
@media (min-width:2560px){.ab-tm-p .tp-gov{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.ab-tm-p .tp-gov{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}