/* =========================================================
   CIAO Travels · About (about.html) — "Albo N°01: le origini"
   One issue of a comic: cover → origin strip → secret identity →
   vision/mission → crew → trust → letters → HQ → shared finale.
   v2: one big Captain (cover, captain-hero), one cameo (the founder
   slider), the shared finale; openers rotate (caption box · none ·
   departure board · side label · caption box · none · photo).
   v3: straight diagonal cape (A23), HQ photo = the crew on the yellow
   sofa (office-lounge.jpg is contact's), finale board BENVENUTI · VRN.
   Every selector is scoped with .p-about / .ab-*.
   ========================================================= */
.p-about{--g:24px;--bd:4px;--ink-dots:radial-gradient(rgba(11,11,12,.2) 1.5px,transparent 1.8px)}
@media (max-width:640px){.p-about{--g:16px;--bd:3px}}
/* focus rings: ink on the yellow cover and on the cream comic page, yellow inside the black panel */
.p-about .ab-hero :focus-visible,.p-about .ab-strip :focus-visible{outline-color:var(--ink)}
.p-about .ab-strip .ab-p--5 :focus-visible{outline-color:var(--y)}

/* comic SFX lettering (panels 02 and 04 only) */
.p-about .ab-sfx{position:absolute;z-index:4;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(1.5rem,2.4vw,2.3rem);color:var(--y);-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;
  text-shadow:.07em .07em 0 var(--ink);pointer-events:none;user-select:none;white-space:nowrap}

/* =========================================================
   1 · HERO — the comic cover (captain-hero stands on the frame)
   ========================================================= */
.p-about .ab-hero{position:relative;background:var(--y);padding:calc(var(--hdr) + 10px) 0 clamp(40px,4vw,64px);overflow-x:clip}
.p-about .ab-cover{--padb:clamp(30px,3.4vw,52px);position:relative;isolation:isolate;display:flex;flex-direction:column;
  min-height:clamp(600px,calc(100svh - var(--hdr) - 44px),880px);
  border:var(--bd) solid var(--ink);border-radius:22px;box-shadow:12px 12px 0 var(--ink)}
.p-about .ab-cover__bg{position:absolute;inset:0;z-index:-1;border-radius:18px;overflow:hidden;
  background:radial-gradient(60% 75% at 72% 52%,#FFE08C 0%,rgba(255,224,140,0) 62%),radial-gradient(60% 70% at 0% 100%,#F0A00E 0%,rgba(240,160,14,0) 70%),var(--y)}
.p-about .ab-cover__dots{position:absolute;inset:0;background-image:var(--ink-dots);background-size:13px 13px;
  -webkit-mask-image:radial-gradient(90% 80% at 0% 100%,#000 0%,rgba(0,0,0,.4) 40%,transparent 70%);mask-image:radial-gradient(90% 80% at 0% 100%,#000 0%,rgba(0,0,0,.4) 40%,transparent 70%)}

.p-about .ab-cover__bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px clamp(16px,2.4vw,28px);background:var(--ink);color:var(--white);border-radius:17px 17px 0 0;
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.p-about .ab-cover__brand{display:inline-flex;align-items:center;gap:12px;color:var(--mist)}
.p-about .ab-cover__logo{display:block;width:74px;color:var(--y)}
.p-about .ab-cover__logo svg{display:block;width:100%;height:auto}
.p-about .ab-cover__issue{display:inline-flex;align-items:center;gap:10px;color:var(--white)}
.p-about .ab-cover__no{background:var(--y);color:var(--ink);padding:.45em .6em;border-radius:6px;letter-spacing:.06em}

.p-about .ab-cover__grid{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:12px;
  padding:clamp(22px,3vw,44px) clamp(22px,3.4vw,56px) var(--padb)}
.p-about .ab-cover__copy{position:relative;z-index:3;container-type:inline-size;min-width:0}

/* title: per-line slot reveal (never fade black type over yellow) */
.p-about .ab-title{margin:0;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.84;font-size:19cqi;color:var(--ink)}
.p-about .ab-title__l{display:block;width:max-content;max-width:none;clip-path:inset(-40% -8% -16% -8%)}
.p-about .ab-title__i{display:block;transition:transform 1.1s var(--ease)}
.p-about .ab-title__l--pre{font-size:.3em;letter-spacing:-.01em;line-height:1;margin:0 0 .5em .1em;clip-path:inset(-60% -20% -60% -12%)}
.p-about .ab-title__l--pre .ab-title__i{background:var(--white);border:3px solid var(--ink);padding:.18em .45em .14em;border-radius:6px;box-shadow:4px 4px 0 var(--ink);rotate:-2deg}
.p-about .ab-title__l--logo{margin-top:.02em}
.p-about .ab-title__l--logo .ab-title__i{color:var(--white);-webkit-text-stroke:.045em var(--ink);paint-order:stroke fill;text-shadow:.055em .055em 0 var(--ink);padding-right:.08em}
.js .p-about .ab-cover:not(.is-go) .ab-title__i{transform:translateY(130%)}
.p-about .ab-cover.is-go .ab-title__l:nth-child(2) .ab-title__i{transition-delay:.08s}
.p-about .ab-cover.is-go .ab-title__l:nth-child(3) .ab-title__i{transition-delay:.17s}
.p-about .ab-in{transition:transform .9s var(--ease),clip-path .9s var(--ease);clip-path:inset(-14px -14px -24px -14px)}
.js .p-about .ab-cover:not(.is-go) .ab-in{transform:translateY(22px);clip-path:inset(-14px -14px 100% -14px)}
.p-about .ab-cover.is-go .ab-cover__lead{transition-delay:.32s}
.p-about .ab-cover.is-go .ab-cover__cta{transition-delay:.44s}

.p-about .ab-cover__lead{max-width:44ch;margin-top:clamp(18px,2.2vw,28px);color:var(--y-ink);font-weight:500;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.55}
.p-about .ab-cover__lead b{color:var(--ink);font-weight:800}
.p-about .ab-cover__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
.p-about .ab-cover__cta .btn--ink{box-shadow:5px 5px 0 rgba(11,11,12,.25)}

/* art column: the Captain, his bubble and a paper burst share one box sized to the pose (964×1400), so the bubble
   always sits beside his face; the boots break the bottom of the frame and the box never grows wider than the column.
   Layers are placed with left/right/top, never `translate` (the pointer parallax writes it) */
.p-about .ab-cover__art{position:relative;align-self:stretch;min-height:440px;z-index:2;container-type:inline-size}
.p-about .ab-cover__fig{position:absolute;right:6%;bottom:calc(-1 * var(--padb) - var(--bd) - 14px);height:min(calc(100% + var(--padb) + 30px),134cqi);aspect-ratio:964/1400}
.p-about .ab-cover__fig>*{max-width:none}
.p-about .ab-burst{position:absolute;left:-14%;top:-8%;width:128%;height:auto;fill:var(--paper);stroke:var(--ink);stroke-width:4;stroke-linejoin:round;overflow:visible}
.p-about .ab-cover__cap{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 22px 26px rgba(74,51,0,.32))}
.p-about .ab-cover__bubble{position:absolute;right:70%;top:3%;width:max-content;max-width:248px;rotate:-3deg;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .js .p-about .ab-cover:not(.is-go) .ab-cover__cap{opacity:0}
  .p-about .ab-cover.is-go .ab-cover__cap{animation:abCapIn 1s var(--ease-back) .15s both}
  .js .p-about .ab-cover:not(.is-go) .ab-cover__bubble{transform:scale(0)}
  .p-about .ab-cover__bubble{transform-origin:90% 115%;transition:transform .6s var(--ease-back) .85s,translate .5s var(--ease)}
  .js .p-about .ab-cover:not(.is-go) .ab-burst{transform:scale(.4) rotate(-30deg);opacity:0}
  .p-about .ab-burst{transform-origin:50% 50%;transition:transform 1s var(--ease-back) .05s,opacity .4s,translate .5s var(--ease)}
}
@keyframes abCapIn{from{transform:translateY(18%) scale(.9);opacity:0}to{transform:none;opacity:1}}
.p-about [data-depth]{transition:translate .5s var(--ease)}

.p-about .ab-cape{color:var(--y);background:var(--paper);position:relative;z-index:1}

/* =========================================================
   2 · ORIGIN STRIP — a comic page (opener: caption box)
   ========================================================= */
.p-about .ab-strip{background:var(--paper);padding-top:clamp(56px,6vw,96px);overflow-x:clip}
.p-about .ab-strip::before{content:"";position:absolute;inset:0;background-image:var(--ink-dots);background-size:16px 16px;opacity:.35;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 30%,transparent 70%,#000);mask-image:linear-gradient(180deg,#000,transparent 30%,transparent 70%,#000)}
.p-about .ab-strip .wrap{position:relative}
.p-about .ab-page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.p-about .ab-p{position:relative;isolation:isolate;min-width:0;border:var(--bd) solid var(--ink);border-radius:8px;background:var(--white);box-shadow:8px 8px 0 var(--ink)}
.p-about .ab-p--1{grid-column:1/span 7;min-height:540px}
.p-about .ab-p--2{grid-column:8/span 5;min-height:540px;background:var(--ink)}
.p-about .ab-p--3{grid-column:1/span 5;min-height:480px;background:var(--y)}
.p-about .ab-p--4{grid-column:6/span 7;min-height:480px}
.p-about .ab-p--5{grid-column:1/-1}
.p-about .ab-p__art{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:4px}
.p-about .ab-p__art>img{width:100%;height:100%;object-fit:cover}
.p-about .ab-p__art::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--ink-dots);background-size:9px 9px;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(200deg,transparent 40%,#000);mask-image:linear-gradient(200deg,transparent 40%,#000)}

/* chapter tag (h3) + narration caption */
.p-about .ab-tag{position:absolute;z-index:5;top:calc(var(--bd) * -1);left:calc(var(--bd) * -1);margin:0;display:inline-flex;align-items:center;gap:.7em;
  background:var(--ink);color:var(--y);padding:.62em 1.05em .62em .7em;border-radius:8px 0 14px 0;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;line-height:1}
.p-about .ab-tag b{background:var(--y);color:var(--ink);padding:.35em .5em;border-radius:4px;letter-spacing:.04em}
.p-about .ab-cap{position:absolute;z-index:4;margin:0;background:var(--y);color:var(--ink);border:3px solid var(--ink);border-radius:3px;padding:12px 16px;
  font-weight:600;font-size:.94rem;line-height:1.42;max-width:min(370px,calc(100% - 32px));box-shadow:4px 4px 0 var(--ink)}
.p-about .ab-cap b{font-weight:800}
.p-about .ab-cap--b{left:16px;bottom:16px}

/* reveal: a paper "page" wipes off each panel (a covering layer, not clip-path on the
   panel: a clipped ancestor stops Chrome's lazy-image loader), then SFX / captions land */
@media (prefers-reduced-motion:no-preference){
  .js .p-about .ab-p::after{content:"";position:absolute;inset:-6px -14px -14px -6px;z-index:30;background:var(--paper);transform-origin:100% 50%;transition:transform .95s var(--ease);pointer-events:none}
  .js .p-about .ab-p--5::after{inset:0}
  .js .p-about .ab-p.is-in::after{transform:scaleX(0)}
  .js .p-about .ab-p--5:not(.is-in){box-shadow:none}
  .js .p-about .ab-p--5{transition:box-shadow .3s .7s}
  .js .p-about .ab-p .ab-sfx{transform:scale(0);transition:transform .55s var(--ease-back)}
  .js .p-about .ab-p.is-in .ab-sfx{transform:none;transition-delay:.8s}
  .js .p-about .ab-p .ab-cap{transform:translateY(16px);opacity:0;transition:transform .6s var(--ease),opacity .4s}
  .js .p-about .ab-p.is-in .ab-cap{transform:none;opacity:1;transition-delay:.55s}
}

/* P1 · mother nation: Sigiriya, zoomed so both "CIAO Sri Lanka" marks (top-right, low-left) stay off the panel */
.p-about .ab-p--1 .ab-p__art>img{object-position:28% 40%;transform:scale(1.6);transform-origin:24% 30%}

/* P2 · between two worlds (14+ years) */
.p-about .ab-fly{background:radial-gradient(80% 70% at 50% 60%,#2A2112 0%,var(--ink) 70%);color:var(--white)}
.p-about .ab-fly::after{background-image:radial-gradient(rgba(253,182,28,.28) 1.4px,transparent 1.7px);mix-blend-mode:normal;-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.p-about .ab-fly__svg{position:absolute;left:4%;right:4%;top:24%;width:92%;height:auto;overflow:visible}
.p-about .ab-fly__arc{fill:none;stroke:var(--y);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round}
.p-about .ab-fly__dot{fill:var(--y)}
.p-about .ab-fly__ring{fill:none;stroke:var(--y);stroke-width:2;opacity:.45}
.p-about .ab-fly__plane{fill:var(--white)}
.p-about .ab-fly__c{fill:var(--y);font:900 26px var(--f);letter-spacing:-.5px}
.p-about .ab-fly__s{fill:var(--mist);font:700 12px var(--f);letter-spacing:2px;text-transform:uppercase}
.p-about .ab-fly__n{position:absolute;right:22px;top:16px;margin:0;display:flex;align-items:baseline;gap:6px;font-weight:900;line-height:.8;letter-spacing:-.05em;color:var(--y);font-size:clamp(3.4rem,5.6vw,5.4rem)}
.p-about .ab-fly__n small{font-size:.22em;letter-spacing:.12em;text-transform:uppercase;color:var(--white);font-weight:800}
.p-about .ab-sfx--2{left:20px;top:31%;rotate:-10deg;font-size:clamp(1.3rem,2vw,1.9rem)}
/* narrow panel (phones, 2-up tablets, long EN chapter tag): drop the "14+" below the tag instead of under it */
.p-about .ab-p--2{container-type:inline-size}
@container (max-width:480px){.p-about .ab-fly__n{top:52px;right:18px}}

/* P3 · training: power cards (the founder's qualifications live here only) */
.p-about .ab-p--3{display:flex;flex-direction:column;padding:72px 22px 22px}
.p-about .ab-train{position:static;z-index:auto;overflow:visible;flex:1;display:flex;align-items:center}
.p-about .ab-p--3::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background-image:var(--ink-dots);background-size:11px 11px;opacity:.55}
.p-about .ab-train::after{display:none}
.p-about .ab-p--3 .ab-cap{position:relative;left:auto;bottom:auto;margin-top:18px;max-width:none;background:var(--white)}
.p-about .ab-powers{list-style:none;display:grid;gap:12px;width:100%}
.p-about .ab-power{display:flex;align-items:center;gap:14px;background:var(--white);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:4px 4px 0 var(--ink)}
.p-about .ab-power:nth-child(1){rotate:-1.6deg;margin-right:18px}
.p-about .ab-power:nth-child(2){rotate:1.2deg;margin-left:18px}
.p-about .ab-power:nth-child(3){rotate:-.8deg;margin-right:8px}
.p-about .ab-power__i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--y)}
.p-about .ab-power__t{display:block;font-weight:800;font-size:.95rem;line-height:1.2;letter-spacing:-.01em}
.p-about .ab-power__s{display:block;font-size:.78rem;font-weight:600;color:var(--steel);line-height:1.3;margin-top:2px}
@media (prefers-reduced-motion:no-preference){
  .js .p-about .ab-p--3 .ab-power{transform:translateX(-30px);opacity:0;transition:transform .6s var(--ease-back),opacity .4s}
  .js .p-about .ab-p--3.is-in .ab-power{transform:none;opacity:1}
  .js .p-about .ab-p--3.is-in .ab-power:nth-child(1){transition-delay:.3s}
  .js .p-about .ab-p--3.is-in .ab-power:nth-child(2){transition-delay:.42s}
  .js .p-about .ab-p--3.is-in .ab-power:nth-child(3){transition-delay:.54s}
}

/* P4 · Verona: the team outside the agency + the motto painted on the wall */
.p-about .ab-p--4{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.p-about .ab-p4__photo{position:relative;overflow:hidden;border-radius:4px 0 0 4px;border-right:var(--bd) solid var(--ink);min-height:100%}
.p-about .ab-p4__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.p-about .ab-p4__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.35));pointer-events:none}
.p-about .ab-motto{position:relative;isolation:isolate;margin:0;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(56px,5vw,72px) clamp(18px,2.2vw,30px) clamp(24px,2.4vw,34px);background:var(--y);border-radius:0 4px 4px 0;overflow:hidden}
.p-about .ab-motto::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--ink-dots);background-size:11px 11px;opacity:.5;
  -webkit-mask-image:linear-gradient(160deg,transparent 30%,#000);mask-image:linear-gradient(160deg,transparent 30%,#000)}
.p-about .ab-motto__k{display:flex;align-items:center;gap:10px;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--y-ink)}
.p-about .ab-motto__k::after{content:"";flex:1;height:2px;background:currentColor;opacity:.4}
.p-about .ab-motto__t{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.94;font-size:clamp(1.7rem,2.7vw,2.6rem);color:var(--ink);text-wrap:balance}
.p-about .ab-sfx--4{right:16px;top:-22px;rotate:-8deg;z-index:6}

/* P5 · CIAO Sri Lanka: the mission story + the 3D island */
.p-about .ab-p--5{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);background:var(--ink);color:var(--white);overflow:hidden;border-radius:8px}
.p-about .ab-p--5::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 72% 55%,rgba(253,182,28,.16),transparent 70%),radial-gradient(rgba(253,182,28,.12) 1.4px,transparent 1.7px) 0 0/14px 14px}
.p-about .ab-p5__copy{position:relative;z-index:3;padding:84px clamp(22px,3vw,44px) clamp(28px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.p-about .ab-p5__logo{width:min(260px,70%);height:auto;background:var(--y);padding:14px 18px 10px;border-radius:14px;border:3px solid var(--y);box-shadow:5px 5px 0 rgba(253,182,28,.35);rotate:-3deg}
.p-about .ab-p5__txt{margin:0;color:#D9D9DE;font-size:1.02rem;line-height:1.6;max-width:44ch}
.p-about .ab-p5__txt b{color:var(--y)}
.p-about .ab-p5__routes{display:grid;gap:10px}
.p-about .ab-p5__lbl{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.p-about .ab-p5__chips{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.p-about .ab-p5__chips .chip{border-color:var(--ink-4);color:var(--white);font-size:.82rem;padding:.5rem .9rem}
.p-about .ab-p5__chips .chip small{opacity:.6;font-weight:700}
.p-about .ab-p5__chips .chip:hover{background:var(--ink-3);border-color:var(--y)}
.p-about .ab-p5__chips .chip[aria-pressed="true"]{background:var(--y);color:var(--ink);border-color:var(--y)}
.p-about .ab-p5__chips .chip[aria-pressed="true"] small{opacity:.78}
.p-about .ab-p5__chips .chip:focus-visible{outline-color:var(--y)}
.p-about .ab-p5__stage{position:relative;height:clamp(520px,46vw,640px);min-width:0}
.p-about .ab-p5__stage img,.p-about .ab-p5__stage canvas{max-width:none}
.p-about .ab-p5__ph{position:absolute;inset:8% 10%;width:80%;height:84%;object-fit:contain;opacity:0;transition:opacity .6s}
.p-about .ab-p5__stage.is-fallback .ab-p5__ph{opacity:1}
/* no-WebGL: the module's poster map, framed like a pinned print; route chips hidden (they only drive the 3D scene) */
.p-about .ab-p5__stage img.fallback3d{inset:7% 9% 7% 7%;width:84%;height:86%;object-fit:contain;rotate:2deg;filter:drop-shadow(8px 8px 0 var(--y))}
.p-about .ab-p--5.is-nogl .ab-p5__routes{display:none}

/* =========================================================
   3 · FOUNDER — secret identity (opener: none, the slider comes first)
   ========================================================= */
.p-about .ab-founder{overflow:clip}
.p-about .ab-founder::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(253,182,28,.1) 1.4px,transparent 1.7px);background-size:15px 15px;
  -webkit-mask-image:radial-gradient(60% 70% at 18% 50%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 18% 50%,#000,transparent 75%);pointer-events:none}
.p-about .ab-founder__grid{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,6vw,96px);align-items:center}
.p-about .ab-id{margin:0}
.p-about .ab-id__frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:var(--bd) solid var(--y);border-radius:var(--r);box-shadow:12px 12px 0 var(--y);
  background:var(--ink-3);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.p-about .ab-id__frame img{max-width:none;pointer-events:none;-webkit-user-drag:none}
.p-about .ab-id__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.p-about .ab-id__hero{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));background:var(--y);overflow:hidden}
.p-about .ab-id__line{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:var(--ink);box-shadow:0 0 0 2px var(--white);z-index:2}
.p-about .ab-id__knob{position:absolute;left:50%;top:74%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;
  background:var(--y);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink),0 0 0 4px var(--white);transition:transform .25s var(--ease-back)}
.p-about .ab-id__frame:hover .ab-id__knob,.p-about .ab-id.is-drag .ab-id__knob{transform:scale(1.1)}
.p-about .ab-id:has(.ab-id__range:focus-visible) .ab-id__knob{outline:3px solid var(--y);outline-offset:6px}
.p-about .ab-id__tag{position:absolute;bottom:16px;z-index:3;background:var(--ink);color:var(--white);padding:.5em .8em;border-radius:6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;transition:opacity .3s}
.p-about .ab-id__tag--l{left:16px}
.p-about .ab-id__tag--r{right:16px;color:var(--y)}
.p-about .ab-id__range{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:1px;opacity:0;pointer-events:none}
.p-about .ab-id__hint{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:.8rem;font-weight:600;color:var(--mist)}
.p-about .ab-id__hint .icon{color:var(--y);width:18px;height:18px}

.p-about .ab-founder__h{color:var(--white)}
.p-about .ab-founder__alias{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.p-about .ab-founder__alias .script{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}
.p-about .ab-founder__bio{margin-top:clamp(24px,2.8vw,34px);max-width:52ch;font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.7}
.p-about .ab-quote{position:relative;margin-top:clamp(52px,5vw,64px);padding:22px 26px 20px 30px;background:var(--y);color:var(--ink);border-radius:4px 22px 22px 22px;box-shadow:6px 6px 0 var(--white);max-width:52ch}
.p-about .ab-quote::before{content:"\201C";position:absolute;left:-6px;top:-34px;font-family:var(--f-script);font-size:5.4rem;line-height:1;color:var(--y)}
.p-about .ab-quote p{margin:0;color:var(--ink)!important;font-weight:700;font-size:clamp(1.12rem,1.6vw,1.36rem);line-height:1.45;letter-spacing:-.01em}
.p-about .ab-quote footer{margin-top:10px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y-ink)}

/* =========================================================
   4 · VISION & MISSION — yellow / black split (opener: departure boards)
   ========================================================= */
.p-about .ab-vm{--cut:clamp(60px,7vw,120px);--side:max(24px,env(safe-area-inset-left),env(safe-area-inset-right),calc((100vw - 1320px) / 2 + 24px));position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--white)}
.p-about .ab-vm__half{position:relative;min-width:0;padding-block:clamp(84px,9vw,150px)}
.p-about .ab-vm__half--y{z-index:1;background:var(--y);color:var(--ink);margin-right:calc(var(--cut) * -1);padding-left:var(--side);padding-right:calc(var(--cut) + 56px);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);overflow:hidden}
.p-about .ab-vm__half--ink{z-index:2;padding-left:calc(var(--cut) + 48px);padding-right:var(--side)}
.p-about .ab-vm__in{position:relative;z-index:1;max-width:560px}
.p-about .ab-vm__half--ink .ab-vm__in{margin-left:auto}
.p-about .ab-vm__op{margin-bottom:clamp(22px,2.6vw,34px)}
.p-about .ab-vm .op-board__h{font-size:min(clamp(1.6rem,3.3vw,3rem),calc((100vw - 56px) / (var(--bw) * 1.14)))}
.p-about .ab-vm__half--ink .op-board__w.board span{background:var(--ink-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.p-about .ab-vm__p{margin:0}
.p-about .ab-vm__half--y .ab-vm__p{font-weight:700;font-size:clamp(1.18rem,1.75vw,1.6rem);line-height:1.42;letter-spacing:-.015em;color:var(--ink)}
.p-about .ab-vm__half--ink .ab-vm__p{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.72;color:#CFCFD6}

/* =========================================================
   5 · CREW — mosaic + easter egg + credits (opener: side label)
   ========================================================= */
.p-about .ab-crew__top{margin-bottom:clamp(32px,4vw,56px)}
/* the side label reads as a chapter mark, not a hairline: ink type, a thicker amber rule */
.p-about .ab-crew .op-side__l{font-size:.78rem;color:var(--ink)}
.p-about .ab-crew .op-side__l::before{width:3px;background:var(--y-600)}
.p-about .ab-crew__h{max-width:14ch}
.p-about .ab-crew__lead{margin-top:clamp(14px,1.6vw,22px);max-width:52ch;font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.6;font-weight:500;color:var(--steel)}
.p-about .ab-mosaic{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,18vw,270px);gap:clamp(12px,1.4vw,18px)}
.p-about .ab-m{position:relative;margin:0;min-width:0;overflow:hidden;border:3px solid var(--ink);border-radius:16px;background:var(--ink-3);box-shadow:5px 5px 0 var(--ink);isolation:isolate}
.p-about .ab-m--big{grid-column:span 2;grid-row:span 2}
.p-about .ab-m--tall{grid-row:span 2}
.p-about .ab-m>img{width:100%;height:100%;object-fit:cover;object-position:50% var(--oy,22%);transition:transform 1.1s var(--ease)}
.p-about .ab-m:hover>img{transform:scale(1.06)}
.p-about .ab-m__cap{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;background:var(--y);color:var(--ink);border:2.5px solid var(--ink);border-radius:3px;padding:8px 11px;
  font-size:.8rem;font-weight:700;line-height:1.35;box-shadow:3px 3px 0 var(--ink);transition:transform .45s var(--ease-back),opacity .3s}
@media (hover:hover){
  .p-about .ab-m:not(:hover):not(:focus-within) .ab-m__cap{transform:translateY(calc(100% + 16px));opacity:0}
}
/* easter egg: the cardboard Captain */
.p-about .ab-egg{padding:0;perspective:1200px;border:0;border-radius:16px;background:none;cursor:pointer;text-align:left;display:block;width:100%;height:100%;font:inherit;color:inherit;overflow:visible}
.p-about .ab-egg__in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.p-about .ab-egg[aria-pressed="true"] .ab-egg__in{transform:rotateY(180deg)}
.p-about .ab-egg__f,.p-about .ab-egg__b{position:absolute;inset:0;border:3px solid var(--ink);border-radius:16px;overflow:hidden;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p-about .ab-egg__f img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;max-width:none}
.p-about .ab-egg__b{transform:rotateY(180deg);background:var(--y);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px}
.p-about .ab-egg__b::before{content:"";position:absolute;inset:0;background-image:var(--ink-dots);background-size:10px 10px;opacity:.5;z-index:-1}
.p-about .ab-egg__b b{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.15rem;line-height:1}
.p-about .ab-egg__b span{font-size:.86rem;font-weight:600;line-height:1.45;color:var(--y-ink)}
.p-about .ab-egg__q{position:absolute;z-index:2;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 12px;font-size:.74rem;font-weight:800;box-shadow:3px 3px 0 var(--ink);rotate:4deg}
@media (prefers-reduced-motion:no-preference){.p-about .ab-egg:not([aria-pressed="true"]) .ab-egg__q{animation:abWiggle 3.2s ease-in-out infinite}}
@keyframes abWiggle{0%,80%,100%{rotate:4deg}85%{rotate:-6deg}90%{rotate:8deg}95%{rotate:-2deg}}
.p-about .ab-egg:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* crew credits: one comic "staff box" (no luggage tags, no numerals) */
.p-about .ab-credits{margin-top:clamp(40px,4.6vw,64px);background:var(--white);border:3px solid var(--ink);border-radius:6px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.p-about .ab-credits__h{margin:0;padding:12px 22px 11px;background:var(--ink);color:var(--y);font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1.2}
.p-about .ab-roles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.p-about .ab-role{padding:22px 22px 24px;min-width:0}
.p-about .ab-role+.ab-role{border-left:2px dashed rgba(11,11,12,.2)}
.p-about .ab-role__i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:50%;background:var(--y);border:2.5px solid var(--ink)}
.p-about .ab-role__i .icon{width:20px;height:20px}
.p-about .ab-role__t{font-size:1.04rem;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.p-about .ab-role__d{margin-top:6px;font-size:.88rem;line-height:1.55;color:var(--steel)}

/* =========================================================
   6 · TRUST — passport page of official stamps + the six reasons (opener: caption box)
   ========================================================= */
/* stamps start at scale(1.7) before they "hit" the page: clip so they never widen the mobile layout viewport */
.p-about .ab-trust,.p-about .ab-crew,.p-about .ab-mail{overflow-x:clip}
.p-about .ab-trust__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.p-about .ab-trust__op{grid-column:2;grid-row:1;margin-bottom:0}
.p-about .ab-trust__op .op-cap__note{max-width:40ch}
.p-about .ab-passport{grid-column:1;grid-row:1;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:22px 18px;min-height:420px;padding:58px 28px 30px;
  background:repeating-radial-gradient(circle at 50% 120%,rgba(227,152,0,.09) 0 2px,transparent 2px 9px),var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 10px var(--paper),inset 0 0 0 11.5px rgba(11,11,12,.12);rotate:-1.5deg}
.p-about .ab-passport::before{content:attr(data-head);position:absolute;top:22px;left:28px;right:28px;display:flex;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);border-bottom:1px solid rgba(11,11,12,.14);padding-bottom:8px}
.p-about .ab-stamp{position:relative;display:grid;place-items:center;text-align:center;line-height:1.15;mix-blend-mode:multiply}
.p-about .ab-stamp--rect{padding:12px 16px;border:3px double currentColor;border-radius:10px;font-weight:900;text-transform:uppercase;min-width:180px}
.p-about .ab-stamp--rect b{display:block;font-size:1.05rem;letter-spacing:.06em}
.p-about .ab-stamp--rect span{display:block;font-size:1.15rem;letter-spacing:.04em;margin-top:4px;font-variant-numeric:tabular-nums}
.p-about .ab-stamp--rect small{display:block;font-size:.58rem;letter-spacing:.14em;font-weight:800;margin-top:6px;opacity:.8}
.p-about .ab-stamp--round svg{width:clamp(150px,15vw,190px);height:auto;overflow:visible}
.p-about .ab-stamp svg .o{fill:none;stroke:currentColor;stroke-width:4.5}
.p-about .ab-stamp svg .i{fill:none;stroke:currentColor;stroke-width:2}
.p-about .ab-stamp svg .t{fill:currentColor;font:800 12.5px var(--f);letter-spacing:1.8px}
.p-about .ab-stamp svg .c{fill:currentColor;font:900 17px var(--f);letter-spacing:.3px}
.p-about .ab-stamp svg .s{fill:currentColor;font:800 9px var(--f);letter-spacing:1.6px}
.p-about .ab-stamp--maroon{color:var(--sl-maroon)}
.p-about .ab-stamp--ink{color:var(--ink)}
.p-about .ab-stamp--amber{color:#9C6400}   /* darker than --y-600 so the P.IVA digits read on the paper page */
.p-about .ab-stamp:nth-child(1){rotate:-9deg}
.p-about .ab-stamp:nth-child(2){rotate:6deg}
.p-about .ab-stamp:nth-child(3){rotate:4deg}
.p-about .ab-stamp:nth-child(4){rotate:-7deg}
@media (prefers-reduced-motion:no-preference){
  .js .p-about .ab-passport .ab-stamp{scale:1.7;opacity:0;transition:scale .4s cubic-bezier(.5,0,.3,1.4),opacity .2s}
  .js .p-about .ab-passport.is-in .ab-stamp{scale:1;opacity:.92}
  .js .p-about .ab-passport.is-in .ab-stamp:nth-child(2){transition-delay:.35s}
  .js .p-about .ab-passport.is-in .ab-stamp:nth-child(3){transition-delay:.7s}
  .js .p-about .ab-passport.is-in .ab-stamp:nth-child(4){transition-delay:1.05s}
}
/* the six reasons: an editorial list, yellow token icons and perforated rules (no numerals: they aren't steps) */
.p-about .ab-ben__h{display:flex;align-items:center;gap:16px;margin:clamp(72px,8vw,120px) 0 6px;color:var(--white);font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.p-about .ab-ben__h::after{content:"";flex:1;height:2px;background:var(--y);opacity:.5}
.p-about .ab-ben{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.p-about .ab-ben li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-content:start;padding:28px 26px 30px 0;border-bottom:2px dashed var(--ink-4)}
.p-about .ab-ben li:not(:nth-child(3n+1)){padding-left:26px}
.p-about .ab-ben li:not(:nth-child(3n)){border-right:2px dashed var(--ink-4)}
.p-about .ab-ben__i{grid-row:1/span 2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--y);color:var(--ink);box-shadow:3px 3px 0 rgba(253,182,28,.28);rotate:-6deg}
.p-about .ab-ben h4{align-self:center;color:var(--white);font-size:1.12rem;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.p-about .ab-ben p{margin-top:6px;font-size:.92rem;line-height:1.6}

/* =========================================================
   7 · LETTERS PAGE (Google reviews) · opener: none
   ========================================================= */
.p-about .ab-letters{columns:3 300px;column-gap:clamp(18px,2vw,28px)}
.p-about .ab-letter{position:relative;break-inside:avoid;margin:0 0 clamp(22px,2.4vw,32px);padding:30px 24px 20px;background:var(--white);border:3px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink);rotate:var(--rot,0deg)}
.p-about .ab-letter::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(253,182,28,.75);rotate:calc(var(--rot,0deg) * -3);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.p-about .ab-letter__hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.p-about .ab-letter__av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--y);border:2.5px solid var(--ink);font-weight:900;font-size:.9rem;letter-spacing:-.02em}
.p-about .ab-letter__who{min-width:0}
.p-about .ab-letter__who b{display:block;font-weight:800;line-height:1.2}
.p-about .ab-letter__stars{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--steel);letter-spacing:.06em}
.p-about .ab-letter__stars svg{width:13px;height:13px;fill:var(--y-600);stroke:var(--y-600)}
.p-about .ab-letter__stars span{display:inline-flex;gap:1px}
.p-about .ab-letter__q{white-space:pre-line;font-size:.96rem;line-height:1.62;color:var(--ink)}
.p-about .ab-letter__q.is-clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.p-about .ab-letter__more{margin-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;font-size:.84rem;border-bottom:2px solid var(--y)}
.p-about .ab-letter__more:hover{background:var(--y-100)}
.p-about .ab-letter__tr{margin-top:10px;font-size:.72rem;font-weight:600;color:var(--steel);font-style:italic}

/* =========================================================
   8 · HQ — photo band (the crew on the yellow sofa, no watermark), address, status, week strip
   ========================================================= */
.p-about .ab-office{overflow:hidden;padding-bottom:clamp(64px,7vw,112px)}
.p-about .ab-office__op{min-height:clamp(380px,60vh,580px)}
/* phones: a tall full-bleed band, all five faces in the top half, the type on a veil over the sofa and the rug */
.p-about .ab-office__op .op-photo__img{object-position:50% 20%}
.p-about .ab-office__op::before{background:linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.72) 30%,rgba(11,11,12,0) 54%)}
@media (max-width:699px){.p-about .ab-office__op{min-height:clamp(460px,130vw,580px)}}
/* tablet + desktop: the 1000px portrait fills only the right 56% of the ink band (never upscaled, so it stays sharp)
   behind a hard diagonal cut with a yellow edge; the type sits on the ink at the left */
@media (min-width:700px){
  .p-about .ab-office__op{--cut:clamp(56px,6vw,110px);align-items:center}
  .p-about .ab-office__op .op-photo__img{left:auto;right:0;width:56%;object-position:50% 28%;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
  .p-about .ab-office__op::before{background:none}
  .p-about .ab-office__op::after{content:"";position:absolute;top:0;bottom:0;left:44%;width:var(--cut);pointer-events:none;
    background:linear-gradient(to bottom right,transparent calc(50% - 3px),var(--y) calc(50% - 3px),var(--y) calc(50% + 3px),transparent calc(50% + 3px))}
  .p-about .ab-office__op .op-photo__in>*{max-width:min(520px,calc(44vw - 64px))}
  .p-about .ab-office__op .h1{font-size:clamp(2.2rem,4.6vw,4.2rem)}
}
.p-about .ab-office__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,72px);align-items:center}
/* the house number and the postcode are glued with   (about.js), so the street line never leaves a lone "3" */
.p-about .ab-office__addr{margin:0;color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:1.05;font-size:clamp(1.35rem,2.1vw,1.9rem)}
.p-about .ab-office__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* week: a 7-column departure strip (no orphan row), today inked black */
.p-about .ab-week{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.p-about .ab-week li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 2px 13px;border-radius:10px;border:2px solid rgba(11,11,12,.2);background:rgba(255,255,255,.18);
  font-size:.78rem;font-weight:700;line-height:1.25;color:var(--y-ink);text-align:center;white-space:nowrap}
.p-about .ab-week li b{color:var(--ink);font-weight:900;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding-bottom:6px;margin-bottom:4px;border-bottom:2px dashed rgba(11,11,12,.2);align-self:stretch}
.p-about .ab-week__x{font-style:italic;font-weight:700;color:var(--ink)}
.p-about .ab-week li.is-today{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:3px 3px 0 rgba(11,11,12,.25);transform:translateY(-3px)}
.p-about .ab-week li.is-today b{color:var(--y);border-bottom-color:rgba(253,182,28,.35)}
.p-about .ab-week li.is-today .ab-week__x{color:var(--white)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .p-about .ab-p--1,.p-about .ab-p--2{min-height:500px}
  .p-about .ab-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-about .ab-role:nth-child(3){border-left:0}
  .p-about .ab-role:nth-child(n+3){border-top:2px dashed rgba(11,11,12,.2)}
  .p-about .ab-ben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-about .ab-ben li,.p-about .ab-ben li:not(:nth-child(3n+1)){padding:24px 22px 26px 0;border-right:0}
  .p-about .ab-ben li:nth-child(even){padding-left:22px;border-left:2px dashed var(--ink-4)}
}
@media (max-width:1024px){
  .p-about .ab-cover__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  /* narrower column: the bubble moves above his right shoulder, tail pointing down-left at his face */
  .p-about .ab-cover__bubble{right:auto;left:60%;top:-4%;max-width:190px;font-size:.84rem;padding:12px 14px}
  .p-about .ab-cover__bubble::after{left:28px;right:auto;transform:skewX(-25deg)}
  .p-about .ab-page{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-about .ab-p--1,.p-about .ab-p--5{grid-column:1/-1}
  .p-about .ab-p--2,.p-about .ab-p--3{grid-column:auto}
  .p-about .ab-p--4{grid-column:1/-1;min-height:440px}
  .p-about .ab-p--5{grid-template-columns:1fr}
  .p-about .ab-p5__copy{padding-bottom:0}
  .p-about .ab-p5__stage{height:min(560px,90vw)}
  .p-about .ab-founder__grid,.p-about .ab-office__grid{grid-template-columns:1fr}
  .p-about .ab-id{max-width:520px}
  .p-about .ab-trust__grid{grid-template-columns:1fr}
  .p-about .ab-trust__op{grid-column:1;grid-row:1}
  .p-about .ab-passport{grid-column:1;grid-row:2;max-width:600px;width:100%;justify-self:center}
}
@media (max-width:820px){
  .p-about .ab-cover{min-height:0}
  .p-about .ab-cover__grid{grid-template-columns:1fr;padding-top:0}
  .p-about .ab-cover__art{order:-1;min-height:0;height:clamp(300px,84vw,460px);margin:0 -6px}
  .p-about .ab-cover__fig{right:9%;bottom:-6px;height:100%}
  .p-about .ab-cover__bubble{left:auto;right:72%;top:6%;max-width:min(170px,44vw);font-size:.8rem;padding:10px 12px;line-height:1.4}
  .p-about .ab-cover__bubble::after{left:auto;right:28px;transform:skewX(25deg) scaleX(-1)}
  .p-about .ab-cover__copy{padding-top:10px}
  .p-about .ab-vm{grid-template-columns:1fr}
  .p-about .ab-vm__half--y{margin-right:0;margin-bottom:calc(var(--cut) * -1);padding:clamp(72px,10vw,110px) var(--side) calc(var(--cut) + 64px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
  .p-about .ab-vm__half--ink{padding:calc(var(--cut) + 40px) var(--side) clamp(72px,10vw,110px)}
  .p-about .ab-vm__half--ink .ab-vm__in{margin-left:0}
}
@media (max-width:640px){
  .p-about .ab-cover{border-radius:16px;box-shadow:7px 7px 0 var(--ink)}
  .p-about .ab-cover__bg{border-radius:13px}
  .p-about .ab-cover__bar{border-radius:12px 12px 0 0;padding:9px 12px;font-size:.62rem;letter-spacing:.12em}
  .p-about .ab-cover__logo{width:54px}
  .p-about .ab-cover__grid{padding-inline:16px}
  .p-about .ab-cover__cta .btn{flex:1 1 auto}
  .p-about .ab-title{font-size:20cqi}
  .p-about .ab-title__l--pre{font-size:.34em}
  .p-about .ab-title__l--pre .ab-title__i{border-width:2.5px;box-shadow:3px 3px 0 var(--ink)}
  .p-about .ab-page{grid-template-columns:1fr;gap:22px}
  .p-about .ab-p{box-shadow:6px 6px 0 var(--ink)}
  .p-about .ab-p--1{min-height:480px}
  .p-about .ab-p--1 .ab-p__art>img{object-position:28% 40%;transform:scale(1.4);transform-origin:35% 0%}
  .p-about .ab-p--2{min-height:430px}
  .p-about .ab-p--3{min-height:0;padding:66px 16px 16px}
  .p-about .ab-p--4{grid-template-columns:1fr;grid-template-rows:330px auto;min-height:0}
  .p-about .ab-p4__photo{border-right:0;border-bottom:var(--bd) solid var(--ink);border-radius:4px 4px 0 0}
  .p-about .ab-motto{border-radius:0 0 4px 4px;padding:24px 16px 22px}
  .p-about .ab-motto__t{font-size:clamp(1.6rem,8vw,2.1rem)}
  .p-about .ab-sfx--4{right:12px;top:auto;bottom:calc(100% - 330px - 18px)}
  .p-about .ab-cap{font-size:.86rem;padding:10px 12px;max-width:calc(100% - 24px)}
  .p-about .ab-cap--b{left:12px;bottom:12px}
  .p-about .ab-p5__chips .chip{min-height:44px}
  .p-about .ab-id__frame{box-shadow:8px 8px 0 var(--y)}
  .p-about .ab-quote{margin-top:48px}
  .p-about .ab-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
  .p-about .ab-egg__b{padding:12px;gap:6px}
  .p-about .ab-egg__b b{font-size:.92rem}
  .p-about .ab-egg__b span{font-size:.74rem;line-height:1.38}
  .p-about .ab-m__cap{font-size:.72rem;padding:6px 8px;left:8px;right:8px;bottom:8px}
  .p-about .ab-credits{box-shadow:5px 5px 0 var(--ink)}
  .p-about .ab-roles{grid-template-columns:1fr}
  .p-about .ab-role{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:18px 16px}
  .p-about .ab-role+.ab-role{border-left:0;border-top:2px dashed rgba(11,11,12,.2)}
  .p-about .ab-role__i{grid-row:1/span 2;margin:0}
  .p-about .ab-role__t{align-self:center}
  .p-about .ab-passport{grid-template-columns:1fr 1fr;padding:52px 14px 22px;gap:14px 8px;min-height:0;rotate:-.8deg}
  .p-about .ab-stamp--rect{min-width:0;width:100%;padding:10px 8px}
  .p-about .ab-stamp--rect b{font-size:.86rem}
  .p-about .ab-stamp--rect span{font-size:.86rem}
  .p-about .ab-stamp--round svg{width:136px}
  .p-about .ab-ben{grid-template-columns:1fr}
  .p-about .ab-ben li,.p-about .ab-ben li:not(:nth-child(3n+1)),.p-about .ab-ben li:nth-child(even){grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:20px 0;border-left:0;border-right:0}
  .p-about .ab-ben__i{width:40px;height:40px}
  .p-about .ab-ben p{font-size:.88rem}
  .p-about .ab-week{gap:4px}
  .p-about .ab-week li{font-size:.64rem;padding:9px 1px 10px;border-radius:8px;border-width:1.5px}
  .p-about .ab-week li b{font-size:.62rem;letter-spacing:.06em}
  .p-about .ab-office__act .btn{flex:1 1 auto}
  .p-about .ab-letters{columns:auto;display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:20px 16px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .p-about .ab-letters::-webkit-scrollbar{display:none}
  .p-about .ab-letter{flex:0 0 84%;margin:0;scroll-snap-align:center;rotate:0deg;box-shadow:5px 5px 0 var(--ink)}
  .p-about .ab-letters:focus-visible{outline-offset:-3px}
  .p-about .ab-p5__copy{display:contents}
  .p-about .ab-p--5{display:flex;flex-direction:column;align-items:stretch;padding:72px 16px 22px;gap:16px}
  .p-about .ab-p5__logo{width:170px;align-self:flex-start;padding:10px 12px 6px}
  .p-about .ab-p5__routes{min-width:0}
  .p-about .ab-p5__chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .p-about .ab-p5__chips::-webkit-scrollbar{display:none}
  .p-about .ab-p5__chips .chip{flex:none}
  .p-about .ab-p5__stage{order:5;height:420px;margin:0 -16px}
  .p-about .ab-p5__go{order:6;align-self:flex-start}
}
/* tablets / large phones (one column): a taller art box and the Captain nudged towards the middle, so he no longer stands
   small at the right edge of an empty yellow band (the fig carries no data-depth, so its transform never meets the parallax) */
@media (min-width:561px) and (max-width:820px){
  .p-about .ab-cover__art{height:clamp(300px,84vw,560px)}
  .p-about .ab-cover__fig{right:auto;left:50%;transform:translateX(-38%)}
}
/* small phones: the bubble's ink border stays inside the cover frame (audit #9: it started at -7px at 390, -10px at 360) */
@media (max-width:560px){
  .p-about .ab-cover__bubble{right:66%;max-width:min(156px,36vw);font-size:.76rem}
  .p-about .ab-crew .op-side__l{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  .p-about .ab-title__i,.p-about .ab-in{transition:none}
  .p-about .ab-week li.is-today{transform:none}
}