/* ══════════════════════════════════════════════════════════════════════
   WebSpace — About page (about.html)
   Structure after fraxbit.com/about: hero (three-line headline, one button, three stats), four principles,
   the crew (a placeholder until the co-founder cards are designed).
   The hero, nav, buttons, "Ready for launch?" ending and Earth footer are shared (style.css).
   ══════════════════════════════════════════════════════════════════════ */

/* the headline has three lines here (two on the other inner pages), so it is set a step smaller to keep
   the button and the stats on the first screen */
.ph-h1.ab-h1{font-size:min(clamp(46px,.8rem + 7.4vw,148px),14svh)}
.ab-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,40px)}
@media (max-width:520px){.ab-hero-btns .btn{width:100%;justify-content:space-between}}

/* four principles — the header's right corner: one line of text, then an index of the four principles by name
   (number + name in the same cyan caps as the card labels), each a link that jumps to its card */
.ab-head-side{max-width:44ch}
.ab-index{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);gap:14px clamp(28px,3vw,48px);margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line-dark-strong)}
.ab-index a{display:flex;align-items:baseline;font:600 15px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  transition:color .25s var(--ease)}
.ab-index a span{flex:none;width:2.2em;color:#0E8F97;font-variant-numeric:tabular-nums}
.ab-index a:hover{color:#0E8F97}

/* the cards: the site's own card (the same as .sv-card on services.html), two per row.
   Number + label on top, big title, one line, pill tags pinned to the bottom;
   on hover a navy panel rises from the bottom and the type turns white. */
.ab-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.ab-cell{display:flex;scroll-margin-top:110px}          /* carries the scroll reveal */
.ab-card{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;
  min-height:clamp(360px,29vw,440px);padding:clamp(26px,2.6vw,40px);border-radius:22px;color:var(--navy);
  background:#F4F6F8;box-shadow:inset 0 0 0 1px var(--line-dark);
  transition:color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ab-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(90% 60% at 85% 0%,rgba(30,193,203,.16),rgba(30,193,203,0) 70%),var(--ink);
  clip-path:inset(100% 0 0 0 round 22px);transition:clip-path .7s var(--ease-out)}
.ab-card:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
.ab-card:hover::before{clip-path:inset(0 0 0 0 round 22px)}
.ab-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
/* the number and the label are one size and one colour (the darker cyan that reads on the light card);
   both turn bright cyan when the navy panel is up */
.ab-num,.ab-label{font:600 15px/1 var(--font);letter-spacing:.18em;color:#0E8F97;transition:color .6s var(--ease-out)}
.ab-label{text-transform:uppercase}
.ab-card:hover .ab-num,.ab-card:hover .ab-label{color:var(--cyan)}
.ab-card h3{margin-top:clamp(48px,5.5vw,88px);font:500 clamp(34px,3.6vw,60px)/1 var(--font);letter-spacing:-.05em}
.ab-sub{margin-top:16px;max-width:40ch;font-size:16px;line-height:1.5;opacity:.65}
.ab-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:auto;padding-top:26px}
.ab-tags li{font:500 12.5px/1 var(--font);border-radius:999px;padding:8px 13px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent)}
@media (max-width:700px){.ab-grid{grid-template-columns:1fr}.ab-card{min-height:0}.ab-tags{margin-top:26px;padding-top:0}}

/* ── the crew: two badges on lanyards, side by side (about.js → [data-lanyard]) ──
   The canvas draws the strap, buckle and ring; the card is HTML moved and turned by the script.
   Sizes come from the script as --ly-w / --ly-h / --ly-ring / --ly-clip. The faces are a placeholder design. */
/* the header keeps well clear of the rail below it */
.ab-crew-head{margin-bottom:clamp(64px,8vw,120px)}
.ab-crew-head .lede{font-size:clamp(17px,1.6vw,22px);line-height:1.5;max-width:34ch}
/* a swinging card may cross out of its own half (the stage does not crop it); the section crops it instead */
#crew{padding-bottom:clamp(40px,5vw,80px);overflow:clip}
.ab-crew{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,460px));justify-content:center;
  column-gap:clamp(0px,12vw,260px);margin-top:clamp(20px,3vw,40px)}   /* the gap grows with the screen, so the pair keeps its proportion */
/* the handrail the badges hang from: the user's own render, cut into two small pictures.
   rail-tube.jpg is an 8px-wide slice of the plain tube, repeated wall to wall (past the page margins, to the edges
   of the section); rail-mount.jpg is the round wall mount, placed three times on top of it. Both are 240px tall in
   the file with the tube across the middle, so they line up; their wall colour is faded out at the edges so only
   the metal shows. The straps are drawn over the front of the tube and stop at its top edge, with the tube's
   roundness shaded onto them (about.js), so each lanyard reads as looped over the rail; the cards pass in front of both. --rail is the height of the whole strip; the tube is 29% of it. */
.ab-rail{--rail:68px;position:absolute;z-index:1;top:calc(2px - var(--rail) / 2);height:var(--rail);
  left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);pointer-events:none}
.ab-rail::after{content:"";position:absolute;inset:0;background:url(../img/rail-tube.jpg) repeat-x 0 0 / auto 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 34%,#000 66%,transparent 80%);
  mask-image:linear-gradient(180deg,transparent 22%,#000 34%,#000 66%,transparent 80%)}
.ab-rail i{position:absolute;z-index:1;top:0;width:var(--rail);height:var(--rail);margin-left:calc(var(--rail) / -2);
  background:url(../img/rail-mount.jpg) center / 100% 100% no-repeat;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 80%,transparent 100%)}
.ab-rail i:nth-child(1){left:max(40px,5%)}
.ab-rail i:nth-child(2){left:50%}
.ab-rail i:nth-child(3){left:min(calc(100% - 40px),95%)}
@media (max-width:700px){.ab-rail{--rail:50px}.ab-rail i:nth-child(1){left:30px}.ab-rail i:nth-child(3){left:calc(100% - 30px)}}
.ly{--ly-w:300px;--ly-h:450px;--ly-ring:11px;--ly-clip:30px;position:relative;width:100%;height:760px;user-select:none;-webkit-user-select:none}
/* the canvas is above the rail (z-index 2) and the script stretches it a little above the stage, so the straps
   are drawn coming down over the front of the tube; the cards are above both */
.ly canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none}
.ly-card{position:absolute;left:0;top:0;width:var(--ly-w);height:calc(var(--ly-h) + var(--ly-ring) + var(--ly-clip));
  z-index:3;transform-origin:50% 0;cursor:grab;touch-action:none;will-change:transform;opacity:0;transition:opacity .4s var(--ease)}
.ly.is-ready .ly-card{opacity:1}
.ly-card:focus-visible{outline:none}
.ly-card:focus-visible .ly-face{outline:2px solid var(--aurora);outline-offset:4px}
/* the clip: hooks the ring, bites the card */
.ly-clip{position:absolute;left:50%;top:0;z-index:2;width:calc(var(--ly-w) * .075);height:calc(var(--ly-clip) + var(--ly-w) * .05);
  transform:translateX(-50%);border-radius:calc(var(--ly-w) * .02);background:linear-gradient(90deg,#fff,#9aa3ad 50%,#e8ecf0);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ly-inner{position:absolute;left:0;right:0;top:calc(var(--ly-ring) + var(--ly-clip) * .6);height:var(--ly-h);transform-style:preserve-3d}
.ly-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--ly-w) * .15) calc(var(--ly-w) * .09) calc(var(--ly-w) * .08);
  border-radius:calc(var(--ly-w) * .06);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25)}
.ly-back{transform:rotateY(180deg)}
/* the passport photo: fills the top of the card edge to edge and fades into the card at its foot;
   the label, name and role sit under it */
.ly-photo{position:absolute;left:0;top:0;width:100%;height:60%;max-width:none;object-fit:cover;object-position:50% 22%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
/* both portraits share one framing (Levon's was made by editing Eduard's), so they use the same rule */
.has-photo .ly-kicker{margin-top:auto;position:relative}
.has-photo .ly-name{margin-top:calc(var(--ly-w) * .045);position:relative}
.has-photo .ly-foot{margin-top:calc(var(--ly-w) * .055);padding-top:calc(var(--ly-w) * .04);position:relative;justify-content:center;text-align:center}   /* the role line is centred under its rule */
/* two card colours, set on the stage: .ly-light = white metal (navy type), .ly-dark = navy (white type). Both faces follow. */
.ly-light .ly-face{background:linear-gradient(160deg,#ffffff 0%,#eef1f4 55%,#cfd6dd 100%);color:var(--navy)}
/* the navy card hangs on a navy wall, so it gets a cyan light from its top corner and a cyan bar along its foot (a cyan rim was tried and removed) */
.ly-dark .ly-face{color:var(--white);box-shadow:inset 0 0 0 1px var(--line-strong),0 22px 44px -12px rgba(0,0,0,.7);
  background:radial-gradient(110% 70% at 85% 0%,rgba(30,193,203,.34),rgba(30,193,203,0) 70%),linear-gradient(180deg,#151520,#0b0b12)}
.ly-dark .ly-foot{border-top:2px solid var(--cyan);opacity:1}
.ly-kicker{font:600 calc(var(--ly-w) * .042)/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#0E8F97}
.ly-dark .ly-kicker{color:var(--cyan)}
.ly-mark{margin-top:auto;font:800 calc(var(--ly-w) * .2)/.9 var(--font);letter-spacing:-.03em}
.ly-mark i{display:block;font-style:normal}
.ly-mark i:last-child{color:#0E8F97}
.ly-dark .ly-mark i:last-child{color:var(--cyan)}
.ly-name{margin-top:auto;font:600 calc(var(--ly-w) * .105)/1.05 var(--font);letter-spacing:-.04em}
.ly-foot{display:flex;justify-content:space-between;gap:10px;margin-top:calc(var(--ly-w) * .08);padding-top:calc(var(--ly-w) * .05);
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font:600 calc(var(--ly-w) * .0375)/1.5 var(--font);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
/* the punched slot under the clip, and the light that slides across the card as it turns */
.ly-slot{position:absolute;top:calc(var(--ly-w) * .05);left:50%;width:calc(var(--ly-w) * .2);height:calc(var(--ly-w) * .035);transform:translateX(-50%);
  border-radius:999px;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ly-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%) var(--ly-shine,50%) 0 / 250% 100% no-repeat,rgba(0,0,0,var(--ly-dim,0))}
/* "Show back / Show front" */
.ly-flip{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  font:500 13px/1 var(--font);color:var(--cloud);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background .25s var(--ease)}
.ly-flip:hover{background:rgba(255,255,255,.1)}
.ly-flip svg{transition:transform .5s var(--ease)}
.ly-flip[aria-pressed="true"] svg{transform:scaleX(-1)}
/* phones: still side by side; the cards shrink to fit their half (about.js) and the stage gets shorter */
@media (max-width:700px){.ab-crew{column-gap:0}.ly{height:430px}.ly-flip{padding:9px 12px;font-size:12px;gap:6px}}